grafana/style_guides/frontend.md

93 lines
2.2 KiB
Markdown
Raw Normal View History

# 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).
## Table of Contents
- [Frontend Style Guide](#frontend-style-guide)
- [Table of Contents](#table-of-contents)
- [Basic rules](#basic-rules)
- [Organization](#organization)
- [Props](#props)
- [State mangement](#state-mangement)
## Basic rules
- Try to keep files small and focused.
- Break large components up into sub-components.
## 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?
## Props
- Name callback props and handlers with an "on" prefix.
```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-03-18 01:55:44 -05:00
```jsx
// good
export class YourClass extends PureComponent<{},{}> { ... }
// bad
export class YourClass extends PureComponent { ... }
```
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 = { ... }
```
## 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.