Video learning address

1. Configure the development environment

Node -v Displays the node version

NPM install create-react-app -g Install create-react-app

Create-react-app my-project Creates the react project my-project

CD my-project under local project

Cat package.json View the file contents

NPM start starts a development server locally

Practical operation: refer to the official website

node -v 
npx create-react-app my-app
cd my-app
npm start
Copy the code

2, components,

The reactdom.render method mounts the written component to a DOM node

The custom Component needs to be capitalized so that JSX can identify whether you are an original HTML tag or a custom Component

The actual operation is as follows. ReactStricMode indicates strict mode. For details about strict mode, see the following table. An API used to detect stale context or exception lifecycle in code.

JSX, className equals class, htmlFor equals HTML

The JSX compiled by Babel is react. createElement

JSX is a syntactic sugar that replaces the reac.createElement () method and returns the ReactElement object

JSX code is replaced with Babel transformed code, and the results are the same after compiling and running

Therefore, the reactdom. render method is to render these reactelement and some complex objects to real DOM nodes through special algorithms, and finally render them on the page.

4

The Bootstrap usage adds styles

The react component’s props parameter is a pure function and cannot be modified. The input parameter is read-only.

Use a function to replace the class usage in the figure above

Properties props

Use the bootstrap style package (–save means only install in the current file, not global install)

1, NPM install the bootstrap -- save 2, in the index. In the js import 'bootstrap/dist/CSS/bootstrap. Min. CSS'; Introduces CSS installed under nodemoudles fileCopy the code

Reactelements add the key attribute to make React generate Visualdom more efficiently.

5. Change the state value

6. Life cycle

7. Clock components

Controlled components: Only form elements that react controls input are controlled components

React takes care of rendering the form components and still controls what happens when the user enters later.

SetState is asynchronous, so we need to get the new state in the setState callback function:

let str = this.state.strArr;
let strRes = str += e.target.innerText;
this.setState({
     strArr:strRes
 },()=>{
    console.log(this.state.strArr)
});
Copy the code

9. Uncontrolled components, using ref, store real data in the DOM

10. Composite components

React One-way data flow

  • Promote the state of the share to the nearest parent component for management

  • For any variable data, there is only one data source, and the top-down data flow is maintained, and the data is integrated where the data source is available

  • One-way data flow, which requires more template code, can be used to find and locate bugs faster by using callback functions

Props, Context

  • The props property is passed in one direction from top to bottom

  • Context provides a way to share such values among components

13. Use context to solve the complexity of passing values for props. However, if only one or two components pass values between them, try to use props instead of context.

14, context usage method

  1. SRC to create a context.js file
  2. Import the context.js file in app.js
  3. Wrap themecontxt. Provider around all tags that need to share values under app.js’s render and pass the value to the components
  4. Add context.js to the component and wrap it with the themecontxt. Consumer tag under render. The value of parent component state can be retrieved in the component