React 的基本使用

引入 babel.min.js ，它可以 将 ES6 转换为 ES5，也可以将 JSX 转为 JS。（react 是 jsx ，浏览器不识别，所以需要 babel.min.js 转为 js） 

react.development.js 和 react-dom.development.js 在官网下载，加载有先后顺序（后加载dom文件）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>hellow react</title>
    </head>
    <body>
        <!-- 准备好一个“容器” -->
        <div id="test"></div>
        <!-- 引入 react 核心库 -->
        <script src="../js/react.development.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入 react-dom,用于支持 react 操作 DOM -->
        <script src="../js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入 beble,用于将 jsx 转为 js -->
        <script src="../js/babel.min.js" type="text/javascript" charset="utf-8"></script>
    
        <script type="text/babel">    /* 此处一定要写 bable */
            //1.创建虚拟DOM
            const VDOM = <h1>Hello,React</h1>    /*此处一定不要写引号,因为不是字符串*/
            //2.渲染虚拟DOM到页面
            //ReactDOM.render('虚拟DOM','真实DOM')
            ReactDOM.render(VDOM,document.getElementById('test'))
        </script>
    </body>
</html>

 

posted @ 2021-11-27 16:11  Akstar  阅读(70)  评论(0)    收藏  举报