|
|
@ -200,8 +200,8 @@ First, add a constructor to the class to initialize the state: |
|
|
|
|
|
|
|
```javascript{2-7} |
|
|
|
class Square extends React.Component { |
|
|
|
constructor() { |
|
|
|
super(); |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
|
this.state = { |
|
|
|
value: null, |
|
|
|
}; |
|
|
@ -228,8 +228,8 @@ Now the `<button>` tag looks like this: |
|
|
|
|
|
|
|
```javascript{10-12} |
|
|
|
class Square extends React.Component { |
|
|
|
constructor() { |
|
|
|
super(); |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
|
this.state = { |
|
|
|
value: null, |
|
|
|
}; |
|
|
@ -282,8 +282,8 @@ Pulling state upwards like this is common when refactoring React components, so |
|
|
|
|
|
|
|
```javascript{2-7} |
|
|
|
class Board extends React.Component { |
|
|
|
constructor() { |
|
|
|
super(); |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
|
this.state = { |
|
|
|
squares: Array(9).fill(null), |
|
|
|
}; |
|
|
@ -399,8 +399,8 @@ Try clicking a square – you should get an error because we haven't defined `ha |
|
|
|
|
|
|
|
```javascript{9-13} |
|
|
|
class Board extends React.Component { |
|
|
|
constructor() { |
|
|
|
super(); |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
|
this.state = { |
|
|
|
squares: Array(9).fill(null), |
|
|
|
}; |
|
|
@ -528,8 +528,8 @@ Let's default the first move to be by 'X'. Modify our starting state in our Boar |
|
|
|
|
|
|
|
```javascript{6} |
|
|
|
class Board extends React.Component { |
|
|
|
constructor() { |
|
|
|
super(); |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
|
this.state = { |
|
|
|
squares: Array(9).fill(null), |
|
|
|
xIsNext: true, |
|
|
@ -564,8 +564,8 @@ After these changes you should have this Board component: |
|
|
|
|
|
|
|
```javascript{6,11-16,29} |
|
|
|
class Board extends React.Component { |
|
|
|
constructor() { |
|
|
|
super(); |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
|
this.state = { |
|
|
|
squares: Array(9).fill(null), |
|
|
|
xIsNext: true, |
|
|
@ -715,8 +715,8 @@ First, set up the initial state for Game by adding a constructor to it: |
|
|
|
|
|
|
|
```javascript{2-10} |
|
|
|
class Game extends React.Component { |
|
|
|
constructor() { |
|
|
|
super(); |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
|
this.state = { |
|
|
|
history: [{ |
|
|
|
squares: Array(9).fill(null), |
|
|
@ -1006,8 +1006,8 @@ First, add `stepNumber: 0` to the initial state in Game's `constructor`: |
|
|
|
|
|
|
|
```js{8} |
|
|
|
class Game extends React.Component { |
|
|
|
constructor() { |
|
|
|
super(); |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
|
this.state = { |
|
|
|
history: [{ |
|
|
|
squares: Array(9).fill(null), |
|
|
|