单页面中使用React
- 在单页面中使用React需要引入三个js：React的核心库、依赖核心库、babel（编译JSX）
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
1、React.createElement
- React.createElement用来创建一个React元素，称作虚拟DOM，本质上是一个对象
- 参数1：元素类型，如果是字符串，一个普通的HTML元素
- 参数2：元素的属性，一个对象
- 后续参数：元素的子节点
创建一个span元素
var span = React.createElement("span", {}, "一个span元素");
2、ReactDom.render
- 参数1: jsx
- 参数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>Document</title>
</head>
<body>
<div id="root"></div>
<!-- React的核心库，与宿主环境无关 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 依赖核心库，将核心的功能和页面结合 -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 编译JSX -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
var h1 = <h1 title="第一个React元素">Hello World</h1>
ReactDOM.render(h1, document.getElementById("root"));
</script>
</body>
</html>