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 1 commit
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 creating a class component in React, you should always call the base constructor with `props`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of:

When extending a class component in React, always call the base constructor with props.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't true though. Passing props to super is only required when access this.props in the constructor, which is pointless since you can just access props from the constructor args.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, that's true. It may not be necessary, but excluding props also might still be outside of the intended contract for the React.Component constructor. Other docs do state that props should always be passed to super.

So there's inconsistency here. It might not matter, but I'm curious for @gaearon's take here. Is calling super() without passing props problematic for present or future versions of React?

If a hard fast rule of "always all React.Component.constructor with props" isn't true, we should take a pass to clear up the ambiguity.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry to be pedantic, but this shows up again in the API documentation for React.Component.prototype.constructor:

https://facebook.github.io/react/docs/react-component.html#constructor

When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.


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