Skip to content

Commit f651b8f

Browse files
yannickcryannickcr
committedApr 23, 2017
Update documentation examples to use createReactClass
·
v7.5.1v7.0.0-rc.0
1 parent 66e2a45 commit f651b8f

22 files changed

+79
-79
lines changed
 

‎docs/rules/display-name.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ DisplayName allows you to name your component. This name is used by React in deb
77
The following patterns are considered warnings:
88

99
```jsx
10-
var Hello = React.createClass({
10+
var Hello = createReactClass({
1111
render: function() {
1212
return <div>Hello {this.props.name}</div>;
1313
}
@@ -17,7 +17,7 @@ var Hello = React.createClass({
1717
The following patterns are not considered warnings:
1818

1919
```jsx
20-
var Hello = React.createClass({
20+
var Hello = createReactClass({
2121
displayName: 'Hello',
2222
render: function() {
2323
return <div>Hello {this.props.name}</div>;
@@ -40,7 +40,7 @@ When `true` the rule will ignore the name set by the transpiler and require a `d
4040
The following patterns are considered okay and do not cause warnings:
4141

4242
```jsx
43-
var Hello = React.createClass({
43+
var Hello = createReactClass({
4444
displayName: 'Hello',
4545

4646
render: function() {
@@ -69,7 +69,7 @@ Hello.displayName = 'Hello';
6969
The following patterns will cause warnings:
7070

7171
```jsx
72-
var Hello = React.createClass({
72+
var Hello = createReactClass({
7373
render: function() {
7474
return <div>Hello {this.props.name}</div>;
7575
}
@@ -86,7 +86,7 @@ export default class Hello extends React.Component {
8686
```
8787

8888
```jsx
89-
module.exports = React.createClass({
89+
module.exports = createReactClass({
9090
render: function() {
9191
return <div>Hello {this.props.name}</div>;
9292
}
@@ -103,7 +103,7 @@ export default class extends React.Component {
103103

104104
```jsx
105105
function HelloComponent() {
106-
return React.createClass({
106+
return createReactClass({
107107
render: function() {
108108
return <div>Hello {this.props.name}</div>;
109109
}
@@ -118,6 +118,6 @@ For this rule to work we need to detect React components, this could be very har
118118

119119
For now we should detect components created with:
120120

121-
* `React.createClass()`
121+
* `createReactClass()`
122122
* an ES6 class that inherit from `React.Component` or `Component`
123123
* a stateless function that return JSX or the result of a `React.createElement` call.

‎docs/rules/forbid-prop-types.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ This rule is off by default.
1010
The following patterns are considered warnings:
1111

1212
```jsx
13-
var Component = React.createClass({
13+
var Component = createReactClass({
1414
propTypes: {
1515
a: React.PropTypes.any,
1616
r: React.PropTypes.array,

‎docs/rules/jsx-no-bind.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ When `true` the following is not considered a warning:
6060
A common use case of `bind` in render is when rendering a list, to have a separate callback per list item:
6161

6262
```jsx
63-
var List = React.createClass({
63+
var List = createReactClass({
6464
render() {
6565
return (
6666
<ul>
@@ -78,7 +78,7 @@ var List = React.createClass({
7878
Rather than doing it this way, pull the repeated section into its own component:
7979

8080
```jsx
81-
var List = React.createClass({
81+
var List = createReactClass({
8282
render() {
8383
return (
8484
<ul>
@@ -90,7 +90,7 @@ var List = React.createClass({
9090
}
9191
});
9292

93-
var ListItem = React.createClass({
93+
var ListItem = createReactClass({
9494
render() {
9595
return (
9696
<li onClick={this._onClick}>
@@ -108,7 +108,7 @@ This will speed up rendering, as it avoids the need to create new functions (thr
108108

109109
### ES6 Classes
110110

111-
Unfortunately [React ES6 classes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#es6-classes) do not autobind their methods like components created with the older `React.createClass` syntax. There are several approaches to binding methods for ES6 classes. A basic approach is to just manually bind the methods in the constructor:
111+
Unfortunately [React ES6 classes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#es6-classes) do not autobind their methods like components created with the older `createReactClass` syntax. There are several approaches to binding methods for ES6 classes. A basic approach is to just manually bind the methods in the constructor:
112112

113113
```jsx
114114
class Foo extends React.Component {

‎docs/rules/jsx-no-comment-textnodes.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ injected as a text node in JSX statements.
88
The following patterns are considered warnings:
99

1010
```jsx
11-
var Hello = React.createClass({
11+
var Hello = createReactClass({
1212
render: function() {
1313
return (
1414
<div>// empty div</div>
1515
);
1616
}
1717
});
1818

19-
var Hello = React.createClass({
19+
var Hello = createReactClass({
2020
render: function() {
2121
return (
2222
<div>
@@ -30,21 +30,21 @@ var Hello = React.createClass({
3030
The following patterns are not considered warnings:
3131

3232
```jsx
33-
var Hello = React.createClass({
33+
var Hello = createReactClass({
3434
displayName: 'Hello',
3535
render: function() {
3636
return <div>{/* empty div */}</div>;
3737
}
3838
});
3939

40-
var Hello = React.createClass({
40+
var Hello = createReactClass({
4141
displayName: 'Hello',
4242
render: function() {
4343
return <div /* empty div */></div>;
4444
}
4545
});
4646

47-
var Hello = React.createClass({
47+
var Hello = createReactClass({
4848
displayName: 'Hello',
4949
render: function() {
5050
return <div className={'foo' /* temp class */}</div>;
@@ -58,7 +58,7 @@ It's possible you may want to legitimately output comment start characters (`//`
5858
in a JSX text node. In which case, you can do the following:
5959

6060
```jsx
61-
var Hello = React.createClass({
61+
var Hello = createReactClass({
6262
render: function() {
6363
return (
6464
<div>{'/* This will be output as a text node */'}</div>

‎docs/rules/jsx-wrap-multilines.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Wrapping multiline JSX in parentheses can improve readability and/or convenience
99
The following patterns are considered warnings:
1010

1111
```jsx
12-
var Hello = React.createClass({
12+
var Hello = createReactClass({
1313
render: function() {
1414
return <div>
1515
<p>Hello {this.props.name}</p>
@@ -23,7 +23,7 @@ The following patterns are not considered warnings:
2323
```jsx
2424
var singleLineJSX = <p>Hello</p>
2525

26-
var Hello = React.createClass({
26+
var Hello = createReactClass({
2727
render: function() {
2828
return (
2929
<div>

‎docs/rules/no-did-mount-set-state.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ This rule is aimed to forbid the use of `this.setState` in `componentDidMount` o
99
The following patterns are considered warnings:
1010

1111
```jsx
12-
var Hello = React.createClass({
12+
var Hello = createReactClass({
1313
componentDidMount: function() {
1414
this.setState({
1515
name: this.props.name.toUpperCase()
@@ -24,7 +24,7 @@ var Hello = React.createClass({
2424
The following patterns are not considered warnings:
2525

2626
```jsx
27-
var Hello = React.createClass({
27+
var Hello = createReactClass({
2828
componentDidMount: function() {
2929
this.onMount(function callback(newName) {
3030
this.setState({
@@ -39,7 +39,7 @@ var Hello = React.createClass({
3939
```
4040

4141
```jsx
42-
var Hello = React.createClass({
42+
var Hello = createReactClass({
4343
componentDidMount: function() {
4444
this.props.onMount();
4545
},
@@ -64,7 +64,7 @@ By default this rule forbids any call to `this.setState` in `componentDidMount`
6464
The following patterns are considered warnings:
6565

6666
```jsx
67-
var Hello = React.createClass({
67+
var Hello = createReactClass({
6868
componentDidMount: function() {
6969
this.setState({
7070
name: this.props.name.toUpperCase()
@@ -77,7 +77,7 @@ var Hello = React.createClass({
7777
```
7878

7979
```jsx
80-
var Hello = React.createClass({
80+
var Hello = createReactClass({
8181
componentDidMount: function() {
8282
this.onMount(function callback(newName) {
8383
this.setState({

‎docs/rules/no-did-update-set-state.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Updating the state after a component update will trigger a second `render()` cal
77
The following patterns are considered warnings:
88

99
```jsx
10-
var Hello = React.createClass({
10+
var Hello = createReactClass({
1111
componentDidUpdate: function() {
1212
this.setState({
1313
name: this.props.name.toUpperCase()
@@ -22,7 +22,7 @@ var Hello = React.createClass({
2222
The following patterns are not considered warnings:
2323

2424
```jsx
25-
var Hello = React.createClass({
25+
var Hello = createReactClass({
2626
componentDidUpdate: function() {
2727
this.props.onUpdate();
2828
},
@@ -33,7 +33,7 @@ var Hello = React.createClass({
3333
```
3434

3535
```jsx
36-
var Hello = React.createClass({
36+
var Hello = createReactClass({
3737
componentDidUpdate: function() {
3838
this.onUpdate(function callback(newName) {
3939
this.setState({
@@ -62,7 +62,7 @@ By default this rule forbids any call to `this.setState` in `componentDidUpdate`
6262
The following patterns are considered warnings:
6363

6464
```jsx
65-
var Hello = React.createClass({
65+
var Hello = createReactClass({
6666
componentDidUpdate: function() {
6767
this.setState({
6868
name: this.props.name.toUpperCase()
@@ -75,7 +75,7 @@ var Hello = React.createClass({
7575
```
7676

7777
```jsx
78-
var Hello = React.createClass({
78+
var Hello = createReactClass({
7979
componentDidUpdate: function() {
8080
this.onUpdate(function callback(newName) {
8181
this.setState({

‎docs/rules/no-direct-mutation-state.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ This rule is aimed to forbid the use of mutating `this.state` directly.
1010
The following patterns are considered warnings:
1111

1212
```jsx
13-
var Hello = React.createClass({
13+
var Hello = createReactClass({
1414
componentDidMount: function() {
1515
this.state.name = this.props.name.toUpperCase();
1616
},
@@ -24,7 +24,7 @@ var Hello = React.createClass({
2424
The following patterns are not considered warnings:
2525

2626
```jsx
27-
var Hello = React.createClass({
27+
var Hello = createReactClass({
2828
componentDidMount: function() {
2929
this.setState({
3030
name: this.props.name.toUpperCase();

‎docs/rules/no-is-mounted.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
The following patterns are considered warnings:
1010

1111
```jsx
12-
var Hello = React.createClass({
12+
var Hello = createReactClass({
1313
handleClick: function() {
1414
setTimeout(function() {
1515
if (this.isMounted()) {
@@ -26,7 +26,7 @@ var Hello = React.createClass({
2626
The following patterns are not considered warnings:
2727

2828
```jsx
29-
var Hello = React.createClass({
29+
var Hello = createReactClass({
3030
render: function() {
3131
return <div onClick={this.props.handleClick}>Hello</div>;
3232
}

‎docs/rules/no-multi-comp.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ Declaring only one component per file improves readability and reusability of co
77
The following patterns are considered warnings:
88

99
```jsx
10-
var Hello = React.createClass({
10+
var Hello = createReactClass({
1111
render: function() {
1212
return <div>Hello {this.props.name}</div>;
1313
}
1414
});
1515

16-
var HelloJohn = React.createClass({
16+
var HelloJohn = createReactClass({
1717
render: function() {
1818
return <Hello name="John" />;
1919
}
@@ -25,7 +25,7 @@ The following patterns are not considered warnings:
2525
```jsx
2626
var Hello = require('./components/Hello');
2727

28-
var HelloJohn = React.createClass({
28+
var HelloJohn = createReactClass({
2929
render: function() {
3030
return <Hello name="John" />;
3131
}

‎docs/rules/no-set-state.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ When using an architecture that separates your application state from your UI co
77
The following patterns are considered warnings:
88

99
```jsx
10-
var Hello = React.createClass({
10+
var Hello = createReactClass({
1111
getInitialState: function() {
1212
return {
1313
name: this.props.name
@@ -27,7 +27,7 @@ var Hello = React.createClass({
2727
The following patterns are not considered warnings:
2828

2929
```jsx
30-
var Hello = React.createClass({
30+
var Hello = createReactClass({
3131
render: function() {
3232
return <div onClick={this.props.handleClick}>Hello {this.props.name}</div>;
3333
}

‎docs/rules/no-string-refs.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ Currently, two ways are supported by React to refer to components. The first way
77
Invalid:
88

99
```jsx
10-
var Hello = React.createClass({
10+
var Hello = createReactClass({
1111
render: function() {
1212
return <div ref="hello">Hello, world.</div>;
1313
}
1414
});
1515
```
1616

1717
```jsx
18-
var Hello = React.createClass({
18+
var Hello = createReactClass({
1919
componentDidMount: function() {
2020
var component = this.refs.hello;
2121
// ...do something with component
@@ -29,7 +29,7 @@ var Hello = React.createClass({
2929
Valid:
3030

3131
```jsx
32-
var Hello = React.createClass({
32+
var Hello = createReactClass({
3333
componentDidMount: function() {
3434
var component = this.hello;
3535
// ...do something with component

0 commit comments

Comments
 (0)
Please sign in to comment.