Understand the React Project Structure

Hey guys in this article, you will learn about the each file and folder in React project structure created by using create-react-app.

Below is the standard React project structure created by create-react-app tool. In case if you don’t know how to create React project using create-react-app then you can check this post.

├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js
  • node_modules: This folder contains all of our project dependencies and node modules. React itself is a library and present inside this folder. Also any of the packages we install in the future that will also be present in this folder. We never ever touch this folder in the future.
  • public: This folder contains the files which we want make public and accessible in the browser
  • public/favicon.ico: This is an icon which is present in the browser tab
  • public/robots.txt: This will help us to communicating with search engine crawlers.
  • public/manifest.json: It contains some meta data information about our project such as name of the project, icons, theme color, background color etc..,
  • public/index.html: This is the single html file that is served to the browser.
  • src: This is the folder where all of react code is present. Components, Services, Styles, Tests everything that goes inside this folder. 99% of the work that done inside this folder itself.
  • src/App.js: This is the React component which is created by create-react-app tool. React components are just javascript functions. Every component in react has a separate file.
  • src/App.css: This file has been used to style the react component App.js
  • src/index.css: This is a global stylesheet.
  • src/logo.svg: This is an svg image being used inside the App.js component.
  • src/App.test.js: This file is for writing unit test cases for react component App.js
  • src/setupTests.js: This file is configuration file needed for testing and running the test files.
  • src/reportWebVitals.js: This file is used to measure the performance of the  react application with certain metrics.
  •  src/index.js: This is the starting point to our react application. This file will bootstrap the react component App.js
  • .gitignore: This file is for version control. If you are familiar with Git then you probably know this file.
  • readme.md: This file contains the information about how to build and run the application.
  • package.json: This file contains all the dependencies that we used in the react application. It registers all the dependencies for future reference.
  • package-lock.json: This file also contains the versions of all the dependencies.

That’s it for this post, if you like this post, please share this post with your friends and collogues and also share this on your social media profiles.

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

Leave a Reply