mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 12:43:05 +00:00
Minor tutorial nits
This commit is contained in:
@@ -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 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
|
||||
class ShoppingList extends React.Component {
|
||||
@@ -148,7 +148,7 @@ class Square extends React.Component {
|
||||
value: null,
|
||||
};
|
||||
}
|
||||
...
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
@@ -158,7 +158,7 @@ Now change the `render` method to display `this.state.value` instead of `this.pr
|
||||
|
||||
```javascript
|
||||
<button className="square" onClick={() => this.setState({value: 'X'})}>
|
||||
{this.state.value}
|
||||
{this.state.value}
|
||||
</button>
|
||||
```
|
||||
|
||||
@@ -277,7 +277,7 @@ var player = {score: 1, name: 'Jeff'};
|
||||
var newPlayer = Object.assign({}, player, {score: 2});
|
||||
// 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};
|
||||
```
|
||||
|
||||
@@ -322,7 +322,7 @@ class Board extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
...
|
||||
// ...
|
||||
xIsNext: true,
|
||||
};
|
||||
}
|
||||
@@ -346,7 +346,7 @@ Now X and O take turns. Next, change the "status" text in Board's `render` so th
|
||||
```javascript
|
||||
render() {
|
||||
const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
|
||||
...
|
||||
// ...
|
||||
```
|
||||
|
||||
## Declaring a Winner
|
||||
@@ -362,7 +362,7 @@ render() {
|
||||
} else {
|
||||
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
|
||||
}
|
||||
...
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
@@ -374,7 +374,7 @@ handleClick(i) {
|
||||
if (calculateWinner(squares) || squares[i]) {
|
||||
return;
|
||||
}
|
||||
...
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
@@ -394,7 +394,7 @@ history = [
|
||||
{
|
||||
squares: [... x 9]
|
||||
},
|
||||
...
|
||||
// ...
|
||||
]
|
||||
```
|
||||
|
||||
@@ -413,7 +413,7 @@ class Game extends React.Component {
|
||||
xIsNext: true
|
||||
};
|
||||
}
|
||||
...
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
@@ -436,7 +436,9 @@ if (winner) {
|
||||
} else {
|
||||
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
|
||||
}
|
||||
...
|
||||
|
||||
// ...
|
||||
|
||||
<div className="game-board">
|
||||
<Board
|
||||
squares={current.squares}
|
||||
@@ -488,7 +490,9 @@ const moves = history.map((step, move) => {
|
||||
</li>
|
||||
);
|
||||
});
|
||||
...
|
||||
|
||||
// ...
|
||||
|
||||
<ol>{moves}</ol>
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user