DEV Community

Discussion on: ReactJS File Structure

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