Review of the previous cases

<! 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>
</body>
<! Import dependencies, import dependencies, must follow this step -->
<script src=".. /js/react.development.js" type="text/javascript"></script>
<script src=".. /js/react-dom.development.js" type="text/javascript"></script>
<script src=".. /js/babel.min.js" type="text/javascript"></script>

<! -- JSX syntax is parsed with Babel
<script type="text/babel">
        Create a virtual DOM
        const VDOM = <h1>Hello</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"));
</script>
</html>
Copy the code

Why JSX

1. Two ways to create a virtual DOM

Js way

<! 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>
    <! 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/javascript">
        Create a virtual DOM
        // const VDOM = react. createElement(' Tag name ',' tag attribute ',' tag content ')
        const VDOM = React.createElement('h1', {id:'title'},'hello react')
        // Multilayer label
        const VDOM = React.createElement('h1', {id:'title'},React.createElement('span', {id:'title'},'hello react'))
        ReactDOM.render(VDOM,document.getElementById('test'))
        
    </script>
</body>
</html>
Copy the code

JSX way

<! 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>
    <! 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><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"));
    </script>
</body>
</html>
Copy the code

JSX is a syntactic sugar for native JS to create a virtual DOM. The structure of the DOM after Babel translation is the same as that of js to create a virtual DOM