React family bucket tutorial

Introduction to react

helloreact case

Two ways to create virtual DOM

Virtual DOM and real DOM

jsx syntax rules

jsx small exercises

Components and modules

Installation of developer tools

Functional components

Review related knowledge

class component

understanding of state

Initialize state

Event binding in react

this in the method in the class

Solve the problem of this pointing in the class

Use of setState

abbreviation for state

summarize state

Basic usage of props

Pass props in batches

Limit props

abbreviation for props

Constructors and props in class components

Functional components use props

Summary props

ref in string form

ref in callback form

Problem with the number of calls in callback ref

Use of createRef

summaryref

Event handling in react

uncontrolled components

controlled components

Function currying of higher-order functions

Writing without currying

Lead life cycle

Life cycle (old) component mounting process

Life cycle (old) setState process

Lifecycle (old) forceUpdate process

Life cycle (old) parent component render process

Summary life cycle (old)

Compare old and new life cycles

getDerivedStateFromProps

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate example

Summary life cycle (new)

DOM diffing algorithm

Initialize react scaffolding

Scaffolding file introduction public

Scaffolding file introduction src

A simple Hello component

Modularity of style

Installation of react plug-in in vscode

Component coding process

TodoList case static component

TodoList case dynamic initialization list

TodoList case adds todo

TodoList case mouse move into effect

TodoList case adds a todo

TodoList case limits props

TodoList case deletes a todo

TodoList case implements bottom function

TodoList case summary TodoList case

Scaffolding configuration agent method 1

Scaffolding configuration agent method 2

github search case static components

github search case axios send request

Github search case display data

github search case completion case

Message subscription and publishing technology pubsub

fetch sends request

Summary of github search cases

Understanding of SPA applications

Understanding of routing

Front-end routing principle

Basic usage of routing

Routing components and general components

Use of NavLink

Encapsulating NavLink components

Use of Switch

Solve the problem of style loss

Fuzzy matching and strict matching of routes

Use of Redirect

Nested routing

Pass params parameters to routing components

Pass search parameters to routing components

Pass the state parameter to the routing component

Summary routing parameters

push and reply

Programmatic route navigation

Use of withRouter

BrowserRouter and HashRouter

Basic use of antd

On-demand introduction of antd style

antd custom theme

Introduction to redux

redux workflow

Pure react version of summation case

Sum case redux lite version

Sum case redux full version

Asynchronous action version of summation case

Understanding of react-redux

Connect container components and UI components

Basic usage of react-redux

Optimization 1 abbreviation mapDispatch

Optimize the use of 2Provider component

Optimization 3 Integrate UI components and container components

Data sharing and writing Person components

Data sharing and writing the reducer of the Person component

Data sharing completes data sharing

pure function

redux developer tools

final version

Project package and run

Extend 1setState

Extension 2lazyLoad

Extend 3stateHook

Extend 4EffectHook

Extend 5RefHook

Extend 6Fragment

Extend 7Context

Extend 8PureComponent

Extend 9renderProps

Extend 10ErrorBoundary

Summary of communication methods between components