想成为React开发者？这是由顶尖技术学校创建的由48部分组成的大型教程

发表于 2019年5 月20日星期一下午 8:22:09

自从我们开始创建Scrimba价格以来，我们的用户已经向我们询问了有关React的正确入门价格。因此，当我们最终达到目标时，我们决定将其作为我们迄今为止最全面的价格。

它被称为学习反应，它共包含48个章节 – 讲座和互动作业的混合。

Per Harald Borgen @perborgen 价格启动?

我们在@VSCHOOLHQ与@bobziroll合作，并在@scrimba_com创建了一个关于React的?价格。它非常庞大，共有48章，而且还充满了互动挑战。

如果您认为您的粉丝喜欢它，请转发
scrimba.com/g/glearnreact 17:26 PM – 2018年11月28日 81 126

这是Scrimba有史以来最全面的入门价格。它共包含48个章节 – 讲座和互动任务的组合。

价格背后的男人是著名的老师Bob Ziroll。 Bob是V School的教育总监，这是一所技术教育学校，教授全栈Javascript和UX价格。

根据价格报告，V School是顶级编码学校之一，因此我们非常高兴与他们合作。

因此，如果您喜欢这门价格，请务必查看V Schools沉浸式全栈计划。现在让我们来看看价格的布局

第1部分：介绍和哲学

鲍勃自2014年以来一直在训练营教学，并且已经发展了自己的学习理念。因此，在第一次截屏视频中，我们将熟悉这一理念。在下面的图片中，您将看到它的要点。

第2部分。我们将要构建什么

在下一个视频中，Bob概述了该价格，在那里他简要介绍了我们将要构建的两个项目：一个简单的待办事项列表应用程序，它涵盖了许多React核心主题;和一个顶级项目，这将是一个模因生成器应用程序。

第3部分。为什么要反应？

首先，Bob让我们知道为什么我们甚至应该考虑使用像React这样的东西，而不是仅仅用简单的JavaScript编写它，以及为什么这么多的开发人员已经选择使用React。

第4部分：ReactDOM和JSX

在这个截屏视频中，我们直接跳转到代码并使用JSX编写我们的Hello World – 一个特定于React的JavaScript eXtension，因此我们可以同时编写HTML和JavaScript

进口 应对 从 “反应”   进口 ReactDOM 从 “反应-DOM”  ReactDOM。给予（<H1>你好，世界H1> 文献。的getElementById（“根”））

Bob还快速介绍了一些问题，比如正确的React导入，以及JSX在尝试渲染两个相邻元素时不喜欢的问题。

//嗯，不知道我应该在这里渲染哪个元素......      ReactDOM。给予（        <H1>你好，世界H1>        <p>我是一个段落p>       文献。的getElementById（“根”））  //这好多了      ReactDOM。给予（        <DIV>          <H1>你好，世界H1>          <p>我是一个段落p>        DIV>       文献。的getElementById（“根”））

第5部分.ReactDOM和JSX实践

这是我们本价格的第一次练习。在实践中，屏幕录像Bob为我们设置了一个目标并给了我们一些提示。

鲍勃鼓励我们花一些时间思考并努力解决这个以及随后的挑战，因为我们付出的努力越多，我们就越能记住React。

最后，Bob展示并引导我们完成解决方案，但是这个博客不会给任何破坏者?，所以请随意在实际的截屏视频中查看。

第6部分。功能组件

在这个演员阵容中，Bob为我们提供了功能组件的快速概述。

进口 应对 从 “反应”   进口 ReactDOM 从 “反应-DOM”  功能 MyApp的（） {     返回 （       <UL>          <里>1里>          <里>2里>          <里>3里>       UL>   ）}  ReactDOM。给予（      <MyApp的 />，      文献。的getElementById（“根”）   ）

我们定义 MyApp的（） 作为一个简单的JS函数，它返回一个非常简单的HTML列表元素，但这就是React通过的地方，因为稍后我们将该函数用作 HTML元素

第7部分。功能组件实践

是时候进行一些练习了。

就像在之前的练习中一样，这里不会有任何剧透，但可以直接跳到代码中并提出自己的解决方案。最后鲍勃像以前一样带我们走过去。

第8部分。将组件移动到单独的文件中

在本章中，Bob为我们提供了一些用于组织代码的良好且常见的React实践，例如使用组件命名文件 MyInfo.js 与组件本身相同。

然后，我们将学习如何将组件提取到自己的单独文件中，以及如何将它们导出到以后在我们的应用程序中使用

