DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for ReactJS File Structure
Winnie Magoma
Winnie Magoma

Posted on

ReactJS File Structure

I have been playing around with ReactJS for approximately two weeks now and i find it interesting. However, i have come across something new: How to put files into folders. This brings out a number of questions:

  • What is the importance of putting files into a structure [In React] ?
  • Is there a particular approach that you currently use that eases the process building and accessing React Apps? Thanks

Top comments (8)

Collapse
 
mohammedgqudah profile image
Mohammed Qudah

I like this structure:

example:

src/
β”œβ”€β”€ axios
β”‚   └── axios.base.js
β”œβ”€β”€ components
β”‚   β”œβ”€β”€ Avatar
β”‚   β”‚   β”œβ”€β”€ Avatar.jsx
β”‚   β”‚   └── Avatar.scss
β”‚   β”œβ”€β”€ Dropdown
β”‚   β”‚   β”œβ”€β”€ Dropdown.jsx
β”‚   β”‚   └── dropdown.module.scss
β”‚   β”œβ”€β”€ Input
β”‚   β”‚   β”œβ”€β”€ Input.jsx
β”‚   β”‚   └── Input.scss
β”œβ”€β”€ helpers
β”‚   β”œβ”€β”€ getAvatar.js
β”œβ”€β”€ index.jsx
β”œβ”€β”€ Routes
β”‚   β”œβ”€β”€ 404
β”‚   β”‚   β”œβ”€β”€ 404.jsx
β”‚   β”‚   └── 404.module.scss
β”‚   β”œβ”€β”€ Home
β”‚   β”‚   β”œβ”€β”€ Home.jsx
β”‚   β”‚   └── home.module.scss
β”‚   └── routes.client.jsx
β”œβ”€β”€ settings.js
β”œβ”€β”€ store
β”‚   β”œβ”€β”€ actions
β”‚   β”‚   β”œβ”€β”€ auth.actions.js
β”‚   β”œβ”€β”€ configStore.js
β”‚   β”œβ”€β”€ languages.js
β”‚   └── reducers
β”‚       β”œβ”€β”€ auth.reducer.js
└── styles
    β”œβ”€β”€ animate.scss
    β”œβ”€β”€ Button.scss
    β”œβ”€β”€ main.scss
    β”œβ”€β”€ reset.css
    β”œβ”€β”€ settings.scss
    └── shared.scss
Collapse
 
winniebosy profile image
Winnie Magoma

Thanks Mohammed..Do you mind elaborating further?

Collapse
 
marvelouswololo profile image
MarvelousWololo

this is well thought. do you have it on a gist so I could fork it? thanks.

Collapse
 
bartmr profile image
Bartmr

I usually split UI from logic, and the logic is split according to the entities you have.

src/
--components/
----screens/ /* Has your screens and navigators (in case you're using React Native)
----ui-kit/ /* Has your UI-kit and your typography and color settings
----shared/ /* Has components that are shared between screens but are too tied up to a feature, so they cannot be in ui-kit. i.e. Login gate UI */
--logic/
----appointments/
------api.ts /* makes the HTTP requests and abstracts the outer layers from the transport layer */
------reducers.ts
------actions.ts
------types.ts
----shared/
------store/
--------root-reducer.ts
--------store.ts
------utils/
------app-shell/ /* stuff like error toasts and full-screen loading spinners */
--------reducers.ts
--------actions.ts
Collapse
 
winniebosy profile image
Winnie Magoma

Thanks..I have bookmarked this...

Collapse
 
oscargm profile image
Γ“scar Garcia

What I've seen in big projects with redux so far, and fits good in my brain is something like this:

config/
β”œβ”€β”€ jest
└── webpack
src/
β”œβ”€β”€ app
|   β”œβ”€β”€ common
|   |   └── (common functions and components)
|   β”œβ”€β”€ layout
|   |   β”œβ”€β”€ layout-a.tsx
|   |   β”œβ”€β”€ layout-a.styles.ts
|   |   └── index.ts
|   β”œβ”€β”€ pods
|   |   β”œβ”€β”€ pod-a
|   |   |   β”œβ”€β”€ api
|   |   |   |   β”œβ”€β”€ pod-a.service.ts
|   |   |   |   β”œβ”€β”€ consts.ts
|   |   |   |   β”œβ”€β”€ model.ts
|   |   |   |   └── index.ts
|   |   |   β”œβ”€β”€ components
|   |   |   |   β”œβ”€β”€ pod-a.body.component.tsx
|   |   |   |   β”œβ”€β”€ pod-a.body.component.spec.tsx
|   |   |   |   β”œβ”€β”€ pod-a.header.component.tsx
|   |   |   |   β”œβ”€β”€ pod-a.header.component.spec.ts
|   |   |   |   β”œβ”€β”€ pod-a.footer.component.ts
|   |   |   |   β”œβ”€β”€ pod-a.footer.component.spec.ts
|   |   |   |   β”œβ”€β”€ pod-a.styles.ts
|   |   |   |   └── index.ts
|   |   |   β”œβ”€β”€ store
|   |   |   |   β”œβ”€β”€ model.ts
|   |   |   |   β”œβ”€β”€ pod-a.reducer.ts
|   |   |   |   β”œβ”€β”€ pod-a.reducer.spec.ts
|   |   |   |   └── index.ts
|   |   |   β”œβ”€β”€ actions.ts
|   |   |   β”œβ”€β”€ consts.ts
|   |   |   β”œβ”€β”€ index.ts
|   |   |   β”œβ”€β”€ key.ts
|   |   |   β”œβ”€β”€ mappers.ts
|   |   |   β”œβ”€β”€ pod-a.container.tsx
|   |   |   β”œβ”€β”€ sagas.ts
|   |   |   └── selector.ts
|   |   └── pod-b
|   |       └── ....
|   β”œβ”€β”€ scenes
|   |   β”œβ”€β”€ scene-1.tsx
|   |   └── scene-2.tsx
|   β”œβ”€β”€ index.html
|   β”œβ”€β”€ index.tsx
|   β”œβ”€β”€ reducer.ts
|   β”œβ”€β”€ saga.ts
|   β”œβ”€β”€ store.ts
β”œβ”€β”€ assets
└── mock
...
Collapse
 
georgecoldham profile image
George

File structure is crucial to get right, and by right I mean logical and consistent. A bad file structure will make ongoing development miserable, slow and likely buggy.

My preferred method, is to have containers and components.
Components are things like buttons, lists, input boxes etc, often just wrapped and styled html elements.
Containers are pages and groupings of components, think nav bars and forms.
In a react sense these are still components, but from a dev perspective they separate them as they would likely be tested differently.
I also like keeping the structure of my src directory for my test directory. Although I am liking having the tests sit local to what they are testing more and more.

Im sure people will have opinions on how i like to structure things, it is a very opinionated thing. I know I can make improvements, and next project I will. The important thing is to learn what works and what doesn't. Changing a file structure after creation is a difficult thing to do successfully.

Collapse
 
winniebosy profile image
Winnie Magoma

Thanks George..This structure seems logical and easy to understand..I mean in the event of a bug..It is easy to locate it..In the event of any question, I won't hesitate contacting you..Cheers..

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!