An 🌰

<! 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>
    <div id="test"></div>

    <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>
    
    <script type="text/babel">
        // 1. Create a class component
        class Demo extends React.Component{
            render(){
                // render where? The Render method is placed on the prototype object of the class (Demo) for instance use
                // Who is this in render? Demo instance object /Demo component instance object
                return <h2>I'm a class component.</h2>}}// Render the component to the page
        ReactDOM.render(<Demo/>.document.getElementById('test'))

        // What happens after reactdom.render is executed
        // 1. React parses the 㢟 tag and finds the Demo component
        // 2. Discover that the component is defined using a class, then new the instance of that class, and call the method on the prototype through that instance
        // 3. Render the virtual DOM of fan Hu into a real DOM and then render it on the page
    </script>

</body>
</html>
Copy the code

What happens after ReactDOM is executed

  1. React parses the 㢟 tag and finds the Demo component
  2. Discover that a component is defined using a class, then new an instance of that class and invoke methods on the prototype through that instance
  3. Render fan Hu’s virtual DOM into a real DOM and render it on the page