1
00:00:00,000 --> 00:00:02,910
>> [音乐播放]

2
00:00:02,910 --> 00:00:04,850

3
00:00:04,850 --> 00:00:07,275
>> NEEL MEHTA：这不言而喻。

4
00:00:07,275 --> 00:00:11,070
>> 好了，各位，欢迎网络
与未来的应用程序反应。

5
00:00:11,070 --> 00:00:11,870
这是CS50。

6
00:00:11,870 --> 00:00:12,930
我的名字是尼尔。

7
00:00:12,930 --> 00:00:17,689
我是一个TA的CS50和大二
在哈佛学院和一个非常，非常

8
00:00:17,689 --> 00:00:18,730
热情的Web开发人员。

9
00:00:18,730 --> 00:00:20,730
所以我非常令人兴奋的
今日跟你说话，

10
00:00:20,730 --> 00:00:24,550
无论你是在这里还是在家里
看，大约反应，这是再次

11
00:00:24,550 --> 00:00:27,270
正如我所说的Web应用程序，未来。

12
00:00:27,270 --> 00:00:29,055
>> 等反应过来是一个Web框架。

13
00:00:29,055 --> 00:00:30,930
正如我已经告诉
有些人在这里，

14
00:00:30,930 --> 00:00:33,400
一个框架，只是一个
一套工具，你可以使用

15
00:00:33,400 --> 00:00:35,770
构建和构建Web应用程序。

16
00:00:35,770 --> 00:00:39,010
和Web应用程序是，再次，网站
这是互动的，如Facebook，

17
00:00:39,010 --> 00:00:42,330
Twitter.com，Instagram.com，等等。

18
00:00:42,330 --> 00:00:45,590
>> 所以，Facebook是一个Web框架
这是由实开发

19
00:00:45,590 --> 00:00:48,060
几年back--发生反应。

20
00:00:48,060 --> 00:00:50,830
它后来被用于
Facebook在其移动应用程序

21
00:00:50,830 --> 00:00:52,460
和Web应用程序，Instagram的。

22
00:00:52,460 --> 00:00:56,350
汗学院是另一
反应过来突出早期采用者。

23
00:00:56,350 --> 00:00:58,630
>> 这真的是越来越
非常受欢迎。

24
00:00:58,630 --> 00:01:03,420
如果你使用的东西，像角或
骨干网，这是同一个家族的，

25
00:01:03,420 --> 00:01:05,830
但它有自远
超过他们的知名度。

26
00:01:05,830 --> 00:01:06,890
这是热门的新事物。

27
00:01:06,890 --> 00:01:09,590
这是真的，真的很大。

28
00:01:09,590 --> 00:01:13,470
>> 而等反应过来是好的不只是作为一个
网络框架建立接口。

29
00:01:13,470 --> 00:01:16,020
这是很好的构建Web界面。

30
00:01:16,020 --> 00:01:18,350
还有一件事
所谓阵营本土其中

31
00:01:18,350 --> 00:01:22,200
让您建立接口
对于Android和iOS

32
00:01:22,200 --> 00:01:26,390
在未来，也许其它平台
只使用相同的JavaScript代码。

33
00:01:26,390 --> 00:01:31,130
您可以使用完全相同的
JavaScript代码来呈现网站，

34
00:01:31,130 --> 00:01:33,040
为使Android应用和iOS应用。

35
00:01:33,040 --> 00:01:35,000
>> 这是一个非常，非常激动人心的时刻。

36
00:01:35,000 --> 00:01:37,070
这是一个非常，非常酷的机会。

37
00:01:37,070 --> 00:01:42,020
这的确是一个普遍的网络
界面开发工具，

38
00:01:42,020 --> 00:01:44,420
所以这是一个非常，非常
重要的是要知道的。

39
00:01:44,420 --> 00:01:46,949
而且，正如我告诉人们
之前，这一点，我认为，

40
00:01:46,949 --> 00:01:48,990
将改变我们如何
构建Web应用程序，直到永远。

41
00:01:48,990 --> 00:01:55,820
因此，这也许有点夸张，但我
认为这是一个相当不错的东西就知道了。

42
00:01:55,820 --> 00:01:57,580
>> 好了，有什么反应是？

43
00:01:57,580 --> 00:02:01,020
反应是一个框架，你可以
用于构建接口。

44
00:02:01,020 --> 00:02:03,240
一个接口是，再次，
一个网页，对不对？

45
00:02:03,240 --> 00:02:06,340
因此，这里的Instagram.com，用途反应。

46
00:02:06,340 --> 00:02:08,740
>> 反应是建立在
想法的组件。

47
00:02:08,740 --> 00:02:11,900
组件是一个HTML
元素类固醇，

48
00:02:11,900 --> 00:02:14,470
所以HTML元素就像一个按钮。

49
00:02:14,470 --> 00:02:15,250
这是一个段落。

50
00:02:15,250 --> 00:02:17,500
这是一个标题，对不对？

51
00:02:17,500 --> 00:02:22,740
和的Instagram将使用这些，但它
也将使用阵营的组件。

52
00:02:22,740 --> 00:02:25,740
>> 反应成分
改装成了式HTML元素

53
00:02:25,740 --> 00:02:28,100
有他们自己的行为
包含在其中。

54
00:02:28,100 --> 00:02:31,800
所以，作为一个例子，我们可以有
时间元素，时间分量，

55
00:02:31,800 --> 00:02:34,095
其中将包含类似
时间戳，要知道，

56
00:02:34,095 --> 00:02:37,170
配置文件组件，它
将包含个人资料图片

57
00:02:37,170 --> 00:02:38,820
和该人的名字。

58
00:02:38,820 --> 00:02:42,930
它可以有一个像计数器，这
可以指望像喜欢的号码，

59
00:02:42,930 --> 00:02:45,610
如果你点击它，它会
增加喜欢的数目。

60
00:02:45,610 --> 00:02:48,200
一个组件仅仅是一个
一串HTML代码

61
00:02:48,200 --> 00:02:50,520
有一些功能
包裹在它的内部。

62
00:02:50,520 --> 00:02:53,770
所以，它就像一个HTML元素
对类固醇，正如我以前说过。

63
00:02:53,770 --> 00:02:56,270
你可以把这些组件，
你可以把它们放在一起

64
00:02:56,270 --> 00:02:59,060
使新的部件，
这种情况下，一个后部件，

65
00:02:59,060 --> 00:03:00,505
它包含了所有这些东西。

66
00:03:00,505 --> 00:03:04,050
这将包括时间，档案，
LikeCounter，也许评论

67
00:03:04,050 --> 00:03:06,100
也许图像本身。

68
00:03:06,100 --> 00:03:10,810
所以Web应用程序是通过采取刚建
组件并把它们放在一起。

69
00:03:10,810 --> 00:03:15,620
一个Instagram的饲料无非是
一堆帖子此起彼伏，

70
00:03:15,620 --> 00:03:19,032
每个帖子包含类似的时间，
个人，LikeCounter，等等。

71
00:03:19,032 --> 00:03:20,490
这有点像盖房子。

72
00:03:20,490 --> 00:03:22,660
你不建
房子从上而下。

73
00:03:22,660 --> 00:03:24,960
你把元件 - 你
取像浴室。

74
00:03:24,960 --> 00:03:28,320
你把你坚持他们的bedroom--
在一起，你有一个新的组成部分。

75
00:03:28,320 --> 00:03:29,760
你有房子的一个新的组成部分。

76
00:03:29,760 --> 00:03:32,860
>> 等反应过来是所有围绕
这种思想的组件的那

77
00:03:32,860 --> 00:03:36,600
是互动的，那是声明。

78
00:03:36,600 --> 00:03:39,650
就像你刚才说什么
信息是，并且它呈现它。

79
00:03:39,650 --> 00:03:40,600
他们是组合的。

80
00:03:40,600 --> 00:03:43,880
你可以把一个时代和一个配置文件，把
他们在一起，让更好的东西。

81
00:03:43,880 --> 00:03:47,770
而且他们是可重复使用的，因此，如果您
在源代码后，

82
00:03:47,770 --> 00:03:49,440
你可以嵌入任何地方。

83
00:03:49,440 --> 00:03:53,160
>> 您可以嵌入一个Instagram的
在自己的网站上的东西。

84
00:03:53,160 --> 00:03:56,830
你可以在Facebook的嵌入，例如，
只要它使用阵营为好。

85
00:03:56,830 --> 00:04:00,360
因此，组件是真的，真的，真的
纸幅的强大积木

86
00:04:00,360 --> 00:04:04,180
可以在任何地方使用，并把
在一起，使新的积木。

87
00:04:04,180 --> 00:04:07,159
那是非常，非常
高层次的概述。

88
00:04:07,159 --> 00:04:09,200
因此，再次，如果你有
在任何时候任何疑问

89
00:04:09,200 --> 00:04:14,470
关于电抗器，哲学
编码，阻止了我，让我知道。

90
00:04:14,470 --> 00:04:18,420
>> 好了，等反应过来是很酷，因为它
具有寻找一种不同的方式

91
00:04:18,420 --> 00:04:19,870
你如何构建Web应用程序。

92
00:04:19,870 --> 00:04:23,620
你可能听说过的MVC，一对
模型，你在CS50或任何控制

93
00:04:23,620 --> 00:04:25,940
其他使用探测类。

94
00:04:25,940 --> 00:04:29,000
和大多数的框架是
围绕MVC的想法。

95
00:04:29,000 --> 00:04:30,410
反应不大。

96
00:04:30,410 --> 00:04:32,980
REACT是围绕想法
单向数据流的

97
00:04:32,980 --> 00:04:36,510
所看到的这个图表或图形在这里。

98
00:04:36,510 --> 00:04:38,260
>> 基本上，你有一个数据源。

99
00:04:38,260 --> 00:04:42,380
和数据源将决定
如何布局某些组件。

100
00:04:42,380 --> 00:04:45,452
和部件将
然后，当它们发生变化，

101
00:04:45,452 --> 00:04:47,160
他们会告诉
数据源来改变。

102
00:04:47,160 --> 00:04:49,350
>> 要使用Instagram的
例如，你可能有

103
00:04:49,350 --> 00:04:52,050
喜欢交对象的列表
在数据库或什么的。

104
00:04:52,050 --> 00:04:53,310
的数据。

105
00:04:53,310 --> 00:04:57,600
然后我们交的组件
将这些数据，

106
00:04:57,600 --> 00:05:01,830
并使用这些数据来呈现
在屏幕上的东西。

107
00:05:01,830 --> 00:05:04,300
这就是箭头
从数据到组件是，

108
00:05:04,300 --> 00:05:07,930
然后该相同的数据是用来
渲染一堆组件。

109
00:05:07,930 --> 00:05:10,290
>> 在Facebook的使者，为
例如，这是反应，

110
00:05:10,290 --> 00:05:13,410
你可能有一个清单
信息作为数据源。

111
00:05:13,410 --> 00:05:15,927
而这会使不
消息仅列表

112
00:05:15,927 --> 00:05:17,510
也是你的朋友列表。

113
00:05:17,510 --> 00:05:19,200
你有未读邮件数。

114
00:05:19,200 --> 00:05:23,330
也许还可能导致Facebook的事情
这就是在Facebook.com的底部。

115
00:05:23,330 --> 00:05:25,610
相同的数据是一个
真理的单一来源

116
00:05:25,610 --> 00:05:28,290
并引起了很多
部件要呈现。

117
00:05:28,290 --> 00:05:30,290
每当其中的一个
成分改变时，

118
00:05:30,290 --> 00:05:32,320
它可以追溯到和
改变的数据源。

119
00:05:32,320 --> 00:05:33,460
>> 您发送一条消息，对不对？

120
00:05:33,460 --> 00:05:34,780
改变数据源。

121
00:05:34,780 --> 00:05:39,490
你读你的邮件，
所以，你可以读为0。

