react学习（2）
2022-08-05 本文已影响0人
哆啦C梦的百宝箱
知识点
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>
