React官方中文文档【安装】

最新推荐文章于 2024-06-25 22:33:42 发布

知青先生

最新推荐文章于 2024-06-25 22:33:42 发布

阅读量1.1k

点赞数 1

文章标签：大数据编程语言 html python linux

浩明

本文链接：https://blog.csdn.net/YHM_MM/article/details/109734192

版权

https://reactjs.org/docs/getting-started.html //React官方文档地址

1、入门

此页面是React文档和相关资源的概述。

React是一个用于构建用户界面的JavaScript库。在我们的主页或教程中了解React的全部内容。

试试React

React从一开始就被设计为逐步采用，您可以根据需要使用尽可能少的React。无论您是想体验React，为简单的HTML页面添加一些交互性，还是启动复杂的React驱动的应用程序，本节中的链接都将帮助您入门。

在线游乐场

如果您对使用React感兴趣，可以使用在线代码游乐场。在CodePen，CodeSandbox或Glitch上尝试Hello World模板。

如果您更喜欢使用自己的文本编辑器，还可以下载此HTML文件，对其进行编辑，然后在浏览器中的本地文件系统中打开它。它执行缓慢的运行时代码转换，因此我们只建议将其用于简单的演示。

将React添加到网站

您可以在一分钟内将React添加到HTML页面。然后，您可以逐渐扩展其存在，或将其包含在一些动态小部件中。

创建一个新的React应用程序

启动React项目时，带有脚本标记的简单HTML页面可能仍然是最佳选择。设置只需一分钟！

随着应用程序的增长，您可能需要考虑更集成的设置。有几个JavaScript的工具链，我们建议对于较大的应用程序。它们中的每一个都可以在很少甚至没有配置的情况下工作，让您充分利用丰富的React生态系统。

学习反应

人们来自不同背景和不同学习方式的React。无论您是喜欢更理论还是实用的方法，我们希望您会发现本节很有帮助。

如果您喜欢边做边学，请从我们的实用教程开始。
如果您希望逐步学习概念，请从我们的主要概念指南开始。

像任何不熟悉的技术一样，React确实有学习曲线。通过练习和一些耐心，你将掌握它。

第一个例子

该阵营的主页包含与现场编辑的几个小例子作出反应。即使您对React一无所知，也请尝试更改其代码并查看它对结果的影响。

为初学者做出反应

如果您觉得React文档的速度比您所熟悉的要快，请查看Tania Rascia对React的概述。它以详细，初学者友好的方式介绍了最重要的React概念。完成后，再试一次文档！

对设计师的反应

如果您来自设计背景，这些资源是一个开始的好地方。

JavaScript资源

React文档假定您熟悉JavaScript语言中的编程。您不必是专家，但同时学习React和JavaScript更难。

我们建议您浏览此JavaScript概述以检查您的知识水平。这将花费你30分钟到一个小时，但你会更自信地学习React。

小费

每当你对JavaScript中的某些东西感到困惑时，MDN和javascript.info就是很棒的网站。还有社区支持论坛，您可以在那里寻求帮助。

实用教程

如果您喜欢边做边学，请查看我们的实用教程。在本教程中，我们在React中构建了一个tic-tac-toe游戏。你可能想跳过它，因为你没有建立游戏 - 但给它一个机会。您将在本教程中学习的技术是构建任何 React应用程序的基础，掌握它将使您更深入地了解它。

循序渐进的指南

如果您希望逐步学习概念，我们的主要概念指南是最佳起点。它的每个下一章都建立在前面章节中介绍的知识之上，因此您不会错过任何内容。

在React中思考

许多React用户信用阅读React中的思考作为React最终“点击”它们的时刻。它可能是最古老的React演练，但它仍然是相关的。

高级概念

一旦您对主要概念感到满意并且使用React，您可能会对更高级的主题感兴趣。本节将向您介绍功能强大但不太常用的React功能，如context和refs。

API参考

当您想要了解有关特定React API的更多详细信息时，本文档部分非常有用。例如，React.ComponentAPI参考可以为您提供有关如何setState()工作以及哪些不同的生命周期方法有用的详细信息。

词汇表和常见问题

该词汇表包含你的阵营文档中看到的最常见术语的概述。还有一个FAQ部分专门针对常见主题的简短问题和答案，包括制作AJAX请求，组件状态和文件结构。

保持知情

该阵营博客是从阵营队更新的官方消息。任何重要的内容，包括发行说明或弃用通知，都将首先发布在那里。

您也可以在Twitter上关注@reactjs帐户，但如果您只阅读博客，则不会错过任何必要的内容。

并不是每一个作出反应的释放值得自己的博客文章，但你可以找到每一个版本的详细更新日志中CHANGELOG.md的文件的存储库做出反应，以及在发布页面。

版本化文档

本文档始终反映最新的稳定版React。从React 16开始，您可以在单独的页面上找到旧版本的文档。请注意，过去版本的文档在发布时会快照，并且不会持续更新。

有什么遗失？

