[音乐播放] 

NEEL MEHTA：这不言而喻。 

好了，各位，欢迎网络 与未来的应用程序反应。 这是CS50。 我的名字是尼尔。 我是一个TA的CS50和大二 在哈佛学院和一个非常，非常 热情的Web开发人员。 所以我非常令人兴奋的 今日跟你说话， 无论你是在这里还是在家里 看，大约反应，这是再次 正如我所说的Web应用程序，未来。 

等反应过来是一个Web框架。 正如我已经告诉 有些人在这里， 一个框架，只是一个 一套工具，你可以使用 构建和构建Web应用程序。 和Web应用程序是，再次，网站 这是互动的，如Facebook， Twitter.com，Instagram.com，等等。 

所以，Facebook是一个Web框架 这是由实开发 几年back--发生反应。 它后来被用于 Facebook在其移动应用程序 和Web应用程序，Instagram的。 汗学院是另一 反应过来突出早期采用者。 

这真的是越来越 非常受欢迎。 如果你使用的东西，像角或 骨干网，这是同一个家族的， 但它有自远 超过他们的知名度。 这是热门的新事物。 这是真的，真的很大。 

而等反应过来是好的不只是作为一个 网络框架建立接口。 这是很好的构建Web界面。 还有一件事 所谓阵营本土其中 让您建立接口 对于Android和iOS 在未来，也许其它平台 只使用相同的JavaScript代码。 您可以使用完全相同的 JavaScript代码来呈现网站， 为使Android应用和iOS应用。 

这是一个非常，非常激动人心的时刻。 这是一个非常，非常酷的机会。 这的确是一个普遍的网络 界面开发工具， 所以这是一个非常，非常 重要的是要知道的。 而且，正如我告诉人们 之前，这一点，我认为， 将改变我们如何 构建Web应用程序，直到永远。 因此，这也许有点夸张，但我 认为这是一个相当不错的东西就知道了。 

好了，有什么反应是？ 反应是一个框架，你可以 用于构建接口。 一个接口是，再次， 一个网页，对不对？ 因此，这里的Instagram.com，用途反应。 

反应是建立在 想法的组件。 组件是一个HTML 元素类固醇， 所以HTML元素就像一个按钮。 这是一个段落。 这是一个标题，对不对？ 和的Instagram将使用这些，但它 也将使用阵营的组件。 

反应成分 改装成了式HTML元素 有他们自己的行为 包含在其中。 所以，作为一个例子，我们可以有 时间元素，时间分量， 其中将包含类似 时间戳，要知道， 配置文件组件，它 将包含个人资料图片 和该人的名字。 它可以有一个像计数器，这 可以指望像喜欢的号码， 如果你点击它，它会 增加喜欢的数目。 一个组件仅仅是一个 一串HTML代码 有一些功能 包裹在它的内部。 所以，它就像一个HTML元素 对类固醇，正如我以前说过。 你可以把这些组件， 你可以把它们放在一起 使新的部件， 这种情况下，一个后部件， 它包含了所有这些东西。 这将包括时间，档案， LikeCounter，也许评论 也许图像本身。 所以Web应用程序是通过采取刚建 组件并把它们放在一起。 一个Instagram的饲料无非是 一堆帖子此起彼伏， 每个帖子包含类似的时间， 个人，LikeCounter，等等。 这有点像盖房子。 你不建 房子从上而下。 你把元件 - 你 取像浴室。 你把你坚持他们的bedroom-- 在一起，你有一个新的组成部分。 你有房子的一个新的组成部分。 

等反应过来是所有围绕 这种思想的组件的那 是互动的，那是声明。 就像你刚才说什么 信息是，并且它呈现它。 他们是组合的。 你可以把一个时代和一个配置文件，把 他们在一起，让更好的东西。 而且他们是可重复使用的，因此，如果您 在源代码后， 你可以嵌入任何地方。 

您可以嵌入一个Instagram的 在自己的网站上的东西。 你可以在Facebook的嵌入，例如， 只要它使用阵营为好。 因此，组件是真的，真的，真的 纸幅的强大积木 可以在任何地方使用，并把 在一起，使新的积木。 那是非常，非常 高层次的概述。 因此，再次，如果你有 在任何时候任何疑问 关于电抗器，哲学 编码，阻止了我，让我知道。 

好了，等反应过来是很酷，因为它 具有寻找一种不同的方式 你如何构建Web应用程序。 你可能听说过的MVC，一对 模型，你在CS50或任何控制 其他使用探测类。 和大多数的框架是 围绕MVC的想法。 反应不大。 REACT是围绕想法 单向数据流的 所看到的这个图表或图形在这里。 

基本上，你有一个数据源。 和数据源将决定 如何布局某些组件。 和部件将 然后，当它们发生变化， 他们会告诉 数据源来改变。 

要使用Instagram的 例如，你可能有 喜欢交对象的列表 在数据库或什么的。 的数据。 然后我们交的组件 将这些数据， 并使用这些数据来呈现 在屏幕上的东西。 这就是箭头 从数据到组件是， 然后该相同的数据是用来 渲染一堆组件。 

在Facebook的使者，为 例如，这是反应， 你可能有一个清单 信息作为数据源。 而这会使不 消息仅列表 也是你的朋友列表。 你有未读邮件数。 也许还可能导致Facebook的事情 这就是在Facebook.com的底部。 相同的数据是一个 真理的单一来源 并引起了很多 部件要呈现。 每当其中的一个 成分改变时， 它可以追溯到和 改变的数据源。 

