Hey guys in this article, you will learn about the each file and folder in React project structure created by using
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.
my-first-app ├── 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
src/App.css: This file has been used to style the react component
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
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
.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.