// MyInfo.js  进口 应对 从 “反应”   功能 MyInfo的（） {     返回 （      //组件代码     ）   }  出口 默认 MyInfo的

然后我们可以将我们的组件放入 组件 文件夹和导入至 index.js

// index.js  进口 应对 从 “反应”   进口 ReactDOM 从 “反应-DOM”  进口 MyInfo的 从 “./components/MyInfo”  ReactDOM。给予（      <MyInfo的 />，       文献。的getElementById（“根”）   ）

第9部分。父/子组件

在这个截屏视频中，Bob讨论了Parent和Child组件。常规应用程序比仅呈现给DOM的一个组件复杂得多。相反，我们通常有一个复杂的组件层次结构。

我们从编写功能组件开始它将位于组件层次结构的顶部

// index.js  进口 应对 从 “反应”   进口 ReactDOM 从 “反应-DOM”  进口 应用 从 “./App”  ReactDOM。给予（<应用 />， 文献。的getElementById（“根”））

并在 App.js 本身：

// App.js  进口 应对 从 “反应”  功能 应用（） {     返回 （       <DIV>         <导航>           <H1>你好第三次H1>           <UL>             <里>事1里>             <里>事2里>             <里>事3里>           UL>         导航>         <主要>           <p>这是我的大部分内容将...p>         主要>       DIV>     ）   }  出口 默认 应用

如您所见，我们可以编写我们的页面但这违背了React的目的。我们可以将每段HTML放入一个单独的组件中。

这就是我们的可能看起来像：

在React中，以大写字母开头的HTML元素表示我们创建的组件

使用这个概念我们的组件看起来像这样：

进口 应对 从 “反应”   进口 搜索Maincontent 从 “./MainContent”   进口 页脚 从 “./Footer”  功能 应用（） {     返回 （       <DIV>         <头 />         <搜索Maincontent />         <页脚 />       DIV>     ）   }  出口 默认 应用

这要好得多，这是组织代码的一种非常简洁的方法。

第10部分。父/子组件实践

这是练习时间。这是我们从鲍勃那里得到的任务，让我们开始吧。

像往常一样，在这篇博客中没有剧透，所以请随意深入了解Bob的截屏视频。

如果您不确定从哪里开始，Bob建议首先查看前面的章节并尝试提出解决方案，即使在此阶段它并不完美。这将是最好的学习方式。

第11部分。待办事项 – 第1阶段

好的恭喜，我们已经掌握了React的基础知识，这个基础足以让我们开始构建我们的第一个真实世界的应用程序。

首先，我们需要为我们的应用程序创建一个结构，这是练习我们在之前的截屏视频中学到的东西的绝佳机会。这是任务，让我们开始吧。

到目前为止，这应该是非常简单的，Bob和我们一起解决了这个问题。

第12部分。样式与CSS类的反应

在这个演员阵容中，Bob向我们介绍了React中的样式。在React中有几种不同的方式来设置组件，我们将从CSS类开始，因为这是我们大多数人应该非常熟悉的。

让我们从一个简单的例子开始。此示例的结构与前一章中的相同。

在React中，它与纯HTML非常相似，而不是 类 我们需要使用 班级名称：

功能 头（） {     返回 （       <头 的className =“导航栏”>这是标题头>     ）   }

很多地方会告诉你我们需要写作 班级名称 因为 类 在JS中是一个保留字，但事实是，JSX正在使用vanilla JS DOM API。

文献。的getElementById（“东西”）。班级名称 + = “新的类名”

现在我们可以编写纯CSS：

第13部分。一些注意事项

作为旁注，Bob只是告诉我们他个人喜欢的某些样式选择，所以我们知道有不同的做事方式。如果您希望以不同的方式编写代码，我们非常欢迎您这样做。

// Bob尽可能避免使用分号   进口 应对 从 “反应”  //但是这里没有办法避免它们   对于 （让 一世 = 0; 一世 < 10; 一世++） {}  // Bob喜欢常规功能   功能 应用（） {     返回 （       <H1>你好，世界H1>     ）   }  //如果您愿意，可以编写ES6箭头功能   常量 应用 = （） => <H1>你好，世界H1>

第14部分.JSX到JavaScript和返回

在我们继续前进之前，我们应该真正研究JSX和JS如何一起发挥作用。我们看到我们的JS函数内部返回的东西看起来像HTML，但是JSX。

现在，如果我们想使用变量怎么办？我们可以使用它 {}：

功能 应用（） {     常量 名字 = “鲍勃”     常量 姓 = “Ziroll”      返回 （       <H1>你好 {`${firstName} ${lastName} `}H1>     ）   }