122
00:05:39,490 --> 00:05:41,136
改变数据源。

123
00:05:41,136 --> 00:05:44,010
并注意所有这些之一的
箭头回到相同的数据

124
00:05:44,010 --> 00:05:47,662
源代码，所以你知道，
给予一定的数据集，

125
00:05:47,662 --> 00:05:49,870
你确切地知道是什么
页面将会是什么样的。

126
00:05:49,870 --> 00:05:50,700
这是确定的。

127
00:05:50,700 --> 00:05:53,451
你要知道，给予一定的数据，是什么
该页面将会是什么样的。

128
00:05:53,451 --> 00:05:56,158
你可以预测它是如何去
行为和事情的进展

129
00:05:56,158 --> 00:05:57,650
当他们放在一起工作。

130
00:05:57,650 --> 00:06:00,410
>> 如果我有一百万的组件
在这里，它会表现得一样的吧？

131
00:06:00,410 --> 00:06:02,290
你不会有任何
奇怪的互连。

132
00:06:02,290 --> 00:06:04,120
一个数据呈现一万个零件。

133
00:06:04,120 --> 00:06:06,879
一百万成分可
回去和编辑数据。

134
00:06:06,879 --> 00:06:07,920
所以，这是非常好的。

135
00:06:07,920 --> 00:06:10,870
我们正在构建组合的，
易可伸缩的Web应用程序。

136
00:06:10,870 --> 00:06:13,150
>> 你有一个数据源，
真理的来源。

137
00:06:13,150 --> 00:06:15,790
这告诉你的组件
如何布局的页面，

138
00:06:15,790 --> 00:06:18,190
和部件将
处理互动。

139
00:06:18,190 --> 00:06:20,150
如果他们想改变
的事情，只是回去

140
00:06:20,150 --> 00:06:21,750
并告诉数据源来改变。

141
00:06:21,750 --> 00:06:22,850
合理？

142
00:06:22,850 --> 00:06:26,010
等反应过来是怎么一回事的理解
如何建立一个组件

143
00:06:26,010 --> 00:06:29,540
如何使你的组件
与外界交互。

144
00:06:29,540 --> 00:06:31,850
>> 使得组件进行交互
与外界

145
00:06:31,850 --> 00:06:34,490
采用另一种技术
所谓的流量，这

146
00:06:34,490 --> 00:06:36,872
是一个框架，是
加在阵营的顶部。

147
00:06:36,872 --> 00:06:38,330
我们不会谈论这一点。

148
00:06:38,330 --> 00:06:42,990
我们将更多地谈论，因为
数据时，你怎么能呈现一个组成部分？

149
00:06:42,990 --> 00:06:47,010
>> 而等反应过来是真的很酷，因为你
可以使用它与任何你想要的后端。

150
00:06:47,010 --> 00:06:50,480
如果你有一个像Python的后端，
如果你的Python能吐出一些数据，

151
00:06:50,480 --> 00:06:51,610
反应可以呈现它。

152
00:06:51,610 --> 00:06:54,700
如果你没有JS输出
数据，阵营呈现它。

153
00:06:54,700 --> 00:06:56,890
红宝石导轨与
数据作出反应呈现它。

154
00:06:56,890 --> 00:07:01,860
>> 等反应过来基本上是一个网络
view--与部件的前端

155
00:07:01,860 --> 00:07:03,910
任何数据源的任何责任。

156
00:07:03,910 --> 00:07:07,145
所以打算从数据源
反应成分是很容易的。

157
00:07:07,145 --> 00:07:08,770
走另一条路是有点困难。

158
00:07:08,770 --> 00:07:10,462
使用助焊剂正如我前面提到。

159
00:07:10,462 --> 00:07:11,420
我们不会进入的。

160
00:07:11,420 --> 00:07:13,740
我们将重点更多地放在
数据到组件的一面。

161
00:07:13,740 --> 00:07:15,880
这种方式可以使
酷，好玩的网络应用程序。

162
00:07:15,880 --> 00:07:19,870
也不会影响外界
现在，但那是另一回事。

163
00:07:19,870 --> 00:07:22,210
>> 好了，如果你在这里
我最后一次研讨会

164
00:07:22,210 --> 00:07:26,610
你就会知道所有的代码是
今天的演讲将是在这个网址

165
00:07:26,610 --> 00:07:29,320
在这里，对不起，这个网址在这里。

166
00:07:29,320 --> 00:07:32,730
基本上我们会去
通过四个步骤，也许五，

167
00:07:32,730 --> 00:07:33,510
恐怕不是五。

168
00:07:33,510 --> 00:07:37,300
我们将移动通过四个步骤
构建一个样品的阵营应用程序。

169
00:07:37,300 --> 00:07:39,550
所以所有的源代码
对于每一步

170
00:07:39,550 --> 00:07:42,216
将是在这里，所以，如果
你沿着之后在家里，

171
00:07:42,216 --> 00:07:43,991
随意细读这段代码。

172
00:07:43,991 --> 00:07:46,740
如果你在这里下沿，
我们将其显示在屏幕上，

173
00:07:46,740 --> 00:07:47,739
所以不用担心。

174
00:07:47,739 --> 00:07:50,930
但是，如果你是在家里，感觉
免费访问这个网站。

175
00:07:50,930 --> 00:07:56,400
而且，是的，你应该能够得到
你会永远在这里需要的代码。

176
00:07:56,400 --> 00:08:01,380
所以这是一个很好的备忘单，以及
为你的未来冒险反应。

177
00:08:01,380 --> 00:08:04,490
酷，所以如果大家谁在这里，
即使你是在家里，

178
00:08:04,490 --> 00:08:11,580
拉起这个网站，is.gd/cs50react，
没有资本，没有下划线，什么都没有。

179
00:08:11,580 --> 00:08:15,849
>> 你会看到一个页面，看起来
有点像这样。

180
00:08:15,849 --> 00:08:17,140
这是一个叫CodePen的事情。

181
00:08:17,140 --> 00:08:20,030
CodePen是一个协作
编码环境

182
00:08:20,030 --> 00:08:23,364
与我可以编写代码在这里，
它会自动发送给你。

183
00:08:23,364 --> 00:08:24,780
而这种方式，我可以编写代码。

184
00:08:24,780 --> 00:08:26,920
我可以在这里运行代码。

185
00:08:26,920 --> 00:08:33,470
>> 为example--如果它reloads--参见
我在网页上运行的JavaScript代码

186
00:08:33,470 --> 00:08:36,390
就在这里，它会
自动渲染网页

187
00:08:36,390 --> 00:08:37,980
这个JavaScript代码。

188
00:08:37,980 --> 00:08:40,039
所以这是一种
我们尝试代码

189
00:08:40,039 --> 00:08:43,089
而不必使用真快
我们的ID或使用我们本地机器

190
00:08:43,089 --> 00:08:44,290
或什么的。

191
00:08:44,290 --> 00:08:47,670
这是一个非常快速的方式为您样机
并测试各种不同的代码。

192
00:08:47,670 --> 00:08:50,560
>> 所以我将要采取
示例代码，把它在这里。

193
00:08:50,560 --> 00:08:52,374
我们将通过它来工作。

194
00:08:52,374 --> 00:08:54,540
如果你是在家里，你
可以拉这件事为好。

195
00:08:54,540 --> 00:08:57,530
我已经安装了
反应在这里，所以你可以只

196
00:08:57,530 --> 00:09:00,770
在这里编写自己的代码，并
尝试，因为你自己的游乐场。

197
00:09:00,770 --> 00:09:04,940
>> 是啊，如果每个人都
在这里打开了这个链接。

198
00:09:04,940 --> 00:09:08,080
请给我一个大拇指
了，一旦你打开它。

199
00:09:08,080 --> 00:09:10,960

200
00:09:10,960 --> 00:09:13,770
优酷，酷爽。

201
00:09:13,770 --> 00:09:16,914
这里没有什么，现在，但
我们将改变很快。

202
00:09:16,914 --> 00:09:21,250
>> 好了，等反应过来是一个JavaScript
库，正因为如此，

203
00:09:21,250 --> 00:09:24,480
需要JavaScript的知识，
这是网络编程语言。

204
00:09:24,480 --> 00:09:27,660
而且它被用于其他的事情
现在太多，但主要是网页开发

205
00:09:27,660 --> 00:09:32,040
语言，因此，如果您不熟悉
即，读一个叫JSforCats.com网站。

206
00:09:32,040 --> 00:09:32,700
太好了。

207
00:09:32,700 --> 00:09:34,240
你可以学习JavaScript
在半小时内。

208
00:09:34,240 --> 00:09:34,990
这是令人难以置信的。

209
00:09:34,990 --> 00:09:36,420
>> 因此，不妨一读。

210
00:09:36,420 --> 00:09:39,960
我们也是一个很大的HTML在这里，因为
我们在设计过程中的网页。

211
00:09:39,960 --> 00:09:43,890
所以，如果你不熟悉
HTML，检查出HTMLdog.com。

212
00:09:43,890 --> 00:09:46,520
我认为学习阵营是
如果你已经万倍更容易

213
00:09:46,520 --> 00:09:47,892
知道的构建块。

214
00:09:47,892 --> 00:09:50,600
如果您拥有的组件，它的
容易使一个更大的组件。

215
00:09:50,600 --> 00:09:51,860
这是阵营的语言为您服务。

216
00:09:51,860 --> 00:09:54,270
>> 因此，继续前进，并给
这些东西读。

217
00:09:54,270 --> 00:09:55,070
暂停该视频。

218
00:09:55,070 --> 00:09:57,440
不妨一读，如果你是
在家里，如果你不

219
00:09:57,440 --> 00:10:00,794
熟悉HTML或JavaScript

220
00:10:00,794 --> 00:10:02,960
好了，我们要去
做的是我们要做出

221
00:10:02,960 --> 00:10:06,470
使用阵营一个非常基本的烧录卡的应用程序。

222
00:10:06,470 --> 00:10:08,210
我们将有一个闪卡。

223
00:10:08,210 --> 00:10:09,880
您可以翻转卡来回。

224
00:10:09,880 --> 00:10:12,399
同时我们也将有名单
所有我们有卡，

225
00:10:12,399 --> 00:10:14,190
如果我们感觉
雄心勃勃，我们可能会

226
00:10:14,190 --> 00:10:17,060
能之间切换
汽车通过点击。

227
00:10:17,060 --> 00:10:20,360
>> 但是，这是你的裸露，
骨头，一个非常简单的应用程序作出反应。

228
00:10:20,360 --> 00:10:22,560
所以这实际上是
不容易实现，

229
00:10:22,560 --> 00:10:26,030
但我们要表明的是，如果你这样做
这一点，这是非常，非常容易将其扩展

230
00:10:26,030 --> 00:10:27,680
如果其他人来帮您吧。

231
00:10:27,680 --> 00:10:33,750
因此，我们要经过四个步骤
从头开始建立这个。

232
00:10:33,750 --> 00:10:36,740
>> 好了，这四个步骤，我们将
与第一步骤开始。

233
00:10:36,740 --> 00:10:39,790
第一步骤将是
构建第一个组件。

234
00:10:39,790 --> 00:10:44,830
正如我以前说过，一个组件阵营
仅仅是对类固醇的HTML元素。

235
00:10:44,830 --> 00:10:49,660
它指定的HTML
和一些行为，并且它

236
00:10:49,660 --> 00:10:52,600
将指定的人
可以用它的交互方式

237
00:10:52,600 --> 00:10:54,270
那就内部状态。

238
00:10:54,270 --> 00:10:57,630
就像一个按钮，就会知道怎么样多
时间它被点击，例如，

239
00:10:57,630 --> 00:11:01,010
它会知道如何打好自己的。

240
00:11:01,010 --> 00:11:04,430
>> 因此，让我们继续前进，建立我们
使用JavaScript第一个组件。

