DEV Community

Cover image for Folder Structure using React
mai-mohamed
mai-mohamed

Posted on

Folder Structure using React

There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the responsibility of deciding on your own architecture. let's showing you my preferred folder structure.

Main Folders inside src

Image description

1. Assets folder

It consist of all needed assets such as

  • images

  • fonts

  • scss

    This folder doesn't have any logic. Image description

2. Config folder

Here we should add all needed configurations in the project
for example:

  • interceptor

  • redux (incase using redux for state management)

  • routes

  • firebase (incase using it in your project)

  • localization

    Image description

3. Modules folder

Or some times called it pages folder .
here we can separate our project to modules for example (AUTH module , Dashboard module ,...)
inside each module we can add

  • components

    this folder for small components shared only in this module and have no use to share it globally
  • redux

    this folder for handling redux flow for this module
  • local

    this folder for adding localization
  • entry file

    finally the module entry file Image description

4. Shared folder

This folder is responsible for all shared data we can use more than one time in our project
we can divide this folder to:

  • Components

    which contains all atoms components (buttons , form inputs , modals , tooltips , ...)

  • Models

    in case using type script there will be some shared models for example user model we can use it in form submission & redux flow

  • Utils

    this folder contains all constants regex shared functions
    Image description

    Wide image for all folder structure

    Image description

Hoping this article is useful for you and don't forget your feed back.

Top comments (2)

Collapse
 
manssorr profile image
Mansour Koura

Thanks for this simple explanation! I will use this in my next project.

Collapse
 
katiefuwang profile image
Katie / World Class Code

My Folder structure: SRC/Components, SRC/Pages, that's it. Simple as ABC.