https://github.com/beautiful-code/style-guide
https://github.com/beautiful-code/style-guide
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/beautiful-code/style-guide
- Owner: beautiful-code
- Created: 2019-09-16T05:53:07.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-08T05:32:13.000Z (over 6 years ago)
- Last Synced: 2025-03-02T17:15:26.754Z (over 1 year ago)
- Size: 1.95 KB
- Stars: 0
- Watchers: 15
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Javascript Style Guide
### Import Guidelines
Imports should be grouped as following with an empty line in between.
- Third party imports with react and react-redux packages at the top.
- UI related imports with 'common components', 'page components' and scss at the top
- Other imports (ex: ****'reducers.js', 'actionCreators.js', 'helpers.js')
-----
### React Component Methods Order
Methods in a react class component should be of the following order.
1. static methods and properties
2. lifecycle methods: `displayName`, `propTypes`, `contextTypes`, `childContextTypes`, `mixins`, `statics`, `defaultProps`, `constructor`, `getDefaultProps`, `state`, `getInitialState`, `getChildContext`, `getDerivedStateFromProps`, `componentWillMount`, `UNSAFE_componentWillMount`, `componentDidMount`, `componentWillReceiveProps`, `UNSAFE_componentWillReceiveProps`, `shouldComponentUpdate`, `componentWillUpdate`, `UNSAFE_componentWillUpdate`, `getSnapshotBeforeUpdate`, `componentDidUpdate`, `componentDidCatch`, `componentWillUnmount` (in this order).
3. custom methods and event handlers
4. `render` method
Eslint plugin: [react/sort-comp](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md).
-----
### Event handler functions naming convention
Functions name should start with `handle`. Followed by what the event does (noun). Should end with what type of event it is (verb)
Ex: `handleFormSubmit` , `handleModalOk`, `handleModalClose`, `handleModalCancel`, `handleDownloadClick`
-----
### Where should CSS go?
CSS goes in three places- main-styles.scss, beside a Generic component and root scss file at each domain level
-----
### Redux action name convention
To avoid bugs caused by conflicts in redux action names, suffix with every action name it's domain name.
Ex: `OPEN_FILTER_DROPDOWN_IN_HOME` where `IN_HOME` is the suffix to identify the domain.
-----