React官方中文文档【安装】

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

在本节中，我们将展示如何将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. 第1步：运行npm init -y（如果失败，这是一个修复）
  2. 第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

在本节中，我们将展示如何将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. 第1步：运行npm init -y（如果失败，这是一个修复）
  2. 第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，你可以从它的文档中了解更多。

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

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

创建一个新的React应用程序

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

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

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

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

你可能不需要工具链

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

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

React团队主要推荐以下解决方案：

  • 如果您正在学习React或创建新的单页应用程序，请使用Create React App。
  • 如果你正在构建一个与Node.js的服务器渲染网页，尝试Next.js。
  • 如果您正在构建一个面向静态内容的网站，请尝试Gatsby。
  • 如果您正在构建组件库或与现有代码库集成，请尝试更灵活的工具链。

创建React应用程序

创建React App是学习React的舒适环境，也是在React中开始构建新的单页面应用程序的最佳方式。

它设置了您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验，并优化您的应用程序以进行生产。您需要在计算机上安装Node> = 8.10和npm> = 5.6。要创建项目，请运行：

npx create-react-app my-app
cd my-app
npm start

注意

npx在第一行不是一个错字 - 它是一个包转发工具，附带npm 5.2+。

创建React App不处理后端逻辑或数据库; 它只是创建一个前端构建管道，因此您可以将它与任何您想要的后端一起使用。在引擎盖下，它使用Babel和webpack，但你不需要了解它们。

当您准备部署到生产环境时，运行npm run build将在build文件夹中创建应用程序的优化版本。您可以从README和用户指南中了解有关创建React应用程序的更多信息。

Next.js

Next.js是一个流行的轻量级框架，用于使用React 构建的静态和服务器呈现的应用程序。它包括开箱即用的样式和路由解决方案，并假设您使用Node.js作为服务器环境。

从了解Next.js 其官方指南。

盖茨比

Gatsby是使用React 创建静态网站的最佳方式。它允许您使用React组件，但输出预渲染的HTML和CSS以确保最快的加载时间。

从官方指南和入门套件库中学习盖茨比。

更灵活的工具链

以下工具链提供更多灵活性和选择。我们向更有经验的用户推荐他们：

从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>

要加载特定版本的react和react-dom，请替换16为版本号。

为什么crossorigin属性？

如果您从CDN提供React，我们建议您保留crossorigin属性集：

<script crossorigin src="..."></script>

我们还建议验证您使用的CDN是否设置了Access-Control-Allow-Origin: *HTTP标头：

Access-Control-Allow-Origin：*

这样可以在React 16及更高版本中实现更好的错误处理体验。

学着把生活的苦酒当成饮料一样慢慢品尝， 不论生命经过多少委屈和艰辛， 我们总是以一个朝气蓬勃的面孔， 醒来在每一个早上。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yhm9/p/11448691.html