如果文档中缺少某些内容或者您发现某些内容令人困惑，请提交文档存储库的问题以及您的改进建议或@reactjs帐户的推文。我们喜欢听到您的声音！

2、将React添加到网站

根据需要使用尽可能少的React。

React从一开始就被设计为逐步采用，您可以根据需要使用尽可能少的React。也许您只想在现有页面中添加一些“交互性”。React组件是一种很好的方法。

大多数网站不是，也不一定是单页应用。随着的几行代码，并没有构建工具，试图作出反应，你的网站的一小部分。然后，您可以逐渐扩展其存在，或将其包含在一些动态小部件中。

在一分钟内添加React
可选：尝试使用JSX进行反应(不需要捆绑！)

在一分钟内添加React

在本节中，我们将展示如何将React组件添加到现有HTML页面。您可以关注自己的网站，也可以创建一个空的HTML文件来练习。

没有复杂的工具或安装要求 - 要完成本节，您只需要一个互联网连接，一分钟的时间。

可选：下载完整示例(2KB压缩)

第1步：将DOM容器添加到HTML

首先，打开要编辑的HTML页面。添加一个空<div>标记以标记要用React显示内容的位置。例如：

<!-- ... existing HTML ... -->

<div id="like_button_container"></div> <!-- ... existing HTML ... -->

我们给了它<div>一个独特的idHTML属性。这将允许我们稍后从JavaScript代码中找到它并在其中显示React组件。

小费

你可以把一个“容器” <div>像这样的任何地方里面<body>的标签。您可以根据需要在一个页面上拥有尽可能多的独立DOM容器。它们通常是空的--React将替换DOM容器中的任何现有内容。

第2步：添加脚本标记

接下来，<script>在结束</body>标记之前的HTML页面中添加三个标记：

<!-- ... other HTML ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- Load our React component. -->  <script src="like_button.js"></script> </body>

前两个标签加载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的更多提示，请查看下一节。

查看完整的示例源代码

下载完整示例(2KB压缩)

提示：重用组件

通常，您可能希望在HTML页面上的多个位置显示React组件。这是一个显示“Like”按钮三次并将一些数据传递给它的示例：

查看完整的示例源代码

下载完整示例(2KB压缩)

注意

当策略的React驱动部分彼此隔离时，此策略最有用。在React代码中，更容易使用组件组合。

提示：缩小JavaScript以进行生产

在将网站部署到生产环境之前，请注意未经明细化的JavaScript可能会严重降低用户的网页速度。

如果您已经缩小了应用程序脚本，那么如果您确保部署的HTML加载以以下结尾的React版本，那么您的站点将处于生产就绪状态production.min.js：

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

如果您的脚本没有缩小步骤，这是设置它的一种方法。

可选：尝试使用JSX进行反应

在上面的示例中，我们仅依赖于浏览器本机支持的功能。这就是为什么我们使用JavaScript函数调用来告诉React要显示的内容：

const e = React.createElement;

// Display a "Like" <button> return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' );

但是，React还提供了使用JSX的选项：

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}> Like </button> );

这两个代码片段是等效的。虽然JSX是完全可选的，但许多人发现它对编写UI代码很有帮助 - 无论是使用React还是使用其他库。

你可以使用这个在线转换器玩JSX 。

快速尝试JSX

在您的项目中尝试JSX的最快方法是将此<script>标记添加到您的页面：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在，您可以<script>通过向任何标记添加type="text/babel"属性来使用JSX 。这是一个带有JSX的示例HTML文件，您可以下载和使用它。

这种方法适用于学习和创建简单的演示。但是，它会使您的网站变慢并且不适合制作。当您准备好前进时，请删除此新<script>标记以及type="text/babel"您添加的属性。相反，在下一节中，您将设置一个JSX预处理器来<script>自动转换所有标签。

将JSX添加到项目中

将JSX添加到项目不需要像捆绑器或开发服务器那样的复杂工具。从本质上讲，添加JSX 就像添加CSS预处理器一样。唯一的要求是在您的计算机上安装Node.js.

转到终端中的项目文件夹，并粘贴以下两个命令：

第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这不是一个错字 - 它是一个包转发工具，附带npm 5.2+。

如果您看到错误消息“您错误地安装了babel软件包”，则可能错过了上一步。在同一文件夹中执行，然后重试。

不要等待它完成 - 此命令启动JSX的自动观察程序。

如果您现在创建一个src/like_button.js使用此JSX入门代码调用的文件，则观察程序like_button.js将使用适合浏览器的纯JavaScript代码创建预处理。使用JSX编辑源文件时，转换将自动重新运行。

作为奖励，这也允许您使用现代JavaScript语法功能，而不必担心破坏旧浏览器。我们刚刚使用的工具叫做Babel，你可以从它的文档中了解更多。

如果您注意到您对构建工具感到满意并希望它们为您做更多工作，那么下一节将介绍一些最受欢迎且最易于使用的工具链。如果没有 - 那些脚本标签会做得很好！

3、将React添加到网站

根据需要使用尽可能少的React。

