Everything You Need to Know About ReactJS File Structure

Introduction

ReactJS is a powerful library for building user interfaces. Understanding the file structure of a ReactJS project is essential for efficient development and maintenance. This blog post will guide you through the basic file structure of a ReactJS project, explaining the purpose of each file and folder.

React File Structure

Project Structure Overview

When you create a new React project, the initial structure should look like this:

node_modules/
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
.gitignore
package-lock.json
package.json
README.md
        

Root Folder

node_modules

Contains all the dependencies that are needed for an initial working React app.

.gitignore

Specifies intentionally untracked files that Git should ignore.

package.json

This file contains several relevant metadata for the project.

README.md

Can be used to define and describe the usage of the project.

Public Folder

public/

The root folder that is presented on the web as your React App.

• favicon.ico - The icon that will appear when someone visits your website.
• index.html - The template file that shows up when we launch our app (where React renders).
• robots.txt - Defines rules for crawlers, spiders, and scrapers when accessing the app.
• logo192.png - A React logo with the given dimensions (192px x 192px).
• logo512.png - Another React logo with larger dimensions (512px x 512px).
• manifest.json - Used to define the app, contains metadata and is used by mobile phones to add a web app version of the project to their home screen.

Src Folder

src/

This is our React App Folder. Components and CSS go here.

• App.css - Contains styles for our React Components (App.js).
• App.js - Contains very basic React Components inside. Replace them for your root/main component.
• index.css - Contains styles/general style setup for our app.
• App.test.js - A very basic test for the default app. You can replace it with your own tests.
• index.js - Renders our components into the index.html file.
• logo.svg - An SVG file of the React logo used in a component (App.js) by default.
• setupTests.js - Sets up and runs tests. This file is invoked when the command `npm run test` is executed.

What Folders Can We Edit Without Causing Issues?

• node_modules: Do not modify.
• public: Be careful when modifying `manifest.json` & `robots.txt`.
• src: You can edit all files here.

Conclusion

Understanding the file structure of a ReactJS project helps in maintaining and scaling the project efficiently. Each folder and file has a specific purpose, and knowing what each one does will make you a more effective developer. Happy coding!

Like, Share and Subscribe #DevTools99 for more useful videos, tools info and tutorials . Thank you!