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 over Header
• 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