{} 是一种在JSX中使用普通JS的方法。用简单的语言看起来就像


这是JSX {现在我们正在编写JS}，我们又回到了JSX

第15部分。带样式属性的内联样式

在React中应用样式的一个非常快速的技巧是使用内联样式。

<H1 样式={{颜色： “＃FF8C00”}}>你好 世界</H1>

注意我们如何使用花括号的集合{{}}。这是因为React期望样式作为对象传递，但是我们还需要告诉JSX我们正在使用JS对象。

虽然有一个问题。

//这会出错   <H1 样式={{背景-颜色： “＃FF8C00”}}>你好 世界</H1>  //这就是我们需要做的事情，因为JS不喜欢我们属性名称中间的达世币   <H1 风格={{背景颜色： “＃FF8C00”}}>你好，世界H1>

第16部分.Todo App – 第2阶段。

在这个截屏视频中，我们将从Todo列表中选择我们离开的地方。首先，Bob要求我们创建组件通过将以下代码提取到其中。

<输入 类型=“复选框” />   <p>占位符文字在这里p>

现在我们可以添加一些样式，并有一个漂亮的待办事项列表。很快我们将学习如何自定义内部的文本

标签，但在此之前，我们需要了解道具。

第17部分。道具第1部分 – 理解概念

让我们看一些简单的HTML，并想一想这些元素究竟是什么问题。

<一个>这个 是 一个 链接</ A>   <输入 />   <IMG />

他们都没有做任何重要的事情。我们确实需要将这些属性添加到元素中。

<一个 HREF=“https://google.com”>这个 是 一个 链接</ A>   <输入 占位符=“名字” 名称=“名字” 类型=“文本”/>   <IMG SRC =“https://goo.gl/dKwBew”/>

很多时候会调用这些属性 性能 如果这个HTML概念对你有意义，那么你就明白了 道具 在React。由于我们正在创建自己的组件，我们可以允许 道具 修改我们自己的组件的行为方式。

第18部分。道具第2部分 – 可重复使用的组件

在这个演员阵容中，Bob将我们带到YouTube，以在简单的视频磁贴上说明可重用组件的概念。如果它是在React中创建的，我们不只是在整个页面上复制粘贴一个图块，而是我们可以创建一个图块并确保它可以根据不同的属性（如图像URL或标题。

第19部分。反应中的道具

在这个截屏视频中，Bob将向我们展示如何结合本价格第17和18部分中的道具概念，并创建了一个基本的联系卡列表应用程序供我们练习。

首先，为联系卡创建一个组件并学习如何使其动态化，这样我们可以为所有卡重复使用单个组件，这将是非常好的。

使用联系卡的一种非常简便的方法是：

// App.js   ...   <ContactCard     名称=“威斯克森先生”     imgUrl的=“http://placekitten.com/300/200”     电话=“（212）555-1234”     电子邮件=“mr.whiskaz@catnap.meow”   />   ...  // 代替    <DIV 班级名称=“联系卡”>     <IMG SRC =“http://placekitten.com/300/200”/>     <H3>威斯克森先生H3>     <p>电话：（212）555-1234p>     <p>电子邮件：mr.whiskaz@catnap.meowp>   </DIV>

让我们创造 ContactCard 并使用 道具 动态显示数据。

进口 应对 从 “反应”  功能 ContactCard（道具） {     返回 （       <DIV 的className =“联系卡”>         <IMG SRC ={道具。imgUrl的}/>         <H3>{道具。名称}H3>         <p>电话： {道具。电话}p>         <p>电子邮件： {道具。电子邮件}p>       DIV>     ）   }  出口 默认 ContactCard

第20部分。道具和造型实践

对，让我们练习吧就像之前的练习演员一样，这是你的任务：

现在我们的传统是，为了避免任何破坏者并真正学习React，请深入了解Bob的演练。

与往常一样，尝试自己破解这项任务，并随意参考前面的章节，因为它们包含您需要的一切。

第21部分。映射组件

因此，从练习价格中，您可能已经注意到我们重复了一些组件，可能想知道是否有办法只写一次。当然我们可以使用JavaScript 。地图 帮助我们实现这一目标。

功能 应用（） {  常量 jokeComponents = jokesData。地图（玩笑 => <玩笑 关键={玩笑。ID} 问题={玩笑。题} 点睛之笔={玩笑。妙处} />）  返回 （       <DIV>         {jokeComponents}       DIV>     ）   }

让我们在这里快速分解一些事情。

我们的数据通常来自API，因此要模仿我们正在使用的数据 jokesData 假装它拥有我们需要的所有数据。

