Minor tutorial nits
Dan Abramov committed
Apr 18, 2017 at 17:53 UTC
a41d469bcfbdeecf882e0694b6708005e0c8895c
1 file changed
+16
-12
docs/tutorial/tutorial.md
+16
-12
@@ -60,7 +60,7 @@ With this out of the way, let's get started!
60
61
React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
62
63
-React has a few different kinds of components, but we'll start with React.Component subclasses:
63
+React has a few different kinds of components, but we'll start with `React.Component` subclasses:
64
65
```javascript
66
class ShoppingList extends React.Component {
@@ -148,7 +148,7 @@ class Square extends React.Component {
148
value: null,
149
};
150
}
151
- ...
151
+ // ...
152
}
153
```
154
@@ -158,7 +158,7 @@ Now change the `render` method to display `this.state.value` instead of `this.pr
158
159
```javascript
160
<button className="square" onClick={() => this.setState({value: 'X'})}>
161
- {this.state.value}
161
+ {this.state.value}
162
</button>
163
```
164
@@ -277,7 +277,7 @@ var player = {score: 1, name: 'Jeff'};
277
var newPlayer = Object.assign({}, player, {score: 2});
278
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
279
280
-// Or if you are using object spread, you can write:
280
+// Or if you are using object spread syntax proposal, you can write:
281
// var newPlayer = {...player, score: 2};
282
```
283
@@ -322,7 +322,7 @@ class Board extends React.Component {
322
constructor() {
323
super();
324
this.state = {
325
- ...
325
+ // ...
326
xIsNext: true,
327
};
328
}
@@ -346,7 +346,7 @@ Now X and O take turns. Next, change the "status" text in Board's `render` so th
346
```javascript
347
render() {
348
const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
349
- ...
349
+ // ...
350
```
351
352
## Declaring a Winner
@@ -362,7 +362,7 @@ render() {
362
} else {
363
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
364
}
365
- ...
365
+ // ...
366
}
367
```
368
@@ -374,7 +374,7 @@ handleClick(i) {
374
if (calculateWinner(squares) || squares[i]) {
375
return;
376
}
377
- ...
377
+ // ...
378
}
379
```
380
@@ -394,7 +394,7 @@ history = [
394
{
395
squares: [... x 9]
396
},
397
- ...
397
+ // ...
398
]
399
```
400
@@ -413,7 +413,7 @@ class Game extends React.Component {
413
xIsNext: true
414
};
415
}
416
- ...
416
+ // ...
417
}
418
```
419
@@ -436,7 +436,9 @@ if (winner) {
436
} else {
437
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
438
}
439
-...
439
+
440
+// ...
441
+
442
<div className="game-board">
443
<Board
444
squares={current.squares}
@@ -488,7 +490,9 @@ const moves = history.map((step, move) => {
490
</li>
491
);
492
});
491
-...
493
+
494
+// ...
495
+
496
<ol>{moves}</ol>
497
```
498