您发送一条消息，对不对？ 改变数据源。 你读你的邮件， 所以，你可以读为0。 改变数据源。 并注意所有这些之一的 箭头回到相同的数据 源代码，所以你知道， 给予一定的数据集， 你确切地知道是什么 页面将会是什么样的。 这是确定的。 你要知道，给予一定的数据，是什么 该页面将会是什么样的。 你可以预测它是如何去 行为和事情的进展 当他们放在一起工作。 

如果我有一百万的组件 在这里，它会表现得一样的吧？ 你不会有任何 奇怪的互连。 一个数据呈现一万个零件。 一百万成分可 回去和编辑数据。 所以，这是非常好的。 我们正在构建组合的， 易可伸缩的Web应用程序。 

你有一个数据源， 真理的来源。 这告诉你的组件 如何布局的页面， 和部件将 处理互动。 如果他们想改变 的事情，只是回去 并告诉数据源来改变。 合理？ 等反应过来是怎么一回事的理解 如何建立一个组件 如何使你的组件 与外界交互。 

使得组件进行交互 与外界 采用另一种技术 所谓的流量，这 是一个框架，是 加在阵营的顶部。 我们不会谈论这一点。 我们将更多地谈论，因为 数据时，你怎么能呈现一个组成部分？ 

而等反应过来是真的很酷，因为你 可以使用它与任何你想要的后端。 如果你有一个像Python的后端， 如果你的Python能吐出一些数据， 反应可以呈现它。 如果你没有JS输出 数据，阵营呈现它。 红宝石导轨与 数据作出反应呈现它。 

等反应过来基本上是一个网络 view--与部件的前端 任何数据源的任何责任。 所以打算从数据源 反应成分是很容易的。 走另一条路是有点困难。 使用助焊剂正如我前面提到。 我们不会进入的。 我们将重点更多地放在 数据到组件的一面。 这种方式可以使 酷，好玩的网络应用程序。 也不会影响外界 现在，但那是另一回事。 

好了，如果你在这里 我最后一次研讨会 你就会知道所有的代码是 今天的演讲将是在这个网址 在这里，对不起，这个网址在这里。 基本上我们会去 通过四个步骤，也许五， 恐怕不是五。 我们将移动通过四个步骤 构建一个样品的阵营应用程序。 所以所有的源代码 对于每一步 将是在这里，所以，如果 你沿着之后在家里， 随意细读这段代码。 如果你在这里下沿， 我们将其显示在屏幕上， 所以不用担心。 但是，如果你是在家里，感觉 免费访问这个网站。 而且，是的，你应该能够得到 你会永远在这里需要的代码。 所以这是一个很好的备忘单，以及 为你的未来冒险反应。 酷，所以如果大家谁在这里， 即使你是在家里， 拉起这个网站，is.gd/cs50react， 没有资本，没有下划线，什么都没有。 

你会看到一个页面，看起来 有点像这样。 这是一个叫CodePen的事情。 CodePen是一个协作 编码环境 与我可以编写代码在这里， 它会自动发送给你。 而这种方式，我可以编写代码。 我可以在这里运行代码。 

为example--如果它reloads--参见 我在网页上运行的JavaScript代码 就在这里，它会 自动渲染网页 这个JavaScript代码。 所以这是一种 我们尝试代码 而不必使用真快 我们的ID或使用我们本地机器 或什么的。 这是一个非常快速的方式为您样机 并测试各种不同的代码。 

所以我将要采取 示例代码，把它在这里。 我们将通过它来工作。 如果你是在家里，你 可以拉这件事为好。 我已经安装了 反应在这里，所以你可以只 在这里编写自己的代码，并 尝试，因为你自己的游乐场。 

是啊，如果每个人都 在这里打开了这个链接。 请给我一个大拇指 了，一旦你打开它。 优酷，酷爽。 这里没有什么，现在，但 我们将改变很快。 

好了，等反应过来是一个JavaScript 库，正因为如此， 需要JavaScript的知识， 这是网络编程语言。 而且它被用于其他的事情 现在太多，但主要是网页开发 语言，因此，如果您不熟悉 即，读一个叫JSforCats.com网站。 太好了。 你可以学习JavaScript 在半小时内。 这是令人难以置信的。 

因此，不妨一读。 我们也是一个很大的HTML在这里，因为 我们在设计过程中的网页。 所以，如果你不熟悉 HTML，检查出HTMLdog.com。 我认为学习阵营是 如果你已经万倍更容易 知道的构建块。 如果您拥有的组件，它的 容易使一个更大的组件。 这是阵营的语言为您服务。 

因此，继续前进，并给 这些东西读。 暂停该视频。 不妨一读，如果你是 在家里，如果你不 熟悉HTML或JavaScript 好了，我们要去 做的是我们要做出 使用阵营一个非常基本的烧录卡的应用程序。 我们将有一个闪卡。 您可以翻转卡来回。 同时我们也将有名单 所有我们有卡， 如果我们感觉 雄心勃勃，我们可能会 能之间切换 汽车通过点击。 

但是，这是你的裸露， 骨头，一个非常简单的应用程序作出反应。 所以这实际上是 不容易实现， 但我们要表明的是，如果你这样做 这一点，这是非常，非常容易将其扩展 如果其他人来帮您吧。 因此，我们要经过四个步骤 从头开始建立这个。 

好了，这四个步骤，我们将 与第一步骤开始。 第一步骤将是 构建第一个组件。 正如我以前说过，一个组件阵营 仅仅是对类固醇的HTML元素。 它指定的HTML 和一些行为，并且它 将指定的人 可以用它的交互方式 那就内部状态。 就像一个按钮，就会知道怎么样多 时间它被点击，例如， 它会知道如何打好自己的。 

