github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Update react style guide (#13958)

Browse source
This commit is contained in:
Stacey Gammon 2017-09-12 15:57:35 -04:00 • committed by GitHub
parent 83b55721a3
commit 9587611ca8
1 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
style_guides/react_style_guide.md
View file

@ -76,7 +76,10 @@ This will be even more important when the fibers-based implementation is release
- https://www.youtube.com/watch?v=ZCuYPiUIONs
### Prefer reactDirective over react-component
reactDirective and react-component are two different ways of embedding react in angular. Using `react-component` means adding a bunch of components into angular, while `reactDirective` keeps them isolated, and is also a more succinct syntax.
When using ngReact to embed your react components inside angular html, prefer
reactDirective over react-component. You can read more about these two ngReact methods [here](https://github.com/ngReact/ngReact#features).
Using `react-component` means adding a bunch of components into angular, while `reactDirective` keeps them isolated,
and is also a more succinct syntax.
Good:
```
@ -160,6 +163,14 @@ export class ClickCounter extends React.Component {
}
}
```
Also Bad:
```
render() {
return <button className="kuiButton" onClick={this.onClick.bind(this)} />
}
```
Background: https://facebook.github.io/react/docs/handling-events.html
There is also an eslint rule we should be able to turn on for this.