我们向您介绍
React初学者
培训课程的前5课。 包含48节课程的原始英语课程在Scrimba.com平台上发布。 该平台的功能允许在收听演示者时有时会暂停播放，并且可以在演示所在的同一窗口中独立地暂停播放代码的实验。 这门课程对我们来说似乎很有趣，我们决定将其翻译成俄语并将其转换为传统出版物的格式。
我们认为，本课程对于每个“不知道如何反应”但想学习的人都会有用。 同时，将本课程转变为常规出版物需要花费大量的精力和时间，因此，在对该项目的启动做出最终决定之前，我们邀请所有人评估该课程并参与有关翻译该课程的可行性的调查。
第1课。课程概述及其发展建议
→
原创欢迎来到React基础知识课程。 我叫Bob Zirol，我将告诉您如何使用世界上最流行的Web框架之一创建前端项目。 我已经在计算机教育领域工作了很多年，尤其是现在，我负责
V School的教育过程的组织。
▍关于课程开发过程
多年来开发培训课程旨在帮助每个想要快速掌握复杂事物的人，我已经开发了自己的学习方法，我认为这对讨论很有用。
首先，我想指出，学习任何东西的最简单，最有效的方法就是不遗余力和时间进行练习。 如果您想学习编程，则越早开始自己做某事，越频繁地做某件事，您获得成功的机会就越大。
通常，当我介绍V学校的学生时，我会根据自己的生活给他们提供以下示例。 最近，我被木材加工吸引了。 我看书，在YouTube上观看了无数视频，为我提供了工具。 但是，直到拿起手中的工具，我什么都做不了。 使用锯和砂纸，粘合和拧紧零件只花了几个小时，这使我更加接近目标。 事实上，一切发展都遵循相同的原则。 想学习React？ 编写代码。
本课程中的大多数课程都包含练习。 预计您将尝试自己做。 如果您熟悉了独立工作的任务，然后立即开始对其解决方案的描述，那么您实际上将选择学习React的最困难方法。 此外，不要等到您被提供练习后，再采取主动行动，尝试尝试所有学到的知识。 尝试自己尽可能多地使用代码。 特别是，当您稍微掌握了React之后-创建您感兴趣的东西，体验所有您想体验的东西。 这样可以避免诸如“
tutorial hell ”之类的麻烦。
我的方法的另一个重要点是间歇训练和所涵盖材料的重复。 这些是最重要的事情，可让您真正记住自己所学的内容。 不建议您全神贯注地学习本课程。 这就是通往“教程地狱”的道路。 通过这种方法，您会感觉到您确实学到了一些东西，但实际上，您根本无法记住您所“学到的”东西。
因此，遍历材料要经常休息。 这不是关于5到10分钟的定期休息，而是关于更雄心勃勃的事情。 学习一些原理，实践使用它们，然后休息一天。 当您返回课程时，重复已经学习的材料将非常有用。 当然，通过这种方法，将需要更多时间来精通该课程，但这将对您的学习产生极其有益的影响。
现在，让我们简要地讨论通过学习本课程可以学到什么。
▍结构和前提条件
以下是本课程的主要主题：
- 组件。 说到React，不可避免地要讨论组件的概念。 React中的组件是创建适合重用的HTML代码段的主要构建块。 我们将要讨论的几乎所有其他内容都与如何使用这些组件来构建Web应用程序有关。
- JSX。 这是一个JavaScript语法扩展，允许您使用HTML和JavaScript的功能来创建组件。
- 组件的风格化。 造型使组件具有吸引人的外观。
- 应用程序中的属性和数据交换。 属性用于在组件之间传输数据。
- 条件。 组件状态机制用于存储和管理应用程序中的数据。
- 事件处理。 通过事件，您可以与应用程序用户建立交互关系。
- 组件生命周期方法。 这些方法使程序员可以影响组件发生的各种事件。
- 使用HTTP协议从外部API下载数据。
- 使用表格。
为了使本课程富有成效，您需要了解HTML，CSS和JavaScript（ES6）。
第二课：培训项目
→
原创在完成本课程的过程中，您将开发教育项目。 看看其中的一些。
我们的第一个开发将是标准的TODO应用程序。
待办事项它可能看起来有些无聊，但是在其开发过程中将涉及许多机会，我们将在此过程中进行讨论。 您可以单击待办事项列表中的项目，将其标记为已完成，然后查看其外观如何变化。
TODO应用程序中的标记案例这是我们的课程项目-一个模因生成器。
模因发生器使用此应用程序时，文本分别输入到“
Top Text和“
Bottom Text字段中，这两个字段将分别落入图像的上部和下部。 通过单击
Gen按钮，程序将从相应的API中随机选择一个模因图像，并向其中添加文本。 这是此应用程序如何工作的示例：
模因第3课：为什么要做出反应，为什么值得学习？
→
原创如果可以使用纯JavaScript开发Web项目，为什么还要使用React？ 如果您对Web开发感兴趣，您可能听说过React允许您创建非常快速的应用程序，其性能超过仅使用JavaScript即可实现的性能。 这是通过在React中使用称为虚拟DOM的技术来实现的。 我们不会详细介绍虚拟DOM，如果您想更好地了解这项技术，可以观看
此视频。
到目前为止，我们已经知道Virtual DOM可以帮助Web应用程序比使用常规JS更快地运行。 React给我们带来的另一个真正的巨大好处是能够创建适合重用的Web组件。 考虑一个例子。
我们有来自Bootstrap库的标准
navbar元素。
导航栏如果您以前没有使用过Bootstrap，那么请知道这只是一个CSS库，为Web开发人员提供了设计精美的元素。 大约有四行代码，看起来都很麻烦，要浏览这样的代码并不容易。 如果将所有这些都包含在已经有很多东西的HTML页面中，则该页面的代码将因各种设计而简单地重载。
React Web组件允许您获取HTML代码片段，将其作为单独的组件进行排列，并且除了将这些片段添加到页面之外，还可以在页面结构中添加诸如特殊HTML标记之类的内容。 就我们而言，不必在页面上添加四十行HTML标记，只需在其组成中包含一个包含该标记的组件即可。 我们将其称为
MySweetNavbar 。
Web形成的组件方法您可以根据需要命名这样的组件。 如您所见，基于组件的页面布局更易于阅读。 开发人员可以立即看到该页面的整体结构。 从
<body>的内容可以看出，在这种情况下，页面顶部是导航栏（
MySweetNavbar ），中间是主要内容（
MainContent ），页面底部是页脚（
MySweetFooter ）。
另外，组件不仅改善了HTML页面的代码结构。 它们也适合重用。 如果多个页面需要相同的导航栏怎么办？ 如果不同页面上的此类面板彼此之间略有不同怎么办？ 如果在许多页面上使用了相同的面板，并且需要进行一些更改，该怎么办？ 如果不使用组件方法，很难对这些问题和许多其他问题给出正确的答案。
React流行的另一个原因可以认为是Facebook正在开发和支持该库的事实。 至少，这意味着合格的程序员会不断地处理React。 React的流行以及该项目是开源的，在GitHub上发布的事实，也意味着许多第三方开发人员为该项目做出了贡献。 所有这些使我们可以说，在可预见的将来，React将生存和发展。
说到React，尤其是为什么这个库值得探讨，人们不禁会想起与此库相关的巨大劳动力市场。 今天，React专家的需求稳定。 如果您学习React的目的是在前端开发中找到工作，那意味着您走在正确的道路上。
第4课：开发环境，ReactDOM和JSX
→
原创在这里，我们将讨论如何使用ReactDOM创建一个简单的React应用程序，并介绍有关JSX的一些关键点。 但是，在开始使用代码之前，让我们先讨论在哪里运行此代码。
▍开发环境
为了试验React代码，也许最好部署一个成熟的本地开发环境。 为此，您可以参考最近发布的
React.js资料
：面向初学者的直观指南 ，尤其是其React应用程序开发实践部分。 即，为了开始实验，您需要使用
create-react-app创建一个新应用
create-react-app ，然后启动本地开发服务器并开始编辑代码。 如果我们在谈论最简单的示例，则可以将它们的代码直接输入到标准
index.js文件中，删除其中的代码或将其注释掉。
由
create-react-app的项目中
index.html文件的内容与本课程将提供的示例中的内容相对应。 特别是，我们正在谈论具有标识符
root的
<div>元素在页面上的存在。
通常适用于一些非常简单的实验的另一个选项是使用在线平台，如codepen.io。 例如，
这是 Dan Abramov的React应用程序
的演示项目。 准备一个Codepen项目以进行React实验的本质是将
react和
react-dom库连接到它（可以通过单击页面顶部的
Settings按钮，转到出现的窗口中的
JavaScript部分，然后在找到它们之后连接到该项目来完成。使用内置的搜索系统，必要的库）。
为了进行实验，您可能会很方便地使用Scrimba的功能。 为此，您只需打开相应课程的页面即可。 这些页面的链接位于带有数字和职业名称的标题下方。
▍第一个程序
应当注意，在我们的示例中，我们将使用ES6（ES2015）的功能，因此强烈建议您进行导航。 特别是，为了将
react库导入项目，使用以下构造：
import React from "react"
因此，您可以导入
react-dom库：
import ReactDOM from "react-dom"
现在，我们将使用
render() ReactDOM的
render() ReactDOM在屏幕上显示一些内容：
ReactDOM.render()
如果您决定使用由
create-react-app的项目进行实验，那么其
index.js文件（在VSCode中打开）将类似于下图所示。
在index.js中输入代码如果您正在运行开发服务器，并且浏览器打开了
http://localhost:3000/页面，那么如果保存了
index.js ，则会保存错误消息。 在目前的工作阶段，这是完全正常的，因为我们尚未告知系统要显示
render()命令的内容和位置。
实际上，现在该处理我们刚刚编写的代码了。 也就是说，在这里，我们将React导入到项目中，然后-ReactDOM-以便可以使用此库的功能在屏幕上显示内容。
render()方法采用两个参数。 第一个是我们想要带出的东西，第二个是我们想要带出东西的地方。 如果以伪代码的形式编写，则将获得以下内容：
ReactDOM.render( , )
我们要输出的内容必须以某种方式附加到某些HTML页面。 我们将编写的代码将转换为HTML元素，这些元素将出现在页面上。
这是此页面的外观。
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="root"></div> <script src="index.js"></script> </body> </html>
HTML页面具有所有基本元素，包括
<link>标签和
<script> 。
如果您使用
create-react-app ，则
index.html页面看起来会有些不同。 特别是，在其代码中没有导入
index.js 。 事实是，在构建项目时，
index.html和
index.js之间的连接
index.js 自动完成的。
注意带有
root标识符的
<div>元素。 在此元素的开始和结束标签之间，React将放置我们创建的所有内容。 该元素可以视为整个应用程序的容器。
如果现在返回
index.js文件和
ReactDOM的
render() ReactDOM ，则其第二个参数（应输出数据的位置）将是对带有标识符
root的
<div>元素的引用。 在这里，我们将使用普通的JavaScript，之后Render方法的第二个参数将如下所示：
ReactDOM.render( , document.getElementById("root"))
使用这种方法，
render()方法采用第一个参数并将其描述的内容输出到指定位置。 现在让我们开始讨论第一个参数。 让我们从简单的
<h1>元素开始。 并且，与编写第一个程序时一样，在其中添加文本
Hello world! ：
ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root"))
如果现在刷新浏览器页面，则该页面将显示指定的文本作为第一级标题。
第一个程序的结果在这里，您可能有一个疑问，为什么我们将HTML元素的描述放在需要JavaScript方法参数的位置。 毕竟，面对诸如
<h1>Hello world!</h1>类的JavaScript，JavaScript可能会决定该表达式的第一个字符是“较少”运算符，然后，显然，变量名紧随其后，然后是“更多”比较运算符”。 JavaScript无法识别此字符序列中的HTML元素，因此不能识别。
React开发人员不仅创建了一个库，而且还创建了一种称为JSX的特殊语言。 JSX与HTML的变体非常相似。 此外，您将看到几乎所有的JSX代码几乎都与通过其帮助形成的HTML标记完全一致。 当然，JSX和HTML之间存在差异，我们将逐步讨论它们。
我们介绍了一个相当简单而简短的指令，但是在执行React的过程中，发生了很多有趣的事情。 因此，此指令已转换为JavaScript版本，并且正在生成HTML代码，尽管我们没有详细介绍此过程。 这就是为什么我们不仅需要将
react-dom导入，而且还需要将React导入项目，因为React库正是使我们能够使用JSX并使JSX-constructs正常工作的原因。 如果我们从示例的
import React from "react"行中删除
import React from "react" ，保存脚本文件并刷新页面，将显示错误消息。 特别是，
create-react-app会告诉我们，无法访问React不能使用JSX（
'React' must be in scope when using JSX react/react-in-jsx-scope ）。
事实是，即使在我们的示例中未直接使用React，该库仍可用于JSX。
我想引起您注意的有关JSX的另一件事是，您无法渲染接连跟随的JSX元素。 假设在
<h1>元素之后，您需要输出
<p>元素。 让我们尝试使用这种设计：
ReactDOM.render(<h1>Hello world!</h1><p>This is a paragraph</p>, document.getElementById("root")) //
如果在那之后刷新页面，则会显示一条错误消息（在
create-react-app它看起来像是
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag ）。 该错误的本质在于此类元素应包装在其他元素中。 最终结果应该看起来像是一个元素，其中嵌套了两个元素。
为了使我们的示例生效，我们包装了
<h1>Hello world!</h1><p>This is a paragraph</p> <div>元素中的
<div> <h1>Hello world!</h1><p>This is a paragraph</p>代码：
ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root"))
如果现在刷新页面，则一切将按预期进行。
每页两个HTML元素习惯JSX会花费一些时间，但是在那之后，与使用标准JavaScript工具处理HTML元素相比，使用它会更加容易和方便。 例如，为了描述
<p>元素并使用标准工具配置其内容，您将需要以下内容：
var myNewP = document.createElement("p") myNewP.innerHTML = "This is a paragraph."
然后，您需要将其连接到页面上已经存在的元素。 这是命令式编程的示例，而且由于有了JSX，它也可以声明式进行。
第5课。 ReactDOM和JSX
→
原创在上一课中，您遇到了ReactDOM和JSX，现在该将这些知识付诸实践了。
我们将完成以下所有实际任务。 首先，在标题为“任务”的部分中，将给出任务本身，并且在“提示”部分中，可能会给出有关其实施的简要建议。 然后将出现“解决方案”部分。 建议您尽一切努力自己完成任务，然后处理给出的解决方案。
如果您觉得自己不适应，请返回上一课，重复适当的材料，然后重试。
▍工作
编写一个React应用程序，在页面上显示项目符号列表（
<ul> ）。 该列表应包含三个带任何文本的元素（
<li> ）。
▍提示
首先，您需要将必要的库导入项目，然后使用其中一个库在页面上显示使用某些JSX代码生成的元素。
解决方案首先，您需要将必要的库导入文件中。 也就是说，我们正在谈论
react库，并且由于我们将在页面上显示某些内容，因此我们正在谈论
react-dom库。
import React from "react" import ReactDOM from "react-dom"
之后，您需要使用
ReactDOM对象的
render()方法，
ReactDOM传递对我们要在页面上显示的元素的描述，并指示该元素在页面上的显示位置。
ReactDOM.render( <ul> <li>1</li> <li>2</li> <li>3</li> </ul>, document.getElementById("root") )
第一个参数是项目符号列表的描述，第二个参数是其应属于的页面元素-具有标识符
root的
<div> 。 HTML代码可以用一行编写，但是最好按照我们的解决方案进行设计。
这是完整的解决方案代码：
import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul> <li>1</li> <li>2</li> <li>3</li> </ul>, document.getElementById("root") )
随着时间的流逝，我们将讨论如何使用大型结构使用
render()方法来
render()大量HTML标记。
总结
现在，在您熟悉了React课程的第一堂课之后，我们请您参加调查。
感谢您的关注！
→
第1部分：课程概述，React，ReactDOM和JSX普及的原因→
第2部分：功能组件→
第3部分：组件文件，项目结构→
第4部分：父级和子级组件→
第5部分：TODO应用程序的开始工作，样式设计的基础→
第6部分：关于本课程的一些功能，JSX和JavaScript→
第7部分：内联样式→
第8部分：继续研究TODO应用程序，熟悉组件的属性→
第9部分：组件属性→
第10部分：使用组件特性和样式的研讨会→
第11部分：动态标记生成和映射数组方法→
第12部分：研讨会，TODO应用程序的第三阶段工作→
第13部分：基于类的组件→
第14部分：关于基于类的组件，组件状态的研讨会→
第15部分：组件健康研讨会→
第16部分：TODO应用程序的第四阶段工作，事件处理→
第17部分：TODO应用程序的第五阶段工作，修改组件的状态→
第18部分：TODO应用程序的第六阶段工作→
第19部分：组件生命周期方法第20部分：条件渲染的第一课→
第21部分：关于条件渲染的第二课和研讨会→
第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据→
第23部分：关于使用表格的第一课→
第24部分：第二形式课→
第25部分：使用表单的研讨会→
第26部分：应用程序体系结构，容器/组件模式→
第27部分：课程项目