常量 jokesData = （     {       ID： 1，       妙处： “很难向双关语者解释双关语，因为他们总是从字面上理解事物。”     }，     {       ID： 2，       题： “瑞士最棒的是什么？”，       妙处： “我不知道，但国旗是一个很大的优势”     }，     ...   ）

你可能也注意到了该 键 支柱。这实际上是一个React要求，无论何时一次又一次地创建一个组件，你需要传递一个 键 道具有一些独特的参数。大部分时间都是 ID 您从API获得的。

第22部分。映射组件实践

是时候进行另一次练习了。这是你的任务，Bob也很友善地为我们创建了一些样板代码，所以我们不需要从头开始创建那么多。

与往常一样，随意与Bob一起解决问题，但请先尝试自己动手。

第23部分.Todo App – 第3阶段

现在让我们应用我们所学到的关于贴图和道具的知识，让我们的待办事项列表更具动态性。我们现在可以映射项目数据和渲染对于我们拥有的每项数据。

并且还使用数据作为道具并将它放在我们想要的组件内部。

如果此时您发现以下错误，警告：失败的道具类型：您向表单字段提供了`checked`道具...，不要惊慌 – 我们已经做好了一切。 Bob将在本价格的第31部分向我们展示它的含义以及如何解决它。

第24部分。基于类的组件

在本章中，Bob向我们介绍了React中的类组件。有时我们目前使用的功能组件还不够，其功能需要扩展。

稍后我们将更多地了解潜在的差异，但现在看看它们在语法上的差异并试图转换我们的从函数到类组件。

类 应用 扩展 应对。零件 {     给予（） {       返回 （         <DIV>           <H1>代码在这里H1>         DIV>       ）     }   }

第25部分。基于类的组件实践

一些更多的练习。这次我们得到了一些为我们编写的代码，我们应该练习将功能组件转换为类组件。在这种做法中，我们还在代码中隐藏了一个小bug，让我们找到它。

一如既往地尝试先自己完成这个练习然后跟随鲍勃的演练。在下一章见

第26部分。国家

State是React最重要的部分之一。它是组件本身维护的数据。 道具 接收道具的组件不能改变，但是 州 能够因此，当组件本身需要更改某些数据时，我们可能希望使用state。例如，当我们单击按钮时，组件中的某些文本会更改颜色。

组件需要是具有状态的类组件，我们需要具有构造方法。

构造函数（） {     超（）     这个。州 = {       回答： “是”     }   }

然后我们可以在我们的数据中使用这些数据 返回 并在JSX中显示我们的数据。

第27部分。国家实践

在本练习中，我们有一些调试要做。

我们经常需要修复代码中的一些问题，因此这是一项非常有用的练习技巧。如果您遇到困难，请在遵循Bob的解决方案之前随意查看前面的一些章节。

第28部分。国家实践2

正如我们之前提到的，State是一个非常重要的概念，因此Bob为我们提供了两个练习价格。

这个可能非常棘手，但是要给它最好的拍摄，然后看看Bob是如何做到的。

第29部分Todo App – 第4阶段

在这个简短的演员阵容中，Bob向我们展示了如何在我们的Todo App中使用状态。

第30部分。处理React中的事件

事件处理本质上允许用户与您的网页进行交互，并在发生按钮点击或悬停等操作时执行特定操作。

让我们看一个执行这个简单函数的简单例子。

功能 handleClick（） {     安慰。日志（“我被点击了”）   }

您可能已经熟悉如何在常规HTML中完成它：

<按键 的onclick=“handleClick（）”>点击 我</按钮>

React非常相似。

<按键 的onClick={handleClick}>点击 我</按钮>

不同之处在于事件名称 的onClick 是在camelCase和 handleClick 正如我们在第14课中提到的关于内联样式的JS在JSX中传递的。

第31部分.Todo App – 第5阶段

在这个演员阵容中，Bob给了我们一个挑战。还记得我们在控制台中收到的有关“已检查”道具的警告吗？为了解决这个问题，我们需要提供 的onChange 处理程序。在这一点上，让它 的console.log 你想要的任何东西。

就像所有常见的挑战一样 – 跳转到演员看到解决方案。

第32部分。改变国家

我们可以使用React更新组件中的状态 的setState（） 方法。

让我们看看我们如何在一个非常流行的例子中使用它 – 一个计数器。

单击“更改”按钮时，不会发生任何事情。让我们实现我们的 handleClick（） 方法。我们首先尝试显示不同的数字：

handleClick（） {     这个。的setState（{ 计数： 1 }）   }

并传递给我们