Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

React Deep Dive by Manuel Bieh & Sibylle Lancaster_468 x 60.png

data.tar.gz

reactdeepdive

reactdeepdiveportal

reactdeepdiveflow

ReactDeepDiveNodeAPI

ReactDeepDiveNodeAPI_Portal

The primary goal of this course is to give you an excellent introduction to React and its ecosystem, tackle advanced features, and teach you as many best practices as possible. Furthermore, this course digs deeper into the most popular, latest, and straight forward ways to use React.

React Deep Dive: From Beginner to Advanced

**State** inside a class component can be accessed with the instance property `this.state`. However, it is encapsulated in the component, and neither parent nor child components can access it.

To define a component's initial state, we can select from three ways. Two of these are relatively simple. The third is a little more advanced. We're going to cover the latter when we learn about the lifecycle method `getDerivedStateFromProps()`.

The **initial state** can be defined by setting `this.state`. We can do this with the constructor of a class component:
```js
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: props.counter,
    };
  }
  render() {
    // ...
  }
}
```

This can also be done by defining the state as an ES2017 class property. This is much shorter but still requires the Babel plugin `@babel/plugin-proposal-class-properties` (pre-Babel 7: `babel-plugintransform-
class-properties`):
```js
class MyComponent extends React.Component {
  state = {
    counter: this.props.counter,
  };
  render() {
    // ...
  }
}
```

> **Note:** **Class Property Syntax** is supported out-of-the-box by Create React App. As most projects today rely completely or in part on the CRA setup, this syntax is already widely used and common to see in most projects. If you encounter a project where this is not the case, Try installing Class Property Syntax  and use this Babel plugin because it reduces the length of your code and is easily set up.


Once the state is defined, we can read its value via `this.state`. While it is possible to mutate `this.state` directly, it is actively discouraged.


Learn how to access and define state inside a React component.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Our First Stateful Component