diff --git a/tutorial/tutorial.md b/tutorial/tutorial.md index b8adda09..612fbc0b 100644 --- a/tutorial/tutorial.md +++ b/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 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 ``` @@ -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'); } -... + +// ... +