We assume that you have already set up your PC with Node.js and npm. If you haven't installed them yet, please refer to the Prerequisites lesson.
Once you have npm installed, open your terminal and run the following command to install yarn. We will be using yarn as our package manager.
Now, let's create a React app. In your terminal, navigate to the desired folder where you want to create the React app. Then, run the following command. In this example, we'll use my-app as the project name, but feel free to choose any name for your project.
The above command will create a new directory named my-app inside the current folder. It will generate the initial project structure in my-app and install the dependencies.
Now, let's navigate to the my-app folder. To do that, run the following command in your terminal.
Now, let's run our React app. Run the below command and then open http://localhost:3000 in the browser.
You should be able to see the React app running, as shown below:
Setting up a basic react app is that simple.
Let's take a look at a few aspects of the generated React app. Open the my-app folder in your code editor, you will see a folder structure as shown in the image below:
Next, navigate to the App.js file inside the src folder.
At Bigbinary, we follow the best practice of naming files containing JSX with the .jsx extension. Additionally, we use the ES6 arrow function to define a component, and we prefer implicit returns, which differ from the generated code snippet.
To align with these conventions, let's rename the file App.js to App.jsx, and then update the code in the App.jsx file with the following code.
After making the changes, save the file.
Now, if you head back to the React app running in your browser, you can see that the page updates automatically without manually refreshing it. React's Hot reloading feature makes this behavior possible.
