Browse Source

Minor tutorial nits

main
Dan Abramov 8 years ago
parent
commit
12091112e7
  1. 28
      tutorial/tutorial.md

28
tutorial/tutorial.md

@ -60,7 +60,7 @@ With this out of the way, let's get started!
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
React has a few different kinds of components, but we'll start with React.Component subclasses: React has a few different kinds of components, but we'll start with `React.Component` subclasses:
```javascript ```javascript
class ShoppingList extends React.Component { class ShoppingList extends React.Component {
@ -148,7 +148,7 @@ class Square extends React.Component {
value: null, value: null,
}; };
} }
... // ...
} }
``` ```
@ -158,7 +158,7 @@ Now change the `render` method to display `this.state.value` instead of `this.pr
```javascript ```javascript
<button className="square" onClick={() => this.setState({value: 'X'})}> <button className="square" onClick={() => this.setState({value: 'X'})}>
{this.state.value} {this.state.value}
</button> </button>
``` ```
@ -277,7 +277,7 @@ var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({}, player, {score: 2}); var newPlayer = Object.assign({}, player, {score: 2});
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'} // Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
// Or if you are using object spread, you can write: // Or if you are using object spread syntax proposal, you can write:
// var newPlayer = {...player, score: 2}; // var newPlayer = {...player, score: 2};
``` ```
@ -322,7 +322,7 @@ class Board extends React.Component {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
... // ...
xIsNext: true, xIsNext: true,
}; };
} }
@ -346,7 +346,7 @@ Now X and O take turns. Next, change the "status" text in Board's `render` so th
```javascript ```javascript
render() { render() {
const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
... // ...
``` ```
## Declaring a Winner ## Declaring a Winner
@ -362,7 +362,7 @@ render() {
} else { } else {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
} }
... // ...
} }
``` ```
@ -374,7 +374,7 @@ handleClick(i) {
if (calculateWinner(squares) || squares[i]) { if (calculateWinner(squares) || squares[i]) {
return; return;
} }
... // ...
} }
``` ```
@ -394,7 +394,7 @@ history = [
{ {
squares: [... x 9] squares: [... x 9]
}, },
... // ...
] ]
``` ```
@ -413,7 +413,7 @@ class Game extends React.Component {
xIsNext: true xIsNext: true
}; };
} }
... // ...
} }
``` ```
@ -436,7 +436,9 @@ if (winner) {
} else { } else {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
} }
...
// ...
<div className="game-board"> <div className="game-board">
<Board <Board
squares={current.squares} squares={current.squares}
@ -488,7 +490,9 @@ const moves = history.map((step, move) => {
</li> </li>
); );
}); });
...
// ...
<ol>{moves}</ol> <ol>{moves}</ol>
``` ```

Loading…
Cancel
Save