File And Folder Structure In React

Introduction

This is the second article of the basic react js series. In this article, we will understand files and folder structure in react application. When we open the application folder we can see three folders are created node_module, public, and src and four files are created on the root directory.

In this series, we are learning about basic react js concepts. This article is all about the files and folder structure of React application.

File and Folder Structure in React

node_modules

This folder contains all the dependencies packages, which are used in our application.

public

index.html - This file is the entry point of the application. All react code is rendered inside the div element id root from the index.js file.
manifest.json - This is a metafile that provides the details about the application like the name, author, icons, etc. it is used for the progressive web application.
robots.txt - This file is used to prevent search engine crawlers from specific URLs on your site. It contains the list of allowed and disallowed sites whenever a bot wants to access the website and plays an important role in SEO.

File and Folder Structure in React

src

App.css - This file is used for CSS styling. It is used to apply styling to application components.
App.js - This is the main component of react application, It is working as a container and contains all other components.
App.test.js - This file is used for writing the unit test cases of our application.
index.css - This file is also used for CSS styling.
index.js - This is the entry file of react. In this file, we import the app component and rendered that into the root DOM node. it is displayed in the div index.html.
reportWebVitals - This file is used for the application performance report and captures the user experience of a web page.
setupTests.js - This file using for the setup of test cases.

File and Folder Structure in React

.gitignore

This file tells to git, Which files and folders to ignore for commit in a project like node_module, env, and others.

package-lock.json

This file contains the details history of packages and dependencies on other packages.

package.json

This is the important file for react application. it contains details of the name of the application, dependencies, and version of packages which is used in the application. Also, scripts object commands details to run various commands.

README.md

This file contains the details about the application run command and many other links for documentation.

Class and Functional Components in React

Summary

In this article, We learned about the files and folder structure of react application. Thank you for reading this article.