React从一开始就被设计为逐步采用，您可以根据需要使用尽可能少的React。也许您只想在现有页面中添加一些“交互性”。React组件是一种很好的方法。

在一分钟内添加React
可选：尝试使用JSX进行反应(不需要捆绑！)

在一分钟内添加React

在本节中，我们将展示如何将React组件添加到现有HTML页面。您可以关注自己的网站，也可以创建一个空的HTML文件来练习。

没有复杂的工具或安装要求 - 要完成本节，您只需要一个互联网连接，一分钟的时间。

可选：下载完整示例(2KB压缩)

第1步：将DOM容器添加到HTML

首先，打开要编辑的HTML页面。添加一个空<div>标记以标记要用React显示内容的位置。例如：

<!-- ... existing HTML ... -->

<div id="like_button_container"></div> <!-- ... existing HTML ... -->

我们给了它<div>一个独特的idHTML属性。这将允许我们稍后从JavaScript代码中找到它并在其中显示React组件。

小费

你可以把一个“容器” <div>像这样的任何地方里面<body>的标签。您可以根据需要在一个页面上拥有尽可能多的独立DOM容器。它们通常是空的--React将替换DOM容器中的任何现有内容。

第2步：添加脚本标记

接下来，<script>在结束</body>标记之前的HTML页面中添加三个标记：

<!-- ... other HTML ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- Load our React component. -->  <script src="like_button.js"></script> </body>

前两个标签加载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的更多提示，请查看下一节。

查看完整的示例源代码

下载完整示例(2KB压缩)

提示：重用组件

通常，您可能希望在HTML页面上的多个位置显示React组件。这是一个显示“Like”按钮三次并将一些数据传递给它的示例：

查看完整的示例源代码

下载完整示例(2KB压缩)

注意

当策略的React驱动部分彼此隔离时，此策略最有用。在React代码中，更容易使用组件组合。

提示：缩小JavaScript以进行生产

在将网站部署到生产环境之前，请注意未经明细化的JavaScript可能会严重降低用户的网页速度。

如果您已经缩小了应用程序脚本，那么如果您确保部署的HTML加载以以下结尾的React版本，那么您的站点将处于生产就绪状态production.min.js：

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

如果您的脚本没有缩小步骤，这是设置它的一种方法。

可选：尝试使用JSX进行反应

在上面的示例中，我们仅依赖于浏览器本机支持的功能。这就是为什么我们使用JavaScript函数调用来告诉React要显示的内容：

const e = React.createElement;

// Display a "Like" <button> return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' );

但是，React还提供了使用JSX的选项：

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}> Like </button> );

这两个代码片段是等效的。虽然JSX是完全可选的，但许多人发现它对编写UI代码很有帮助 - 无论是使用React还是使用其他库。

你可以使用这个在线转换器玩JSX 。

快速尝试JSX

在您的项目中尝试JSX的最快方法是将此<script>标记添加到您的页面：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在，您可以<script>通过向任何标记添加type="text/babel"属性来使用JSX 。这是一个带有JSX的示例HTML文件，您可以下载和使用它。

将JSX添加到项目中

转到终端中的项目文件夹，并粘贴以下两个命令：

第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这不是一个错字 - 它是一个包转发工具，附带npm 5.2+。

如果您看到错误消息“您错误地安装了babel软件包”，则可能错过了上一步。在同一文件夹中执行，然后重试。

不要等待它完成 - 此命令启动JSX的自动观察程序。

作为奖励，这也允许您使用现代JavaScript语法功能，而不必担心破坏旧浏览器。我们刚刚使用的工具叫做Babel，你可以从它的文档中了解更多。

4、创一个新的React应用程序

创建一个新的React应用程序

使用集成的工具链可获得最佳用户和开发人员体验。

这个页面描述了一些流行的React工具链，它们可以帮助完成以下任务：

扩展到许多文件和组件。
使用npm的第三方库。
及早发现常见错误。
在开发中实时编辑CSS和JS。
优化生产输出。

此页面上推荐的工具链不需要配置即可开始使用。

你可能不需要工具链

如果您没有遇到上述问题或者还不习惯使用JavaScript工具，请考虑在HTML页面上添加React作为普通<script>标记，可选择使用JSX。

这也是将React集成到现有网站的最简单方法。如果您觉得有用，可以随时添加更大的工具链！

从Scratch创建工具链

JavaScript构建工具链通常包括：

甲包管理器，如纱或NPM。它可以让您利用庞大的第三方软件包生态系统，轻松安装或更新它们。
甲捆绑，如的WebPack或包裹。它允许您编写模块化代码并将其捆绑到小包中以优化加载时间。
像Babel这样的编译器。它允许您编写仍可在旧版浏览器中使用的现代JavaScript代码。

如果您希望从头开始设置自己的JavaScript工具链，请查看本指南，重新创建一些Create React App功能。

不要忘记确保您的自定义工具链已正确设置用于生产。

5、CDN链接

React和ReactDOM都可通过CDN获得。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

上述版本仅用于开发，不适合生产。React的缩小和优化生产版本可在以下位置获得：

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>