Introduction to React component learning tutorial

Modular

Module

Understanding: A js program that provides specific functions to the outside is generally a js file.

Why: We need to split it into modules, as business logic increases, the code becomes more and more complex.

Function: Reuse js, simplify the writing of js, and improve the operation efficiency of js.

Modular

When the application's js are written in modules, this application is a modular application

Componentization

Components

Understanding: a collection of code and resources used to achieve local functional effects (html/css/js/img, etc.)

Why: Use components, the functions of an interface are complex

Function: multiplexing coding, simplifying project coding, and improving operational efficiency

Componentization

When an application is implemented in a multi-component manner, this application is a componentized application

Functional Components

Essence: A React application is built on React components.

Function Component: This function is a valid React component because it receives a unique "props" object with data and returns a React element. This type of component is called "function components" because it is essentially a JavaScript function.

Create function components

function HelloPerson(){
 return <h1>Hello，I'm a functional component!</h1>;
 
}
(<HelloPerson/>,('root'));

Description: parsed the component tag HelloPerson, found that the component is defined by a function, call the function and convert the returned virtual DOM into a real DOM, and then rendered on the page.

Props parameter transfer (key point)

function HelloPerson(person){
      (this);// Here undefined babel adopts strict mode after compilation  return (
  <ul>
  <li>Name：{}</li>
  <li>age：{}</li>
  </ul>
  )
 }
(<HelloPerson name='Zhang San' age={18}/>,('root'));

Composite function components

 function GetName(props){
 return <li>Name：{}</li>
 }
 function GetAge(props){
 return <li>age：{}</li>
 }
function HelloPerson(person){
 return (
 <ul>
 <GetName name={}/>
 <GetAge age={}/>
 </ul>
  )
  }
(<HelloPerson name='Zhang San' age={18}/>,('root'));

Type Components

ES6 class defines components through inheritance. The analysis process is as follows:

React parses the component tag and finds the MyComponent component.

It is discovered that the component is defined using a class, and then new the instance of the class and call the render method on the prototype through the instance.

The virtual DOM returned by render is converted to a real DOM and then rendered on the page.

Create an instance

//Create class components 1: Inherit the Component class in react 2: Need renderclass Person extends {
 render(){
 return (
     <h1>Hello，I'm a class component！</h1>
 )
 }
}
(<Person/>,("root"));

User-defined components

const element = <Person/>
(element,("root"));

This is the end of this article about the introduction to React component learning tutorial. For more related React componentization content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!