因此，让我们继续前进，建立我们 使用JavaScript第一个组件。 因此，如果语法看起来怪异， 这是一种，因为它是。 所以，再一次，我们要去 做一个叫做变量 应用程序使用关键字让， 这使得一个变量， 让应用程序相同React.createClass。 

反应是一个库，具有 在创建类的功能。 而这个功能是 一些代码，你 可以用它来创建一个新的 类型响应组件。 所以React.createClass 使一个元件， 与此组件将 能够做到的东西。 最主要的是可以做的是使 东西，呈现为一个功能。 

再次，如果该指数不明显 你，我建议你去JS猫 而检查出来。 是放大不够好？ 凉。 

所以，每一个部件需要 有渲染功能。 渲染功能说， 我该怎么打印屏幕上的？ 但是组件是 如果没有无用 知道打印在屏幕上什么，所以 你需要有一个渲染功能。 

因此，在渲染的东西，你 只需要返回一些HTML。 什么是酷的是， 有一个东西叫 JSX，这是一个扩展 的JavaScript所使用的反应。 它让你里面写HTML 你的JavaScript中，这 听起来有点不可思议，当 你先想想， 但它使一个很大的意义之后。 因此，我们可以做到这一点。 如果您熟悉HTML，我知道 我们有与通用一个div 容器的东西。 我们可以返回一个div和内 这个分区，我们可以把东西。 

所以我们可以说，我们想呈现刚 直线式烧录卡了。 烧录卡，我会说， 将有一个问题和答案。 所以这个DIV中，让我们 打印出一个段 这说的问题 - 什么是 最终的答案生命，宇宙？ 然后，答案是 将是，当然，42。 

这并没有拿出很好的。 是啊，所以基本上你可真 编写HTML你的JavaScript中。 而这将是 打印输出到屏幕上。 因此，让我们尝试一下。 

因此，我们有我们的组件。 我们需要告诉阵营放 屏幕上的分量 所以React.render，所以请注意，我们 把应用程序像任何其他元素。 我们写它，因为它是一个HTML元素。 像，而不是说像IMG 图像或P的段落， 你写的应用程序，那么应用程序是 像对待一个HTML元素。 正如我前面所说，这是 类固醇的元素。 

所以，你渲染应用程序，你 给它一个地方把它。 这是你怎么能 告诉它放在哪里。 我创建的一个简单的div 页面调用页面的ID， 而这也正是该 元素的要去。 

而且我们不打算使用HTML运行。 基本上这是会得到 把这个页面元素内 我们已经在屏幕上。 所以它运行这段代码，并提请本 在屏幕上的东西，所以我们在这里。 我们已经取得了我们的第一个作出反应的组成部分。 

因此，只是作为一个回顾，我们轻轻地做 新类型的组件，对不对？ 这是什么React.createClass。 而在这部分，我们 告诉它应该怎样做。 每当这个组件是 被印刷到屏幕上， 它会打印出与DIV 这两款在它的内部。 

而我们所做的事情，我们做了一个新的应用程序 使用尖括号的应用程序的符号。 我们告诉它，把它 里面的页面元素。 所以我做了什么，它创造 从模板创建新的应用程序。 然后我告诉它渲染。 所以说，OK，应用程序， 我要打印出来？ 应用程序说，去打印出一个div 与它内部的两个段落。 瞧，还有我们的分度， 两段它里​​面。 有意义这么远吗？ 

所以，再一次，整个挑战作出反应 只是知道如何做组件。 如何使 组件协同工作。 现在，我们已经取得了我们的第一个 组件，让我们返回 并进行组件定制。 所以，你在HTML知道你 可以给你的按钮类？ 你可以给你的锚在href。 你可以给你输入的类型，对不对？ 你可以给更多的自定义 属性应用到所有的元素 使其更有趣。 我们其实可以做 同样的事情。 

所以我们可以说，我们希望我们的 应用程序去提供任何卡。 现在我们只是 呈现一个硬编码卡。 我们知道，只有一个 卡可以做，所以我们 要试着改变这种现在这么 我们可以只给它一些卡。 它会打印出存储卡。 

你应该试着让你的 组件非常通用。 于是就这样，我可以发邮件 这是我的朋友，是这样， 无论烧录卡你， 只是将其送到这里， 它会自行做。 你可以把其他 事情在自己的应用程序。 

但首先，让我们来打破这种 成两个部件， 但我们要分开卡 印刷部分从实际的应用程序的一部分。 所以我们所能做的就是我们 可从应用程序改变这种 到CardView，只是一个 对于应用程序的新名称， 我们可以做一个新的 部分所谓的应用程序， 不要混淆与旧应用程序。 我们已经得到了createClass， 而像在HTML中， 你可以嵌套阵营组件 内彼此的。 

因此，在这个渲染功能， 函数返回CardView， 而这是完全一样的东西。 为什么这是同样的事情？ 相反渲染只是该应用程序的那 有div和配对在它的内部， 该应用呈现CardView，和 CardView呈现DIV和段落。 因此，这是我们的第一个例子 彼此的内部嵌套元素。 那有意义吗？ 所以，再一次，我们有一个CardView元素。 我们的应用程序的元素 那它比。 

