1，简单使用
react 的使用，需要2个库
- 核心库
react.js，与宿主环境无关。 - 核心依赖库
react-dom.js，将核心的功能和页面结合。
举例：
<body>
<div id="root"></div>
<!-- 核心库 -->
<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>
const span = React.createElement('span', {}, '一个span元素')
const h1 = React.createElement('h1',
{
title: '第一个React元素'
},
'Hello',
'World',
span
)
ReactDOM.render(h1, document.getElementById('root'))
</script>
</body>
1.3，React.createElement
用于创建 React 元素，也就是虚拟DOM，本质上是一个 js 对象。
- 参数1，元素的类型，如果是字符串则表示一个普通的HTML元素。
- 参数2，元素的属性，一个对象。
- 后续其他参数（字符串或React元素），都作为元素的子节点。
1.2，ReactDOM.render
将 React 元素渲染为真实的 DOM。
1.3，crossorigin
参考，部分 html 元素可以使用该属性。
对 script 元素来说，如果不加，则对跨域资源来说，错误日志 window.onerror 的访问将会被限制。
换句话说，对跨域获取的 js 资源，控制暴露出其报错的详细信息。
2，使用 JSX
是 React 发明的对 js 语法的扩展，目的是在 js 中更好的使用 html。
JSX 需要转义后才能被正确解析，比如使用 babel 转义：
举例：
<body>
<div id="root"></div>
<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">
const h1 = (
<h1 title="第一个React元素">
Hello World <span>一个span元素</span>
</h1>
)
console.log(h1)
// jsx 语法会被 babel 编译为 React.createElement() 语法
ReactDOM.render(h1, document.getElementById('root'))
</script>
</body>
text/babel
script 标签的 type 属性，默认是空字符串或一个 JavaScript MIME 类型（参考）。如果不在 JavaScript MIME 中，则所嵌入的内容被视为一个数据块，不会被浏览器处理。
而 text/babel 用来标记被 babel 处理。
3，使用脚手架
create-react-app ，内部使用 webpack 打包。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello World <span>span元素</span></h1>, document.getElementById('root'));
为什么要引入 React 依赖，jsx 语法会被 babel 编译为 React.createElement() 语法。
所以，所有使用 jsx 语法的 js 文件，都需要导入
React依赖。
以上。