手机也能上课
1/6
初学者模板
使用 React 开发网页时，我们需要使用到 React 提供的两个 JavaScript 包，分别是 react.js 和 react-dom.js：
- react.js：提供 React 的顶级 API，是 React 的核心库，其核心思想是虚拟DOM（Virtual DOM）；
- react-dom.js：提供针对 DOM 操作的相关 API；
值得注意的是：react-dom.js 是基于 react.js 的，因此页面中需要保证 react.js 先加载！
另外，React 推荐开发者使用特殊的 JSX 语法来编写 UI 代码，对于初学者来讲，尝试 JSX 最快的方法是在页面中引入 babel-standalone.js 包。将以上 JavaScript 包整合在一起，可得到以下这个初学者页面模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React 的初学者模板</title>
</head>
<body>
<script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/7.0.0-beta.3/babel.js"></script>
<script type="text/babel">
// 可以在这个 script 标签里使用 JSX 语法
</script>
</body>
</html>说明：模板中引入的 JavaScript 文件均来自 Staticfile CDN 提供的在线文件，你可以将它们下载到本地使用，当然，它们也支持 npm 下载，前提是你的系统支持 Node.js。
为什么说上述模板是初学者模板呢？
- 模板中引入的是 React 提供的 development版本，它包含了完整的警告和调试模式，有助于初学者从一开始就遵循 React 约定好的开发规范；
- 细心的小伙伴可能已经发现了，模板中的最后一个 script 标签指定了 type 属性为 text/babel，这是因为 React 推荐使用的 JSX 语法无法被浏览器内置的 JavaScript 引擎解析，需要使用 Babel 对其进行预编译，所以凡是使用了 JSX 语法的 script 标签都要加上 type = "text/babel"。
与以上两点相对应，你需要了解的是：
- React 提供的 development 版本仅适用于开发环境，不适合生产环境，也就是说，在项目上线时，需要使用压缩优化后的 production.min.js版本；
- 通过引入 babel-standalone.js 来编译 JSX 效率是非常低的，因为基于这种方式的编译过程完全运行在浏览器端，浏览器不仅要加载 babelstandalone.js 文件，还要借助此文件去编译 JSX，整个过程会比较耗时。所以在实际开发中，我们会在项目上线前先将 JSX 代码编译为 JS 代码，减轻浏览器的负担，从而提高用户体验！