好了，我们希望我们的CardView--如果你 提供一个良好的CardView一定的卡， 它会打印出你的，对吗？ 因此，首先，我们需要一张卡， 让我们做一个卡片对象。 因此，让我的卡equal-- 如果你都熟悉， 这还仅仅是符号的制定 对象在JavaScript中。 这有点像一个struct 在C，所以我们做了一个卡， 所以现在我们可以通过这个卡 属性或作为在HTML中的一个属性 术语，我们的应用程序。 因此，我们可以做到这一点，应用程序 卡等于myCard。 

你知道如何输入，你做 输入型等于文本或按钮 类的equals BTN的引导，？ 同样的想法，应用卡equals-- 你得把括号这里 -  应用卡等于myCard，所以这 说我们有这个卡的对象。 我也要把它作为一个 属性的应用程序组件。 而这个应用程序组件将 能够访问它，做 有趣的东西吧。 

因此，我们的应用程序将是 给一张卡，所以现在， 让我们的应用程序，只需给 卡到CardView 本身因为喜欢的应用程序是不是 要知道做什么用呢， 所以我们只把它给CardView。 因此，我们将通过它的 同样的方式，卡等于， 因此每个组件可以访问 事情已经交给它。 他们可以访问的属性 已给它 使用此语法，this.props.card。 

所以会发生什么这里 你有myCard对象。 你将它传递到应用程序 使用应用程序卡等于myCard。 该卡的对象是给你的应用程序。 该应用程序可以访问它 作为this.props.card。 这有点像一个形象 知道它的来源。 

这个应用程序知道它的卡 是，它可以做的东西用它。 它可以做计算。 它能够根据关闭它的决定。 

现在，我要通过 this.props.card到CardView。 有意义这么远吗？ 它会更有意义吧。 

好了，现在我们在CardView。 我们CardView，鉴于该卡，应 打印出的问题和答案。 现在，我们只是打印出一些 硬编码的问题和答案。 我们需要计算out--我们需要 问他们给了我们卡 什么是问题和答案， 然后打印出来到屏幕上。 

因此，我们可以在这里做到这一点。 在渲染begin--先做等于。 因此，我们在这里所做的是，我们知道， 该卡是给了我们一个属性， 对？ 它给我们作为输入。 就像这几乎就像 参数的函数。 该卡是一个参数 几乎到了这个CardView。 

我们将抽取，并把 入变量的问题。 确保答案去 该变量的答案。 提示该卡回答。 现在，我们有这些， 而不是打印出来的文字， 我们要打印出 不管他们给了我们。 

因此，这stuff--所以我们要 扑灭问题答案。 让我们来看看，如果这个工程。 酷，所以让我们来看它 一个更多的时间只是要确定。 

所以，我的卡是卡的对象，我们 被赋予该卡的应用程序。 和应用程序将要采取的 卡并把它交给CardView。 而这个CardView说，如果你 给我任何烧录卡的对象， 我会打印出了问题 它的答案，对吗？ 

因此，我可以做的是，我可以 发送该代码，第一 像10行代码的我，给我的朋友。 他可以将它嵌入到 他自己的应用程序。 而只要他做了同样的事情， 像CardView卡等于这一点， 只要他所创造的CardView 并赋予它正确的信息， 他可以使自己的卡。 所以这样一来，这是一个非常 为您打造酷路 使用对方，正确的组件吗？ 这张卡，我可以公布 这CardView在互联网上， 人们将能够使用它。 所以基本上，它就像之一 标准函数在C库。 

它是一个函数，其中 有人写它。 你给一定的投入。 它会产生一定的输出。 你不在乎它是如何工作的内部。 只要你给它正确的 输入时，它会做出正确的输出。 

和组件可以是 想到了同样的方式。 这CardView像 库函数。 如果你给它一些卡 作为一个属性，它会 打印出该卡中的内容。 如果我改变我的卡样 而不是像什么是5 + 37， 它会相应更新。 因此，只要通过改变输入， 它得到了一定的输出。 所以，你能想到的组件几乎 如本方式的功能，其中 你可以放在一起。 你得到的输入，像这样CardView 作为输入，所得到的输出。 在这种情况下，输出是HTML。 有意义这么远吗？ 酷，如此反复，性质 您如何传递信息 流入和流出组件。 

好了，让我们这 东西互动。 现在它是一种无聊的。 什么是[听不清]？ 您可以打印出一些， 但是这一切都可以做。 

因此，让我们回到 老问题，只是现在。 好了，现在这些组件 很无趣，因为他们做的， 他们得到的输入。 他们使输出的，对不对？ 这是一种无聊的。 我们希望有我们的 组件能够有 某种内部状态， 像想起了什么。 

对于烧录卡，对于 例如，什么样的状态 也许你想 记得一个烧录卡？ 什么临时身份 也许你要记住 在闪卡应用程序中的烧录卡？ 听众：无论是被翻转？ NEEL MEHTA：对，没错。 所以，你可能想保留 赛道是你面对或有 你面对倒在卡上。 在Facebook上，例如，你会 希望新闻提要中记得在哪里 是你还是喜欢谁的个人资料 你现在做。 

在Messenger中，像什么文字，你 请在输入框中，对不对？ 如果您刷新页面，它就会消失。 但是，你真的不关心。 这只是暂时的。 是吗？ 

听众：[听不清] NEEL MEHTA：像一道闪光 卡，就像你可以看到 问题的侧面或答案的一面？ 

听众：OK。 

NEEL MEHTA：像 双面烧录卡，对吧？ 是啊，所以你要 有这种想法的现在 我有属性，这就好比投入， 但是状态，这是暂时的，嗯， 您是否在网页上，对不对？ 同样，我在Facebook称 信使，我喜欢它的人 您正在查看的Facebook 还是谁的个人资料，对不对？ 

