Structure of a React Project

Structure of a React Project

When you create a new React application using create-react-app, it comes with a predefined folder structure. Understanding this structure is essential for organizing your code effectively.

Project Structure

Here is the structure of a newly created React project:

task-manager/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── reportWebVitals.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

Let's go through the purpose of each key file and folder:

node_modules/

This folder contains all the project dependencies installed via npm. You usually don't need to modify anything here.

public/

This folder contains static assets for your project:

  • index.html: The main HTML file that gets served. It contains a <div id="root"></div> where your React app gets injected.
  • favicon.ico: The favicon for your application.

src/

This folder contains the source code for your React application:

  • App.css: The CSS file for the App component.
  • App.js: The main App component where you define your React components.
  • App.test.js: The test file for the App component.
  • index.css: The CSS file for the entire application.
  • index.js: The JavaScript entry point of your application. This is where your React app gets rendered into the DOM.
  • logo.svg: The React logo displayed in the initial app screen.
  • reportWebVitals.js: A file to measure performance in your app. You can choose to use it or remove it.
Contents of the src folder in a React project.

.gitignore

This file specifies which files and directories to ignore in your git repository.

package.json

This file contains metadata about your project, including dependencies, scripts, and project information. It's essential for managing project dependencies and scripts.

README.md

This file provides information about your project. It is a good place to describe the purpose of the project and how to get started with it.

yarn.lock / package-lock.json

This file is automatically generated and ensures that the exact same dependencies are installed if the project is installed again in the future.

Contents of the root folder in a React project.

Conclusion

Understanding the structure of a React project is crucial for organizing your code and maintaining a clean codebase. In the next tutorial, we will start building the task manager application by creating and organizing components.