How to structure your frontend code in ReactJS [with explanations]. 🚀

📁 my-react-app
├── 📄 read.md file
├── 📁 public
│ ├── 📄 index.html
│ ├── 📄 favicon.ico
│ ├── 📁 CSS
│ └── 📁 images
├── 📁 src
│ ├── 📄 index.js
│ ├── 📄 App.js
│ ├── 📁 components
│ │ ├── 📄 Header.js
│ │ ├── 📄 Footer.js
│ │ └── ...
│ ├── 📁 containers
│ │ ├── 📄 Home.js
│ │ ├── 📄 ProductList.js
│ │ └── ...
│ ├── 📁 context
│ │ ├── 📄 AuthContext.js
│ │ └── ...
│ ├── 📁 hooks
│ │ ├── 📄 useApi.js
│ │ ├── 📄 useForm.js
│ │ └── ...
│ ├── 📁 styles
│ │ ├── 📄 App.css
│ │ ├── 📄 Header.css
│ │ └── ...
│ ├── 📁 utils
│ │ ├── 📄 api.js
│ │ ├── 📄 helpers.js
│ │ └── ...
│ └── ...
├── 📁 tests
│ ├── 📁 unit
│ ├── 📁 integration
│ ├── 📁 e2e
│ └── ...
└── 📁 node_modules

𝗔𝗽𝗽.𝗷𝘀:

The control center of your React app, where you set up and manage everything.

𝗽𝘂𝗯𝗹𝗶𝗰:

A storage room for publicly accessible assets like HTML templates, images, and stylesheets.

𝘀𝗿𝗰:

The core of your React app.
index.js: The entry point connecting your app to the DOM.

𝗔𝗽𝗽.𝗷𝘀:

The main component defining the overall layout and routing.

𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀:

Reusable building blocks for your UI, like buttons and cards.

𝗰𝗼𝗻𝘁𝗮𝗶𝗻𝗲𝗿𝘀:

Main views or pages of your app, such as Home or Profile.

𝗰𝗼𝗻𝘁𝗲𝘅𝘁:

Central hubs for managing global app state, like user authentication.

𝗵𝗼𝗼𝗸𝘀:

Custom tools for handling common functionality, like API requests or local state management.

𝘀𝘁𝘆𝗹𝗲𝘀:

Definitions for CSS or SCSS to style your components.

𝘂𝘁𝗶𝗹𝘀:

Handy tools for tasks like data validation and date formatting.

𝘁𝗲𝘀𝘁𝘀:

Exams for your app to ensure it works correctly, including unit, integration, and e2e tests.

𝗻𝗼𝗱𝗲_𝗺𝗼𝗱𝘂𝗹𝗲𝘀:

Your toolbox is filled with automatically installed dependencies for building your app.