React official documentation: JSX introduction, in-depth JSX section and Internet search, read it yourself, copy or summarize what you think you understand. Write for the first time, do not write well, only a small goal, keep writing.

Extended knowledge:

1, The difference between a statement and an expression (to be written)

React element

  • The react element is the smallest unit that makes up the React element. It is an object that makes up the virtual DOM. React relies on the React.DOM API to update the DOM to be consistent with these virtual DOM, and JSX is a SYNtactic EXTENSION of JS that generates react elements.
  • React elements can be custom tags<div />, can also be a user-defined component<Welcome name="sara" />.

3. Virtual DOM

  • The virtual DOM is a JS object corresponding to the real DOM. If the page structure changes, the virtual DOM will be updated. The real DOM of the page will be decided whether to update the real DOM by comparing the differences between the virtual DOM and the real DOM.

About the JSX:

What is JSX

  • React. CreateElement (Component, props,… Children) grammatical sugar.
  • Is a syntax extension of JS, including all JS functionality

Why use JSX

It can describe the HTML structure of the page very well, it is very convenient to write HTML code in JS, and has all the functions of JS.

JSX

  • JSX can have only one root element; The JSX tag must be closed and can be written as an autistic sum if there is no content<div />
  • You can embed JS expressions in JSX with {}.
  • JSX is converted by Babel into a function call to react. createElement, which creates a JS object with miaoshu HTML information.
    • Below, React reads these objects and uses them to build the DOM and keep it up to date. Note: This is a simplified structure. 
      const element = {
  type: 'h1'.props: {
    className: 'greeting'.children: 'Hello, world! '}};Copy the code
    • Because JSX eventually creates object structures, these objects are react elements. So you can assign JSX to a variable, and I understand you can use JSX like an object, for example in if and for loops, or you can use JSX as a function parameter or a function return value.
  • Child elements in JSX
    • String literals
    • JSX elements
    • A group of elements stored in an array
    • Js expressions (can be mixed with other types of child elements; Can be used to display lists of any length.
    • function
    • Boolean /null/undefined will be ignored. If the && operator is used, make sure the preceding value is a Boolean, and if it is 0 it will be rendered
  • Define the React component in object properties. You can use the React component using object’s dot syntax.

The React element type is specified

  • The react element is converted to call the react. createElement function. The argument is the component, so react and the component must be in scope.
  • React elements need to start with a capital letter, or assign elements to variables that start with a large or small letter; Lowercase letters will be considered HTML tags.
  • You cannot use an expression as the React element type. You need to assign it to a variable that starts with an uppercase letter before using it as a component.

Props in JSX

  • Js expressions as props; Statements cannot be props and can be used in code other than JSX
  • String props
  • If no value is assigned to props, the default is true
  • Property expansion, which can be used to pass all props, or to receive specific props and pass the rest of it to child components.