1 start

Install YARN global add create-react-app Create create-react-app react-demo-1Copy the code

  • The React elements

    The return value of createElement can represent a div

    But Element isn’t really a div (DOM) object

    So we generally call element a virtual DOM object

  • () => React element

    Function that returns element, which can also represent a div

    This function can be executed multiple times to get the latest virtual div each time

    React will compare two virtual divs, find out the differences, and update the view locally

    Finding different algorithms is called the DOM Diff algorithm

2 use the JSX

  • Method 1: CDN

    The introduction of balel. Min. Js

    Change

    Does not support the SRC

  • Method 2: Use create-react-app

    Global installation

    yarn global add create-react-app
Copy the code

    Initialize a directory

    create-react-app react-demo-1
Copy the code

    Enter the directory

    cd react-demo-1
Copy the code

    To start developing

    yarn start
Copy the code

3 Precautions for using JSX

  • Note the className

  • All JS code in the insert variable tag should be wrapped with {}

  • Get used to return followed by ()

summary

  • The introduction of the React & ReactDOM

    • CDN: react.js, react-dom.js, and babel.js

    • Import React from ‘React’

  • React.createElement

    • Create a virtual DOM object
    • The DOM () function creates a virtual DOM object multiple times
    • DOM Diff

  • JSX

    • Translate the XML to React. CreateElement
    • Insert JS code with {}
    • Create-react-app treats JS as JSX by default
    • Conditional judgment loops are implemented using native JS