Winnie Magoma

Posted on Jul 2, 2019

ReactJS File Structure

#react #discuss #question #beginners

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)

Comment deleted

Winnie Magoma • Jul 2 '19

Thanks Mohammed..Do you mind elaborating further?

MarvelousWololo • Jul 3 '19

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

Bartmr • Jul 2 '19

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

Winnie Magoma • Jul 3 '19

Thanks..I have bookmarked this...

Óscar Garcia • Jul 2 '19

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

George • Jul 2 '19

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.

Winnie Magoma • Jul 2 '19

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

DEV Community

ReactJS File Structure

Top comments (8)

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

Read next

Create a Dynamic Code Playground with SandPack + React!

Decoding StyleX: Meta's Cutting-Edge Styling System

How React19 optimizes rendering

Como publicar um pacote no npm: um guia passo a passo