React JS Project Directory Structure

.gitignore — This file is the standard file which is used by source control tool git to identify which files and folders are need to be ignored while committing the code. Until and unless this file exists, the create-react-app command will not create a git repo in this folder.

package.json — This file contains dependencies and scripts required for the project.

This file contains all settings for React applications including:

1. name — points to name of your app.

2. version — refers to the current version that the application is using.

3. “private”: true — is a foolproof setting which avoids accidentally publishing of your react app as a public package in npm ecosystem.

4. Dependencies will contain all required node modules and versions required for the application. By default, 2 dependencies are added which include React and React-Dom that allow using JavaScript. In our demo, we are using React version 16.8.

5. Scripts specify aliases that can be used to access some React command in a more efficient manner.

• package-lock.json contain exact dependency tree to be installed in /node_modules. It helps while a team is working on private apps to ensure that they are working on the same version of dependencies and sub-dependencies. It also maintains a history of changes done in package.json so, that at any point of time, when required previous changes can be looked back in the package-lock.json file.
• node_modules — This folder contains all dependencies and sub-dependencies node_modules — specified in package.json used by React app. It contains more than 800 subfolders, this folder is automatically added in the .gitignore file.
• public — This folder contains files which don’t require additional processing by webpack. The index.html file is considered as an entry point for the web application. Here, the favicon is a header icon and manifest.xml file contains configuration when your application is used for Android app.
• src — This folder is the heart of React application as it contains JavaScript which needs to be processed by webpack. In this folder, there is a main component App.js, its related styles (App.css), test suite (App.test.js). index.js, and its style (index.css); which provide an entry point into the App. Lastly, it contains registerServiceWorker.js which takes care of caching and updating files for the end user. It helps in offline capability and faster page loading after the first visit.

After all this, we add /Component folder in src to add our custom component and its related files and /Views folder for adding React views and its related files.