这只是暂时的。 它显示给用户的重要 这是怎么回事，但刷新​​页面。 这其实并不重要。 所以这是暂时的状态， 所以大家都它的状态。 

所以，再一次，有国家和道具。 道具被输入给 从数据源。 国家就像是默认值。 这就像东西， 使得东西互动。 

因此，在我们CardView--让我们 我们CardView--所以这是很好的。 我们要在这里做什么，我们要去 触摸CardView只有CardView。 所以，我的朋友，谁得到了这一点，他们 不会注意到任何区别。 他们不会有改变 任何自己的代码， 但他们会看到他们的 CardView得到了改装成了。 这是有关组件的一个很好的一部分。 

好了，我们CardView，让我们试着 跟踪我们是否正在逐步起来 或朝下。 在阵营，我们做到这一点，首先 指定的初始状态。 在什么地方卡了么？ 

所以，是一个叫getInitialState的功能 功能，我们返回一个对象。 这个对象包含了一些状态， 一个国家仅仅是一个键值对。 就像不同的指示，你有一个键和一个 值，你有喜欢的名字是一个字符串。 

在这种情况下，我们说前面是真实的。 这是说，我们有一个状态。 国家的一个组成部分 是所谓的前一个属性。 [听不清]，因此默认情况下， 我们是在卡的正面， 我们可以改变这个 因为我们翻转卡。 合理？ 

好了，在渲染，现在，我们 显示问题和答案。 现在，我们应该做些什么 被显示的问题 如果我们在卡的正面等等 答案是为卡的背面。 这就是为什么你都使 该卡互动。 因此，让我们尝试并为此在这里。 好了，先只是做一个变量。 我们现在可以问this.state.front。 我们访问状态同样我们 获得道具，所以this.state.front。 

如果我们前面，然后文本 是this.props.card.question。 如果我们是在的前面 卡，我们将尝试和抓斗 这个问题从卡。 否则，如果我们在后面 卡，我们怎么办？ 

听众：答案？ 

NEEL MEHTA：是的，所以文 等于this.props.card.answer。 但是，如果你注意，我们使用 的状态来作出决定 因为现在的部件 结果可能有所不同 根据关如何将这些与它进行交互。 因此，而不是打印出这一点， 我们就打印出的文字。 酷，所以现在，你看， 我们只看到了问题。 如果我手动更改状态这里 到前是假的，我们得到42回。 

因此，再次，该组件 有它自己的状态。 就像一个按钮知道是否 它被按下， 这件事情知道什么是对 前面或后面。 默认情况下，它的前面。 然后，如果它是在前面， 我们将打印出的问题。 如果是在后面，我们将 打印出来的答案。 因此，再次，该信息 定是相同的。 它只是看起来不一样 根据您如何编程。 因此，例如，脸谱信使 即使你得到了相同的数据源， 它可能看起来不同 因为国家是不同的。 你正在寻找一个 不同的人的消息。 

好了，这是所有好， 不错，但现在有什么实际 使我们能够改变，无论是 我们的卡是正面或背面。 我们可以通过添加一个翻动要这样做 按钮，按钮的卡那 将翻转卡，如果是[听不清]。 因此，让我们在这里添加一个按钮，这 按钮，这个按钮将翻转。 

所以现在，它 没有做任何事情。 它只是看起来不错。 我们所能做的就是，我们可以添加一个点击 处理程序的onClick等于this.flip， 我们将在后面定义翻转。 但基本上，的onClick 是一个函数， 当用户点击它被调用。 

因此，该按钮就会知道 当它被点击。 走到它被点击， 它会翻转卡。 这有点像你 比萨快递员。 你喜欢，没事，只要人 打电话给我，我会送披萨，对不对？ 

你注册这个监听器。 你听的事件。 你被调用，并且当 事件发生时，你做一些事情。 你得到的比萨。 在这种情况下，当你 点击，你翻转卡片。 

因此，我们需要定义一个 功能，将翻转卡， 因此，我们将编写一个正确的 在这里，翻页功能。 所以你觉得翻盖会做什么？ 同样，这被调用时， 我们点击翻页按钮。 我应该功能翻转呢？ 

听众：更改this.state.front 从真到假的，假的真。 

NEEL MEHTA：是的，所以采取一切 this.front is--前状态。 就拿前面的状态下，如果 这是真的，让假的。 如果是假的，它是真的，对不对？ 因此，让我们试试吧。 

你不能改变状态 只是做this.state。 你不能做到这一点。 你不能做到这一点。 你必须使用的函数 所谓this.setState。 

所以，你可以说this.setState前 结肠这个那里，再次感叹 点装置相反。 我想，如果这一点。 state.front 是真实的，它会变成假的。 因此，我们将设置状态 从真为假。 如果是假的，我们将 将其设置为false为true。 

只是注意到我们设置和获取略 方式不同，所以让我们试试这个。 Bada堆，看看这个。 翻转按钮将现 切换前后的状态。 

所以，在这里就是你看到一个 发生反应的魔法点点。 就像我们从来没有告诉它它重新呈现。 我们从来没有告诉它重绘什么。 如果你这样做 没有反应，你会 已用于：喜欢当 点击翻页按钮， 你得告诉它 手动重新渲染，对不对？ 

反应过来是真的很酷，因为如果你 给它一个特定的状态和属性， 它总是呈现 同样的事情。 所以，当我们过我们改变 状态和性能， 反应过来刚刚重新呈现整个事情。 它知道，有一个 一对一的对应关系 之间的状态和参数和HTML。 所以每当无论是那些 通过一组状态变化， 它会改变如何 薪酬重新呈现。 所以基本上阵营就像是 等待着你去改变。 

