Example source code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <! -- Get the container ready -->
    <div id="test"></div>
    <div id="demo"></div>
    <! Import dependencies, import dependencies, must follow this step -->
    <script type="text/javascript" src=".. /js/react.development.js"></script>
    <script type="text/javascript" src=".. /js/react-dom.development.js"></script>
    <script type="text/javascript" src=".. /js/babel.min.js"></script>
    
    <! -- JSX syntax is parsed with Babel
    <script type="text/babel">
        Create a virtual DOM
        const VDOM = 
        <h1 id="title"><span>Hello</span></h1>  // No need to add ""
        // 2. Render. If there are multiple renders of the same container, the later ones will overwrite the previous ones
        ReactDOM.render(VDOM,document.getElementById("test"));

        const TDOM = document.getElementById('demo')
        console.log('virtual DOM',VDOM)
        console.log('real DOM',TDOM)
        debugger
    </script>
</body>
</html>
Copy the code

Virtual DOM

  1. Objects of type Object in nature (generic objects)
  2. The virtual DOM is lighter than the real DOM, because the virtual DOM is used internally by React and doesn’t require as many properties as the real DOM.

  1. React transforms the virtual DOM into a real DOM and renders it on the page