241
00:11:04,430 --> 00:11:09,711
因此，如果语法看起来怪异，
这是一种，因为它是。

242
00:11:09,711 --> 00:11:11,710
所以，再一次，我们要去
做一个叫做变量

243
00:11:11,710 --> 00:11:14,580
应用程序使用关键字让，
这使得一个变量，

244
00:11:14,580 --> 00:11:18,210
让应用程序相同React.createClass。

245
00:11:18,210 --> 00:11:22,609
>> 反应是一个库，具有
在创建类的功能。

246
00:11:22,609 --> 00:11:24,400
而这个功能是
一些代码，你

247
00:11:24,400 --> 00:11:29,090
可以用它来创建一个新的
类型响应组件。

248
00:11:29,090 --> 00:11:32,780
所以React.createClass
使一个元件，

249
00:11:32,780 --> 00:11:35,270
与此组件将
能够做到的东西。

250
00:11:35,270 --> 00:11:40,460
最主要的是可以做的是使
东西，呈现为一个功能。

251
00:11:40,460 --> 00:11:44,500
>> 再次，如果该指数不明显
你，我建议你去JS猫

252
00:11:44,500 --> 00:11:45,682
而检查出来。

253
00:11:45,682 --> 00:11:47,710
是放大不够好？

254
00:11:47,710 --> 00:11:48,490
凉。

255
00:11:48,490 --> 00:11:50,670
>> 所以，每一个部件需要
有渲染功能。

256
00:11:50,670 --> 00:11:53,010
渲染功能说，
我该怎么打印屏幕上的？

257
00:11:53,010 --> 00:11:54,760
但是组件是
如果没有无用

258
00:11:54,760 --> 00:11:58,060
知道打印在屏幕上什么，所以
你需要有一个渲染功能。

259
00:11:58,060 --> 00:12:01,904
>> 因此，在渲染的东西，你
只需要返回一些HTML。

260
00:12:01,904 --> 00:12:03,820
什么是酷的是，
有一个东西叫

261
00:12:03,820 --> 00:12:08,660
JSX，这是一个扩展
的JavaScript所使用的反应。

262
00:12:08,660 --> 00:12:11,845
它让你里面写HTML
你的JavaScript中，这

263
00:12:11,845 --> 00:12:13,970
听起来有点不可思议，当
你先想想，

264
00:12:13,970 --> 00:12:15,553
但它使一个很大的意义之后。

265
00:12:15,553 --> 00:12:17,430
因此，我们可以做到这一点。

266
00:12:17,430 --> 00:12:21,360
如果您熟悉HTML，我知道
我们有与通用一个div

267
00:12:21,360 --> 00:12:22,790
容器的东西。

268
00:12:22,790 --> 00:12:26,380
我们可以返回一个div和内
这个分区，我们可以把东西。

269
00:12:26,380 --> 00:12:32,390
>> 所以我们可以说，我们想呈现刚
直线式烧录卡了。

270
00:12:32,390 --> 00:12:34,890
烧录卡，我会说，
将有一个问题和答案。

271
00:12:34,890 --> 00:12:37,530
所以这个DIV中，让我们
打印出一个段

272
00:12:37,530 --> 00:12:42,155
这说的问题 - 什么是
最终的答案生命，宇宙？

273
00:12:42,155 --> 00:12:47,640

274
00:12:47,640 --> 00:12:50,345
然后，答案是
将是，当然，42。

275
00:12:50,345 --> 00:12:56,880

276
00:12:56,880 --> 00:12:59,730
>> 这并没有拿出很好的。

277
00:12:59,730 --> 00:13:04,164
是啊，所以基本上你可真
编写HTML你的JavaScript中。

278
00:13:04,164 --> 00:13:06,330
而这将是
打印输出到屏幕上。

279
00:13:06,330 --> 00:13:08,250
因此，让我们尝试一下。

280
00:13:08,250 --> 00:13:09,520
>> 因此，我们有我们的组件。

281
00:13:09,520 --> 00:13:12,210
我们需要告诉阵营放
屏幕上的分量

282
00:13:12,210 --> 00:13:18,990
所以React.render，所以请注意，我们
把应用程序像任何其他元素。

283
00:13:18,990 --> 00:13:21,010
我们写它，因为它是一个HTML元素。

284
00:13:21,010 --> 00:13:25,100
像，而不是说像IMG
图像或P的段落，

285
00:13:25,100 --> 00:13:28,120
你写的应用程序，那么应用程序是
像对待一个HTML元素。

286
00:13:28,120 --> 00:13:30,380
正如我前面所说，这是
类固醇的元素。

287
00:13:30,380 --> 00:13:32,870
>> 所以，你渲染应用程序，你
给它一个地方把它。

288
00:13:32,870 --> 00:13:37,170
这是你怎么能
告诉它放在哪里。

289
00:13:37,170 --> 00:13:46,200
我创建的一个简单的div
页面调用页面的ID，

290
00:13:46,200 --> 00:13:48,300
而这也正是该
元素的要去。

291
00:13:48,300 --> 00:13:49,841
>> 而且我们不打算使用HTML运行。

292
00:13:49,841 --> 00:13:53,145
基本上这是会得到
把这个页面元素内

293
00:13:53,145 --> 00:13:54,270
我们已经在屏幕上。

294
00:13:54,270 --> 00:13:59,210
所以它运行这段代码，并提请本
在屏幕上的东西，所以我们在这里。

295
00:13:59,210 --> 00:14:01,770
我们已经取得了我们的第一个作出反应的组成部分。

296
00:14:01,770 --> 00:14:08,000
>> 因此，只是作为一个回顾，我们轻轻地做
新类型的组件，对不对？

297
00:14:08,000 --> 00:14:10,145
这是什么React.createClass。

298
00:14:10,145 --> 00:14:12,680
而在这部分，我们
告诉它应该怎样做。

299
00:14:12,680 --> 00:14:15,590
每当这个组件是
被印刷到屏幕上，

300
00:14:15,590 --> 00:14:19,300
它会打印出与DIV
这两款在它的内部。

301
00:14:19,300 --> 00:14:24,460
>> 而我们所做的事情，我们做了一个新的应用程序
使用尖括号的应用程序的符号。

302
00:14:24,460 --> 00:14:27,160
我们告诉它，把它
里面的页面元素。

303
00:14:27,160 --> 00:14:29,867
所以我做了什么，它创造
从模板创建新的应用程序。

304
00:14:29,867 --> 00:14:31,200
然后我告诉它渲染。

305
00:14:31,200 --> 00:14:33,680
所以说，OK，应用程序，
我要打印出来？

306
00:14:33,680 --> 00:14:36,970
应用程序说，去打印出一个div
与它内部的两个段落。

307
00:14:36,970 --> 00:14:40,420
瞧，还有我们的分度，
两段它里​​面。

308
00:14:40,420 --> 00:14:43,180
有意义这么远吗？

309
00:14:43,180 --> 00:14:46,690
>> 所以，再一次，整个挑战作出反应
只是知道如何做组件。

310
00:14:46,690 --> 00:14:48,500
如何使
组件协同工作。

311
00:14:48,500 --> 00:14:51,780
现在，我们已经取得了我们的第一个
组件，让我们返回

312
00:14:51,780 --> 00:14:54,284
并进行组件定制。

313
00:14:54,284 --> 00:14:56,700
所以，你在HTML知道你
可以给你的按钮类？

314
00:14:56,700 --> 00:14:59,146
你可以给你的锚在href。

315
00:14:59,146 --> 00:15:00,770
你可以给你输入的类型，对不对？

316
00:15:00,770 --> 00:15:04,740
你可以给更多的自定义
属性应用到所有的元素

317
00:15:04,740 --> 00:15:06,490
使其更有趣。

318
00:15:06,490 --> 00:15:09,030
我们其实可以做
同样的事情。

319
00:15:09,030 --> 00:15:17,500
>> 所以我们可以说，我们希望我们的
应用程序去提供任何卡。

320
00:15:17,500 --> 00:15:19,630
现在我们只是
呈现一个硬编码卡。

321
00:15:19,630 --> 00:15:22,530
我们知道，只有一个
卡可以做，所以我们

322
00:15:22,530 --> 00:15:25,960
要试着改变这种现在这么
我们可以只给它一些卡。

323
00:15:25,960 --> 00:15:27,410
它会打印出存储卡。

324
00:15:27,410 --> 00:15:29,380
>> 你应该试着让你的
组件非常通用。

325
00:15:29,380 --> 00:15:31,654
于是就这样，我可以发邮件
这是我的朋友，是这样，

326
00:15:31,654 --> 00:15:33,820
无论烧录卡你，
只是将其送到这里，

327
00:15:33,820 --> 00:15:35,290
它会自行做。

328
00:15:35,290 --> 00:15:37,650
你可以把其他
事情在自己的应用程序。

329
00:15:37,650 --> 00:15:40,600
>> 但首先，让我们来打破这种
成两个部件，

330
00:15:40,600 --> 00:15:44,500
但我们要分开卡
印刷部分从实际的应用程序的一部分。

331
00:15:44,500 --> 00:15:46,660
所以我们所能做的就是我们
可从应用程序改变这种

332
00:15:46,660 --> 00:15:51,300
到CardView，只是一个
对于应用程序的新名称，

333
00:15:51,300 --> 00:15:54,450
我们可以做一个新的
部分所谓的应用程序，

334
00:15:54,450 --> 00:15:56,336
不要混淆与旧应用程序。

335
00:15:56,336 --> 00:16:00,730
我们已经得到了createClass，
而像在HTML中，

336
00:16:00,730 --> 00:16:03,590
你可以嵌套阵营组件
内彼此的。

337
00:16:03,590 --> 00:16:16,430
>> 因此，在这个渲染功能，
函数返回CardView，

338
00:16:16,430 --> 00:16:18,234
而这是完全一样的东西。

339
00:16:18,234 --> 00:16:19,400
为什么这是同样的事情？

340
00:16:19,400 --> 00:16:22,590
相反渲染只是该应用程序的那
有div和配对在它的内部，

341
00:16:22,590 --> 00:16:26,194
该应用呈现CardView，和
CardView呈现DIV和段落。

342
00:16:26,194 --> 00:16:29,110
因此，这是我们的第一个例子
彼此的内部嵌套元素。

343
00:16:29,110 --> 00:16:32,177
那有意义吗？

344
00:16:32,177 --> 00:16:33,760
所以，再一次，我们有一个CardView元素。

345
00:16:33,760 --> 00:16:37,250
我们的应用程序的元素
那它比。

346
00:16:37,250 --> 00:16:40,990
>> 好了，我们希望我们的CardView--如果你
提供一个良好的CardView一定的卡，

347
00:16:40,990 --> 00:16:43,370
它会打印出你的，对吗？

348
00:16:43,370 --> 00:16:48,050
因此，首先，我们需要一张卡，
让我们做一个卡片对象。

349
00:16:48,050 --> 00:17:02,930
因此，让我的卡equal--
如果你都熟悉，

350
00:17:02,930 --> 00:17:05,260
这还仅仅是符号的制定
对象在JavaScript中。

351
00:17:05,260 --> 00:17:09,280
这有点像一个struct
在C，所以我们做了一个卡，

352
00:17:09,280 --> 00:17:15,920
所以现在我们可以通过这个卡
属性或作为在HTML中的一个属性

353
00:17:15,920 --> 00:17:17,290
术语，我们的应用程序。

354
00:17:17,290 --> 00:17:20,210
因此，我们可以做到这一点，应用程序
卡等于myCard。

355
00:17:20,210 --> 00:17:23,200
>> 你知道如何输入，你做
输入型等于文本或按钮

356
00:17:23,200 --> 00:17:25,240
类的equals BTN的引导，？

357
00:17:25,240 --> 00:17:29,500
同样的想法，应用卡equals--
你得把括号这里 - 