每当它改变的东西， 它会重新呈现整个页面。 如果这听起来效率低下， 这是因为这将是， 但反应使用的东西 称为影子DOM。 代替直接绘制页的，它 保持虚拟的HTML树在内存中。 

要知道，HTML是像一棵树， 像以分层数据结构。 它使一个假树在内存中， 每当你更新页面， 它会得出另一种假 树，它会计算 它需要做什么改变 页面，使两棵树相等。 所以基本上，它几乎 重新呈现了很多。 然后，它只是喜欢改变 在小的调整页面可以根据需要， 所以这是非常，非常，非常有效。 

所以基本上阵营将 每当你想改变什么， 它会重新渲染实际上的页面。 它会找出我需要 改变以使真实页反映 虚拟页面，它会做到这一点。 这就是虚拟DOM。 这是一个最大的 功能反应。 

那有意义吗？ 任何问题？ 是吗？ 

听众：如何 比较仍对MVC 我们谈到了 像之前的资源。 

NEEL MEHTA：是的，这个问题 是它如何比较MVC？ 你问到的资源。 好吧，让我们来谈谈它是如何发挥作用。 

在MVC中，你会更新模型。 在这种情况下，我们就会有一个卡型号。 该视图将有 翻转按钮，并且控制 将有翻页功能。 因此，该视图会告诉 控制器翻转翻转。 翻转会告诉 模式改变，对不对？ 

所以，当你做一个MVC，你 监听模式改变， 你重新呈现相应的视图。 或者你只是喜欢 有控制器。 等待模式改变，然后 挑选像一个东西的一部分 改变。 在这里，我们有一件事， 但在一个大的应用程序， 你要像记住什么 在每一个地方的变化， 所以这是一个有点恼人。 而等反应过来是好的 因为它有一个影子大教堂。 它可以负担得起，只是 重写了整个事情。 你不必以选择性 喜欢猜来更新内容。 

在Facebook上，如果你喜欢 得到一个新的消息，在MVC中， 你必须记住， OK，改变的东西 在的上方 页，消息图标。 同时弹出一个新窗口的底部。 另外，还要在该窗口中的新事物。 同时播放声音。 

这是一个很大的东西 外出同时。 所以，如果你不 有一个影子大教堂，你会 不得不说，因为手工做 你无法摆脱整个页面。 你不能，那么你有 手动更改每一件事情， 这是MVC真的很烦。 

因此，为了要 节俭，他们有选择 更新页面，这是 效率高，而且烦人。 在阵营因为阴影， 大教堂，你会得到两件事是免费的。 这是有效的，因为 的阴影大教堂。 瓶颈正在更新的页面。 它没有做的树操作。 你得到的效率。 您还可以使用的便利性，因为 如果你只是重写整个页面， 但你只要知道，没事，这个事情 将要在页面上的某个地方。 它可能是在不同的地方，但 这将在页面上，对不对？ 所以，你只要重新呈现 整个事情实际上， 你可能会做一些 改变页面本身。 

所以，再一次，在MVC你 不得不选择 易用性和效率之间， 并做出反应，你会得到两个。 因此，它是更好的。 合理？ 固体。 

好了，让我们来看看让我们来谈谈 有关步骤4的一点点， 我们如何能够嵌入组件。 因此，我们有这个权利吧。 我们有自己的凉爽的小按钮。 我们可以翻转回去， 第四，这是所有它。 比方说，我们要 有其它成分。 比方说，我们的烧录卡的应用程序应 包含所有的卡的列表 你有，那么这意味着我们 应该有另一个组件。 好吧，也许把它称为列表视图。 让我们做一个列表视图 共存的CardView， 这个列表视图和CardView 会喜欢一起工作。 你可以将它们结合起来 使我们的应用程序为您服务。 

因此，首先，让我们做一个 夫妇更多的卡的权利。 比方说，什么卡？ 而且，这样我就不必 孔与你键入它， 我只是把它从这里复制。 所以我会不 给它只有一张卡。 我要去给它卡阵列。 所以首先应用程序 要打破现在。 好了，所以我们要做出 这能够处理多张卡。 因此，首先，我们要放弃它，而不是 只有一张卡，但卡的阵列， 像卡的列表。 在这种情况下，我们有三个。 

好吧，那么这样的应用程序是 要得到一个清单卡， 而这将决定哪些 一个显示为CardView。 该CardView只能 渲染一张卡，但应用程序 得到所有卡的列表，对不对？ 

当你找出一个，这样 卡给CardView， 你会如何​​想你也许能 做出决定哪些卡 以显示？ 为了给你一个提示，这是暂时 你会查看某个卡。 如果您刷新页面，你会 刚回到第一张牌。 这是确定的，因为它是暂时的。 也许，我们使用的是什么技术？ 

听众：你可以做一个变量 所以就像你有前面。 这是真的，你可以 有当前卡片等于1？ 

NEEL MEHTA：是的，所以我们 希望有国家的吧？ 你会使用状态的 组件搞清楚 该卡做我们想要得到的。 像我们有一个列表 所有的牌，我们将 使用状态搞清楚 头牌之一， 第二张牌，第三张牌，依此类推。 

因此，一个应用程序，所以一个应用程序将获得一个 有getInitialState的功能， getInitialState的函数返回。 我们只想说activeIndex 0。 所以，现在我们的应用程序有它自己的状态。 

