开始学习
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')
);