react学习(2)

简介: react学习(2)

知识点
1:babel.js的作用:ES6=>ES5,jsx=>js
2:小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>
    <!--引入react核心库-->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!--引入react-dom,用于支持react操作dom-->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <!-- 此处一定要写babel -->
    <script type="text/babel">
        // 创建虚拟dom,注意不要写引号
        const VDOM =<h1>hello,react</h1>
        // 将虚拟dom渲染到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>
相关文章
|
6天前
|
JavaScript 前端开发
react学习(3)创建虚拟dom的两种方式
react学习(3)创建虚拟dom的两种方式
145 66
|
6天前
|
前端开发 JavaScript 算法
react学习(1)
react学习(1)
117 66
|
6天前
|
前端开发 JavaScript
react学习(5)
react学习(5)
163 59
|
21天前
|
JSON 前端开发 JavaScript
|
4天前
|
前端开发 JavaScript 中间件
react学习(11)
react学习(11)
|
1天前
|
前端开发 JavaScript
react学习(13)props
react学习(13)props
|
4天前
|
前端开发 JavaScript
react学习(10)
react学习(10)
|
5天前
|
前端开发 JavaScript
react学习(8)
react学习(8)
|
5天前
|
前端开发
react学习(7)
react学习(7)
86 45
|
6天前
|
前端开发
react学习(6)
react学习(6)

热门文章

最新文章