Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update tutorial to match class component docs #9990

Closed
wants to merge 2 commits into from
+17 −17
Closed

Update tutorial to match class component docs #9990

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37adc7e
Update tutorial to match class component docs
ccardinaux Jun 16, 2017
a6886ef
Update phrasing
ccardinaux Jun 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions docs/tutorial/tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,8 +199,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,
};
Expand All @@ -216,7 +216,7 @@ class Square extends React.Component {
}
```

In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to explicitly call `super();` when defining the constructor of a subclass.
In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to explicitly call `super();` when defining the constructor of a subclass. When extending a class component in React, always call the base constructor with `props`.

Now change the Square `render` method to display the value from the current state, and to toggle it on click:

Expand All @@ -227,8 +227,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,
};
Expand Down Expand Up @@ -281,8 +281,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),
};
Expand Down Expand Up @@ -398,8 +398,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),
};
Expand Down Expand Up @@ -527,8 +527,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,
Expand Down Expand Up @@ -563,8 +563,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,
Expand Down Expand Up @@ -714,8 +714,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),
Expand Down Expand Up @@ -1005,8 +1005,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),
Expand Down