Menu Close

How to create a react App

In this article we will learn about How to create a react App. This article will walk you through setting up your first React app and assumes you are familiar with text editors and command line navigation. Please read my previous article React Installation and Environment Setup.

Install React

We can install React using npm package manager by using the following command. There is no need to worry about the complexity of React installation. The create-react-app npm package manager will manage everything, which needed for React project.

npm install -g create-react-app

Create a new React project

Once the React installation is successful, we can create a new React project using create-react-app command. Here, I choose “myfirstreactjs” name for my project.

create-react-app myfirstreactjs

After ran the above command you can see the project creation is success.

The above screen tells that the React project is created successfully on our system. Now, we need to start the server so that we can access the application on the browser. Type the following command in the terminal window. Firsrt move to the project folder and then run npm start.

cd myfirstreactjs
npm start

NPM is a package manager which starts the server and access the application at default server http://localhost:3000. Now, we will get the following screen.

ReactJS myfirst app

Next, open the project on Code editor. Here, I am using Visual Studio Code. Our project’s default structure looks like as below image.

In React application, there are several files and folders in the root directory. Some of them are as follows:

  • node_modules: It contains the React library and any other third party libraries needed.
  • public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the <div id="root"></div> element.
  • src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file always responsible for displaying the output screen in React.
  • package-lock.json: It is generated automatically for any operations where npm package modifies either the node_modules tree or package.json. It cannot be published. It will be ignored if it finds any other place rather than the top-level package.
  • package.json: It holds various metadata required for the project. It gives information to npm, which allows to identify the project as well as handle the projects dependencies.
  • README.md: It provides the documentation to read about React topics.
ReactJS folder structure

Conclusion

So far this article we discussed about How to create a react App. This article walked you through setting up your first React app and assumes you are familiar with text editors and command line navigation.

Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂

Related Articles

SUPPORT ME

Buy Me A Coffee

Leave a Reply

Your email address will not be published. Required fields are marked *