DEV Community

Cover image for Simple React Folder Structure
Patrick Ofilada
Patrick Ofilada

Posted on

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.

Developer

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.

Top comments (14)

Collapse
 
crtdaniele profile image
Daniele Carta • Edited

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.

Collapse
 
fantasticsoul profile image
幻魂

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

Collapse
 
crtdaniele profile image
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!

Thread Thread
 
fantasticsoul profile image
幻魂

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

Collapse
 
pcofilada profile image
Patrick Ofilada

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

Collapse
 
fantasticsoul profile image
幻魂

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
| |____...
Collapse
 
pcofilada profile image
Patrick Ofilada

I love this setup also.

Collapse
 
22mahmoud profile image
Mahmoud Ashraf

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

Collapse
 
pcofilada profile image
Patrick Ofilada

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

Collapse
 
22mahmoud profile image
Mahmoud Ashraf

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

Collapse
 
zwkang profile image
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?

Collapse
 
pcofilada profile image
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
Collapse
 
dwoodwardgb profile image
David Woodward

Too much