什么是 React？
React 是由 Facebook 创建的 JavaScript 库。
React 是一个 用户界面 (UI) 库。
React 是一个用于构建 UI 组件 的工具。
React 快速入门教程
这是一个快速入门教程。
在开始之前，您应该对以下内容有基本的了解：
查看完整教程
前往我们的 React 教程 ❯将 React 添加到 HTML 页面
本快速入门教程将像这样将 React 添加到一个页面中：
示例
<!DOCTYPE html>
<html lang="en">
<title>测试 React</title>
<!-- 加载 React API -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- 加载 React DOM-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- 加载 Babel 编译器 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel 代码在此处
</script>
</body>
</html>
什么是 Babel？
Babel 是一个 JavaScript 编译器，可以将标记或编程语言翻译成 JavaScript。
使用 Babel，您可以使用 JavaScript 的最新功能 (ES6 - ECMAScript 2015)。
Babel 可用于不同的转换。React 使用 Babel 将 JSX 转换为 JavaScript。
请注意，使用 Babel 需要 <script type="text/babel">。
什么是 JSX？
JSX 代表 JavaScript XML。
JSX 是 JavaScript 的 XML/HTML 类似扩展。
示例
const element = <h1>Hello World!</h1>
如您所见，JSX 既不是 JavaScript 也不是 HTML。
JSX 是 JavaScript 的 XML 语法扩展，同时具备 ES6 (ECMAScript 2015) 的全部功能。
就像 HTML 一样，JSX 标签可以有标签名、属性和子元素。如果属性用大括号括起来，则该值是一个 JavaScript 表达式。
请注意，JSX 在 HTML 文本字符串周围不使用引号。
React DOM 渲染
ReactDOM.render() 方法用于渲染（显示）HTML 元素
示例
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX 表达式
通过用花括号 {} 包裹，可以在 JSX 中使用表达式。
示例
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
React 元素
React 应用程序通常围绕单个 HTML 元素 构建。
React 开发者通常称之为 根节点（根元素）
<div id="root"></div>
React 元素 看起来像这样：
const element = <h1>Hello React!</h1>
元素通过 ReactDOM.render() 方法进行 渲染（显示）
ReactDOM.render(element, document.getElementById('root'));
React 元素是 不可变的。它们不能被改变。
改变 React 元素的唯一方法是每次都渲染一个新的元素
示例
function tick() {
const element = (<h1>{new Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
React 组件
React 组件是 JavaScript 函数。
此示例创建了一个名为“Welcome”的 React 组件
示例
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React 也可以使用 ES6 类来创建组件。
此示例创建了一个名为 Welcome 的 React 组件，带有一个 render 方法
示例
class Welcome extends React.Component {
render() { return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React 组件属性
此示例创建了一个名为“Welcome”的 React 组件，带有属性参数
示例
function Welcome(props) {
return <h1>Hello {props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));
React 也可以使用 ES6 类来创建组件。
此示例还创建了一个名为“Welcome”的 React 组件，带有属性参数
示例
class Welcome extends React.Component {
render() { return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));
JSX 编译器
此页面上的示例在浏览器中编译 JSX。
对于生产代码，编译应单独完成。
创建 React 应用程序
Facebook 创建了一个 Create React Application，其中包含构建 React 应用程序所需的一切。
它是一个开发服务器，使用 Webpack 编译 React、JSX 和 ES6，并自动添加 CSS 文件前缀。
Create React App 使用 ESLint 来测试并警告代码中的错误。
要创建 Create React App，请在您的终端上运行以下代码：
示例
npx create-react-app react-tutorial
确保您已安装 Node.js 5.2 或更高版本。否则，您必须安装 npx
示例
npm i npx
从您希望应用程序所在的文件夹向上移动一个文件夹
示例
C:\Users\myUser>npx create-react-app react-tutorial
成功结果
npx: 在 10.359s 内安装了 63 个包
在 C:\Users\myUser\react-tutorial 中创建一个新的 React 应用程序。
正在安装软件包。这可能需要几分钟。
正在安装 react、react-dom 和 react-scripts...
+ react-dom@16.5.2
+ react@16.5.2
+ react-scripts@2.0.4
从 664 个贡献者添加了 1732 个包，并在 355.501s 内审计了 31900 个包
发现 0 个漏洞+ react@16.5.2
成功！在 C:\Users\myUser\react-tutorial 创建了 react-tutorial
在该目录中，您可以运行几个命令
npm start
启动开发服务器。
npm run build
将应用程序打包成静态文件以供生产。
npm test
启动测试运行程序。
npm run eject
移除此工具并将构建依赖项、配置文件
和脚本复制到应用程序目录。如果您执行此操作，则无法撤销！
我们建议您首先输入：
cd react-tutorial
npm start
