What is React.js project structure?

How to create a Hello World app in React.js »

After initiating the React project, you’ll have various files and folders created in your project directory. Let’s break them down one by one:

Inside the helloworld folder, you’ll notice couple of different files and folders. All of these were generated when we first initiated our project.

node_modules folder: It contains all the dependency packages that our application needs to work. Therefore, it contains all those 1850 dependencies that we saw before. These dependencies might need other packages to work and might’ve included them as well recursively. The good news? We don’t have to bother with this folder at all. It just stays here to support our project.

public folder: Here we store our static files like project icon, images, documents, videos, audios, etc.


src folder: src stands for source. Here we put all our source code files. If you further open the folder, you’ll see more files and folders inside of it, like App.css, App.js, App.test.js, index.css, index.js, logo.svg, serviceWorker.js, etc. All these files were generated while creating the React app. Generally, we delete all of these files inside src folder and create our own depending on our requirements. This helps us in two ways. We can understand our project structure better and secondly, it fulfills our custom requirements in a more specific order.

package.json file: It contains a list of all the main dependencies that our project needs to work and also contains a bit more information about those dependencies like version number, author name, etc. This file is also useful when we transfer our project to some other developer. In such cases, we don’t have to zip all the project files. We can skip node_modules folder (which contains most of the files) and zip all the remaining files with package.json. With the help of this file, the other developer can install all the dependencies by himself by simply running npm install inside the main project directory.

package-lock.json file: It contains a list of all the dependencies (including recursively added dependencies). Of course, it has all the 1850 dependencies that we talked about.

README.md file: This file tells us how to execute this react application with a very generic guideline.

.gitignore file: This file refers to the Git version controlling system. It simply lists the files and folders if Git is used to track this project.