DEV Community

Simple React Folder Structure

Patrick Ofilada on August 25, 2020

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 re...

Read full post

Daniele Carta • Aug 25 '20 • 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.

幻魂 • Aug 26 '20

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

Daniele Carta • Aug 26 '20

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!

幻魂 • Aug 26 '20

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

Patrick Ofilada • Aug 26 '20

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

幻魂 • Aug 26 '20

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 • Aug 26 '20

I love this setup also.

Mahmoud Ashraf • Aug 25 '20

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

Patrick Ofilada • Aug 25 '20

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

Mahmoud Ashraf • Aug 25 '20

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

kang • Aug 25 '20

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 • Aug 25 '20

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 • Mar 4 '21

Too much