DEV Community

Cover image for How to structure your frontend code in ReactJS [with explanations]. ๐Ÿš€
Harshal Kahar
Harshal Kahar

Posted on

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.

Top comments (0)