所以现在的渲染，找出 一个卡，我们只是去阵列 和抢东西指数。 选择卡等于this.props.cards this.state.activeIndex。 所以，当你看到这里，道具和 国家实际工作在一起。 所以，现在，我们有我们activeCard， 我们会打电话给它activeCard， 让我们来看看，如果这个工程。 [听不清] 

哦，这是一个文字错误。 啊。 

酷，是的，所以现在我们回到 到我们面前，对不对？ 除了老一套程序 现在我们可以支持 卡列表，而不仅仅是一张卡。 而现在，同样，如果我们改变 activeIndex，我们可以从0到1， 而现在，第二张牌， 然后我们去了0。 所以这里有一个新的 改装成了后续版本我们的。 

好了，现在我们有一个列表视图 显示在你的程序中所有的牌， 所以，我们要创造一个新的 部分所谓的ListView。 我们的ListView等于react.createClass。 因此，我们想呈现一个无序 列出与每一个卡列表项。 因此，我们有一堆的卡。 我们想要一个列表项 对于每一个卡，对吧？ 我们可以做一个for循环或 什么使一个新的列表项。 但是你的方式做到这一点的 反应过来，使用一个名为地图的事情。 地图是一种工具，或者您使用函数 对于每一个项目，运行一些功能， 需要返回值， 为您提供了回来。 

因此，作为一个例子，我们有阵列 1，2，3.map function--和这 被简写为 function-- X向x次的X. 这是说，对于每一个数字 在1，2，3，把它。 方它，并给它回来。 所以，你有什么感想1， 2，3.map X的范围是到x倍 X允许你回来给 这个功能是 运行该数组中的每个元素。 

听众：1，4 9？ 

NEEL MEHTA：是的，1，4，9 因为你做1次1。 这给了你一个。 这是第一个元素。 

2次2 4。 这是第二个因素。 3次3 9。 这是第三个元素。 合理？ 因此，地图有一个技术，你 在功能程序员使用， 新样式 编程做某事 在你的列表中的每个元素。 所以这听起来很熟悉。 我们有卡的列表。 我们希望得到每一个列表项 之一，所以我们就用地图在这里。 我们会说，让列表平等 this.props，卡，地图。 

因此赋予了卡，我们 要生成一个列表项 使用该卡的内容，它的一边。 远的不说，我们想给出来 卡问题，以便card.question。 所以这个列表包含 李的或列表项的数组 那里有一个列表 对于每一张牌的项目， 和包含该卡片的问题。 合理？ 

酷，所以现在让我们来 实际打印了这一点。 因此，我们将返回一个UL认证。 在那个无序列表， 我们就坚持整个列表 他们给了我们。 凉。 

好了，所以现在这个 列表视图工作只是找到。 有关列表视图中的任何问题？ 你有一堆的卡。 你的每一张牌打表项。 你把他们内部的无序 列表，你给它回来。 所以，现在，让我们采取行动，所以我们嵌入 这里面我们的应用程序中， 所以我们可以做到这一点，列表视图。 什么参数我们传递给列表视图？ 我们给什么样的属性呢？ 请记住，如果你给 这一堆的卡， 它会榜上无名 查看这些卡。 那么，我们会通过 这里的说法？ 听众：中卡的列表？ NEEL MEHTA：是啊，所以卡 等于this.props.cards，对不对？ 所以，唯一的问题 是，你只能 翻了顶级元素的渲染， 所以你必须把它包在一个div。 有点奇怪。 因此，让我们如果看看。 这是否工作？ 

是的，你去那里。 所以，现在我们有一个列表 在底部卡， 然后，我们有我们的 CardView本身之上， 并且，将间翻转 该卡的两侧。 现在，这是否使意义上，我是怎么做的？ 是啊，如此反复，我们有两个组成部分。 第一组分打印 每卡在列表中。 这是列表视图。 和第二组分 打印出这一点卡。 如果你给它一个特定的卡，它会 打印出有关该卡信息 让你来回翻转。 

因此，如果我们愿意，我们可以尝试和谈话 有关添加一些新的功能了这一点。 否则，我们可以谈一点 关于反应器的速度的， 或者我们可以回答 问题，你可能有 因为这些是所有的核心部件的 的反应，我想谈谈。 我们可以继续前进。 我们可以回答问题。 任何你想要的。 

听众：您可以使用 JSX在正常的JavaScript？ 或者是一些 与[听不清]来了？ 

NEEL MEHTA：可问题是， 使用JSX与普通的JavaScript？ 答案是肯定的。 JSX只是它的一个方法需要你 JavaScript的，有HTML在其内部， 它编译成的Ja​​vaScript 它里面没有HTML。 所以注意that--所以在这里看到。 这看起来像你有这样的div 你有东西在它的内部。 

这编译成的Ja​​vaScript 像生成同样的事情。 我想我要说的是， JSX只是一个语法，喜欢它的 一个预处理器的JavaScript多 如PHP是一个预处理的HTML。 JSC是一个预处理 对JavaScript，让 你把你的HTML的JavaScript内。 所以，如果你有合适的变压器 这是一个叫[听不清]的事， 这将改变。 正确的预处理， 它会告诉你这样做。 

听众：[听不清] NEEL MEHTA：通常不需要 把HTML JavaScript的内 除非你做的反应。 但是你可以最好这样做。 是的？ 

观众：我想你 所描述阵营 作为功​​能的编程语言。 我们一直在学习C的CS50。 是C也是一种功能性的语言？ NEEL MEHTA：所以问题 是有关功能 而不是其它的东西叫 命令式或过程式编程。 有2种受欢迎的节目。 一个被称为程序，这 是所有喜欢做的命令， 一个是功能性的，这是所有 关于有功能，有 输入以及输出。 反应是一种功能性的范例。 C是一种非常程序范例。 

