Create React App project folder structure

1. Introduction

In this tutorial, we’ll discuss the folder structure of a React project created by Create React App. We’ll discuss what is the purpose of different files automatically generated by Create React App.

2. Project folder structure

The following image shows the typical project generated by Create React App:

Create react app folder structure

Following is the brief description of the files:

node_modulesThis folder contains all the required dependencies to run your React project.
favicon.icoStands for favorite icon. This icon in shown in the browser tab.
index.htmlHTML file used to start application.
logo192.pngReact logo
logo512.pngReact logo
manifest.jsonProvides information about the application like name, author, icon, description etc. This is used for progressive web applications (used for mobile devices).
robots.txtThis file tells search engine crawlers which URLs the crawler can access on your site.
App.cssContains CSS styling for the App component which is the topmost component.
App.jsMain App component for the application.
App.test.jsContains test code to test App component.
index.cssContains CSS styling for the component
index.jsMain startup file
logo.svgReact logo
reportWebVitals.jsUsed to measure real life performance of your application.
setupTests.jsFile is where you can include your test configurations.
package-lock.json and package.jsonLists the dependencies of our project
.gitignoreThis file tells Git which files to ignore when committing your project to the GitHub repository.
README.mdThis file provides information about your code for the first-time users.

3. Important

Following files are required with exact filenames for the project to build successfully:

  • public/index.html
  • src/index.js

Other than the above mentioned files can be deleted or renamed.

Files inside src are processed by webpack. So, if you put any file outside src, webpack won’t process these files.

4. Conclusion

In this short tutorial, we discussed the project structure created by Create React App. In the upcoming tutorials, we’ll change files and will create our components.