358
00:17:29,500 --> 00:17:33,830
应用卡等于myCard，所以这
说我们有这个卡的对象。

359
00:17:33,830 --> 00:17:39,149
我也要把它作为一个
属性的应用程序组件。

360
00:17:39,149 --> 00:17:41,440
而这个应用程序组件将
能够访问它，做

361
00:17:41,440 --> 00:17:43,580
有趣的东西吧。

362
00:17:43,580 --> 00:17:47,650
>> 因此，我们的应用程序将是
给一张卡，所以现在，

363
00:17:47,650 --> 00:17:49,980
让我们的应用程序，只需给
卡到CardView

364
00:17:49,980 --> 00:17:53,110
本身因为喜欢的应用程序是不是
要知道做什么用呢，

365
00:17:53,110 --> 00:17:54,850
所以我们只把它给CardView。

366
00:17:54,850 --> 00:18:00,050
因此，我们将通过它的
同样的方式，卡等于，

367
00:18:00,050 --> 00:18:05,426
因此每个组件可以访问
事情已经交给它。

368
00:18:05,426 --> 00:18:07,800
他们可以访问的属性
已给它

369
00:18:07,800 --> 00:18:09,470
使用此语法，this.props.card。

370
00:18:09,470 --> 00:18:12,010

371
00:18:12,010 --> 00:18:14,920
>> 所以会发生什么这里
你有myCard对象。

372
00:18:14,920 --> 00:18:18,250
你将它传递到应用程序
使用应用程序卡等于myCard。

373
00:18:18,250 --> 00:18:21,420
该卡的对象是给你的应用程序。

374
00:18:21,420 --> 00:18:24,400
该应用程序可以访问它
作为this.props.card。

375
00:18:24,400 --> 00:18:28,780
这有点像一个形象
知道它的来源。

376
00:18:28,780 --> 00:18:31,972
>> 这个应用程序知道它的卡
是，它可以做的东西用它。

377
00:18:31,972 --> 00:18:32,930
它可以做计算。

378
00:18:32,930 --> 00:18:35,290
它能够根据关闭它的决定。

379
00:18:35,290 --> 00:18:39,950
>> 现在，我要通过
this.props.card到CardView。

380
00:18:39,950 --> 00:18:43,420
有意义这么远吗？

381
00:18:43,420 --> 00:18:45,210
它会更有意义吧。

382
00:18:45,210 --> 00:18:46,990
>> 好了，现在我们在CardView。

383
00:18:46,990 --> 00:18:51,719
我们CardView，鉴于该卡，应
打印出的问题和答案。

384
00:18:51,719 --> 00:18:54,510
现在，我们只是打印出一些
硬编码的问题和答案。

385
00:18:54,510 --> 00:18:57,720
我们需要计算out--我们需要
问他们给了我们卡

386
00:18:57,720 --> 00:19:01,360
什么是问题和答案，
然后打印出来到屏幕上。

387
00:19:01,360 --> 00:19:02,470
>> 因此，我们可以在这里做到这一点。

388
00:19:02,470 --> 00:19:06,135
在渲染begin--先做等于。

389
00:19:06,135 --> 00:19:08,710

390
00:19:08,710 --> 00:19:13,050
因此，我们在这里所做的是，我们知道，
该卡是给了我们一个属性，

391
00:19:13,050 --> 00:19:13,580
对？

392
00:19:13,580 --> 00:19:15,930
它给我们作为输入。

393
00:19:15,930 --> 00:19:19,440
就像这几乎就像
参数的函数。

394
00:19:19,440 --> 00:19:22,810
该卡是一个参数
几乎到了这个CardView。

395
00:19:22,810 --> 00:19:25,239
>> 我们将抽取，并把
入变量的问题。

396
00:19:25,239 --> 00:19:27,280
确保答案去
该变量的答案。

397
00:19:27,280 --> 00:19:31,130
提示该卡回答。

398
00:19:31,130 --> 00:19:35,072
现在，我们有这些，
而不是打印出来的文字，

399
00:19:35,072 --> 00:19:37,030
我们要打印出
不管他们给了我们。

400
00:19:37,030 --> 00:19:43,580
>> 因此，这stuff--所以我们要
扑灭问题答案。

401
00:19:43,580 --> 00:19:46,380
让我们来看看，如果这个工程。

402
00:19:46,380 --> 00:19:52,800
酷，所以让我们来看它
一个更多的时间只是要确定。

403
00:19:52,800 --> 00:20:00,470
>> 所以，我的卡是卡的对象，我们
被赋予该卡的应用程序。

404
00:20:00,470 --> 00:20:04,790
和应用程序将要采取的
卡并把它交给CardView。

405
00:20:04,790 --> 00:20:09,190
而这个CardView说，如果你
给我任何烧录卡的对象，

406
00:20:09,190 --> 00:20:11,920
我会打印出了问题
它的答案，对吗？

407
00:20:11,920 --> 00:20:14,590
>> 因此，我可以做的是，我可以
发送该代码，第一

408
00:20:14,590 --> 00:20:16,580
像10行代码的我，给我的朋友。

409
00:20:16,580 --> 00:20:18,820
他可以将它嵌入到
他自己的应用程序。

410
00:20:18,820 --> 00:20:27,200
而只要他做了同样的事情，
像CardView卡等于这一点，

411
00:20:27,200 --> 00:20:30,580
只要他所创造的CardView
并赋予它正确的信息，

412
00:20:30,580 --> 00:20:31,987
他可以使自己的卡。

413
00:20:31,987 --> 00:20:34,320
所以这样一来，这是一个非常
为您打造酷路

414
00:20:34,320 --> 00:20:35,906
使用对方，正确的组件吗？

415
00:20:35,906 --> 00:20:38,280
这张卡，我可以公布
这CardView在互联网上，

416
00:20:38,280 --> 00:20:39,790
人们将能够使用它。

417
00:20:39,790 --> 00:20:45,070
所以基本上，它就像之一
标准函数在C库。

418
00:20:45,070 --> 00:20:47,280
>> 它是一个函数，其中
有人写它。

419
00:20:47,280 --> 00:20:48,419
你给一定的投入。

420
00:20:48,419 --> 00:20:49,710
它会产生一定的输出。

421
00:20:49,710 --> 00:20:50,890
你不在乎它是如何工作的内部。

422
00:20:50,890 --> 00:20:53,790
只要你给它正确的
输入时，它会做出正确的输出。

423
00:20:53,790 --> 00:20:57,850
>> 和组件可以是
想到了同样的方式。

424
00:20:57,850 --> 00:21:00,280
这CardView像
库函数。

425
00:21:00,280 --> 00:21:03,400
如果你给它一些卡
作为一个属性，它会

426
00:21:03,400 --> 00:21:05,095
打印出该卡中的内容。

427
00:21:05,095 --> 00:21:16,820
如果我改变我的卡样
而不是像什么是5 + 37，

428
00:21:16,820 --> 00:21:19,210
它会相应更新。

429
00:21:19,210 --> 00:21:21,955
因此，只要通过改变输入，
它得到了一定的输出。

430
00:21:21,955 --> 00:21:24,830
所以，你能想到的组件几乎
如本方式的功能，其中

431
00:21:24,830 --> 00:21:25,920
你可以放在一起。

432
00:21:25,920 --> 00:21:29,440
你得到的输入，像这样CardView
作为输入，所得到的输出。

433
00:21:29,440 --> 00:21:31,900
在这种情况下，输出是HTML。

434
00:21:31,900 --> 00:21:34,404
有意义这么远吗？

435
00:21:34,404 --> 00:21:36,890
酷，如此反复，性质
您如何传递信息

436
00:21:36,890 --> 00:21:40,900
流入和流出组件。

437
00:21:40,900 --> 00:21:42,740
>> 好了，让我们这
东西互动。

438
00:21:42,740 --> 00:21:44,450
现在它是一种无聊的。

439
00:21:44,450 --> 00:21:45,520
什么是[听不清]？

440
00:21:45,520 --> 00:21:48,210
您可以打印出一些，
但是这一切都可以做。

441
00:21:48,210 --> 00:21:51,550
>> 因此，让我们回到
老问题，只是现在。

442
00:21:51,550 --> 00:21:54,405
好了，现在这些组件
很无趣，因为他们做的，

443
00:21:54,405 --> 00:21:55,030
他们得到的输入。

444
00:21:55,030 --> 00:21:56,100
他们使输出的，对不对？

445
00:21:56,100 --> 00:21:57,049
这是一种无聊的。

446
00:21:57,049 --> 00:21:59,090
我们希望有我们的
组件能够有

447
00:21:59,090 --> 00:22:02,150
某种内部状态，
像想起了什么。

448
00:22:02,150 --> 00:22:05,320
>> 对于烧录卡，对于
例如，什么样的状态

449
00:22:05,320 --> 00:22:07,550
也许你想
记得一个烧录卡？

450
00:22:07,550 --> 00:22:09,740
什么临时身份
也许你要记住

451
00:22:09,740 --> 00:22:12,491
在闪卡应用程序中的烧录卡？

452
00:22:12,491 --> 00:22:13,990
听众：无论是被翻转？

453
00:22:13,990 --> 00:22:14,990
NEEL MEHTA：对，没错。

454
00:22:14,990 --> 00:22:17,665
所以，你可能想保留
赛道是你面对或有

455
00:22:17,665 --> 00:22:19,100
你面对倒在卡上。

456
00:22:19,100 --> 00:22:23,420
在Facebook上，例如，你会
希望新闻提要中记得在哪里

457
00:22:23,420 --> 00:22:25,870
是你还是喜欢谁的个人资料
你现在做。

458
00:22:25,870 --> 00:22:30,127
>> 在Messenger中，像什么文字，你
请在输入框中，对不对？

459
00:22:30,127 --> 00:22:31,710
如果您刷新页面，它就会消失。

460
00:22:31,710 --> 00:22:32,793
但是，你真的不关心。

461
00:22:32,793 --> 00:22:33,770
这只是暂时的。

462
00:22:33,770 --> 00:22:34,548
是吗？

463
00:22:34,548 --> 00:22:36,152
>> 听众：[听不清]

464
00:22:36,152 --> 00:22:38,360
NEEL MEHTA：像一道闪光
卡，就像你可以看到

465
00:22:38,360 --> 00:22:40,290
问题的侧面或答案的一面？

466
00:22:40,290 --> 00:22:41,070
>> 听众：OK。

467
00:22:41,070 --> 00:22:43,270
>> NEEL MEHTA：像
双面烧录卡，对吧？

468
00:22:43,270 --> 00:22:46,370
是啊，所以你要
有这种想法的现在

469
00:22:46,370 --> 00:22:50,370
我有属性，这就好比投入，
但是状态，这是暂时的，嗯，

470
00:22:50,370 --> 00:22:51,839
您是否在网页上，对不对？

471
00:22:51,839 --> 00:22:54,380
同样，我在Facebook称
信使，我喜欢它的人

472
00:22:54,380 --> 00:22:56,550
您正在查看的Facebook
还是谁的个人资料，对不对？

473
00:22:56,550 --> 00:22:58,030
>> 这只是暂时的。

474
00:22:58,030 --> 00:23:01,200
它显示给用户的重要
这是怎么回事，但刷新​​页面。

475
00:23:01,200 --> 00:23:02,250
这其实并不重要。

476
00:23:02,250 --> 00:23:04,530
所以这是暂时的状态，
所以大家都它的状态。

477
00:23:04,530 --> 00:23:06,250
>> 所以，再一次，有国家和道具。

478
00:23:06,250 --> 00:23:09,084
道具被输入给
从数据源。

479
00:23:09,084 --> 00:23:10,250
国家就像是默认值。

480
00:23:10,250 --> 00:23:13,700
这就像东西，
使得东西互动。

