2019-01-23 04:37:46 -06:00
# Frontend Style Guide
2019-03-18 01:55:44 -05:00
Generally we follow the Airbnb [React Style Guide ](https://github.com/airbnb/javascript/tree/master/react ).
2019-01-23 04:37:46 -06:00
## Table of Contents
2019-09-20 11:45:06 -05:00
- [Frontend Style Guide ](#frontend-style-guide )
- [Table of Contents ](#table-of-contents )
- [Basic rules ](#basic-rules )
- [Organization ](#organization )
- [Props ](#props )
- [State mangement ](#state-mangement )
2019-01-23 04:37:46 -06:00
## Basic rules
2019-09-20 11:45:06 -05:00
- Try to keep files small and focused.
- Break large components up into sub-components.
2019-01-23 04:37:46 -06:00
## Organization
2019-03-18 01:55:44 -05:00
- Components and types that needs to be used by external plugins needs to go into @grafana/ui
- Components should get their own folder under features/xxx/components
- Sub components can live in that component folders, so small component do not need their own folder
- Place test next to their component file (same dir)
- Component sass should live in the same folder as component code
- State logic & domain models should live in features/xxx/state
- Containers (pages) can live in feature root features/xxx
- up for debate?
2019-01-23 04:37:46 -06:00
## Props
2019-09-20 11:45:06 -05:00
- Name callback props and handlers with an "on" prefix.
2019-01-23 04:37:46 -06:00
```tsx
// good
onChange = () => {
};
render() {
return (
< MyComponent onChange = {this.onChange} / >
);
}
// bad
handleChange = () => {
};
render() {
return (
< MyComponent changed = {this.handleChange} / >
);
}
```
2019-03-18 01:55:44 -05:00
- React Component definitions
2019-01-23 04:37:46 -06:00
2019-03-18 01:55:44 -05:00
```jsx
// good
export class YourClass extends PureComponent< {},{}> { ... }
// bad
export class YourClass extends PureComponent { ... }
```
2019-01-23 04:37:46 -06:00
2019-03-18 01:55:44 -05:00
- React Component constructor
```typescript
// good
constructor(props:Props) {...}
// bad
constructor(props) {...}
```
- React Component defaultProps
```typescript
// good
static defaultProps: Partial< Props > = { ... }
// bad
static defaultProps = { ... }
```
2019-08-09 06:15:52 -05:00
## State mangement
- Don't mutate state in reducers or thunks.
- Use helpers `actionCreatorFactory` and `reducerFactory` instead of traditional `switch statement` reducers in Redux. See [Redux framework ](https://github.com/grafana/grafana/tree/master/style_guides/redux.md ) for more details.
- Use `reducerTester` to test reducers. See [Redux framework ](https://github.com/grafana/grafana/tree/master/style_guides/redux.md ) for more details.
- Use state selectors to access state instead of accessing state directly.