How To Set Up a React Project

React is a JavaScript library(React Project) for building user interfaces. It is designed to work well with other libraries, such as React-Router, Redux, and Immutable Js. In this tutorial, we will set up a React project using the create-react-app.

Tools we will need to create a React project:

First, we will need to install the Node Js on your machine. You can download it from nodejs.org. Creating react app requires a Node version of at least 10.16.0.

A package manager called npm. It is automatically installed when you install Node Js. you need to have an npm version of at least 5.2.

After installing the Node JS you will check the version of Node Js and npm,

For that, you will open the command prompt and hit the following command:

node --version or node -v to check the version of Node Js.
npm --version or npm -v to check the version of npm.

And obviously, you will need a code editor to work. I personally prefer Visual Studio Code, not Visual Studio. You can download it from here.

Let’s get started.

To create a React project, we need to open our terminal and command prompt on our computer:

We need to specify the folder for our project. You can create a folder anywhere on your computer. Just hit the following command in the command prompt:

mkdir react-project (’react-project’ is a folder name you can give to name whatever you like)

cd react-project

To install the base project, run the following command:

npx create-react-app first-react-app

‘first-react-app’ is our project name. You can give any name you like but one thing you can not enter the capital letter for the project name. If you do, it will give an error.

It takes a few minutes to create a React project. Then, you can hit the following command.

cd first-react-app

code . to open the React project in our visual studio code editor.

when you open the React project on your visual studio code editor, you will see the following screen:

react app code How To Set Up a React Project

What is each of these files and folders for react project?

README.md is a markdown file that includes a lot of helpful tips and links that can help you while learning to use Create React App.

node_modules is a folder that includes all of the dependency-related code that Create React App has installed. You will never need to go into this folder.

package.json that manages our app dependencies and what is included in our node_modules folder for our project, plus the scripts we need to run our app.

.gitignore is a file that is used to exclude files and folders from being tracked by Git. We don’t want to include large folders such as the node_modules folder.

public is a folder that we can use to store our static assets, such as images, svgs, and fonts for our React app.

src is a folder that contains our source code. It is where all of our React-related code will live and is what we will primarily work in to build our app.

When our project is open in VS code we will need to open up the terminal. (in VS code, go to Terminal and click the New Termina or you will use a shortcut key to open the terminal just press Ctrl+Shift+` ).

After that, you will see the following screen.

OnyhMqLLWqwH7CDZcMR hJ5bMnXyOsfOFdmWv9r5qe3UDwxp8q0mMzhZlF21Y81NNIK0yfmVbj5PdtneIx6McC8XRVQraAuQ5MxYlZJ7 How To Set Up a React Project

When you open the terminal you will enter the following command:

npm start to run the project and open the app in the browser.

Oh! Ya, Our first react project was successfully running. Our project run on the browser the development server will start up on http://localhost:3000, and we can see the starting home page or output on the browser.