481
00:23:13,700 --> 00:23:17,720
>> 因此，在我们CardView--让我们
我们CardView--所以这是很好的。

482
00:23:17,720 --> 00:23:21,420
我们要在这里做什么，我们要去
触摸CardView只有CardView。

483
00:23:21,420 --> 00:23:25,105
所以，我的朋友，谁得到了这一点，他们
不会注意到任何区别。

484
00:23:25,105 --> 00:23:27,230
他们不会有改变
任何自己的代码，

485
00:23:27,230 --> 00:23:29,410
但他们会看到他们的
CardView得到了改装成了。

486
00:23:29,410 --> 00:23:31,270
这是有关组件的一个很好的一部分。

487
00:23:31,270 --> 00:23:35,290
>> 好了，我们CardView，让我们试着
跟踪我们是否正在逐步起来

488
00:23:35,290 --> 00:23:36,560
或朝下。

489
00:23:36,560 --> 00:23:40,480
在阵营，我们做到这一点，首先
指定的初始状态。

490
00:23:40,480 --> 00:23:42,070
在什么地方卡了么？

491
00:23:42,070 --> 00:23:48,480
>> 所以，是一个叫getInitialState的功能
功能，我们返回一个对象。

492
00:23:48,480 --> 00:23:53,310
这个对象包含了一些状态，
一个国家仅仅是一个键值对。

493
00:23:53,310 --> 00:23:56,950
就像不同的指示，你有一个键和一个
值，你有喜欢的名字是一个字符串。

494
00:23:56,950 --> 00:24:01,410
>> 在这种情况下，我们说前面是真实的。

495
00:24:01,410 --> 00:24:03,760
这是说，我们有一个状态。

496
00:24:03,760 --> 00:24:06,570
国家的一个组成部分
是所谓的前一个属性。

497
00:24:06,570 --> 00:24:09,649
[听不清]，因此默认情况下，
我们是在卡的正面，

498
00:24:09,649 --> 00:24:11,440
我们可以改变这个
因为我们翻转卡。

499
00:24:11,440 --> 00:24:13,380
合理？

500
00:24:13,380 --> 00:24:18,190
>> 好了，在渲染，现在，我们
显示问题和答案。

501
00:24:18,190 --> 00:24:20,860
现在，我们应该做些什么
被显示的问题

502
00:24:20,860 --> 00:24:24,370
如果我们在卡的正面等等
答案是为卡的背面。

503
00:24:24,370 --> 00:24:26,850
这就是为什么你都使
该卡互动。

504
00:24:26,850 --> 00:24:28,100
因此，让我们尝试并为此在这里。

505
00:24:28,100 --> 00:24:31,600

506
00:24:31,600 --> 00:24:33,620
好了，先只是做一个变量。

507
00:24:33,620 --> 00:24:37,790
我们现在可以问this.state.front。

508
00:24:37,790 --> 00:24:42,010
我们访问状态同样我们
获得道具，所以this.state.front。

509
00:24:42,010 --> 00:24:45,870
>> 如果我们前面，然后文本
是this.props.card.question。

510
00:24:45,870 --> 00:24:48,777

511
00:24:48,777 --> 00:24:51,360
如果我们是在的前面
卡，我们将尝试和抓斗

512
00:24:51,360 --> 00:24:52,485
这个问题从卡。

513
00:24:52,485 --> 00:24:54,782

514
00:24:54,782 --> 00:24:57,240
否则，如果我们在后面
卡，我们怎么办？

515
00:24:57,240 --> 00:25:01,830

516
00:25:01,830 --> 00:25:02,750
>> 听众：答案？

517
00:25:02,750 --> 00:25:05,041
>> NEEL MEHTA：是的，所以文
等于this.props.card.answer。

518
00:25:05,041 --> 00:25:08,472

519
00:25:08,472 --> 00:25:10,930
但是，如果你注意，我们使用
的状态来作出决定

520
00:25:10,930 --> 00:25:14,420
因为现在的部件
结果可能有所不同

521
00:25:14,420 --> 00:25:16,710
根据关如何将这些与它进行交互。

522
00:25:16,710 --> 00:25:20,355
因此，而不是打印出这一点，
我们就打印出的文字。

523
00:25:20,355 --> 00:25:25,270

524
00:25:25,270 --> 00:25:28,650
酷，所以现在，你看，
我们只看到了问题。

525
00:25:28,650 --> 00:25:37,720
如果我手动更改状态这里
到前是假的，我们得到42回。

526
00:25:37,720 --> 00:25:39,720
>> 因此，再次，该组件
有它自己的状态。

527
00:25:39,720 --> 00:25:43,440
就像一个按钮知道是否
它被按下，

528
00:25:43,440 --> 00:25:46,080
这件事情知道什么是对
前面或后面。

529
00:25:46,080 --> 00:25:48,320
默认情况下，它的前面。

530
00:25:48,320 --> 00:25:50,840
然后，如果它是在前面，
我们将打印出的问题。

531
00:25:50,840 --> 00:25:53,106
如果是在后面，我们将
打印出来的答案。

532
00:25:53,106 --> 00:25:54,980
因此，再次，该信息
定是相同的。

533
00:25:54,980 --> 00:25:59,090
它只是看起来不一样
根据您如何编程。

534
00:25:59,090 --> 00:26:02,670
因此，例如，脸谱信使
即使你得到了相同的数据源，

535
00:26:02,670 --> 00:26:05,170
它可能看起来不同
因为国家是不同的。

536
00:26:05,170 --> 00:26:08,421
你正在寻找一个
不同的人的消息。

537
00:26:08,421 --> 00:26:10,930
>> 好了，这是所有好，
不错，但现在有什么实际

538
00:26:10,930 --> 00:26:15,940
使我们能够改变，无论是
我们的卡是正面或背面。

539
00:26:15,940 --> 00:26:19,010
我们可以通过添加一个翻动要这样做
按钮，按钮的卡那

540
00:26:19,010 --> 00:26:22,950
将翻转卡，如果是[听不清]。

541
00:26:22,950 --> 00:26:31,770
因此，让我们在这里添加一个按钮，这
按钮，这个按钮将翻转。

542
00:26:31,770 --> 00:26:35,650
>> 所以现在，它
没有做任何事情。

543
00:26:35,650 --> 00:26:37,075
它只是看起来不错。

544
00:26:37,075 --> 00:26:43,650
我们所能做的就是，我们可以添加一个点击
处理程序的onClick等于this.flip，

545
00:26:43,650 --> 00:26:44,820
我们将在后面定义翻转。

546
00:26:44,820 --> 00:26:47,120
但基本上，的onClick
是一个函数，

547
00:26:47,120 --> 00:26:48,675
当用户点击它被调用。

548
00:26:48,675 --> 00:26:52,330
>> 因此，该按钮就会知道
当它被点击。

549
00:26:52,330 --> 00:26:54,750
走到它被点击，
它会翻转卡。

550
00:26:54,750 --> 00:26:58,382
这有点像你
比萨快递员。

551
00:26:58,382 --> 00:27:01,590
你喜欢，没事，只要人
打电话给我，我会送披萨，对不对？

552
00:27:01,590 --> 00:27:03,420
>> 你注册这个监听器。

553
00:27:03,420 --> 00:27:04,530
你听的事件。

554
00:27:04,530 --> 00:27:07,657
你被调用，并且当
事件发生时，你做一些事情。

555
00:27:07,657 --> 00:27:08,240
你得到的比萨。

556
00:27:08,240 --> 00:27:11,480
在这种情况下，当你
点击，你翻转卡片。

557
00:27:11,480 --> 00:27:14,560
>> 因此，我们需要定义一个
功能，将翻转卡，

558
00:27:14,560 --> 00:27:17,930
因此，我们将编写一个正确的
在这里，翻页功能。

559
00:27:17,930 --> 00:27:20,850

560
00:27:20,850 --> 00:27:23,680
所以你觉得翻盖会做什么？

561
00:27:23,680 --> 00:27:27,180
同样，这被调用时，
我们点击翻页按钮。

562
00:27:27,180 --> 00:27:29,406
我应该功能翻转呢？

563
00:27:29,406 --> 00:27:34,136
>> 听众：更改this.state.front
从真到假的，假的真。

564
00:27:34,136 --> 00:27:38,420
>> NEEL MEHTA：是的，所以采取一切
this.front is--前状态。

565
00:27:38,420 --> 00:27:40,930
就拿前面的状态下，如果
这是真的，让假的。

566
00:27:40,930 --> 00:27:42,530
如果是假的，它是真的，对不对？

567
00:27:42,530 --> 00:27:45,330
因此，让我们试试吧。

568
00:27:45,330 --> 00:27:48,240
>> 你不能改变状态
只是做this.state。

569
00:27:48,240 --> 00:27:50,380
你不能做到这一点。

570
00:27:50,380 --> 00:27:52,030
你不能做到这一点。

571
00:27:52,030 --> 00:27:55,810
你必须使用的函数
所谓this.setState。

572
00:27:55,810 --> 00:28:03,230
>> 所以，你可以说this.setState前
结肠这个那里，再次感叹

573
00:28:03,230 --> 00:28:04,330
点装置相反。

574
00:28:04,330 --> 00:28:07,420
我想，如果这一点。 state.front
是真实的，它会变成假的。

575
00:28:07,420 --> 00:28:09,170
因此，我们将设置状态
从真为假。

576
00:28:09,170 --> 00:28:11,430
如果是假的，我们将
将其设置为false为true。

577
00:28:11,430 --> 00:28:17,210
>> 只是注意到我们设置和获取略
方式不同，所以让我们试试这个。

578
00:28:17,210 --> 00:28:18,675
Bada堆，看看这个。

579
00:28:18,675 --> 00:28:21,810
翻转按钮将现
切换前后的状态。

580
00:28:21,810 --> 00:28:24,990
>> 所以，在这里就是你看到一个
发生反应的魔法点点。

581
00:28:24,990 --> 00:28:28,420
就像我们从来没有告诉它它重新呈现。

582
00:28:28,420 --> 00:28:30,910
我们从来没有告诉它重绘什么。

583
00:28:30,910 --> 00:28:32,630
如果你这样做
没有反应，你会

584
00:28:32,630 --> 00:28:34,588
已用于：喜欢当
点击翻页按钮，

585
00:28:34,588 --> 00:28:37,290
你得告诉它
手动重新渲染，对不对？

586
00:28:37,290 --> 00:28:43,050
>> 反应过来是真的很酷，因为如果你
给它一个特定的状态和属性，

587
00:28:43,050 --> 00:28:45,760
它总是呈现
同样的事情。

588
00:28:45,760 --> 00:28:48,690
所以，当我们过我们改变
状态和性能，

589
00:28:48,690 --> 00:28:50,819
反应过来刚刚重新呈现整个事情。

590
00:28:50,819 --> 00:28:52,860
它知道，有一个
一对一的对应关系

591
00:28:52,860 --> 00:28:57,270
之间的状态和参数和HTML。

592
00:28:57,270 --> 00:29:00,110
所以每当无论是那些
通过一组状态变化，

593
00:29:00,110 --> 00:29:03,750
它会改变如何
薪酬重新呈现。

594
00:29:03,750 --> 00:29:06,650
所以基本上阵营就像是
等待着你去改变。

595
00:29:06,650 --> 00:29:09,870
>> 每当它改变的东西，
它会重新呈现整个页面。

596
00:29:09,870 --> 00:29:12,480
如果这听起来效率低下，
这是因为这将是，

597
00:29:12,480 --> 00:29:15,050
但反应使用的东西
称为影子DOM。

598
00:29:15,050 --> 00:29:19,950
代替直接绘制页的，它
保持虚拟的HTML树在内存中。

599
00:29:19,950 --> 00:29:23,620
>> 要知道，HTML是像一棵树，
像以分层数据结构。

600
00:29:23,620 --> 00:29:28,990
它使一个假树在内存中，
每当你更新页面，

