From 757181c322937c1a9bd650b56e2e892b16231fdf Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 6 Dec 2018 16:18:46 -0600
Subject: [PATCH] Update React guide in code style
This updates React guidance to prefer JS classes and adds additional info about
how to handle specific situations when using them.
Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
---
code_style.md | 34 ++++++++++++++++++++++++++++++----
1 file changed, 30 insertions(+), 4 deletions(-)
diff --git a/code_style.md b/code_style.md
index 2cac303e54..96f3879ebc 100644
--- a/code_style.md
+++ b/code_style.md
@@ -165,7 +165,6 @@ ECMAScript
React
-----
-- Use React.createClass rather than ES6 classes for components, as the boilerplate is way too heavy on ES6 currently. ES7 might improve it.
- Pull out functions in props to the class, generally as specific event handlers:
```jsx
@@ -174,11 +173,38 @@ React
<Foo onClick={this.doStuff}> // Better
<Foo onClick={this.onFooClick}> // Best, if onFooClick would do anything other than directly calling doStuff
```
-
- Not doing so is acceptable in a single case; in function-refs:
-
+
+ Not doing so is acceptable in a single case: in function-refs:
+
```jsx
<Foo ref={(self) => this.component = self}>
```
+
+- Prefer classes that extend `React.Component` (or `React.PureComponent`) instead of `React.createClass`
+ - You can avoid the need to bind handler functions by using [property initializers](https://reactjs.org/docs/react-component.html#constructor):
+
+ ```js
+ class Widget extends React.Component
+ onFooClick = () => {
+ ...
+ }
+ }
+ ```
+ - To define `propTypes`, use a static property:
+ ```js
+ class Widget extends React.Component
+ static propTypes = {
+ ...
+ }
+ }
+ ```
+ - If you need to specify initial component state, [assign it](https://reactjs.org/docs/react-component.html#constructor) to `this.state` in the constructor:
+ ```js
+ constructor(props) {
+ super(props);
+ // Don't call this.setState() here!
+ this.state = { counter: 0 };
+ }
+ ```
- Think about whether your component really needs state: are you duplicating
information in component state that could be derived from the model?