How to Create Your First React App

You can create a new ReactJS project just by running one single command, and that command is create-react-app. The create-react-app is an extremely handy tool to set up a React application in 2 minutes.

To use the create-react-app tool to create a React App you need NodeJS installed on your local machine. When you install NodeJS, you get npm and npx. Then you can use the npx to run the create-react-app tool to create a React app.

If you want you can also set up the entire React project from scratch by installing the React libraries manually. But that is too much hassle. I would recommend you use the create-react-app tool to create the react project.

Create a React App

The easiest way of setting up a new react app is to use a pre-defined tool i.e. create-react-app (there are other ways too, like using vite).

React Project Setup - Creating the first Project

Watch Video

To run the command, make sure NodeJS is installed, open the terminal, and run the below command,

$ npx create-react-app my-react-app

The last parameter my-react-app will be the name of the React application. If you have already created a directory, then you can run the above command like this,

$ npx create-react-app .

In the above command, the . specifies that the react app should be created in the current folder itself.

Next, move to the recently created folder using the cd command:

$ cd my-react-app

Once inside the folder start Visual Studio Code via:

$ code .

React App Project Structure

Now that we have created the first project, let's try to understand the different files and the folder structure of the boilerplate code.

• node-modules/: Both project dependencies, such as packages downloaded and built with the Node.js Task Manager, are stored in this folder (NPM).

• src/: This is the folder where you'll find the React application's JavaScript implementation.

  • App.js - This is the main component in which the code for the user interface is present. Just like this, you can create more components too.

  • App.css - This is the main CSS file that comes with the boilerplate code for a React project. You can either keep adding more CSS

  • index.js - This is where the React App is created and added to the DOM.

  • App.test.js - In this file all the unit tests are specified.

• public/: The index.html file and other static properties of the web application are stored in this folder.

  • index.html - This is the only HTML file where we have a single <div> tag where we will add our React application.

  • robots.txt - This file is used to inform the search engine whether or not to crawl certain parts or pages of your web application.

  • manifest.json - This file is also for the browser to treat your website as a web application where you properly specify icons for

• package.json: This file holds the meta-information about your project, its dependencies (npm packages), development dependencies, scripts that you can run to perform certain actions in the project, for example creating a build, running the test cases, etc.

• build/: This is not present initially. When you run the npm run build command, then this directory is created

Run your React App

Now that you have a basic understanding of the project structure, go over to the package.json file. You will find a scripts section in the package.json file, to run the react application.

This is how the scripts in the package.json should look like,

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

You can run different commands using the npm run command.

1. Starting a newly made React app

To begin working on our React software, we should tell the CLI to run it and open it in the browser http://localhost:3000 at the same time.

npm run start

The above bash line will give the following output:

Output:

2. Run Tests for React App

The original React project includes some simple unit test cases in src/App.test.js by design. Those experiments can be run using the following methods:

$ npm run test

Output:

3. Create a Production Build for the React App

You may also build a production-ready program. This indicates that the React program has been developed and the product has been placed in the project's build folder. The following command is used to run the output build:

$ npm run build

Output:

Conclusion

Here, we have learned to launch your applications with Create React App. It serves as a stable foundation and is regularly updated by the React team. For React developers, Create React App is a fantastic tool. In the past, we had to configure our own webpack and Babel configurations.