Install the node

  • React Scaffolding itself relies on Node,

  • This is why you need to install the Node environment: for Windows and Mac OS, you can download it directly from the Node website.

  • Official website: nodejs.org/en/download…

  • Note: It is recommended to download the LTS (Long-term support) version. It is a long-term support version and will be relatively stable.

What is NPM?

  1. Full name Node Package Manager, namely “Node Package Manager”;

  2. It certainly helps us manage the toolkits we rely on (react, React – DOM, Axios, Babel, WebPack, etc.);

  3. The purpose of the author’s development is to solve the problem of “module management is bad”;

Contrast the Yarn and NPM commands

React scaffolding also uses YARN by default;

npm install -g yarn

Erection of scaffolding

Note: In China, in some cases, it may be impossible to install a library using NPM and YARN. In this case, CNPM can be used

npm install -g cnpm --registry=https://registry.npm.taobao.org

The last thing you need to install is the scaffolding to create the React project

npm install -g create-react-app

Create the React project

Create the React project using the following command:

Note: Project names cannot contain a capital P and there are more ways to create projects, see GitHub’s readme

Create-react-app project name

Once created, go to the corresponding directory and run the project:

cd 01-test-react 
 
 yarn start 
 
Copy the code

The scaffold

The React scaffolding hides webpack-related configurations from a script in package.json file: “eject”: “react-scripts eject”

Submit any changes to the code before exposure

Restore webpack

Webpack will automatically add the js suffix by default

The React scaffolding project is so large that it uses NPM Install to install dependencies during development

Modular management:

SRC custom js file should be exported first and then imported into index.js

Defluct defaults export on import time not to increase parenthesize export multiple use {}

Install the plugin: htmltagWrap code completion

Enter includeLanguages and click Settings. json

  • Add this code:
 "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }
Copy the code

Index.js this is the entry to webPack

React components are more flexible and diverse than Vue components and can be divided into many classes in different ways:

  1. Components can be divided into: Functional Component (Functional Component) and Class Component (Class Component).
  2. Components can be divided into Stateless components and Stateful components according to whether there are Stateful components to be maintained.

According to their different responsibilities, components can be divided into Presentational components and Container Components. There is a lot of overlap between these concepts, but most of all they focus on the separation of data logic and UI presentation:

  • Function components, stateless components, display components mainly focus on the display of UI;
  • Class components, stateful components, container components focus on data logic;
  • Of course, there are many other concepts of components: asynchronous components, higher-order components, etc., which we will learn later

The class component definition has the following requirements:

  1. Component names start with uppercase characters (whether class or function components)
  2. The class component needs to inherit from react.component
  3. The class component must implement the Render function

Define a component using class

  1. Constructor is optional, and we usually initialize some data in constructor;
  2. This. State maintains the data inside our component;
  3. The Render () method is the only one that must be implemented in the class component;

The return value of the Render function

When render is called, it checks for changes to this.props and this.state and returns one of the following types:

  1. The React elements:
Typically created through JSX. For example, <div /> is rendered as a DOM node by React, and <MyComponent /> is rendered as a custom component by React. Both <div /> and <MyComponent /> are React elements.Copy the code
  1. Arrays or fragments: Enable the Render method to return multiple elements.
  2. Portals: The ability to render child nodes into different DOM subtrees.
  3. String or numeric types: They are rendered as text nodes in the DOM
  4. Boolean or NULL: nothing is rendered.

React lifecycle

When we talk about the React lifecycle, we mainly talk about the class lifecycle, because functional components have no lifecycle functions; (We can emulate some lifecycle callbacks later using hooks)

  1. Implement componentDidMount () when the component is already mounted to the DOM.
  2. Implement the componentDidUpdate function: the component has been updated, the callback;
  3. Implement the componentWillUnmount function to call back when the component is about to be removed.

Less commonly used life cycles:

  • GetDerivedStateFromProps: The value of state is used when the props is dependent at all times; This method returns an object to update state;

  • GetSnapshotBeforeUpdate: A function that is called back before React updates the DOM to get information about the DOM before it is updated (such as the scrolling position)

In a class it’s usually called a method that has a binding called this that has no instance associated with it => method

Understand communication between components

React Developer Tools

React Developer Tools automatically detects the React component, but in webpack-dev-server mode, webpack automatically places the React component in the iframe. The workaround is that the webpack-dev-server configuration is inline mode.

Download address: www.crx4chrome.com/crx/3068/

Communicate context across components

Context related API:

React.createContext:

If a component subscribes to a Context, the component (Profile) reads the current Context value from the nearest matching Provider. DefaultValue indicates that the component did not find the corresponding Provider during the top-level lookup, so the defaultValue is used

Const UserContext = React. CreateContext ({nickname:' lumingQING ', level:1})Copy the code

Context.Provider

  • Each Context object returns a Provider React component that allows the consuming component to subscribe to changes to the Context:
  • The Provider receives a value property and passes it to the consuming component.
  • A Provider can be associated with multiple consumer components.
  • Multiple providers can also be nested. Data in the inner layer overwrites data in the outer layer.
  • When a Provider’s value changes, all its internal consumer components are rerendered;
ProfileHeader Export Default Class app extends Component {constructor(props) {super(props); this.state = { nickname:'lulu', level:'20' } } render() { return ( <div> <UserContext.Provider value = {this.state}> <Profile/> </UserContext.Provider> </div> ) } }Copy the code

Class.contextType :

  • The contextType property mounted on the class is reassigned to a Context object created by react.createcontext () :
  • This allows you to use this.context to consume the value of the most recent context;
  • You can access it in any lifecycle, including the render function;
ProfileHeader.contextType = UserContext;

Copy the code

Context.Consumer

  • Here, the React component can also subscribe to context changes. This allows you to subscribe to the context in a functional component.
  • Here we need function as child;
  • This function takes the current context and returns a React node;

Ps:

  • Tags in JSX are strictly required to be lowercase tags that begin with uppercase are considered components
  • The vsCode block react Component generates a plugin:ES7 React/Redux/GraphQL/React-Native snippets

SetState Source location

banbene

React version is 16.13.1

Version 2

Often see a few source folder

A sequel…