601
00:29:28,990 --> 00:29:31,940
它会得出另一种假
树，它会计算

602
00:29:31,940 --> 00:29:35,120
它需要做什么改变
页面，使两棵树相等。

603
00:29:35,120 --> 00:29:38,540
所以基本上，它几乎
重新呈现了很多。

604
00:29:38,540 --> 00:29:41,540
然后，它只是喜欢改变
在小的调整页面可以根据需要，

605
00:29:41,540 --> 00:29:44,240
所以这是非常，非常，非常有效。

606
00:29:44,240 --> 00:29:46,970
>> 所以基本上阵营将
每当你想改变什么，

607
00:29:46,970 --> 00:29:49,010
它会重新渲染实际上的页面。

608
00:29:49,010 --> 00:29:52,830
它会找出我需要
改变以使真实页反映

609
00:29:52,830 --> 00:29:55,602
虚拟页面，它会做到这一点。

610
00:29:55,602 --> 00:29:56,560
这就是虚拟DOM。

611
00:29:56,560 --> 00:29:59,350
这是一个最大的
功能反应。

612
00:29:59,350 --> 00:30:00,880
>> 那有意义吗？

613
00:30:00,880 --> 00:30:01,540
任何问题？

614
00:30:01,540 --> 00:30:02,040
是吗？

615
00:30:02,040 --> 00:30:05,568

616
00:30:05,568 --> 00:30:08,969
>> 听众：如何
比较仍对MVC

617
00:30:08,969 --> 00:30:10,760
我们谈到了
像之前的资源。

618
00:30:10,760 --> 00:30:13,527
>> NEEL MEHTA：是的，这个问题
是它如何比较MVC？

619
00:30:13,527 --> 00:30:14,610
你问到的资源。

620
00:30:14,610 --> 00:30:16,445
好吧，让我们来谈谈它是如何发挥作用。

621
00:30:16,445 --> 00:30:18,190
>> 在MVC中，你会更新模型。

622
00:30:18,190 --> 00:30:20,560
在这种情况下，我们就会有一个卡型号。

623
00:30:20,560 --> 00:30:24,540
该视图将有
翻转按钮，并且控制

624
00:30:24,540 --> 00:30:26,310
将有翻页功能。

625
00:30:26,310 --> 00:30:28,450
因此，该视图会告诉
控制器翻转翻转。

626
00:30:28,450 --> 00:30:30,370
翻转会告诉
模式改变，对不对？

627
00:30:30,370 --> 00:30:33,915
>> 所以，当你做一个MVC，你
监听模式改变，

628
00:30:33,915 --> 00:30:37,150
你重新呈现相应的视图。

629
00:30:37,150 --> 00:30:39,210
或者你只是喜欢
有控制器。

630
00:30:39,210 --> 00:30:42,418
等待模式改变，然后
挑选像一个东西的一部分

631
00:30:42,418 --> 00:30:44,032
改变。

632
00:30:44,032 --> 00:30:45,740
在这里，我们有一件事，
但在一个大的应用程序，

633
00:30:45,740 --> 00:30:48,510
你要像记住什么
在每一个地方的变化，

634
00:30:48,510 --> 00:30:50,290
所以这是一个有点恼人。

635
00:30:50,290 --> 00:30:53,670
而等反应过来是好的
因为它有一个影子大教堂。

636
00:30:53,670 --> 00:30:56,040
它可以负担得起，只是
重写了整个事情。

637
00:30:56,040 --> 00:30:58,680
你不必以选择性
喜欢猜来更新内容。

638
00:30:58,680 --> 00:31:02,186
>> 在Facebook上，如果你喜欢
得到一个新的消息，在MVC中，

639
00:31:02,186 --> 00:31:04,060
你必须记住，
OK，改变的东西

640
00:31:04,060 --> 00:31:06,260
在的上方
页，消息图标。

641
00:31:06,260 --> 00:31:08,290
同时弹出一个新窗口的底部。

642
00:31:08,290 --> 00:31:10,070
另外，还要在该窗口中的新事物。

643
00:31:10,070 --> 00:31:11,060
同时播放声音。

644
00:31:11,060 --> 00:31:13,150
>> 这是一个很大的东西
外出同时。

645
00:31:13,150 --> 00:31:15,320
所以，如果你不
有一个影子大教堂，你会

646
00:31:15,320 --> 00:31:18,740
不得不说，因为手工做
你无法摆脱整个页面。

647
00:31:18,740 --> 00:31:21,430
你不能，那么你有
手动更改每一件事情，

648
00:31:21,430 --> 00:31:23,990
这是MVC真的很烦。

649
00:31:23,990 --> 00:31:27,640
>> 因此，为了要
节俭，他们有选择

650
00:31:27,640 --> 00:31:30,750
更新页面，这是
效率高，而且烦人。

651
00:31:30,750 --> 00:31:34,002
在阵营因为阴影，
大教堂，你会得到两件事是免费的。

652
00:31:34,002 --> 00:31:35,710
这是有效的，因为
的阴影大教堂。

653
00:31:35,710 --> 00:31:37,210
瓶颈正在更新的页面。

654
00:31:37,210 --> 00:31:40,292
它没有做的树操作。

655
00:31:40,292 --> 00:31:41,250
你得到的效率。

656
00:31:41,250 --> 00:31:45,420
您还可以使用的便利性，因为
如果你只是重写整个页面，

657
00:31:45,420 --> 00:31:48,970
但你只要知道，没事，这个事情
将要在页面上的某个地方。

658
00:31:48,970 --> 00:31:51,180
它可能是在不同的地方，但
这将在页面上，对不对？

659
00:31:51,180 --> 00:31:52,860
所以，你只要重新呈现
整个事情实际上，

660
00:31:52,860 --> 00:31:55,540
你可能会做一些
改变页面本身。

661
00:31:55,540 --> 00:31:57,850
>> 所以，再一次，在MVC你
不得不选择

662
00:31:57,850 --> 00:32:01,840
易用性和效率之间，
并做出反应，你会得到两个。

663
00:32:01,840 --> 00:32:04,020
因此，它是更好的。

664
00:32:04,020 --> 00:32:05,220
合理？

665
00:32:05,220 --> 00:32:06,676
固体。

666
00:32:06,676 --> 00:32:12,080
>> 好了，让我们来看看让我们来谈谈
有关步骤4的一点点，

667
00:32:12,080 --> 00:32:14,740
我们如何能够嵌入组件。

668
00:32:14,740 --> 00:32:16,260
因此，我们有这个权利吧。

669
00:32:16,260 --> 00:32:19,420
我们有自己的凉爽的小按钮。

670
00:32:19,420 --> 00:32:23,157
我们可以翻转回去，
第四，这是所有它。

671
00:32:23,157 --> 00:32:24,990
比方说，我们要
有其它成分。

672
00:32:24,990 --> 00:32:28,730
比方说，我们的烧录卡的应用程序应
包含所有的卡的列表

673
00:32:28,730 --> 00:32:31,520
你有，那么这意味着我们
应该有另一个组件。

674
00:32:31,520 --> 00:32:32,970
好吧，也许把它称为列表视图。

675
00:32:32,970 --> 00:32:36,200
让我们做一个列表视图
共存的CardView，

676
00:32:36,200 --> 00:32:39,680
这个列表视图和CardView
会喜欢一起工作。

677
00:32:39,680 --> 00:32:43,190
你可以将它们结合起来
使我们的应用程序为您服务。

678
00:32:43,190 --> 00:32:45,160
>> 因此，首先，让我们做一个
夫妇更多的卡的权利。

679
00:32:45,160 --> 00:32:46,370
比方说，什么卡？

680
00:32:46,370 --> 00:32:49,619

681
00:32:49,619 --> 00:32:51,910
而且，这样我就不必
孔与你键入它，

682
00:32:51,910 --> 00:32:53,410
我只是把它从这里复制。

683
00:32:53,410 --> 00:33:01,664

684
00:33:01,664 --> 00:33:03,580
所以我会不
给它只有一张卡。

685
00:33:03,580 --> 00:33:06,910
我要去给它卡阵列。

686
00:33:06,910 --> 00:33:10,240
所以首先应用程序
要打破现在。

687
00:33:10,240 --> 00:33:14,717
好了，所以我们要做出
这能够处理多张卡。

688
00:33:14,717 --> 00:33:17,800
因此，首先，我们要放弃它，而不是
只有一张卡，但卡的阵列，

689
00:33:17,800 --> 00:33:18,700
像卡的列表。

690
00:33:18,700 --> 00:33:20,980
在这种情况下，我们有三个。

691
00:33:20,980 --> 00:33:27,280
>> 好吧，那么这样的应用程序是
要得到一个清单卡，

692
00:33:27,280 --> 00:33:29,870
而这将决定哪些
一个显示为CardView。

693
00:33:29,870 --> 00:33:33,740
该CardView只能
渲染一张卡，但应用程序

694
00:33:33,740 --> 00:33:37,610
得到所有卡的列表，对不对？

695
00:33:37,610 --> 00:33:40,820
>> 当你找出一个，这样
卡给CardView，

696
00:33:40,820 --> 00:33:44,660
你会如何​​想你也许能
做出决定哪些卡

697
00:33:44,660 --> 00:33:47,064
以显示？

698
00:33:47,064 --> 00:33:49,980
为了给你一个提示，这是暂时
你会查看某个卡。

699
00:33:49,980 --> 00:33:53,260
如果您刷新页面，你会
刚回到第一张牌。

700
00:33:53,260 --> 00:33:55,464
这是确定的，因为它是暂时的。

701
00:33:55,464 --> 00:33:56,630
也许，我们使用的是什么技术？

702
00:33:56,630 --> 00:34:02,534

703
00:34:02,534 --> 00:34:08,760
>> 听众：你可以做一个变量
所以就像你有前面。

704
00:34:08,760 --> 00:34:11,989
这是真的，你可以
有当前卡片等于1？

705
00:34:11,989 --> 00:34:14,150
>> NEEL MEHTA：是的，所以我们
希望有国家的吧？

706
00:34:14,150 --> 00:34:16,080
你会使用状态的
组件搞清楚

707
00:34:16,080 --> 00:34:17,288
该卡做我们想要得到的。

708
00:34:17,288 --> 00:34:19,290
像我们有一个列表
所有的牌，我们将

709
00:34:19,290 --> 00:34:21,630
使用状态搞清楚
头牌之一，

710
00:34:21,630 --> 00:34:23,710
第二张牌，第三张牌，依此类推。

711
00:34:23,710 --> 00:34:28,760
>> 因此，一个应用程序，所以一个应用程序将获得一个
有getInitialState的功能，

712
00:34:28,760 --> 00:34:35,020
getInitialState的函数返回。

713
00:34:35,020 --> 00:34:39,929
我们只想说activeIndex 0。

714
00:34:39,929 --> 00:34:42,889
所以，现在我们的应用程序有它自己的状态。

715
00:34:42,889 --> 00:34:47,179
>> 所以现在的渲染，找出
一个卡，我们只是去阵列

716
00:34:47,179 --> 00:34:49,969
和抢东西指数。

717
00:34:49,969 --> 00:34:53,580
选择卡等于this.props.cards
this.state.activeIndex。

718
00:34:53,580 --> 00:34:56,469

719
00:34:56,469 --> 00:35:00,162
所以，当你看到这里，道具和
国家实际工作在一起。

720
00:35:00,162 --> 00:35:08,990
所以，现在，我们有我们activeCard，
我们会打电话给它activeCard，

721
00:35:08,990 --> 00:35:10,470
让我们来看看，如果这个工程。

722
00:35:10,470 --> 00:35:20,320

723
00:35:20,320 --> 00:35:20,820
[听不清]

724
00:35:20,820 --> 00:35:41,504

725
00:35:41,504 --> 00:35:44,900
>> 哦，这是一个文字错误。

