What are the advantages of using create-react-app CLI ?

Introduction:  To get started with any framework you need to understand what all files you need to install. With React you don’t need to worry about this. React will install all the files required for you to get started with a single command. It will have all the necessary packages installed and you can start rendering and building your project at once.  

Approach: React projects can be easily created using create-react-app CLI. Let us create a React project using create-react-app CLI.

Benefits:

1. It helps you to create and configure React project in smooth and easy manner . An easy to start developing your project.
2. Project is structured by default. All the components changes will be done in source folder. Node modules have separate folder with dependencies mentioned in package. Json file.
3. React-scripts package is pre-installed which has Babel and Webpack configuration for you to run and deploy your project easily. A default view is set up for you to get started building your components .
4. Compiler ,Build and Test environment is set up using this command.  For testing @testing-library/jest-dom and @testing-library/react is already installed and  you can run tests for your project.

Creating React Project:

Step 1: To create a react app you need to install react modules through npx command. “Npx” is used instead of “npm” because you will be needing this command in your app’s lifecycle only once. Enter this statement in your command prompt. You can  choose the project name as per your usage.

npx create-react-app project_name

Step 2: As you run the command in step-1 you can see the command prompt downloading all the required files and your project is getting structured. After creating your react project move into the folder to perform different operations.

cd project_name

Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new components user makes or the code changes we will be performing will be done in the source folder.

Project Structure

 Step to run the application: Open the terminal and type the following commands :

npm start

 Output:  Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the image. 

Default View

npm run test

 Output:  Open your command prompt and use this command . It will run the test cases for your project and you can see the output shown in the image. 

Get started with your React projects using create-react-app CLI easily.