In this tutorial, we will learn how to create a new React JS project from scratch. I planned to write more articles regarding React. So this is just an introduction article to the React JS tutorial series.
Install Needed Software:
Our prime requirement is NodeJS. Why because we are going to use the NodeJS package manager to create the React project. So download and install the NodeJS using the below command.
The NodeJS version is 14.16 at the time of writing this article.
Software versions are very important while learning. Right now the React project also had some changes to its previous version. You are able to see some changes in the current React project.
The React JS version is 17 at the time of writing this article.
Create React Project:
We can create a new React project using the following command on your terminal or command prompt.
npx create-react-app demo-proj
- npx create-react-app => It is a standard command for creating a new React project.
- demo-proj => It is the project name. You can give your desired project name here.
It will take some time to download the needed files from the internet. Once downloading is completed, you can open this project using any code editor. I am using VS Code editor.
Go to the project folder using the terminal/ command prompt.
Use the following command in the terminal/ command prompt to generate the preview of this project.
It will compile and load the preview on port number 3000.
Structure of Project:
The structure of the React project is given below.
- Under the src folder, we write our code. We will create all our new components under this folder.
- The App.js is the default landing page. We can modify this.
- The node_modules folder contains all the needed library files.
Let’s modify the App.js file with variables. The App() is a function in the App.js. So we can create a variable using let, var, const.
Bind the created variable inside the JSX( HTML ) using the single opening and closing curly brace. In Angular, we will use the double curly brace.
Save and preview the change in the browser. The changes are applied automatically.
- Install Simple React Snippets plugin. It is used to generate the React snippets and commands.
- Install Prettier — Code formatter plugin. It will format the JSX code. By default, the JSX codes are not aligned properly in the VS Code editor. So installing this plugin will solve the JSX formatting problem.
In this tutorial, you learned how to create a new React project from scratch and how to preview the project also. And we learned the structure of the React project and where to write our code. And learned few useful plugins to kickstart the React project. I am planning to write series of articles for React from creating a simple React project to create complex applications. So stay tuned for more articles regarding React.
I hope this article will be very helpful.
Thank you for reading this article.