726
00:35:44,900 --> 00:35:45,400
啊。

727
00:35:45,400 --> 00:35:51,420

728
00:35:51,420 --> 00:35:54,840
>> 酷，是的，所以现在我们回到
到我们面前，对不对？

729
00:35:54,840 --> 00:35:57,100
除了老一套程序
现在我们可以支持

730
00:35:57,100 --> 00:35:59,390
卡列表，而不仅仅是一张卡。

731
00:35:59,390 --> 00:36:04,130
而现在，同样，如果我们改变
activeIndex，我们可以从0到1，

732
00:36:04,130 --> 00:36:07,330
而现在，第二张牌，
然后我们去了0。

733
00:36:07,330 --> 00:36:10,390
所以这里有一个新的
改装成了后续版本我们的。

734
00:36:10,390 --> 00:36:16,000
>> 好了，现在我们有一个列表视图
显示在你的程序中所有的牌，

735
00:36:16,000 --> 00:36:19,980
所以，我们要创造一个新的
部分所谓的ListView。

736
00:36:19,980 --> 00:36:22,155
我们的ListView等于react.createClass。

737
00:36:22,155 --> 00:36:32,890

738
00:36:32,890 --> 00:36:38,800
因此，我们想呈现一个无序
列出与每一个卡列表项。

739
00:36:38,800 --> 00:36:41,490
因此，我们有一堆的卡。

740
00:36:41,490 --> 00:36:44,990
我们想要一个列表项
对于每一个卡，对吧？

741
00:36:44,990 --> 00:36:47,490
我们可以做一个for循环或
什么使一个新的列表项。

742
00:36:47,490 --> 00:36:50,522
但是你的方式做到这一点的
反应过来，使用一个名为地图的事情。

743
00:36:50,522 --> 00:36:57,150
地图是一种工具，或者您使用函数
对于每一个项目，运行一些功能，

744
00:36:57,150 --> 00:36:59,510
需要返回值，
为您提供了回来。

745
00:36:59,510 --> 00:37:06,310
>> 因此，作为一个例子，我们有阵列
1，2，3.map function--和这

746
00:37:06,310 --> 00:37:12,120
被简写为
function-- X向x次的X.

747
00:37:12,120 --> 00:37:16,110
这是说，对于每一个数字
在1，2，3，把它。

748
00:37:16,110 --> 00:37:17,800
方它，并给它回来。

749
00:37:17,800 --> 00:37:22,090
所以，你有什么感想1，
2，3.map X的范围是到x倍

750
00:37:22,090 --> 00:37:25,480
X允许你回来给
这个功能是

751
00:37:25,480 --> 00:37:27,680
运行该数组中的每个元素。

752
00:37:27,680 --> 00:37:30,837

753
00:37:30,837 --> 00:37:32,190
>> 听众：1，4 9？

754
00:37:32,190 --> 00:37:35,709
>> NEEL MEHTA：是的，1，4，9
因为你做1次1。

755
00:37:35,709 --> 00:37:36,500
这给了你一个。

756
00:37:36,500 --> 00:37:37,690
这是第一个元素。

757
00:37:37,690 --> 00:37:38,530
>> 2次2 4。

758
00:37:38,530 --> 00:37:39,570
这是第二个因素。

759
00:37:39,570 --> 00:37:40,310
3次3 9。

760
00:37:40,310 --> 00:37:41,540
这是第三个元素。

761
00:37:41,540 --> 00:37:42,640
合理？

762
00:37:42,640 --> 00:37:45,015
因此，地图有一个技术，你
在功能程序员使用，

763
00:37:45,015 --> 00:37:48,090
新样式
编程做某事

764
00:37:48,090 --> 00:37:50,500
在你的列表中的每个元素。

765
00:37:50,500 --> 00:37:51,970
所以这听起来很熟悉。

766
00:37:51,970 --> 00:37:53,370
我们有卡的列表。

767
00:37:53,370 --> 00:37:56,860
我们希望得到每一个列表项
之一，所以我们就用地图在这里。

768
00:37:56,860 --> 00:38:00,250
我们会说，让列表平等
this.props，卡，地图。

769
00:38:00,250 --> 00:38:10,580

770
00:38:10,580 --> 00:38:15,070
>> 因此赋予了卡，我们
要生成一个列表项

771
00:38:15,070 --> 00:38:17,580
使用该卡的内容，它的一边。

772
00:38:17,580 --> 00:38:20,660
远的不说，我们想给出来
卡问题，以便card.question。

773
00:38:20,660 --> 00:38:24,990

774
00:38:24,990 --> 00:38:30,649
所以这个列表包含
李的或列表项的数组

775
00:38:30,649 --> 00:38:32,440
那里有一个列表
对于每一张牌的项目，

776
00:38:32,440 --> 00:38:35,150
和包含该卡片的问题。

777
00:38:35,150 --> 00:38:37,640
合理？

778
00:38:37,640 --> 00:38:39,450
>> 酷，所以现在让我们来
实际打印了这一点。

779
00:38:39,450 --> 00:38:46,521
因此，我们将返回一个UL认证。

780
00:38:46,521 --> 00:38:49,020
在那个无序列表，
我们就坚持整个列表

781
00:38:49,020 --> 00:38:49,890
他们给了我们。

782
00:38:49,890 --> 00:38:52,851

783
00:38:52,851 --> 00:38:53,350
凉。

784
00:38:53,350 --> 00:38:56,060
>> 好了，所以现在这个
列表视图工作只是找到。

785
00:38:56,060 --> 00:38:59,842
有关列表视图中的任何问题？

786
00:38:59,842 --> 00:39:01,270
你有一堆的卡。

787
00:39:01,270 --> 00:39:02,800
你的每一张牌打表项。

788
00:39:02,800 --> 00:39:05,466
你把他们内部的无序
列表，你给它回来。

789
00:39:05,466 --> 00:39:09,410
所以，现在，让我们采取行动，所以我们嵌入
这里面我们的应用程序中，

790
00:39:09,410 --> 00:39:14,310
所以我们可以做到这一点，列表视图。

791
00:39:14,310 --> 00:39:17,070
什么参数我们传递给列表视图？

792
00:39:17,070 --> 00:39:18,320
我们给什么样的属性呢？

793
00:39:18,320 --> 00:39:25,111

794
00:39:25,111 --> 00:39:26,860
请记住，如果你给
这一堆的卡，

795
00:39:26,860 --> 00:39:29,590
它会榜上无名
查看这些卡。

796
00:39:29,590 --> 00:39:32,267
那么，我们会通过
这里的说法？

797
00:39:32,267 --> 00:39:33,350
听众：中卡的列表？

798
00:39:33,350 --> 00:39:37,130
NEEL MEHTA：是啊，所以卡
等于this.props.cards，对不对？

799
00:39:37,130 --> 00:39:39,850

800
00:39:39,850 --> 00:39:44,370
所以，唯一的问题
是，你只能

801
00:39:44,370 --> 00:39:48,600
翻了顶级元素的渲染，
所以你必须把它包在一个div。

802
00:39:48,600 --> 00:39:49,100
有点奇怪。

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
因此，让我们如果看看。

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
这是否工作？

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> 是的，你去那里。

809
00:40:31,030 --> 00:40:33,700
所以，现在我们有一个列表
在底部卡，

810
00:40:33,700 --> 00:40:36,180
然后，我们有我们的
CardView本身之上，

811
00:40:36,180 --> 00:40:40,486
并且，将间翻转
该卡的两侧。

812
00:40:40,486 --> 00:40:42,610
现在，这是否使意义上，我是怎么做的？

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
是啊，如此反复，我们有两个组成部分。

815
00:40:46,790 --> 00:40:49,666
第一组分打印
每卡在列表中。

816
00:40:49,666 --> 00:40:50,540
这是列表视图。

817
00:40:50,540 --> 00:40:54,770
和第二组分
打印出这一点卡。

818
00:40:54,770 --> 00:40:58,840
如果你给它一个特定的卡，它会
打印出有关该卡信息

819
00:40:58,840 --> 00:41:01,870
让你来回翻转。

820
00:41:01,870 --> 00:41:05,850
>> 因此，如果我们愿意，我们可以尝试和谈话
有关添加一些新的功能了这一点。

821
00:41:05,850 --> 00:41:09,482
否则，我们可以谈一点
关于反应器的速度的，

822
00:41:09,482 --> 00:41:11,190
或者我们可以回答
问题，你可能有

823
00:41:11,190 --> 00:41:15,050
因为这些是所有的核心部件的
的反应，我想谈谈。

824
00:41:15,050 --> 00:41:16,540
我们可以继续前进。

825
00:41:16,540 --> 00:41:17,590
我们可以回答问题。

826
00:41:17,590 --> 00:41:18,560
任何你想要的。

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> 听众：您可以使用
JSX在正常的JavaScript？

829
00:41:24,205 --> 00:41:27,150
或者是一些
与[听不清]来了？

830
00:41:27,150 --> 00:41:30,760
>> NEEL MEHTA：可问题是，
使用JSX与普通的JavaScript？

831
00:41:30,760 --> 00:41:32,620
答案是肯定的。

832
00:41:32,620 --> 00:41:41,070
JSX只是它的一个方法需要你
JavaScript的，有HTML在其内部，

833
00:41:41,070 --> 00:41:44,215
它编译成的Ja​​vaScript
它里面没有HTML。

834
00:41:44,215 --> 00:41:47,880
所以注意that--所以在这里看到。

835
00:41:47,880 --> 00:41:50,820
这看起来像你有这样的div
你有东西在它的内部。

836
00:41:50,820 --> 00:41:54,970
>> 这编译成的Ja​​vaScript
像生成同样的事情。

837
00:41:54,970 --> 00:41:59,590
我想我要说的是，
JSX只是一个语法，喜欢它的

838
00:41:59,590 --> 00:42:03,530
一个预处理器的JavaScript多
如PHP是一个预处理的HTML。

839
00:42:03,530 --> 00:42:05,490
JSC是一个预处理
对JavaScript，让

840
00:42:05,490 --> 00:42:12,970
你把你的HTML的JavaScript内。

841
00:42:12,970 --> 00:42:16,425
所以，如果你有合适的变压器
这是一个叫[听不清]的事，

842
00:42:16,425 --> 00:42:17,300
这将改变。

843
00:42:17,300 --> 00:42:19,360
正确的预处理，
它会告诉你这样做。

844
00:42:19,360 --> 00:42:20,235
>> 听众：[听不清]

845
00:42:20,235 --> 00:42:23,026
NEEL MEHTA：通常不需要
把HTML JavaScript的内

846
00:42:23,026 --> 00:42:24,110
除非你做的反应。

847
00:42:24,110 --> 00:42:27,146
但是你可以最好这样做。

848
00:42:27,146 --> 00:42:27,645
是的？

849
00:42:27,645 --> 00:42:29,353
>> 观众：我想你
所描述阵营

850
00:42:29,353 --> 00:42:31,970
作为功​​能的编程语言。

851
00:42:31,970 --> 00:42:35,646
我们一直在学习C的CS50。

852
00:42:35,646 --> 00:42:38,032
是C也是一种功能性的语言？

853
00:42:38,032 --> 00:42:39,990
NEEL MEHTA：所以问题
是有关功能

854
00:42:39,990 --> 00:42:43,010
而不是其它的东西叫
命令式或过程式编程。

855
00:42:43,010 --> 00:42:44,820
有2种受欢迎的节目。

856
00:42:44,820 --> 00:42:48,550
一个被称为程序，这
是所有喜欢做的命令，

857
00:42:48,550 --> 00:42:51,510
一个是功能性的，这是所有
关于有功能，有

858
00:42:51,510 --> 00:42:52,930
输入以及输出。

859
00:42:52,930 --> 00:42:55,930
反应是一种功能性的范例。

