We assume that you have already set up your laptop 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.
During the project creation process, you will be asked to choose a framework. Select React as the framework and proceed.
You can also choose your preferred programming language for the selected framework.
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.
Now, let's navigate to the my-app folder and install the dependencies. To do that, run the following command in your terminal.
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.jsx 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.
Now 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.
