React opinionated style guidelines with examples
There are many (too many!) ways to write React components so to make sure we all have the same styles, and good ideas are not lost, let's put them here. PR's more than welcome
- Our code style is mainly based on AirBnb guidelines https://github.com/airbnb/javascript/blob/master/react/README.md
- components - component-name.js
- containers - component-name.container.js
- styles - component-name.style.js
- generic -
<component-name>-<type>.-<purpose>.<extension>
eg.order-modal.container.js
.
├── modules
| ├── component-module-name
| ├── assets
| | ├── images
| | ├── icons
| ├── fixtures
| ├── redux <- only if specific for this component, otherwise use redux shared repository
| ├── elements-one
| ├── element-one.js
| ├── element-one.spec.js
| ├── elements-two
| ├── element-two.js
| ├── element-two.spec.js
| ├── element-two.scss
| ├── specific-module (eg. modals)
| ├── elements
| ├── element-one.js
| ├── element-one.spec.js
| ├── element-one.scss
| ├── specific-module.container.js
| ├── specific-module.container.spec.js
| ├── specific-module.js
| ├── specific-module.spec.js
| ├── specific-module.scss
| ├── component-name.container.js
| ├── component-name.container.spec.js
| ├── component-name.js
| ├── component-name.spec.js
| ├── component-name.scss
You are welcome to ask any question in the issues page.
- add redux guidelines
- add redux init store
- update react guidelines with new ideas
- add react file generator
- add storybook
- add example with media-queries -> Radium
- Example stateless component
- Example component
- Example container