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
每個帖子包含類似的時間，
個人，Li​​keCounter，等等。

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
它編譯成的JavaScript
它裡面沒有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
>> 這編譯成的JavaScript
像生成同樣的事情。

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