React, often known as React.js or Reactjs, is a free and open-source JavaScript frontend library for creating user interfaces using UI components. Facebook (now known as Meta) and a community of individual developers and corporations manage React. With frameworks like Next.js, React may be used as a foundation for developing single-page, mobile, or server-rendered apps.React, on the other hand, is solely concerned with state management and displaying that information to the DOM, therefore constructing React apps frequently necessitates the usage of extra frameworks for routing and client-side functionality.Adding React to an existing HTML project through the CDN or creating a react-app from the ground up using the CLI are the two ways to get started with React. We'll look at the latter approach in this post because it allows you greater freedom and all of React's capabilities.

Creating a React-AppBefore getting started with the react command line interface (CLI), you need to first install Nodejs. To do that, simply head over to the official Nodejs website here, select your system option, download and install Nodejs.

Fig 1. NodejsHaving installed Nodejs, we will be exposed to use the npx, to create our react application. Firstly, create a folder/directory where you would like to have your react application created then open the directory in your command line interface and run the below code sequentially.

From the above codes:npx which is exposed from the nodejs package, create-react-app is the command to create a new react app, then ‘my-app’ is the name of the react application you want to create and must be in lowercases.cd my-app, allows you to change directory into the newly created directory.npm start, spins up the React server for you to serve your files in the browser.The time taken to create a new react application will depend on your Internet speed and other factors.Once the project is created you'll see many new directories and a react boilerplate to welcome you to the React Application.

Fig 2. Boilerplate from react-app.While yours might have the App.jsx as App.js, it’s perfectly fine, you can simply rename it to .jsx so you’d get the React file icon.

Hello World in ReactTo create  the famed 'Hello World' in React, we'll need to open our App.jsx file (App.js, in your case).

Fig 3.Single Function Components Approach to writing React Components.

We returned a <div> element with the class of App from the preceding picture, using className instead of class to prevent conflicts because 'class' is a reserved keyword in JavaScript. The function App is then exported and imported into our index.js file, where it will be rendered.

Fig 4. Index.js file, where App.jsx is imported and rendered to the DOM

‍The App.jsx is the beginning point of our application, which means that any other component must pass through it because it is the only one being rendered.

To see your react application, save your file and open your browser to the port where the react server is executing.