开始学习
React 快速入门
本文通过一系列的示例代码，带大家快速入门 React.js。为了更快达成目的并减少困扰，我们会直接引入 react 的 JS 文件，而不使用脚手架或其他工具。因此，你只需要准备一个编辑器和一个浏览器即可开始！
声明：本文示例参考 React Demos（阮一峰），并在此基础上做了一些调整和补充说明。
HTML 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Demo</title>
<!-- 加载 React。-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// Demo code
</script>
</body>
</html>
说明：
- 引入了 3 个必要的 js 文件，react.development.js 是 React 核心，必须在 react-dom.development.js 之前引入。
- babel 是 ES6+ 语法的编译器。
- React 示例代码放在
// Demo code位置。
示例 1：Render JSX
JSX 是 React 中使用的 JavaScript 扩展库，其目的是在 JavaScript 代码中直接书写 HTML 标签。ReactDOM 是 React 的浏览器 DOM 渲染器，调用 render() 方法时会创建一棵虚拟 DOM 树，并将 JSX 代码转换为 HTML，渲染到真实的 DOM 节点中。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);