Naming conventions
| What | Format | Example |
|---|---|---|
| Component | MyComponentName |
Button, LoginModal |
| Action Type | [VERB]_[NOUN] |
TOGGLE_TODO |
| Action Creator | [verb][Noun] |
toggleTodo |
| Reducer | set[PathToStateKey] |
setTodosFilter |
| Selector | get/is[PathToStateKey] |
getTodosById, isTodoCompleted |
| Story | [Feature]Stories |
TodoStories |
| Constants | [NOUN]_[NOUN] |
DEFAULT_STATE |
| Screen Component | [ScreenName]Screen |
LoginScreen |
| CSS classes | kebab case | button, date-picker |
Filenames
| What | Format | Example |
|---|---|---|
| Page Component | <MyPage>.jsx |
Home.jsx |
| Component | <MyComponent>.jsx |
DatePicker.jsx |
| Reducer | <Feature>Reducer.js |
LoginReducer.js |
| Selectors | <Feature>Selectors.js |
LoginSelectors.js |
| Actions | <Feature>Actions.js |
LoginActions.js |
| Action Types | <Feature>Types.js |
LoginTypes.js |
| Storybook | <Feature>.story.js |
Login.story.js |
| Test | <Feature>.test.js |
Login.test.js |
| Constants | <Feature>Constants.js |
LoginConstants.js |
| Locales | [language]_[terrytory].json |
pt_br.json, en_ca.json |