//React官方文档地址
1、入门
此页面是React文档和相关资源的概述。
React是一个用于构建用户界面的JavaScript库。在或了解React的全部内容。
试试React
React从一开始就被设计为逐步采用，您可以根据需要使用尽可能少的React。无论您是想体验React，为简单的HTML页面添加一些交互性，还是启动复杂的React驱动的应用程序，本节中的链接都将帮助您入门。
在线游乐场
如果您对使用React感兴趣，可以使用在线代码游乐场。在，或上尝试Hello World模板。
如果您更喜欢使用自己的文本编辑器，还可以，对其进行编辑，然后在浏览器中的本地文件系统中打开它。它执行缓慢的运行时代码转换，因此我们只建议将其用于简单的演示。
将React添加到网站
您可以。然后，您可以逐渐扩展其存在，或将其包含在一些动态小部件中。
创建一个新的React应用程序
启动React项目时，可能仍然是最佳选择。设置只需一分钟！
随着应用程序的增长，您可能需要考虑更集成的设置。有，我们建议对于较大的应用程序。它们中的每一个都可以在很少甚至没有配置的情况下工作，让您充分利用丰富的React生态系统。
学习反应
人们来自不同背景和不同学习方式的React。无论您是喜欢更理论还是实用的方法，我们希望您会发现本节很有帮助。
- 如果您喜欢边做边学，请从我们的开始。
- 如果您希望逐步学习概念，请从我们的开始。
像任何不熟悉的技术一样，React确实有学习曲线。通过练习和一些耐心，你将掌握它。
第一个例子
该包含与现场编辑的几个小例子作出反应。即使您对React一无所知，也请尝试更改其代码并查看它对结果的影响。
为初学者做出反应
如果您觉得React文档的速度比您所熟悉的要快，请查看。它以详细，初学者友好的方式介绍了最重要的React概念。完成后，再试一次文档！
对设计师的反应
如果您来自设计背景，是一个开始的好地方。
JavaScript资源
React文档假定您熟悉JavaScript语言中的编程。您不必是专家，但同时学习React和JavaScript更难。
我们建议您浏览以检查您的知识水平。这将花费你30分钟到一个小时，但你会更自信地学习React。
小费
每当你对JavaScript中的某些东西感到困惑时，和就是很棒的网站。还有，您可以在那里寻求帮助。
实用教程
如果您喜欢边做边学，请查看我们的。在本教程中，我们在React中构建了一个tic-tac-toe游戏。你可能想跳过它，因为你没有建立游戏 - 但给它一个机会。您将在本教程中学习的技术是构建任何 React应用程序的基础，掌握它将使您更深入地了解它。
循序渐进的指南
如果您希望逐步学习概念，我们的是最佳起点。它的每个下一章都建立在前面章节中介绍的知识之上，因此您不会错过任何内容。
在React中思考
许多React用户信用阅读中的作为React最终“点击”它们的时刻。它可能是最古老的React演练，但它仍然是相关的。
推荐课程
有时人们发现第三方书籍和视频课程比官方文档更有帮助。我们维护，其中一些是免费的。
高级概念
一旦您对感到满意并且使用React，您可能会对更高级的主题感兴趣。本节将向您介绍功能强大但不太常用的React功能，如和。
API参考
当您想要了解有关特定React API的更多详细信息时，本文档部分非常有用。例如，可以为您提供有关如何setState()工作以及哪些不同的生命周期方法有用的详细信息。
词汇表和常见问题
该包含你的阵营文档中看到的最常见术语的概述。还有一个FAQ部分专门针对常见主题的简短问题和答案，包括，和。
保持知情
该是从阵营队更新的官方消息。任何重要的内容，包括发行说明或弃用通知，都将首先发布在那里。
您也可以在Twitter上关注，但如果您只阅读博客，则不会错过任何必要的内容。
并不是每一个作出反应的释放值得自己的博客文章，但你可以找到每一个版本的详细更新日志，以及在页面。
版本化文档
本文档始终反映最新的稳定版React。从React 16开始，您可以在上找到旧版本的文档。请注意，过去版本的文档在发布时会快照，并且不会持续更新。
有什么遗失？
如果文档中缺少某些内容或者您发现某些内容令人困惑，请以及您的改进建议或推文。我们喜欢听到您的声音！
2、将React添加到网站
根据需要使用尽可能少的React。
React从一开始就被设计为逐步采用，您可以根据需要使用尽可能少的React。也许您只想在现有页面中添加一些“交互性”。React组件是一种很好的方法。
大多数网站不是，也不一定是单页应用。随着的几行代码，并没有构建工具，试图作出反应，你的网站的一小部分。然后，您可以逐渐扩展其存在，或将其包含在一些动态小部件中。
- (不需要捆绑！)
在一分钟内添加React
在本节中，我们将展示如何将React组件添加到现有HTML页面。您可以关注自己的网站，也可以创建一个空的HTML文件来练习。
没有复杂的工具或安装要求 - 要完成本节，您只需要一个互联网连接，一分钟的时间。
可选：
第1步：将DOM容器添加到HTML
首先，打开要编辑的HTML页面。添加一个空<div>标记以标记要用React显示内容的位置。例如：
我们给了它<div>一个独特的idHTML属性。这将允许我们稍后从JavaScript代码中找到它并在其中显示React组件。
小费
你可以把一个“容器”
<div>像这样的任何地方里面<body>的标签。您可以根据需要在一个页面上拥有尽可能多的独立DOM容器。它们通常是空的--React将替换DOM容器中的任何现有内容。
第2步：添加脚本标记
接下来，<script>在结束</body>标记之前的HTML页面中添加三个标记：
前两个标签加载React。第三个将加载您的组件代码。
第3步：创建一个React组件
创建一个like_button.js在HTML页面旁边调用的文件。
打开并将其粘贴到您创建的文件中。
小费
此代码定义了一个名为的React组件
LikeButton。如果您还不了解它，请不要担心 - 我们将在后面的和中介绍React的构建块。现在，让我们在屏幕上显示它！
在，在底部添加两行like_button.js：
// ... the starter code you pasted ...const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); 这两行代码找到<div>我们在第一步中添加到HTML中，然后在其中显示我们的“Like”按钮React组件。
而已！
没有第四步。您刚刚将第一个React组件添加到您的网站。
有关集成React的更多提示，请查看下一节。
提示：重用组件
通常，您可能希望在HTML页面上的多个位置显示React组件。这是一个显示“Like”按钮三次并将一些数据传递给它的示例：
注意
当策略的React驱动部分彼此隔离时，此策略最有用。在React代码中，更容易使用。
提示：缩小JavaScript以进行生产
在将网站部署到生产环境之前，请注意未经明细化的JavaScript可能会严重降低用户的网页速度。
如果您已经缩小了应用程序脚本，那么如果您确保部署的HTML加载以以下结尾的React版本，那么您的站点将处于生产就绪状态production.min.js：
如果您的脚本没有缩小步骤，。
可选：尝试使用JSX进行反应
在上面的示例中，我们仅依赖于浏览器本机支持的功能。这就是为什么我们使用JavaScript函数调用来告诉React要显示的内容：
const e = React.createElement;// Display a "Like" 但是，React还提供了使用的选项：
// Display a "Like" ); 这两个代码片段是等效的。虽然JSX是，但许多人发现它对编写UI代码很有帮助 - 无论是使用React还是使用其他库。
你可以使用玩JSX 。
快速尝试JSX
在您的项目中尝试JSX的最快方法是将此<script>标记添加到您的页面：
现在，您可以<script>通过向任何标记添加type="text/babel"属性来使用JSX 。这是，您可以下载和使用它。
这种方法适用于学习和创建简单的演示。但是，它会使您的网站变慢并且不适合制作。当您准备好前进时，请删除此新<script>标记以及type="text/babel"您添加的属性。相反，在下一节中，您将设置一个JSX预处理器来<script>自动转换所有标签。
将JSX添加到项目中
将JSX添加到项目不需要像捆绑器或开发服务器那样的复杂工具。从本质上讲，添加JSX 就像添加CSS预处理器一样。唯一的要求是在您的计算机上安装
转到终端中的项目文件夹，并粘贴以下两个命令：
- 第1步：运行
npm init -y(如果失败，) - 第2步：运行
npm install babel-cli@6 babel-preset-react-app@3
小费
我们这里只使用npm来安装JSX预处理器; 你不需要它做任何其他事情。React和应用程序代码都可以保留为
<script>标记而不进行任何更改。
恭喜！您刚刚为项目添加了生产就绪的JSX设置。
运行JSX预处理器
创建一个名为的文件夹src并运行此终端命令：
npx babel --watch src --out-dir . --presets react-app/prod 注意
npx这不是一个错字 - 它是一个。如果您看到错误消息“您错误地安装了
babel软件包”，则可能错过。在同一文件夹中执行，然后重试。
不要等待它完成 - 此命令启动JSX的自动观察程序。
如果您现在创建一个src/like_button.js使用此调用的文件，则观察程序like_button.js将使用适合浏览器的纯JavaScript代码创建预处理。使用JSX编辑源文件时，转换将自动重新运行。
作为奖励，这也允许您使用现代JavaScript语法功能，而不必担心破坏旧浏览器。我们刚刚使用的工具叫做Babel，你可以从了解更多。
如果您注意到您对构建工具感到满意并希望它们为您做更多工作，将介绍一些最受欢迎且最易于使用的工具链。如果没有 - 那些脚本标签会做得很好！
3、将React添加到网站
根据需要使用尽可能少的React。
React从一开始就被设计为逐步采用，您可以根据需要使用尽可能少的React。也许您只想在现有页面中添加一些“交互性”。React组件是一种很好的方法。
大多数网站不是，也不一定是单页应用。随着的几行代码，并没有构建工具，试图作出反应，你的网站的一小部分。然后，您可以逐渐扩展其存在，或将其包含在一些动态小部件中。
- (不需要捆绑！)
在一分钟内添加React
在本节中，我们将展示如何将React组件添加到现有HTML页面。您可以关注自己的网站，也可以创建一个空的HTML文件来练习。
没有复杂的工具或安装要求 - 要完成本节，您只需要一个互联网连接，一分钟的时间。
可选：
第1步：将DOM容器添加到HTML
首先，打开要编辑的HTML页面。添加一个空<div>标记以标记要用React显示内容的位置。例如：
我们给了它<div>一个独特的idHTML属性。这将允许我们稍后从JavaScript代码中找到它并在其中显示React组件。
小费
你可以把一个“容器”
<div>像这样的任何地方里面<body>的标签。您可以根据需要在一个页面上拥有尽可能多的独立DOM容器。它们通常是空的--React将替换DOM容器中的任何现有内容。
第2步：添加脚本标记
接下来，<script>在结束</body>标记之前的HTML页面中添加三个标记：
前两个标签加载React。第三个将加载您的组件代码。
第3步：创建一个React组件
创建一个like_button.js在HTML页面旁边调用的文件。
打开并将其粘贴到您创建的文件中。
小费
此代码定义了一个名为的React组件
LikeButton。如果您还不了解它，请不要担心 - 我们将在后面的和中介绍React的构建块。现在，让我们在屏幕上显示它！
在，在底部添加两行like_button.js：
// ... the starter code you pasted ...const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); 这两行代码找到<div>我们在第一步中添加到HTML中，然后在其中显示我们的“Like”按钮React组件。
而已！
没有第四步。您刚刚将第一个React组件添加到您的网站。
有关集成React的更多提示，请查看下一节。
提示：重用组件
通常，您可能希望在HTML页面上的多个位置显示React组件。这是一个显示“Like”按钮三次并将一些数据传递给它的示例：
注意
当策略的React驱动部分彼此隔离时，此策略最有用。在React代码中，更容易使用。
提示：缩小JavaScript以进行生产
在将网站部署到生产环境之前，请注意未经明细化的JavaScript可能会严重降低用户的网页速度。
如果您已经缩小了应用程序脚本，那么如果您确保部署的HTML加载以以下结尾的React版本，那么您的站点将处于生产就绪状态production.min.js：
如果您的脚本没有缩小步骤，。
可选：尝试使用JSX进行反应
在上面的示例中，我们仅依赖于浏览器本机支持的功能。这就是为什么我们使用JavaScript函数调用来告诉React要显示的内容：
const e = React.createElement;// Display a "Like" 但是，React还提供了使用的选项：
// Display a "Like" ); 这两个代码片段是等效的。虽然JSX是，但许多人发现它对编写UI代码很有帮助 - 无论是使用React还是使用其他库。
你可以使用玩JSX 。
快速尝试JSX
在您的项目中尝试JSX的最快方法是将此<script>标记添加到您的页面：
现在，您可以<script>通过向任何标记添加type="text/babel"属性来使用JSX 。这是，您可以下载和使用它。
这种方法适用于学习和创建简单的演示。但是，它会使您的网站变慢并且不适合制作。当您准备好前进时，请删除此新<script>标记以及type="text/babel"您添加的属性。相反，在下一节中，您将设置一个JSX预处理器来<script>自动转换所有标签。
将JSX添加到项目中
将JSX添加到项目不需要像捆绑器或开发服务器那样的复杂工具。从本质上讲，添加JSX 就像添加CSS预处理器一样。唯一的要求是在您的计算机上安装
转到终端中的项目文件夹，并粘贴以下两个命令：
- 第1步：运行
npm init -y(如果失败，) - 第2步：运行
npm install babel-cli@6 babel-preset-react-app@3
小费
我们这里只使用npm来安装JSX预处理器; 你不需要它做任何其他事情。React和应用程序代码都可以保留为
<script>标记而不进行任何更改。
恭喜！您刚刚为项目添加了生产就绪的JSX设置。
运行JSX预处理器
创建一个名为的文件夹src并运行此终端命令：
npx babel --watch src --out-dir . --presets react-app/prod 注意
npx这不是一个错字 - 它是一个。如果您看到错误消息“您错误地安装了
babel软件包”，则可能错过。在同一文件夹中执行，然后重试。
不要等待它完成 - 此命令启动JSX的自动观察程序。
如果您现在创建一个src/like_button.js使用此调用的文件，则观察程序like_button.js将使用适合浏览器的纯JavaScript代码创建预处理。使用JSX编辑源文件时，转换将自动重新运行。
作为奖励，这也允许您使用现代JavaScript语法功能，而不必担心破坏旧浏览器。我们刚刚使用的工具叫做Babel，你可以从了解更多。
如果您注意到您对构建工具感到满意并希望它们为您做更多工作，将介绍一些最受欢迎且最易于使用的工具链。如果没有 - 那些脚本标签会做得很好！
4、创一个新的React应用程序
创建一个新的React应用程序
使用集成的工具链可获得最佳用户和开发人员体验。
这个页面描述了一些流行的React工具链，它们可以帮助完成以下任务：
- 扩展到许多文件和组件。
- 使用npm的第三方库。
- 及早发现常见错误。
- 在开发中实时编辑CSS和JS。
- 优化生产输出。
此页面上推荐的工具链不需要配置即可开始使用。
你可能不需要工具链
如果您没有遇到上述问题或者还不习惯使用JavaScript工具，请考虑，可选择。
这也是将React集成到现有网站的最简单方法。如果您觉得有用，可以随时添加更大的工具链！
推荐的工具链
React团队主要推荐以下解决方案：
- 如果您正在学习React或创建新的应用程序，请使用。
- 如果你正在构建一个与Node.js的服务器渲染网页，尝试。
- 如果您正在构建一个面向静态内容的网站，请尝试。
- 如果您正在构建组件库或与现有代码库集成，请尝试。
创建React应用程序
是学习React的舒适环境，也是在React中开始构建新的应用程序的最佳方式。
它设置了您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验，并优化您的应用程序以进行生产。您需要在计算机上安装Node> = 8.10和npm> = 5.6。要创建项目，请运行：
npx create-react-app my-appcd my-appnpm start 注意
npx在第一行不是一个错字 - 它是一个。
创建React App不处理后端逻辑或数据库; 它只是创建一个前端构建管道，因此您可以将它与任何您想要的后端一起使用。在引擎盖下，它使用和，但你不需要了解它们。
当您准备部署到生产环境时，运行npm run build将在build文件夹中创建应用程序的优化版本。您可以和了解有关创建React应用程序的更多信息。
Next.js
是一个流行的轻量级框架，用于使用React 构建的静态和服务器呈现的应用程序。它包括开箱即用的样式和路由解决方案，并假设您使用作为服务器环境。
从了解Next.js 。
盖茨比
是使用React 创建静态网站的最佳方式。它允许您使用React组件，但输出预渲染的HTML和CSS以确保最快的加载时间。
从和学习盖茨比。
更灵活的工具链
以下工具链提供更多灵活性和选择。我们向更有经验的用户推荐他们：
-
将的强大与预设的简单结合，并包含和的预设。
-
特别适合。它创建React应用程序。
-
是一个快速，零配置的Web应用程序捆绑器，。
-
是一个服务器渲染框架，不需要任何配置，但提供比Next.js更多的灵活性。
从Scratch创建工具链
JavaScript构建工具链通常包括：
-
甲包管理器，如或。它可以让您利用庞大的第三方软件包生态系统，轻松安装或更新它们。
-
甲捆绑，如或。它允许您编写模块化代码并将其捆绑到小包中以优化加载时间。
-
像这样的编译器。它允许您编写仍可在旧版浏览器中使用的现代JavaScript代码。
如果您希望从头开始设置自己的JavaScript工具链，，重新创建一些Create React App功能。
不要忘记确保您的自定义工具链。
5、CDN链接
React和ReactDOM都可通过CDN获得。
上述版本仅用于开发，不适合生产。React的缩小和优化生产版本可在以下位置获得：
要加载特定版本的react和react-dom，请替换16为版本号。
为什么crossorigin属性？
如果您从CDN提供React，我们建议您保留属性集：
我们还建议验证您使用的CDN是否设置了Access-Control-Allow-Origin: *HTTP标头：
这样可以在React 16及更高版本中实现更好的。