React Tutorial from CS50

React Tutorial from CS50

Watch this video:

https://www.youtube.com/watch?v=3HMtarQAt3A

But please read my comments at the following timestamps:

### 2:40

Install LTS instead (10.15)

### 7:50

No, not every component needs a constructor! Also, constructors must have one argument: constructor(props) and super(props) must take those props

### 8:45

They forgot a comma after the count

```js
this.state = {
    count: 0,
};
```

### 9:30

Put everything on its own line:

```html
<button>
    Increment
</button>
```

### 9:49

Always destructure (`this.state.count` not allowed, instead: `const { count } = this.state`)

10:38 – One of the only places we don't use arrow syntax. We're doing it the "traditional" way, as he calls it. We use class methods syntax:

```js
increment() {
}
```

Also, you'll need to bind class functions that aren't built-in (render, etc) using:

```js
constructor(props) {
    super(props);
    ...
    this.increment = this.increment.bind(this);
}
```

### 13:55

No, we don't always need a constructor

### 14:00

Remember to include props:

```js
constructor(props) {
    super(props);
}
```

### 14:25

They forgot a comma.

```js
this.state = {
    todos: [],
};
```

### 15:40

Always restructure (`this.state.todos` not allowed). Also, name this variable ("atLeastOneTodo", etc.)

You'll want to do this:

```js
render() {
    const {
        todos,
        ...
    } = this.state;
    return (...
}
```

### 15:45

Always use double quotes in html:

```html
// Good:
<input type="text" .../>
// Bad:
<input type='text' .../>
```

and single quotes in javascript `'`

```js
// Good:
const name = 'Divardo';
// Bad:
const name = "Divardo";

// Good: (everything inside {...} is javascript)
{ bool ? 'Value if true' : 'Value if false' }
// Bad:
{ bool ? "Value if true" : "Value if false" }
```

### 16:55

Never use a `<br>` tag. Ever ;)

### 17:20

They forgot a comma. Also, use single quotes!

### 17:24

Always destructure (`this.state.count` not allowed)

### 18:13

Put everything on its own line (more than 2 params):

```html
<input
    placeholder="Enter todo"
    value={…}
    onChange={…}
/>
```

### 18:18

Again, use a normal class function:

```js
onInputChange() {
}
```

and bind it in the constructor

```js
constructor(props) {
    super(props);
    
    this.onInputChange = this.onInputChange.bind(this);
}
```

### 19:28

They meant to use `const` instead of `let`. In general, use `const` unless you have to.

Since we're not re-assigning the variable, we use `const`. Yes, we are changing the contents of the variable, but we are not re-assigning the variable.

### 20:13

Use single quotes.

### 21:16

They meant to use `const` instead of `let`.

Also, always destructure! You're not allowed to use `this.state.todos`.

Instead:

```js
const { todos } = this.state;

const bulletedTodos = todos.map(...)
```

### 21:54

Put everything on its own line:

```html
<li>
    {e}
</li>
```

### 22:05

Never use indices as keys.

### 23:52

Put everything on its own line:

```html
<li>
    {e}
    <button>
        X
    </button>
</li>
```

### 25:16

Use single quotes.

### 25:52

No need this constructor.

### 26:29

Destructure please. Also, put everything on its own line.

### 27:17

Single quotes

### 28:35

Never create an empty constructor. Also, a constructor that only contains `super()` is the same as having no constructor. No useless code, please!

### 28:48

Always destructure.

### 29:29

No arrow function. Use class method syntax.

Also destructure the todos.

### 30.20

Always destructure

### 31:50

Skip to 33:33. We do not use functional components!