作为一个例子，C例如 你不这样做声明的方式 使得程序的，对不对？ 你不得不说，打印本。 更改此数据结构。 打印。 这是关于命令。 

在反应过来，有没有 许多命令。 这是所有关于有 你的组件放在一起。 他们喜欢的功能。 你有这样的函数 所谓CardView， 这是一个功能 具有输入，输出， 而等反应过来是所有 这个理念 我们having--你的数据。 您可以通过这个传递 算法，它会 输出HTML，你 刚刚打印的页面， 所以你必须 构建它一块一块。 

因此，要画一个比喻来什么 我之前说的，你知道如何 在Facebook上，如果你得到一个消息， 你选择什么样的零件更新， 这是程序。 这是必要的，对不对？ 好吧，我得到了一个消息。 让我们改变帐户存在。 

让我们在这里弹出一个窗口。 让我们改变帐户存在。 让我们得出这样的在这里。 这是一个程序性的方法。 

这就是像角， 升压，骨干，其他的框架使用。 反应是功能。 这是一个非常不同的方式 思维的事情。 它需要这样的想法，让我们的 函数或算法，将你 给它的数据。 它会吐出什么 应，并在计算机 将称量出的照顾。 你不自己处理。 这是否看得懂一点点？ 是吗？ 

听众：在函数式语言， 在一次一切都发生？ 

NEEL MEHTA：不，事情发生在秩序。 喜欢这里仍然有 秩序，但它不 发生在为了像 赞扬，命令，命令。 它发生的顺序 功能为您提供了输出。 它放入另一个函数。 它放入另一 功能，另一种功能。 

如果你这样做CS51，你会 学习功能的程序 有点超出这个范围。 但基本上，是什么让 反应酷不仅是 单向数据流 和虚拟的Dom， 而且这个想法 函数式编程。 和函数式编程是很容易 撰写和制作很酷的东西出来， 而且很容易想到 约和推理。 因此，它反应过来另一个很好的平局。 还有什么问题吗？ 是吗？ 

听众：嗯，你为什么会 使用让相对于VAR？ 

NEEL MEHTA：所以，问题是 为什么要使用我们的不是var？ 这是一个东西叫 ES6或ECMAScript中6。 它是JavaScript的新版本。 有一帮技术原因， 但让VAR是一个更好的版本。 

这是你如何声明变量。 您可以使用让。 您可以使用VAR。 让我们有一堆技术 reasons--你可以看看他们 达later--为什么它更好。 基本上，ES6有一些不错 新的语法，一些新功能 在旧的JavaScript的顶部。 

因此，我们有一个像五分钟。 我只是想谈谈 一件事真正的快速。 如果你有任何问题， 让我们在这之后再说吧。 但是，仅仅让这得到 风行照相机，我只是 要谈一点关于如何 实际使用阵营在你的应用程序。 

如果你走在这里， Facebook.GitHub.IO/react， 这是阵营的主页， 它会告诉你如何实际使用 反应在你的页面。 基本上，这是一个有点 复杂尝试安装反应。 这不是那么容易，因为你只需将 拖放一个JavaScript在那里。 

你必须有你的变压器 成立，这将像以前那样， 把你的JSX成 正常的JavaScript。 你要的东西，会 编译你ES6正常。 JavaScript的有很多的感动 部分你必须做的，所以这是一个事 所谓的约曼，Yeoman.io。 这是一个命令行工具，它会 帮助你脚手架你的阵营 项目很容易。 

所以，你可以阅读有关此 以后，但也有一些工具 这约曼提供。 他们会告诉你创建一个阵营 应用程序的一切内置的。 喜欢的话就已经建立 在，部件内置的。 这将有你的变压器内置的。 他们有很多很酷 东西自动建立 使用这些东西叫做发电机。 

所以，阅读关于这一点，如果你喜欢。 刚去的约曼，Y-E-O-M-A-N，和 你可以找到这样的发电机。 而随着像发电机 这些，你宛若一体 一对夫妇的命令行命令。 这将脚手架出来的 整个阵营的应用程序为您服务。 它会得到所有的人工管道， 而琐碎的工作做了你， 这就是为什么你只关注 在刚刚写反应。 

所以基本上构建 反应过来的应用程序是平凡的。 它连接在一起，但有 一些工具会为你做它。 所以，如果你想使一个阵营 应用程序，尝试做这种方式。 如果你只是想尝试， 您可以尝试使用此CodePen 因为这个CodePen有 所有的反应接线。 我已经做了所有的工作适合你了。 

所以，如果你想使像 产量释放作出反应的应用程​​序， 试试这些发电机中的一个。 如果你只是想发挥 各地，往往就只值 喜欢尝试CodePen打在这里。 听起来不错？ 凉。 

所以这就是我的一切。 再次，所有的代码和实例是 将要在这个网站在这里。 所以，再一次，我们没有说话 约阵营的很多语法， 但要找到所有这些 小的语法细节， 这一切都将是可用 在这个网站在这里。 

因此，我建议你喜欢 迈出第一步。 把它放进你的CodePen。 试着努力使 它向所述第二步骤。 有一个第四步，只是 看到您从获得。 

任何问题，请检查 出该页面或给我发电子邮件。 这是我的电子邮件。 不过，我很乐意帮助你的任何 你可能对问题作出反应。 所以，是的，这就是我的一切。 谢谢大家非常多的 观看或出席。 我会采取任何问题 你可能在这之后了。 所以，感谢大家的收看。