<!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>Document</title>
</head>
<body>
<div id="app">
</div>
<!--react.development.js是react的核心库 要第一个引入-->
<script src="../js/react.development.js"></script><!-- 此时的页面上就多了一个React对象 -->
<!-- react-dom.development.js是react操作DOM的库 用于将虚拟DOM渲染到页面上-->
<script src="../js/react-dom.development.js"></script><!-- 此时的页面上就多了一个ReactDOM对象 -->
<!-- 用于将es6转es5 jsx转js -->
<script src="../js/babel.min.js"></script>
<!-- type="text/babel"一定要写 用于写jsx代码,并要求babel进行解析 -->
<script type="text/babel">
/* 创建虚拟DOM */
const VDOM = <h1>hello world</h1>;//jsx语法,不需要将html标签包裹起来
/* 渲染虚拟DOM到真实的页面 ReactDOM.render(虚拟DOM,html容器)==>渲染虚拟DOM到html容器中 */
ReactDOM.render(VDOM, document.getElementById("app"))
</script>
</body>
</html>
React-教程【001-初识React】
最新推荐文章于 2024-03-28 10:44:39 发布