Simple React Folder Structure

So you manage to finish all of those tutorial and you already run those generate commands, so what's next? Most of the time after generating new react project developers don't know where to put or organize their codes.

After doing some research, trial and error on different react projects, I found the folder structure that works best for me and for my team.

This article is opinionated and you are welcome to adjust it for your own use case. Here's how I organize my React applications:

.
├── README.md
├── package.json
├── tsconfig.json
├── public/
└── src/
    ├── index.tsx
    ├── routes.ts
    ├── api/
    ├── assets/
    ├── config/
    ├── containers/
    ├── context/
    ├── types/
    ├── utils/
    └── components/
        └── common/

Here's a quick overview for each item or folder.

src/ - Contains all of our react codebase.
index.tsx - Base react component. If you are not using typescript just change this to 'index.js' or 'index.jsx'.
routes.ts - App navigation. If you are not using typescript just change this to 'routes.js'.
api/ - Api call related functions.
assets/ - Images, fonts and other static files.
config/ - Config files
containers/ - Smart Components
context/ - React context
types/ - Typescript related files or functions.
utils/ - Helper functions
components/ - Dumb Components
components/common/ - Shared components

You can check this folder structure here.
If you are also using redux on your react application you can check how does it looks here.
I have implemented it with React Native application also, check it here.

Wrap Up

If you have any questions or recommendations, please leave them in the comments below.

Thanks for reading.

Comments

[Daniele Carta]

I used this structure:

• api (fetch with createAsyncThunk - Redux Toolkit)
• assets (vendors and images)
• components (all of compontens)
• helpers (string utils, array utils, constants, ecc)
• hooks (the custom hooks with the business logic: dispatch to redux, get data, ecc)
• layout (the wrap components that define the layout of the page)
• models (typescript interface)
• slices (createSlice for redux toolkit)
• store (the store of redux)
• view (contains the pages of the routing with layout and components)

How to you think about this structure?
All of components are in functional component, and the component in general is only for HTML and for call a custom hooks to get the business logic.

[幻魂]

hey, my dear friend, have you tried concent? that will make state management much easier than u experienced before.

[Daniele Carta]

No, I always used Redux.
Now with Toolkit, Redux is very simple.

In the last month I tried RecoilJS (by Facebook).

Thanks for your advice, I will try to us concetjs!

[幻魂]

big thx, u just need one min to read its quick start and then know how funny it is 😀

[Patrick Ofilada]

I think this is the same as my setup with just additional folders.

[幻魂]

I like this style structure, but what the different point is I put all component to folder components

here is my folder structure example.

|____runConcent.js      # run concent script
|____App.css            # App css file
|____index.js           # app entry file
|____utils              # general function package(non business)
| |____...
|
|____models             # business models
| |____index.js
| |____global
| | |____index.js
| | |____reducer.js     # change state methods(optional)
| | |____computed.js    # computed methods(optional)
| | |____watch.js       # watch methods(optional)
| | |____init.js        # async state initialization function(optional)
| | |____state.js       # module init state(required)
| |____...
| |
|____components         # [[base component]]
| |____biz-dumb         # business dumb component
| |____biz-smart        # business smart component
| |____dumb             # non business dumb component
| |____smart            # non business smart component
|
|____pages              # [[router component]]
| |____PageFoo
|   |____model          # page model definition
|   |____dumb           # page dumb components（if multi page will reuse some of these, we can put them to components/dumb）
|   |____...
|
|____types             # types folder
| |____store           # store associated
| |____eventMap        # event associated
| |____domain          # domain object associated
| |____biz             # biz logic associated
|
|____App.js             # app root component
|____base
| |____common-func      # business function package
| |____constant         # constant
|
|____services           # services
| |____...

[Patrick Ofilada]

I love this setup also.

[Mahmoud Ashraf]

That's how I managed my react folder
react-file-structure.surge.sh/

[Patrick Ofilada]

Totally agree, If it doesn't give you frustration I think it's in the right place.

[Mahmoud Ashraf]

Actually every-time I ended with similar structure as you shown.

[kang]

sometimes i prefer add a pages floder, the pages components in their floder, common components save in globals components floder

• components
• pages
  • home
    • components

about the code save way.
some util code not too much reuse, how to use save those utils code in your project？

[Patrick Ofilada]

Yup, sometimes I changed my containers folder to pages folder and all my pages or screen related components sits there. And all of the reusable components are located inside components folder. Ex:

src/
   components/
      Button/
         index.tsx
         style.ts
      Card/
         index.tsx
         style.ts
   containers/
      Homepage/
         index.tsx
         style.ts
      Profile/
         index.tsx
         style.ts

[David Woodward]

Too much