Project Structure of React JS

In last blog we have learned about Getting started with React. If you have not gone through it check it out-

1. https://letslearnwithmahesh.blogspot.com/2020/09/getting-started-with-react-js.html

Lets learn the folder structure and what is the use of each file in project. In last session we created our "my-app" using create-react-app template provided by Facebook. 

Project structure

Upon opening the created app in VS Code we could see the below structure of the application. 

There are multiple folder and files present in the project and each have there own importance. So lets see each one of them one by one-

node_modules

The root folder contains folder node-modules This folder holds all the dependency and sub dependency we have in our project. This folder is automatically generated by npm. We shold not update any of the files from this folder. There are multiple dependency react have and all these dependency are generated from npm install command in the project folder.

public

The public folder is the root folder basically served by web server. Here we can locate index.html.

• index.html

index.html is the only html page server from react app. All the subsequent content is rendered inside this single html file only. 

If you see the index.html file you will see its a basic html file with some meta tags and below line of code. React will mount our app on this div tag only. We can add some more meta tags if we needed.

<div id="root"></div>

• manifest.json

This file serves as metadata file for the app. You can set some meta data like short name, name, and icon for different sizes of the app.

 Apart from this public folder contains favicon.ico, robots.txt and logos.

src

This is the actual application folder for us. Here we can locate multiple application files some of them are .js, css files. Lets learn each of them.

• index.js

This file is responsible to mount react app in the index.html file in root directory. If we open index.js we can see the below line of code which is getting root element from the index html and rendering the app component.

ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));

• index.css

Styling file of the application which contains styles to be applied on base elements of the html.

• app.js

This is the JavaScript file which exports an app component as a response. You can find code inside this file which is written in JSX and we are going to learn about this in coming session.

• app.css

The app.css file contains styles which are imported in app component.

• app.test.js

App.test file is the unit test file for writing the test cases for the app component. Here if we analyze this file we see that there is a test case to validate that there is a link renders in the response of the app component.

• serviceWorker.js

This file is there to register service worker which is generated automatically. This is used for progressive web app which is provided in the app .

• setupTests.js

setupTests.js is used to do global setup before running the tests. We would be covering the unit tests in React in later session of this tutorial.