860
00:42:55,930 --> 00:42:58,010
C是一种非常程序范例。

861
00:42:58,010 --> 00:43:02,360
>> 作为一个例子，C例如
你不这样做声明的方式

862
00:43:02,360 --> 00:43:04,390
使得程序的，对不对？

863
00:43:04,390 --> 00:43:06,826
你不得不说，打印本。

864
00:43:06,826 --> 00:43:07,950
更改此数据结构。

865
00:43:07,950 --> 00:43:08,530
打印。

866
00:43:08,530 --> 00:43:10,160
这是关于命令。

867
00:43:10,160 --> 00:43:12,640
>> 在反应过来，有没有
许多命令。

868
00:43:12,640 --> 00:43:15,145
这是所有关于有
你的组件放在一起。

869
00:43:15,145 --> 00:43:16,300
他们喜欢的功能。

870
00:43:16,300 --> 00:43:26,360
你有这样的函数
所谓CardView，

871
00:43:26,360 --> 00:43:28,680
这是一个功能
具有输入，输出，

872
00:43:28,680 --> 00:43:30,660
而等反应过来是所有
这个理念

873
00:43:30,660 --> 00:43:32,700
我们having--你的数据。

874
00:43:32,700 --> 00:43:34,910
您可以通过这个传递
算法，它会

875
00:43:34,910 --> 00:43:36,800
输出HTML，你
刚刚打印的页面，

876
00:43:36,800 --> 00:43:39,180
所以你必须
构建它一块一块。

877
00:43:39,180 --> 00:43:42,800
>> 因此，要画一个比喻来什么
我之前说的，你知道如何

878
00:43:42,800 --> 00:43:47,050
在Facebook上，如果你得到一个消息，
你选择什么样的零件更新，

879
00:43:47,050 --> 00:43:47,882
这是程序。

880
00:43:47,882 --> 00:43:48,840
这是必要的，对不对？

881
00:43:48,840 --> 00:43:49,806
好吧，我得到了一个消息。

882
00:43:49,806 --> 00:43:50,930
让我们改变帐户存在。

883
00:43:50,930 --> 00:43:52,110
>> 让我们在这里弹出一个窗口。

884
00:43:52,110 --> 00:43:52,780
让我们改变帐户存在。

885
00:43:52,780 --> 00:43:53,700
让我们得出这样的在这里。

886
00:43:53,700 --> 00:43:55,220
这是一个程序性的方法。

887
00:43:55,220 --> 00:44:00,240
>> 这就是像角，
升压，骨干，其他的框架使用。

888
00:44:00,240 --> 00:44:01,200
反应是功能。

889
00:44:01,200 --> 00:44:03,324
这是一个非常不同的方式
思维的事情。

890
00:44:03,324 --> 00:44:07,950
它需要这样的想法，让我们的
函数或算法，将你

891
00:44:07,950 --> 00:44:08,800
给它的数据。

892
00:44:08,800 --> 00:44:11,820
它会吐出什么
应，并在计算机

893
00:44:11,820 --> 00:44:13,490
将称量出的照顾。

894
00:44:13,490 --> 00:44:15,890
你不自己处理。

895
00:44:15,890 --> 00:44:18,470
这是否看得懂一点点？

896
00:44:18,470 --> 00:44:18,970
是吗？

897
00:44:18,970 --> 00:44:24,180
>> 听众：在函数式语言，
在一次一切都发生？

898
00:44:24,180 --> 00:44:26,800
>> NEEL MEHTA：不，事情发生在秩序。

899
00:44:26,800 --> 00:44:29,320
喜欢这里仍然有
秩序，但它不

900
00:44:29,320 --> 00:44:32,390
发生在为了像
赞扬，命令，命令。

901
00:44:32,390 --> 00:44:36,459
它发生的顺序
功能为您提供了输出。

902
00:44:36,459 --> 00:44:37,750
它放入另一个函数。

903
00:44:37,750 --> 00:44:39,550
它放入另一
功能，另一种功能。

904
00:44:39,550 --> 00:44:41,470
>> 如果你这样做CS51，你会
学习功能的程序

905
00:44:41,470 --> 00:44:42,886
有点超出这个范围。

906
00:44:42,886 --> 00:44:45,090
但基本上，是什么让
反应酷不仅是

907
00:44:45,090 --> 00:44:46,840
单向数据流
和虚拟的Dom，

908
00:44:46,840 --> 00:44:48,700
而且这个想法
函数式编程。

909
00:44:48,700 --> 00:44:51,720
和函数式编程是很容易
撰写和制作很酷的东西出来，

910
00:44:51,720 --> 00:44:53,844
而且很容易想到
约和推理。

911
00:44:53,844 --> 00:44:55,450
因此，它反应过来另一个很好的平局。

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
还有什么问题吗？

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
是吗？

916
00:45:03,150 --> 00:45:06,840
>> 听众：嗯，你为什么会
使用让相对于VAR？

917
00:45:06,840 --> 00:45:10,450
>> NEEL MEHTA：所以，问题是
为什么要使用我们的不是var？

918
00:45:10,450 --> 00:45:13,220
这是一个东西叫
ES6或ECMAScript中6。

919
00:45:13,220 --> 00:45:15,820
它是JavaScript的新版本。

920
00:45:15,820 --> 00:45:19,050
有一帮技术原因，
但让VAR是一个更好的版本。

921
00:45:19,050 --> 00:45:20,724
>> 这是你如何声明变量。

922
00:45:20,724 --> 00:45:21,390
您可以使用让。

923
00:45:21,390 --> 00:45:22,140
您可以使用VAR。

924
00:45:22,140 --> 00:45:23,825
让我们有一堆技术
reasons--你可以看看他们

925
00:45:23,825 --> 00:45:25,610
达later--为什么它更好。

926
00:45:25,610 --> 00:45:28,780
基本上，ES6有一些不错
新的语法，一些新功能

927
00:45:28,780 --> 00:45:30,720
在旧的JavaScript的顶部。

928
00:45:30,720 --> 00:45:32,782
>> 因此，我们有一个像五分钟。

929
00:45:32,782 --> 00:45:34,990
我只是想谈谈
一件事真正的快速。

930
00:45:34,990 --> 00:45:36,450
如果你有任何问题，
让我们在这之后再说吧。

931
00:45:36,450 --> 00:45:38,366
但是，仅仅让这得到
风行照相机，我只是

932
00:45:38,366 --> 00:45:41,550
要谈一点关于如何
实际使用阵营在你的应用程序。

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> 如果你走在这里，
Facebook.GitHub.IO/react，

935
00:45:58,640 --> 00:46:03,320
这是阵营的主页，
它会告诉你如何实际使用

936
00:46:03,320 --> 00:46:05,320
反应在你的页面。

937
00:46:05,320 --> 00:46:08,845
基本上，这是一个有点
复杂尝试安装反应。

938
00:46:08,845 --> 00:46:12,300
这不是那么容易，因为你只需将
拖放一个JavaScript在那里。

939
00:46:12,300 --> 00:46:15,890
>> 你必须有你的变压器
成立，这将像以前那样，

940
00:46:15,890 --> 00:46:18,120
把你的JSX成
正常的JavaScript。

941
00:46:18,120 --> 00:46:21,030
你要的东西，会
编译你ES6正常。

942
00:46:21,030 --> 00:46:24,720
JavaScript的有很多的感动
部分你必须做的，所以这是一个事

943
00:46:24,720 --> 00:46:27,200
所谓的约曼，Yeoman.io。

944
00:46:27,200 --> 00:46:31,110
这是一个命令行工具，它会
帮助你脚手架你的阵营

945
00:46:31,110 --> 00:46:32,380
项目很容易。

946
00:46:32,380 --> 00:46:38,660
>> 所以，你可以阅读有关此
以后，但也有一些工具

947
00:46:38,660 --> 00:46:40,160
这约曼提供。

948
00:46:40,160 --> 00:46:43,280
他们会告诉你创建一个阵营
应用程序的一切内置的。

949
00:46:43,280 --> 00:46:46,030
喜欢的话就已经建立
在，部件内置的。

950
00:46:46,030 --> 00:46:47,880
这将有你的变压器内置的。

951
00:46:47,880 --> 00:46:50,699
他们有很多很酷
东西自动建立

952
00:46:50,699 --> 00:46:52,240
使用这些东西叫做发电机。

953
00:46:52,240 --> 00:46:54,620
>> 所以，阅读关于这一点，如果你喜欢。

954
00:46:54,620 --> 00:46:59,110
刚去的约曼，Y-E-O-M-A-N，和
你可以找到这样的发电机。

955
00:46:59,110 --> 00:47:01,263
而随着像发电机
这些，你宛若一体

956
00:47:01,263 --> 00:47:03,010
一对夫妇的命令行命令。

957
00:47:03,010 --> 00:47:05,530
这将脚手架出来的
整个阵营的应用程序为您服务。

958
00:47:05,530 --> 00:47:10,470
它会得到所有的人工管道，
而琐碎的工作做了你，

959
00:47:10,470 --> 00:47:13,010
这就是为什么你只关注
在刚刚写反应。

960
00:47:13,010 --> 00:47:16,739
>> 所以基本上构建
反应过来的应用程序是平凡的。

961
00:47:16,739 --> 00:47:19,530
它连接在一起，但有
一些工具会为你做它。

962
00:47:19,530 --> 00:47:23,070
所以，如果你想使一个阵营
应用程序，尝试做这种方式。

963
00:47:23,070 --> 00:47:26,360
如果你只是想尝试，
您可以尝试使用此CodePen

964
00:47:26,360 --> 00:47:28,550
因为这个CodePen有
所有的反应接线。

965
00:47:28,550 --> 00:47:30,240
我已经做了所有的工作适合你了。

966
00:47:30,240 --> 00:47:34,610
>> 所以，如果你想使像
产量释放作出反应的应用程​​序，

967
00:47:34,610 --> 00:47:37,220
试试这些发电机中的一个。

968
00:47:37,220 --> 00:47:40,240
如果你只是想发挥
各地，往往就只值

969
00:47:40,240 --> 00:47:44,490
喜欢尝试CodePen打在这里。

970
00:47:44,490 --> 00:47:45,470
听起来不错？

971
00:47:45,470 --> 00:47:45,970
凉。

972
00:47:45,970 --> 00:47:47,890
>> 所以这就是我的一切。

973
00:47:47,890 --> 00:47:52,470
再次，所有的代码和实例是
将要在这个网站在这里。

974
00:47:52,470 --> 00:47:55,509
所以，再一次，我们没有说话
约阵营的很多语法，

975
00:47:55,509 --> 00:47:57,550
但要找到所有这些
小的语法细节，

976
00:47:57,550 --> 00:48:00,320
这一切都将是可用
在这个网站在这里。

977
00:48:00,320 --> 00:48:02,660
>> 因此，我建议你喜欢
迈出第一步。

978
00:48:02,660 --> 00:48:06,277
把它放进你的CodePen。

979
00:48:06,277 --> 00:48:08,110
试着努力使
它向所述第二步骤。

980
00:48:08,110 --> 00:48:11,310
有一个第四步，只是
看到您从获得。

981
00:48:11,310 --> 00:48:14,840
>> 任何问题，请检查
出该页面或给我发电子邮件。

982
00:48:14,840 --> 00:48:16,490
这是我的电子邮件。

983
00:48:16,490 --> 00:48:19,885
不过，我很乐意帮助你的任何
你可能对问题作出反应。

984
00:48:19,885 --> 00:48:21,010
所以，是的，这就是我的一切。

985
00:48:21,010 --> 00:48:23,410
谢谢大家非常多的
观看或出席。

986
00:48:23,410 --> 00:48:26,820
我会采取任何问题
你可能在这之后了。

987
00:48:26,820 --> 00:48:29,140
所以，感谢大家的收看。

988
00:48:29,140 --> 00:48:31,270