React project structure

README.md

React organization

I've created this file to register and share my definitions to organize react projects to avoid deep paths, dead code and to make sense to any new developer.

Base concepts

I'm using some concepts that may be known for many of you, but I'll pass through them to explain for júnior developers.

• components - Here I defined components as simple components, just with visual definitions, actions calls, data but without states. Every action and data must be inserted by another components, or containers, as I call here. Components must never calls containers
• containers: they are just components with state. It also may be a page, which integrates various containers to create a view and also has an route definition. Containers without route definition are just components, which some states and actions.

Folder structure

src/app

# React project structure

|-- app
| |-- helpers # helpers functions
| | |-- sendNotify.js
| | |-- api.js
| | |-- crashHandlers.js
| | |-- redux.js
| | |-- dateParser.js
| | |-- routerRegister.js
| | |-- ...
| |
| |-- components # (view) components without states
| | |-- core # base components as Button, link, grid, etc
| | | |-- Tabs
| | | |-- Grid
| | | |-- Button
| | | | |-- index.js # define component
| | | | |-- button.js # define component
| | | | |-- button.test.js # Jest tests
| | | | |-- button.story.js # Storybook documentation
| | | | |-- styles.js # (optional) styles
| | |
| | |-- Editor
| | |-- Badges
| | |-- Notification
| | |-- ...
| |
| |-- containers # (controllers) components with states
| | |-- EditorPage
| | | |-- component.js # component definition wit
| | | |-- index.js # inject resources
| | | |-- route.js # (optional) specify where it should be shown
| | |-- NotificationPage
| | |-- ...
| |
| |-- ducks # (model) redux store
| | |-- notifications
| | | |-- constants.js # can be removed with a redux-type generator
| | | |-- actions.js
| | | |-- reducer.js
| | |-- user
| | |-- profile
| | |-- ...
| |
| |-- routes.js # routes/paths definitions
| |-- index.js # App entrypoint
|
|-- assets
| |-- workers
| |-- images
| |-- fonts
| |-- index.html