Docs to ES6: Displaying data example.
gillchristian committed
May 22, 2016 at 14:14 UTC
f5f1769583d14803f3e74bf522cf28b10b5a1a5c
2 files changed
+38
-37
docs/docs/02-displaying-data.md
+7
-5
@@ -36,8 +36,8 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
36
For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JSX:
37
38
```javascript
39
-var HelloWorld = React.createClass({
40
- render: function() {
39
+class HelloWorld extends React.Component {
40
+ render() {
41
return (
42
<p>
43
Hello, <input type="text" placeholder="Your name here" />!
@@ -45,14 +45,16 @@ var HelloWorld = React.createClass({
45
</p>
46
);
47
}
48
-});
48
+}
49
50
-setInterval(function() {
50
+function tick() {
51
ReactDOM.render(
52
<HelloWorld date={new Date()} />,
53
document.getElementById('example')
54
);
55
-}, 500);
55
+}
56
+
57
+setInterval(tick, 500);
58
```
59
60
## Reactive Updates
docs/docs/04-multiple-components.md
+31
-32
@@ -17,8 +17,8 @@ By building modular components that reuse other components with well-defined int
17
Let's create a simple Avatar component which shows a Facebook page picture and name using the Facebook Graph API.
18
19
```javascript
20
-var Avatar = React.createClass({
21
- render: function() {
20
+class Avatar extends React.Component {
21
+ render() {
22
return (
23
<div>
24
<PagePic pagename={this.props.pagename} />
@@ -26,25 +26,25 @@ var Avatar = React.createClass({
26
</div>
27
);
28
}
29
-});
29
+}
30
31
-var PagePic = React.createClass({
32
- render: function() {
31
+class PagePic extends React.Component {
32
+ render() {
33
return (
34
<img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
35
);
36
}
37
-});
37
+}
38
39
-var PageLink = React.createClass({
40
- render: function() {
39
+class PageLink extends React.Component {
40
+ render() {
41
return (
42
<a href={'https://www.facebook.com/' + this.props.pagename}>
43
{this.props.pagename}
44
</a>
45
);
46
}
47
-});
47
+}
48
49
ReactDOM.render(
50
<Avatar pagename="Engineering" />,
@@ -110,13 +110,12 @@ In most cases, this can be sidestepped by hiding elements instead of destroying
110
The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:
111
112
```javascript
113
- render: function() {
114
- var results = this.props.results;
113
+ render() {
114
return (
115
<ol>
117
- {results.map(function(result) {
118
- return <li key={result.id}>{result.text}</li>;
119
- })}
116
+ {this.props.results.map((result) => (
117
+ <li key={result.id}>{result.text}</li>
118
+ ))}
119
</ol>
120
);
121
}
@@ -128,41 +127,41 @@ The `key` should *always* be supplied directly to the components in the array, n
127
128
```javascript
129
// WRONG!
131
-var ListItemWrapper = React.createClass({
132
- render: function() {
130
+class ListItemWrapper extends React.Component {
131
+ render() {
132
return <li key={this.props.data.id}>{this.props.data.text}</li>;
133
}
135
-});
136
-var MyComponent = React.createClass({
137
- render: function() {
134
+}
135
+class MyComponent extends React.Component {
136
+ render() {
137
return (
138
<ul>
140
- {this.props.results.map(function(result) {
141
- return <ListItemWrapper data={result}/>;
142
- })}
139
+ {this.props.results.map((result) => (
140
+ <ListItemWrapper data={result} />
141
+ )}
142
</ul>
143
);
144
}
146
-});
145
+}
146
```
147
```javascript
148
// Correct :)
150
-var ListItemWrapper = React.createClass({
151
- render: function() {
149
+class ListItemWrapper extends React.Component {
150
+ render() {
151
return <li>{this.props.data.text}</li>;
152
}
154
-});
155
-var MyComponent = React.createClass({
156
- render: function() {
153
+}
154
+class MyComponent extends React.Component {
155
+ render() {
156
return (
157
<ul>
159
- {this.props.results.map(function(result) {
160
- return <ListItemWrapper key={result.id} data={result}/>;
161
- })}
158
+ {this.props.results.map((result) => (
159
+ <ListItemWrapper key={result.id} data={result} />
160
+ )}
161
</ul>
162
);
163
}
165
-});
164
+}
165
```
166
167
You can also key children by passing a ReactFragment object. See [Keyed Fragments](create-fragment.html) for more details.