React——HelloReact实现<meta name="viewport" content="width=devi

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello_React</title>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test">
    </div>
    <!-- 引入React核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入React-dom 用于支持React操作DOM -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转换为js -->
    <script src="../js/babel.min.js"></script>  

    <script type="text/babel">  //此处一定要写babel
        // 创建虚拟DOM
        const VDOM = <h1>Hello,React!</h1>;
        // 渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'));
    </script>
</body>
</html>

实现效果

注意事项

React相关库文件的引入是有顺序的，要先引入react.development,然后是dom然后是babel.
赋值给虚拟DOM是不用加引号的。