DEV Community

Cover image for ⚛️ ReactJS folder structure + Boilerplate.
Zouhir Yaçouri
Zouhir Yaçouri

Posted on

⚛️ ReactJS folder structure + Boilerplate.

There are many folders structure to follow in ReactJS , And you might be confused which one you have to pick for your next project 🤔. We will answer this question in this article.

And i’m going to share with you a boilerplate that i will be using for my next projects.

About ReactJS folders structure ⚛

By default ReactJS comes with a simple project setup, so for those who never coded with react they shouldn’t be worried that much about folders structure.

Otherwise if you are experienced with react then your time has come to organize your application structure.


Explaining each folder’s role 📁

Our focus will be in the src folder where we’re going to structure our folders.

Folders structure

(For the folder icons i am using a vs-code extension called “ Material Icon Theme”) intermediate

📁 Assets

  • Here we group all of our media files.
  • I personally prefer to create subfolders such as Images, Icons, Videos, Audios etc....

You might want to put all of the components in one place, but you better break it into 2 folders. (Components & Containers).

📁 Components

  • This folder contains all of our application presentational components (Stateless Components).

📁 Containers

  • In this folder we have the Stateful components (Smart component) where we keep tracking the state.

📁 Constants

  • In this file we group all constants like regex.

📁 Helpers

  • Here we create and export functions that will be re-used in different places in our application.

📁 Hooks

  • A folder made for customized hooks.

📁 Layouts

  • It contains layout files such as Navbar, Footer, Sidebar .
  • Layouts are used to wrap a specific components.

📁 Pages

  • This folder contains pages components like Home, Contact etc...
  • Each page wrapped with a specific Layout

📁 Validations

  • Here we write our form validation and rules using a library like Formik .

📁 Services

  • In this folder we manage all of the API requests by creating files for each service.

📁 Context

  • This folder contains all the context files where we manage and globalize the state in our application such as theming styles.

📁 Config

  • All of our application configuration will be here in this folder.

📁 i18n

  • This folder is made for multi-language support.
  • You can create subfolders with a JSON file for each language you want to translate.
  • Take a look to their Step by Step guide HERE .

✨ Keep consistency in your code

  • By adding Eslint & Prettier to your project it will give you :
    • A nice linting environment.
    • Correct bad coding practices.
    • Make your code clean and consistent.

Boilerplate

I created a Github repository with the same folder structure that i explained above. if you ever want to use it here is the link [ HERE ]

Conclusion

Alright so the structure that i followed it's based on my experience and also depends on the project .

If you feel good with your folder structure ✅ then you are not obliged to follow the same structure as mine.

Thank you for reading this article ❤️

Top comments (4)

Collapse
 
ibnabbas1429 profile image
Aminu Ismail

Awesome, Thanks for sharing.

Collapse
 
yacouri profile image
Zouhir Yaçouri

You're welcome 🚀

Collapse
 
israelmitolu profile image
IsraelMitolu

This is great one.
Thanks for sharing

Collapse
 
yacouri profile image
Zouhir Yaçouri

My pleasure 🙏🏽.