Many React applications follow a similar structure. They start out will organizing folders by file type. The will use folders like components, containers, directives, services, etc. As the application grows, it becomes harder to find your way through the jungle. A scaleable way adopted by the community, is to structure your application by feature. In React, this is often done with container
and presentation
components.
structure applications by feature, not file type
Suggestions
- adopt descriptive naming conventions:
NavHeader
overHeader
- put shared components in the root or a
common
folder
Examples in the wild:
+-- /src
| +-- /app
| +-- /modules
| | +-- /common
| | +-- /feature
| | | +-- /containers
| | | +-- /components
| | | +-- /reducers
| | | +-- /resolvers
react boilerplate
+-- /app
| +-- /components
| | +-- /H1
| | +-- /List
| | +-- /ListItem
| +-- /containers
| | +-- /HomePage
| | | +-- /tests
react redux univ
+-- /src
| +-- /containers
| | +-- /Home
| +-- /components
| | +-- /InfoBar
| +-- /helpers
| +-- /redux
| | +-- /modules
| | +-- /middleware
| +-- /utils
| | +-- /common
| | +-- /feature
| | | +-- /containers
| | | +-- /components
| | | +-- /reducers
| | | +-- /resolvers
react redux starter / react redux boilerplate
+-- /src
| +-- /actions
| +-- /containers
| +-- /components
| +-- /reducers
+-- /app
| +-- /containers
| +-- /components
| +-- /images
| +-- /styles
| +-- /tests
| +-- /utils
react-redux-saga-boilerplate
+-- /scripts
| +-- /actions
| +-- /containers
| +-- /components
| +-- /constants
| +-- /modules
| +-- /reducers
| +-- /routes
| +-- /sagas
+-- /src
| +-- /components
| +-- /ducks
| +-- /public
| +-- /store