1
00:00:00,000 --> 00:00:02,910
>> [TÓNLIST spila]

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL MEHTA: Hér fer það.

4
00:00:07,275 --> 00:00:11,070
>> Jæja, allir, velkomin á vefnum
forrit í framtíðinni með React.

5
00:00:11,070 --> 00:00:11,870
Þetta er CS50.

6
00:00:11,870 --> 00:00:12,930
Mitt nafn er Neel.

7
00:00:12,930 --> 00:00:17,689
Ég er TA fyrir CS50 og sophomore
við Harvard College og mjög, mjög

8
00:00:17,689 --> 00:00:18,730
ástríðufullur vefur verktaki.

9
00:00:18,730 --> 00:00:20,730
Svo ég er mjög spennandi að
að tala við þig í dag,

10
00:00:20,730 --> 00:00:24,550
hvort sem þú ert hér eða heima
horfa, um að bregðast við, sem er, aftur

11
00:00:24,550 --> 00:00:27,270
eins og ég sagði, að framtíð apps vefnum.

12
00:00:27,270 --> 00:00:29,055
>> Svo bregðast er vefur ramma.

13
00:00:29,055 --> 00:00:30,930
Og eins og ég hef verið að segja
að sumt fólk hér,

14
00:00:30,930 --> 00:00:33,400
rammi er bara
setja af verkfæraskúr þú getur notað

15
00:00:33,400 --> 00:00:35,770
að skipuleggja og byggja vefur app.

16
00:00:35,770 --> 00:00:39,010
Og vefforrit eru, aftur, vefsíður
sem eru gagnvirk eins og Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, hvað sem er.

18
00:00:42,330 --> 00:00:45,590
>> Svo er Facebook vefur ramma
sem var þróað af Facebook

19
00:00:45,590 --> 00:00:48,060
a par ár back-- bregðast er.

20
00:00:48,060 --> 00:00:50,830
Það er síðan verið notuð í
Facebook á farsíma apps þeirra

21
00:00:50,830 --> 00:00:52,460
og vefur app, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy er annar
áberandi snemma ættleiða af React.

23
00:00:56,350 --> 00:00:58,630
>> Það er í raun verið að fá
mjög vinsæll.

24
00:00:58,630 --> 00:01:03,420
Ef þú notar alltaf hluti eins Stækkun eða
Burðarás, þetta er í sömu fjölskyldu,

25
00:01:03,420 --> 00:01:05,830
en það hefur síðan langt
umfram vinsældir þeirra.

26
00:01:05,830 --> 00:01:06,890
Það er heitt nýr hlutur.

27
00:01:06,890 --> 00:01:09,590
Það er virkilega, virkilega mikið.

28
00:01:09,590 --> 00:01:13,470
>> Og svo bregðast er gott ekki bara sem
vefur ramma til að byggja tengi.

29
00:01:13,470 --> 00:01:16,020
Það er gott til uppbyggingar vefur tengi.

30
00:01:16,020 --> 00:01:18,350
Það er líka hlutur
heitir React Native sem

31
00:01:18,350 --> 00:01:22,200
gerir þér kleift að byggja tengi
fyrir Android og IOS

32
00:01:22,200 --> 00:01:26,390
og kannski öðrum vettvangi í framtíðinni
nota bara sömu JavaScript kóða.

33
00:01:26,390 --> 00:01:31,130
Þú getur notað nákvæmlega sama
JavaScript kóða til að gera vefsíður,

34
00:01:31,130 --> 00:01:33,040
að veita Android apps og IOS apps.

35
00:01:33,040 --> 00:01:35,000
>> Það er mjög, mjög spennandi tími.

36
00:01:35,000 --> 00:01:37,070
Það er mjög, mjög flott tækifæri.

37
00:01:37,070 --> 00:01:42,020
Það er í raun alhliða vefur
tengi þróun tól,

38
00:01:42,020 --> 00:01:44,420
svo það er mjög, mjög
mikilvægt að vita.

39
00:01:44,420 --> 00:01:46,949
Og, eins og ég var að segja fólki
áður, þetta, ég held,

40
00:01:46,949 --> 00:01:48,990
er að fara að breyta því hvernig við
byggja apps vefur eilífu.

41
00:01:48,990 --> 00:01:55,820
Svo það er kannski svolítið hyperbole, en ég
held að það sé nokkuð gott að vita.

42
00:01:55,820 --> 00:01:57,580
>> OK, svo er það við?

43
00:01:57,580 --> 00:02:01,020
Bregðast er rammi sem þú getur
nota til að byggja tengi.

44
00:02:01,020 --> 00:02:03,240
An tengi er, aftur,
a vefur blaðsíða, ekki satt?

45
00:02:03,240 --> 00:02:06,340
Svo hér er Instagram.com, React notar.

46
00:02:06,340 --> 00:02:08,740
>> Bregðast er byggt á
Hugmyndin um hluti.

47
00:02:08,740 --> 00:02:11,900
A hluti er HTML
þáttur á sterum,

48
00:02:11,900 --> 00:02:14,470
svo HTML þáttur er eins og hnappur.

49
00:02:14,470 --> 00:02:15,250
Það er lið.

50
00:02:15,250 --> 00:02:17,500
Það er haus, ekki satt?

51
00:02:17,500 --> 00:02:22,740
Og Instagram mun nota þetta, en það
mun einnig nota hluti af React.

52
00:02:22,740 --> 00:02:25,740
>> Bregðast þættir eru
souped upp HTML þættir

53
00:02:25,740 --> 00:02:28,100
sem hafa eigin hegðun
sem innan þeirra.

54
00:02:28,100 --> 00:02:31,800
Svo sem dæmi, gætum við hafa
tími þáttur, tími hluti,

55
00:02:31,800 --> 00:02:34,095
sem mun innihalda eins og
tíminn stimpill, þú veist,

56
00:02:34,095 --> 00:02:37,170
með prófíl hluti sem
mun innihalda myndina

57
00:02:37,170 --> 00:02:38,820
og nafn þess aðila.

58
00:02:38,820 --> 00:02:42,930
Það getur haft eins og Counter sem
getur treyst eins og fjölda líkar,

59
00:02:42,930 --> 00:02:45,610
og ef þú smellir á það, verður það
fjölga eins.

60
00:02:45,610 --> 00:02:48,200
A hluti er bara
fullt af HTML kóða sem

61
00:02:48,200 --> 00:02:50,520
hefur einhverja virkni
vafinn inni af því.

62
00:02:50,520 --> 00:02:53,770
Svo það er eins og HTML frumefni
á sterum, eins og ég sagði áður.

63
00:02:53,770 --> 00:02:56,270
Hægt er að taka þessa hluti,
og þú getur sett þá saman

64
00:02:56,270 --> 00:02:59,060
til að gera nýja hluti, í
þetta mál, staða hluti,

65
00:02:59,060 --> 00:03:00,505
sem inniheldur allt þetta dót.

66
00:03:00,505 --> 00:03:04,050
Það myndi innihalda Alltaf, Profile,
LikeCounter, kannski athugasemd

67
00:03:04,050 --> 00:03:06,100
og kannski myndin sjálf.

68
00:03:06,100 --> 00:03:10,810
Og svo vefur apps eru bara byggð með því að taka
íhluti og setja þau saman.

69
00:03:10,810 --> 00:03:15,620
An Instagram fæða er ekkert annað en
fullt af staða hvert á eftir öðru,

70
00:03:15,620 --> 00:03:19,032
hver færsla inniheldur eins Time,
Prófíll, LikeCounter, og svo framvegis.

71
00:03:19,032 --> 00:03:20,490
Það er góður af eins og að byggja sér hús.

72
00:03:20,490 --> 00:03:22,660
Þú byggja ekki
hús frá toppi og niður.

73
00:03:22,660 --> 00:03:24,960
Þú tekur components-- þig
taka eins og baðherbergi.

74
00:03:24,960 --> 00:03:28,320
Þú tekur bedroom-- þú halda þeim
saman, og þú hafa a nýr hluti.

75
00:03:28,320 --> 00:03:29,760
Þú ert með nýja hluti hússins.

76
00:03:29,760 --> 00:03:32,860
>> Svo bregðast er allt byggt í kringum
þessi hugmynd um hluti sem

77
00:03:32,860 --> 00:03:36,600
eru gagnvirk, sem eru declarative.

78
00:03:36,600 --> 00:03:39,650
Eins og þú segir bara hvað
uppsetningu er, og það gerir það.

79
00:03:39,650 --> 00:03:40,600
Þeir eru composable.

80
00:03:40,600 --> 00:03:43,880
Þú getur tekið tíma og uppsetningu, setja
þá saman, gera eitthvað betra.

81
00:03:43,880 --> 00:03:47,770
Og þeir eru einnota, þannig að ef þú
hefur fengið kóðann fyrir færslu,

82
00:03:47,770 --> 00:03:49,440
þú gætir embed að einhvers staðar.

83
00:03:49,440 --> 00:03:53,160
>> Þú getur embed Instagram
hlutur á þínu eigin vefsvæði.

84
00:03:53,160 --> 00:03:56,830
Þú getur embed í Facebook, til dæmis,
svo lengi sem það notar bregðast við eins og vel.

85
00:03:56,830 --> 00:04:00,360
Svo þættir eru virkilega, virkilega, virkilega
öflugur byggingareiningar vefnum

86
00:04:00,360 --> 00:04:04,180
sem hægt er að nota hvar sem er og setja
saman til að gera nýja kubbar.

87
00:04:04,180 --> 00:04:07,159
Það er mjög, mjög
yfirsýn.

88
00:04:07,159 --> 00:04:09,200
Svo aftur, ef þú ert með
einhverjar spurningar á hverjum stað

89
00:04:09,200 --> 00:04:14,470
um heimspeki reactor, að
erfðaskrá, að stoppa mig, og láta mig vita.

90
00:04:14,470 --> 00:04:18,420
>> OK, svo bregðast er kaldur því það
hefur mismunandi leið til að horfa

91
00:04:18,420 --> 00:04:19,870
á hvernig þú byggir vefur apps.

92
00:04:19,870 --> 00:04:23,620
Þú hefur sennilega heyrt af MVC, a
líkan sem þú stjórna í CS50 eða hvað

93
00:04:23,620 --> 00:04:25,940
önnur leit flokkar þú notar.

94
00:04:25,940 --> 00:04:29,000
Og flestir ramma eru
byggt í kringum þá hugmynd að MVC.

95
00:04:29,000 --> 00:04:30,410
Hvarfast er ekki.

96
00:04:30,410 --> 00:04:32,980
Bregðast er byggt í kringum þá hugmynd
af einstefnu gagnaflæði

97
00:04:32,980 --> 00:04:36,510
eins og sést af þessari töflu eða grafískur hér.

98
00:04:36,510 --> 00:04:38,260
>> Í grundvallaratriðum, þú hafa a gögn uppspretta.

99
00:04:38,260 --> 00:04:42,380
Og gögn uppspretta ákveður
hvernig á að leggja fram tiltekin atriði.

100
00:04:42,380 --> 00:04:45,452
Íhlutar mun
þá, þegar þeir breyta,

101
00:04:45,452 --> 00:04:47,160
munu þeir segja að
gögn uppspretta til að breyta.

102
00:04:47,160 --> 00:04:49,350
>> Til að nota Instagram
dæmi, þú gætir hafa

103
00:04:49,350 --> 00:04:52,050
listi yfir færslu hlutum eins
í gagnagrunn eða eitthvað.

104
00:04:52,050 --> 00:04:53,310
Það gögnum.

105
00:04:53,310 --> 00:04:57,600
Og þá hluti staða okkar
mun taka þessi gögn,

106
00:04:57,600 --> 00:05:01,830
og nota þessi gögn til að veita
hlutur á skjánum.

107
00:05:01,830 --> 00:05:04,300
Það er það sem arrow
frá gögnum til hluti er,

108
00:05:04,300 --> 00:05:07,930
og þá að sama gögn eru notuð
að veita fullt af hlutum.

109
00:05:07,930 --> 00:05:10,290
>> Í Facebook Messenger, fyrir
dæmi, sem er að bregðast við,

110
00:05:10,290 --> 00:05:13,410
þú gætir hafa a listi af
skilaboð sem gögn uppspretta.

111
00:05:13,410 --> 00:05:15,927
Og það myndi því ekki
aðeins listi yfir skilaboð

112
00:05:15,927 --> 00:05:17,510
en einnig listi yfir vini sem þú hefur.

113
00:05:17,510 --> 00:05:19,200
Þú hefur fjöldaólesinnaíþræði.

114
00:05:19,200 --> 00:05:23,330
Kannski einnig verða Facebook hlutur
það er neðst á Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Sömu gögn er
ein uppspretta sannleikans

116
00:05:25,610 --> 00:05:28,290
og sem veldur miklum
hluti til að vera innt af hendi.

117
00:05:28,290 --> 00:05:30,290
Og þegar einn af þeim
hluti er breytt,

118
00:05:30,290 --> 00:05:32,320
það fer aftur og
breytir gögn uppspretta.

119
00:05:32,320 --> 00:05:33,460
>> Þú sendir skilaboð, ekki satt?

120
00:05:33,460 --> 00:05:34,780
Það breytir gögn uppspretta.

121
00:05:34,780 --> 00:05:39,490
Þú lesa skilaboð,
svo þú stillt ólesin 0.

122
00:05:39,490 --> 00:05:41,136
Það breytir gögn uppspretta.

123
00:05:41,136 --> 00:05:44,010
Og eftir að allir þessir einn
arrow fara aftur í sama gögnum

124
00:05:44,010 --> 00:05:47,662
uppspretta, svo þú veist,
gefa ákveðna gögnum,

125
00:05:47,662 --> 00:05:49,870
þú veist nákvæmlega hvað
síðu er að fara að líta út.

126
00:05:49,870 --> 00:05:50,700
Það er deterministic.

127
00:05:50,700 --> 00:05:53,451
Þú veist, gefið tiltekin gögn, hvað
síðan er að fara að líta út.

128
00:05:53,451 --> 00:05:56,158
Þú getur spáð fyrir hvernig það er að fara að
haga sér og hvernig hlutirnir eru að fara

129
00:05:56,158 --> 00:05:57,650
að vinna þegar þeir eru að setja saman.

130
00:05:57,650 --> 00:06:00,410
>> Og ef ég hefði milljón hluti
Hér væri að hegða sér eins, ekki satt?

131
00:06:00,410 --> 00:06:02,290
Þú myndir ekki hafa allir
undarlegt samtengingar.

132
00:06:02,290 --> 00:06:04,120
Einn gögn veitt milljón hluti.

133
00:06:04,120 --> 00:06:06,879
Milljón hluti gat
fara til baka og breyta gögnum.

134
00:06:06,879 --> 00:06:07,920
Og svo er þetta mjög gott.

135
00:06:07,920 --> 00:06:10,870
Við erum að byggja composable,
auðveldlega stigstærð vefur apps.

136
00:06:10,870 --> 00:06:13,150
>> Þú ert einn gögn uppspretta,
uppspretta sannleikans.

137
00:06:13,150 --> 00:06:15,790
Sem segir hluti þinn
hvernig á að leggja út á síðunni,

138
00:06:15,790 --> 00:06:18,190
og hluti mun
höndla samskipti.

139
00:06:18,190 --> 00:06:20,150
Og ef þeir vilja til að breyta
hlutir, bara fara aftur

140
00:06:20,150 --> 00:06:21,750
og segja gögn uppspretta til að breyta.

141
00:06:21,750 --> 00:06:22,850
Meikar sens?

142
00:06:22,850 --> 00:06:26,010
Svo bregðast er allt um skilning
hvernig á að byggja upp hluti

143
00:06:26,010 --> 00:06:29,540
og hvernig á að gera hluti þinn
samskipti við umheiminn.

144
00:06:29,540 --> 00:06:31,850
>> Gerð hluti samskipti
við umheiminn

145
00:06:31,850 --> 00:06:34,490
notar annan tækni
heitir Flux, sem

146
00:06:34,490 --> 00:06:36,872
er rammi sem er
bætt ofan á React.

147
00:06:36,872 --> 00:06:38,330
Við erum ekki að fara að tala um það.

148
00:06:38,330 --> 00:06:42,990
Við erum að fara að tala meira um, í ljósi
gögn, hvernig er hægt að inna af hendi hluti?

149
00:06:42,990 --> 00:06:47,010
>> Og svo bregðast er virkilega flott vegna þess að þú
getur notað það með hvaða bak endir sem þú vilt.

150
00:06:47,010 --> 00:06:50,480
Ef þú ert eins og Python bak endir,
ef Python getur spýta út nokkrar upplýsingar,

151
00:06:50,480 --> 00:06:51,610
Bregðast geta gera það.

152
00:06:51,610 --> 00:06:54,700
Ef þú ert ekki JS framleiðsla
gagna, bregðast gerir það.

153
00:06:54,700 --> 00:06:56,890
Ruby teinn upp með
gögn, bregðast gerir það.

154
00:06:56,890 --> 00:07:01,860
>> Svo bregðast er í grundvallaratriðum a vefur
view-- framan enda með íhlutum

155
00:07:01,860 --> 00:07:03,910
fyrir hvaða gögn uppspretta af neinu tagi.

156
00:07:03,910 --> 00:07:07,145
Og svo fara frá gögn uppspretta til
bregðast hluti er nokkuð auðvelt.

157
00:07:07,145 --> 00:07:08,770
Fara í hina áttina er svolítið erfiðara.

158
00:07:08,770 --> 00:07:10,462
Sem notar Flux eins og ég nefndi áður.

159
00:07:10,462 --> 00:07:11,420
Við munum ekki fá inn í það.

160
00:07:11,420 --> 00:07:13,740
Við munum leggja áherslu meira á
gögn til hluti hlið.

161
00:07:13,740 --> 00:07:15,880
This vegur þú geta gera
kaldur, gaman vefur apps.

162
00:07:15,880 --> 00:07:19,870
Það mun ekki hafa áhrif á umheiminn
fyrir nú, en það er önnur saga.

163
00:07:19,870 --> 00:07:22,210
>> OK, þannig að ef þú værir hér
fyrir síðasta námskeið minn

164
00:07:22,210 --> 00:07:26,610
þú munt vita að öllum kóða fyrir
tala í dag er að fara að vera á þessari vefslóð

165
00:07:26,610 --> 00:07:29,320
hér, því miður, þetta URL hér.

166
00:07:29,320 --> 00:07:32,730
Og grundvallaratriðum við erum að fara að fara
í gegnum fjögur skref, kannski fimm,

167
00:07:32,730 --> 00:07:33,510
sennilega ekki fimm.

168
00:07:33,510 --> 00:07:37,300
Við munum fara í gegnum fjögur skref
að byggja upp sýnishorn React app.

169
00:07:37,300 --> 00:07:39,550
Og svo allt kóðinn
fyrir hvert skref á leiðinni

170
00:07:39,550 --> 00:07:42,216
er að fara að vera hérna, þannig að ef
þú ert að elta eftir heima,

171
00:07:42,216 --> 00:07:43,991
ekki hika við að lesa þessa kóða.

172
00:07:43,991 --> 00:07:46,740
Ef þú ert að elta eftir hér,
við munum vera að sýna það á skjánum,

173
00:07:46,740 --> 00:07:47,739
svo ekki hafa áhyggjur óður í það.

174
00:07:47,739 --> 00:07:50,930
En ef þú ert heima, finnst
frjáls til að heimsækja þessa vefsíðu.

175
00:07:50,930 --> 00:07:56,400
Og já, þú ættir að vera fær um að fá
allur kóðinn þú vilt alltaf þörf hér.

176
00:07:56,400 --> 00:08:01,380
Svo það er gott svindlari lak sem
fyrir framtíð ævintýrum með React.

177
00:08:01,380 --> 00:08:04,490
Cool, þannig að ef allir sem er hér,
og jafnvel ef þú ert heima,

178
00:08:04,490 --> 00:08:11,580
draga upp þessa vefsíðu, is.gd/cs50react,
engin höfuðborg, ekki undirstrik, ekki neitt.

179
00:08:11,580 --> 00:08:15,849
>> Þú munt sjá síðu sem lítur
svolítið eins og þetta.

180
00:08:15,849 --> 00:08:17,140
Þetta er hlutur sem kallast CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen er samstarfsverkefni
erfðaskrá umhverfi

182
00:08:20,030 --> 00:08:23,364
sem ég get skrifað kóðann hér, og
það verður sjálfkrafa send til þín.

183
00:08:23,364 --> 00:08:24,780
Og að með þessum hætti, ég get skrifa kóðann.

184
00:08:24,780 --> 00:08:26,920
Ég get keyrt kóðann hér.

185
00:08:26,920 --> 00:08:33,470
>> Fyrir example-- og ef það reloads-- sjá,
Ég er að keyra JavaScript kóðann á síðunni

186
00:08:33,470 --> 00:08:36,390
hérna, og það verður
sjálfkrafa gera vefsíðu

187
00:08:36,390 --> 00:08:37,980
þennan JavaScript kóða.

188
00:08:37,980 --> 00:08:40,039
Og svo er þetta leið
fyrir okkur að prófa kóðann

189
00:08:40,039 --> 00:08:43,089
rosa vel án þess að þurfa að nota
ID okkar eða nota staðbundin vél okkar

190
00:08:43,089 --> 00:08:44,290
eða hvað sem er.

191
00:08:44,290 --> 00:08:47,670
Það er mjög fljótleg leið fyrir þig til að mockup
og prófa mismunandi tegundir af kóða.

192
00:08:47,670 --> 00:08:50,560
>> Þannig að ég ætla að fara að taka
dæmi númer, setja það hér.

193
00:08:50,560 --> 00:08:52,374
Við erum að fara að vinna í gegnum það.

194
00:08:52,374 --> 00:08:54,540
Og ef þú ert heima, þú
getur rífa þetta upp eins og heilbrigður.

195
00:08:54,540 --> 00:08:57,530
Og ég hef nú þegar sett upp
Bregðast hér, svo þú getur bara

196
00:08:57,530 --> 00:09:00,770
skrifa eigin kóðann þinn hér og
reyna það eins og eigin leikvöllur þinn.

197
00:09:00,770 --> 00:09:04,940
>> Já, ef allir
opna þennan tengil hér.

198
00:09:04,940 --> 00:09:08,080
Vinsamlegast gefið mér thumbs
upp þegar þú hefur það opið.

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

200
00:09:10,960 --> 00:09:13,770
Cool, flott flott.

201
00:09:13,770 --> 00:09:16,914
Það er ekkert hér í bili, en
munum við breyta því mjög fljótlega.

202
00:09:16,914 --> 00:09:21,250
>> OK, svo bregðast er JavaScript
bókasafn, og sem slík,

203
00:09:21,250 --> 00:09:24,480
krefst þekkingar á JavaScript,
sem er vefur forritunarmál.

204
00:09:24,480 --> 00:09:27,660
Og það er verið að nota til annars
nú líka en fyrst og fremst vefur þróa

205
00:09:27,660 --> 00:09:32,040
tungumál, þannig að ef þú ert ókunnur með
að lesa síðuna sem heitir JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Það er dásamlegt.

207
00:09:32,700 --> 00:09:34,240
Þú getur lært JavaScript
í hálfa klukkustund.

208
00:09:34,240 --> 00:09:34,990
Það er ótrúlegt.

209
00:09:34,990 --> 00:09:36,420
>> Svo gefa það a lesa.

210
00:09:36,420 --> 00:09:39,960
Við er einnig mikið af HTML hér því
við erum að hanna vefsíður auðvitað.

211
00:09:39,960 --> 00:09:43,890
Svo ef þú ert ókunnur með
HTML, kíkja HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Ég held að læra React er
milljón sinnum auðveldara ef þú nú þegar

213
00:09:46,520 --> 00:09:47,892
veit byggingareiningar.

214
00:09:47,892 --> 00:09:50,600
Ef þú ert hluti, það er
auðvelt að gera stærri hluti.

215
00:09:50,600 --> 00:09:51,860
Það er Bregðast tungumál fyrir þig.

216
00:09:51,860 --> 00:09:54,270
>> Svo fara á undan og gefa
þetta a lesa.

217
00:09:54,270 --> 00:09:55,070
Gera hlé á þetta vídeó.

218
00:09:55,070 --> 00:09:57,440
Gefa það a lesa ef þú ert
heima ef þú ert ekki

219
00:09:57,440 --> 00:10:00,794
þekki HTML eða JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, þannig að það sem við erum að fara að
gera er að við erum að fara að gera

221
00:10:02,960 --> 00:10:06,470
mjög einfalt flashcard app með React.

222
00:10:06,470 --> 00:10:08,210
Við erum að fara að hafa Flashcard.

223
00:10:08,210 --> 00:10:09,880
Þú getur selbiti kortið fram og til baka.

224
00:10:09,880 --> 00:10:12,399
Og við munum einnig hafa a listi af
öll spilin sem við höfum,

225
00:10:12,399 --> 00:10:14,190
og ef við erum tilfinning
metnaðarfull, við gætum verið

226
00:10:14,190 --> 00:10:17,060
fær um að skipta á milli
bíla með því að smella á þá.

227
00:10:17,060 --> 00:10:20,360
>> En þetta er að Bare
bein, mjög einfalt React app.

228
00:10:20,360 --> 00:10:22,560
Og svo er þetta í raun
ekki léttvæg til að framkvæma,

229
00:10:22,560 --> 00:10:26,030
en við erum að fara að sýna að ef þú gerir
þetta, það er mjög, mjög auðvelt að lengja það

230
00:10:26,030 --> 00:10:27,680
ef annað fólk að hjálpa þér með það.

231
00:10:27,680 --> 00:10:33,750
Þannig að við erum að fara að fara í gegnum fjögur skref
byrja frá grunni til að byggja þetta.

232
00:10:33,750 --> 00:10:36,740
>> OK, svo fjögur skref, munum við
byrjar með fyrsta skrefið.

233
00:10:36,740 --> 00:10:39,790
Fyrsta skrefið er að fara að vera
byggja fyrsta hluta þinn.

234
00:10:39,790 --> 00:10:44,830
Eins og ég sagði áður, sem er hluti í React
er bara HTML þátturinn á sterum.

235
00:10:44,830 --> 00:10:49,660
Það skilgreinir HTML
og sumir hegðun, og það

236
00:10:49,660 --> 00:10:52,600
verður að tilgreina hvernig fólk
geta samskipti við það hvernig

237
00:10:52,600 --> 00:10:54,270
það myndi hafa innra ástand.

238
00:10:54,270 --> 00:10:57,630
Eins og hnappur vilja vita eins hversu margir
sinnum það er verið smellti til dæmis,

239
00:10:57,630 --> 00:11:01,010
og það mun vita hvernig á að leggja sig fram.

240
00:11:01,010 --> 00:11:04,430
>> Svo skulum við fara á undan og byggja okkar
Fyrsti þátturinn nota JavaScript.

241
00:11:04,430 --> 00:11:09,711
Þannig að ef setningafræði lítur skrítið,
það er vegna þess að það er góður af.

242
00:11:09,711 --> 00:11:11,710
Svo aftur, við erum að fara
að gera breytu sem heitir

243
00:11:11,710 --> 00:11:14,580
app nota leitarorðið láta,
sem gerir breytu,

244
00:11:14,580 --> 00:11:18,210
láta App jafn React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Bregðast er bókasafn og hefur
sem búa bekknum virka.

246
00:11:22,609 --> 00:11:24,400
Og þessi aðgerð er
hluti af kóða sem þú

247
00:11:24,400 --> 00:11:29,090
Hægt er að nota til að búa til nýja
tegund af React hluti.

248
00:11:29,090 --> 00:11:32,780
Og svo React.createClass
gerir hluti,

249
00:11:32,780 --> 00:11:35,270
og þessi hluti mun
vera fær um að gera efni.

250
00:11:35,270 --> 00:11:40,460
The aðalæð hlutur sem það getur gert er bakið
eitthvað, láta sem fall.

251
00:11:40,460 --> 00:11:44,500
>> Aftur, ef vísitalan er ekki augljóst að
þú, ég mæli með að þú fara á JS fyrir ketti

252
00:11:44,500 --> 00:11:45,682
og stöðva það út.

253
00:11:45,682 --> 00:11:47,710
Er að aðdregna í nógu vel?

254
00:11:47,710 --> 00:11:48,490
Cool.

255
00:11:48,490 --> 00:11:50,670
>> Svo í hvert hluti þarf
að hafa bakið virka.

256
00:11:50,670 --> 00:11:53,010
The bakið virka segir,
hvað á ég að prenta á skjánum?

257
00:11:53,010 --> 00:11:54,760
En þátturinn er
gagnslaus ef það virkar ekki

258
00:11:54,760 --> 00:11:58,060
hvað ég á að prenta á skjánum, svo
þú þarft að hafa bakið virka.

259
00:11:58,060 --> 00:12:01,904
>> Svo í bakið hlutur, þú
þarf bara að fara aftur sumir HTML.

260
00:12:01,904 --> 00:12:03,820
Og hvað er kaldur er þessi
það er hlutur sem kallast

261
00:12:03,820 --> 00:12:08,660
JSX, sem er framhald af
JavaScript sem er notað af bregðast við.

262
00:12:08,660 --> 00:12:11,845
Það skulum þú skrifar HTML inni
af þinni JavaScript, sem

263
00:12:11,845 --> 00:12:13,970
hljómar skrýtin tilfinning þegar
þú hugsa fyrst um það,

264
00:12:13,970 --> 00:12:15,553
en það gerir mikið af skilningi síðar.

265
00:12:15,553 --> 00:12:17,430
Þannig að við getum gert þetta.

266
00:12:17,430 --> 00:12:21,360
Ef þú ert kunnuglegur með HTML, ég veit
við höfum div með almennra nota

267
00:12:21,360 --> 00:12:22,790
gámur fyrir efni.

268
00:12:22,790 --> 00:12:26,380
Við getum aftur div og inni
þetta div, getum við setja dótið.

269
00:12:26,380 --> 00:12:32,390
>> Svo skulum segja að við viljum gera bara
beint upp flashcard fyrir nú.

270
00:12:32,390 --> 00:12:34,890
The flashcard, myndi ég segja,
mun hafa spurningu og svar.

271
00:12:34,890 --> 00:12:37,530
Svo í þessari div, við skulum
prenta út málsgrein

272
00:12:37,530 --> 00:12:42,155
sem segir question-- Hvað er
endanlega svar við lífinu, alheimurinn?

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

274
00:12:47,640 --> 00:12:50,345
Og þá er svarið
að fara að vera, að sjálfsögðu, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Sem ekki koma upp vel á öllum.

277
00:12:59,730 --> 00:13:04,164
Já, svo í rauninni þú getur raunverulega
skrifa HTML Inni JavaScript.

278
00:13:04,164 --> 00:13:06,330
Og þetta er að fara að vera
prentuð út í skjá.

279
00:13:06,330 --> 00:13:08,250
Svo skulum reyna það út.

280
00:13:08,250 --> 00:13:09,520
>> Þannig að við höfum hluti okkar.

281
00:13:09,520 --> 00:13:12,210
Við þurfum að segja bregðast við setja
þátturinn á skjánum

282
00:13:12,210 --> 00:13:18,990
svo React.render, svo eftir því að við
meðhöndla app eins og allir aðrir frumefni.

283
00:13:18,990 --> 00:13:21,010
Við skrifa það eins og það var HTML frumefni.

284
00:13:21,010 --> 00:13:25,100
Eins í stað þess að segja eins img
fyrir ímynd eða P fyrir lið,

285
00:13:25,100 --> 00:13:28,120
þú skrifar App, svo App er
meðhöndla eins og HTML frumefni.

286
00:13:28,120 --> 00:13:30,380
Eins og ég sagði áður, það er
þáttur á sterum.

287
00:13:30,380 --> 00:13:32,870
>> Svo þú gera App, og þú
gefa það a staður til að setja það.

288
00:13:32,870 --> 00:13:37,170
Og þetta er hvernig þú getur
segja það hvar á að setja það.

289
00:13:37,170 --> 00:13:46,200
Ég hef búið til einfalda div á
síðu sem heitir með ID á síðu,

290
00:13:46,200 --> 00:13:48,300
og það er þar sem
þáttur er að fara að fara.

291
00:13:48,300 --> 00:13:49,841
>> Og við erum ekki að fara að hlaupa með HTML.

292
00:13:49,841 --> 00:13:53,145
Í grundvallaratriðum er þetta að fara að fá
setja inni þessa síðu frumefni

293
00:13:53,145 --> 00:13:54,270
sem við höfum á skjánum.

294
00:13:54,270 --> 00:13:59,210
Svo það rennur þennan kóða, og það dregur þetta
hlutur á skjánum, svo hér erum við.

295
00:13:59,210 --> 00:14:01,770
Við höfum gert okkar fyrstu bregðast hluti.

296
00:14:01,770 --> 00:14:08,000
>> Svo bara eins og ágrip, gerði við varlega
ný tegund af hluti, ekki satt?

297
00:14:08,000 --> 00:14:10,145
Það er það sem React.createClass.

298
00:14:10,145 --> 00:14:12,680
Og í því hluti, við
sagði það hvað það ætti að gera.

299
00:14:12,680 --> 00:14:15,590
Alltaf þegar þessi hluti er að
að prenta á skjánum,

300
00:14:15,590 --> 00:14:19,300
það mun prenta út ágóðahlut með
tvær málsgreinar inni af því.

301
00:14:19,300 --> 00:14:24,460
>> Og það sem við gerðum, við gert nýja app
nota oddklofi app tákn.

302
00:14:24,460 --> 00:14:27,160
Við sögðum það að setja það
inni á síðunni frumefni.

303
00:14:27,160 --> 00:14:29,867
Og svo það sem ég gerði, það skapaði
nýtt app frá því sniðmáti.

304
00:14:29,867 --> 00:14:31,200
Og þá sagði ég það til að láta það.

305
00:14:31,200 --> 00:14:33,680
Svo hún sagði, OK, app,
hvað ætti ég að prenta út?

306
00:14:33,680 --> 00:14:36,970
App segir, fara prenta út div
með tveimur liðum inni af því.

307
00:14:36,970 --> 00:14:40,420
Og voila, það er div okkar með
tvær málsgreinar inni af því.

308
00:14:40,420 --> 00:14:43,180
Skynsamleg svo langt?

309
00:14:43,180 --> 00:14:46,690
>> Svo aftur, allt áskorun React
er bara að vita hvernig á að gera hluti.

310
00:14:46,690 --> 00:14:48,500
Hvernig á að gera
þættir vinna saman.

311
00:14:48,500 --> 00:14:51,780
Nú þegar við höfum gert okkar fyrstur
hluti, við skulum fara aftur

312
00:14:51,780 --> 00:14:54,284
og gera hluti sérhannaðar.

313
00:14:54,284 --> 00:14:56,700
Svo þú veist hvernig á HTML þú
getur gefið hnappar bekkjum þinn?

314
00:14:56,700 --> 00:14:59,146
Þú getur gefið akkeri þín á href.

315
00:14:59,146 --> 00:15:00,770
Þú getur gefið inntak þitt á tegund, ekki satt?

316
00:15:00,770 --> 00:15:04,740
Þú getur gefið meira sérsniðin
Fasteignir til allra þátta þínum

317
00:15:04,740 --> 00:15:06,490
til að gera það áhugavert meira.

318
00:15:06,490 --> 00:15:09,030
Og við í raun hægt að gera
nákvæmlega það sama.

319
00:15:09,030 --> 00:15:17,500
>> Svo skulum segja að við viljum okkar
app til að fara gera hvaða kort.

320
00:15:17,500 --> 00:15:19,630
Núna erum bara
innt af hendi hardcoded kort.

321
00:15:19,630 --> 00:15:22,530
Við vitum að það er bara ein
kort það getur gert, þannig að við erum

322
00:15:22,530 --> 00:15:25,960
ætla að reyna að breyta þessu nú svo
að við getum bara gefa honum kort.

323
00:15:25,960 --> 00:15:27,410
Það verður að prenta út kortið.

324
00:15:27,410 --> 00:15:29,380
>> Þú ættir að reyna að gera þinn
hluti mjög almenn notkun.

325
00:15:29,380 --> 00:15:31,654
Þannig að þetta leiðin sem ég gæti sent
Þessi vinur minn og vera eins,

326
00:15:31,654 --> 00:15:33,820
hvað flashcard þú hefur,
bara fæða það inn hér,

327
00:15:33,820 --> 00:15:35,290
og það mun gera það af sjálfu sér.

328
00:15:35,290 --> 00:15:37,650
Þú getur sett annað
hlutir í eigin forritinu þínu.

329
00:15:37,650 --> 00:15:40,600
>> En fyrst skulum við brjóta þetta
upp í tvo þætti,

330
00:15:40,600 --> 00:15:44,500
en við viljum skilja kortið
prentun hluti af raunverulegu app hluta.

331
00:15:44,500 --> 00:15:46,660
Svo það sem við getum gert er við
Hægt er að breyta þessu frá App

332
00:15:46,660 --> 00:15:51,300
að CardView, bara
nýtt nafn á app,

333
00:15:51,300 --> 00:15:54,450
og við getum gert nýtt
hluti heitir App,

334
00:15:54,450 --> 00:15:56,336
ekki að rugla saman við gamla App.

335
00:15:56,336 --> 00:16:00,730
Við höfum fengið createClass,
og eins og í HTML,

336
00:16:00,730 --> 00:16:03,590
þú getur hreiður React hluti
inni af hvort öðru.

337
00:16:03,590 --> 00:16:16,430
>> Þannig að í þessu geldur virka,
virka aftur CardView,

338
00:16:16,430 --> 00:16:18,234
og þetta er nákvæmlega sama.

339
00:16:18,234 --> 00:16:19,400
Sjá hvers vegna það er það sama?

340
00:16:19,400 --> 00:16:22,590
Í stað þess að flutningur bara app sem
hefur div og pörun inni af því,

341
00:16:22,590 --> 00:16:26,194
app gerir að CardView og
CardView gerir div og lið.

342
00:16:26,194 --> 00:16:29,110
Þannig að þetta er fyrsta dæmið okkar
hreiður þætti innan um hvert annað.

343
00:16:29,110 --> 00:16:32,177
Er að skynsamleg?

344
00:16:32,177 --> 00:16:33,760
Svo aftur, höfum við CardView frumefni.

345
00:16:33,760 --> 00:16:37,250
Við höfum app þætti
að það er stærri en.

346
00:16:37,250 --> 00:16:40,990
>> OK, þannig að við viljum okkar CardView-- ef þú
gefa góða CardView ákveðna kort,

347
00:16:40,990 --> 00:16:43,370
það mun prenta út fyrir þig, ekki satt?

348
00:16:43,370 --> 00:16:48,050
Svo fyrst þurfum við að gera kort,
þannig að við skulum gera kort hlut.

349
00:16:48,050 --> 00:17:02,930
Svo skulum kortið mitt equal--
ef þú ert öll kunnugur,

350
00:17:02,930 --> 00:17:05,260
þetta er bara tákn-gerð
mótmæla í JavaScript.

351
00:17:05,260 --> 00:17:09,280
Það er góður af eins og a strúktúr
í C, svo við gert kort,

352
00:17:09,280 --> 00:17:15,920
og svo nú getum við framhjá þessu korti og
eign eða sem eiginleiki í HTML

353
00:17:15,920 --> 00:17:17,290
hugtök til heimshornum.

354
00:17:17,290 --> 00:17:20,210
Þannig að við getum gert þetta, App
kort jafngildir myCard.

355
00:17:20,210 --> 00:17:23,200
>> Þú veist hvernig á inntak, þú gerir
input type jafngildir texta eða hnappinn

356
00:17:23,200 --> 00:17:25,240
flokki jafngildir BTN fyrir ræsingu ,?

357
00:17:25,240 --> 00:17:29,500
Sama hugmynd, App kort equals--
þú hefur fengið að setja axlabönd here--

358
00:17:29,500 --> 00:17:33,830
App kort jafngildir myCard, þannig að þetta
segir að við höfum þetta kort hlut.

359
00:17:33,830 --> 00:17:39,149
Ég ætla að gefa það sem
Eign í app hluti.

360
00:17:39,149 --> 00:17:41,440
Og þetta app hluti mun
vera fær um að nálgast það og gera

361
00:17:41,440 --> 00:17:43,580
áhugavert efni með það.

362
00:17:43,580 --> 00:17:47,650
>> Svo app okkar er að fara að vera
gefið kort, svo að nú,

363
00:17:47,650 --> 00:17:49,980
skulum hafa app bara gefa
kortið til CardView

364
00:17:49,980 --> 00:17:53,110
sjálft vegna þess að eins að app er ekki
að fara að vita hvað ég á að gera við það,

365
00:17:53,110 --> 00:17:54,850
þannig að við verðum bara að gefa það til CardView.

366
00:17:54,850 --> 00:18:00,050
Þannig að við munum gefa það á
sama hátt, kort jafngildir,

367
00:18:00,050 --> 00:18:05,426
og svo hver hluti er hægt að fá aðgang að
það sem hefur verið gefið það.

368
00:18:05,426 --> 00:18:07,800
Þeir geta nálgast eignir
sem hafa verið lögð á það

369
00:18:07,800 --> 00:18:09,470
nota þessa setningafræði, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Svo hvað gerist hér er
þú hefur myCard hlut.

372
00:18:14,920 --> 00:18:18,250
Þú gefa það inn í app
nota App kortið jafngildir myCard.

373
00:18:18,250 --> 00:18:21,420
Að kortið hlutur er gefið app.

374
00:18:21,420 --> 00:18:24,400
The app er hægt að nálgast það
eins this.props.card.

375
00:18:24,400 --> 00:18:28,780
Það er góður af eins og mynd
veit hvað það er uppspretta er.

376
00:18:28,780 --> 00:18:31,972
>> Þetta app veit hvað það er kort
er, og það getur gert hlutina með það.

377
00:18:31,972 --> 00:18:32,930
Það getur gert útreikninga.

378
00:18:32,930 --> 00:18:35,290
Það getur tekið ákvarðanir byggðar á því.

379
00:18:35,290 --> 00:18:39,950
>> Fyrir nú, ég var að fara að fara
this.props.card inn á CardView.

380
00:18:39,950 --> 00:18:43,420
Skynsamleg svo langt?

381
00:18:43,420 --> 00:18:45,210
Það mun gera meira vit núna.

382
00:18:45,210 --> 00:18:46,990
>> OK, svo nú erum við á CardView.

383
00:18:46,990 --> 00:18:51,719
CardView okkar, miðað við kortið, ætti
prenta út spurningu hennar og svar.

384
00:18:51,719 --> 00:18:54,510
Núna erum prentað bara út nokkrar
hardcoded spurningar og svör.

385
00:18:54,510 --> 00:18:57,720
Við þurfum að reikna out-- við þurfum
að spyrja kortið sem þeir gáfu okkur

386
00:18:57,720 --> 00:19:01,360
hvað er spurningin og svarið, og
þá prenta þetta út í skjá.

387
00:19:01,360 --> 00:19:02,470
>> Þannig að við getum gert þetta hér.

388
00:19:02,470 --> 00:19:06,135
Í bakið begin-- fyrst að gera jafngildir.

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

390
00:19:08,710 --> 00:19:13,050
Svo það sem við erum að gera hér er að við vitum að
spilin eru gefin okkur til eign,

391
00:19:13,050 --> 00:19:13,580
ekki satt?

392
00:19:13,580 --> 00:19:15,930
Það er okkur gefin sem inntak.

393
00:19:15,930 --> 00:19:19,440
Eins og það er nánast eins og
rök að aðgerðinni.

394
00:19:19,440 --> 00:19:22,810
Kortið er rök
næstum þessari CardView.

395
00:19:22,810 --> 00:19:25,239
>> Við munum draga það, og setja
það inn í breytunni spurningu.

396
00:19:25,239 --> 00:19:27,280
Gakktu úr skugga um að svarið fór
til breytu svar.

397
00:19:27,280 --> 00:19:31,130
Hvetja sem kortið til að svara.

398
00:19:31,130 --> 00:19:35,072
Og nú að við höfum þetta,
stað þess að prenta út þessi texti,

399
00:19:35,072 --> 00:19:37,030
við erum að fara að prenta út
hvað sem þeir gáfu okkur.

400
00:19:37,030 --> 00:19:43,580
>> Þannig að þetta stuff-- þannig að við erum að fara
að setja út Spurning Svar.

401
00:19:43,580 --> 00:19:46,380
Við skulum sjá hvort þetta virkar.

402
00:19:46,380 --> 00:19:52,800
Cool, þannig að við skulum stíga í gegnum það
einu sinni bara til að vera viss.

403
00:19:52,800 --> 00:20:00,470
>> Svo er kortið mitt kort hlut, og við
eru að gefa þessi kort til app.

404
00:20:00,470 --> 00:20:04,790
Og app er að fara að taka
kort og gefa það til CardView.

405
00:20:04,790 --> 00:20:09,190
Og þetta CardView segir, ef þú
gefa mér einhverjar flashcard hlut,

406
00:20:09,190 --> 00:20:11,920
Ég prenta út spurningu sína
og svarið hennar, ekki satt?

407
00:20:11,920 --> 00:20:14,590
>> Svo það sem ég gæti gert er að ég get
senda þennan kóða, fyrsta

408
00:20:14,590 --> 00:20:16,580
eins og 10 línur af kóða mitt, að vinur minn.

409
00:20:16,580 --> 00:20:18,820
Hann gæti embed in það í
eigin umsókn hans.

410
00:20:18,820 --> 00:20:27,200
Og svo lengi sem hann gerði það sama,
eins CardView kort jafngildir þetta,

411
00:20:27,200 --> 00:20:30,580
svo lengi sem hann skapaði CardView
og gaf það réttur upplýsingar,

412
00:20:30,580 --> 00:20:31,987
hann gæti láta eigin kortið sitt.

413
00:20:31,987 --> 00:20:34,320
Og svo með þessum hætti, það er mjög
flott leið fyrir þig til að byggja

414
00:20:34,320 --> 00:20:35,906
þættir sem nota hvert annað, ekki satt?

415
00:20:35,906 --> 00:20:38,280
Þetta kort, gæti ég birta
þetta CardView á internetinu,

416
00:20:38,280 --> 00:20:39,790
og fólk myndi vera fær um að nota það.

417
00:20:39,790 --> 00:20:45,070
Svo í rauninni, það er eins og einn af
staðlaðar aðgerðir í C ​​bókasafn.

418
00:20:45,070 --> 00:20:47,280
>> Það er fall þar
einhver hefur skrifað það.

419
00:20:47,280 --> 00:20:48,419
Þú gefur ákveðna inntak.

420
00:20:48,419 --> 00:20:49,710
Það verður að framleiða ákveðna framleiðsla.

421
00:20:49,710 --> 00:20:50,890
Þú hefur ekki sama hvernig það virkar innbyrðis.

422
00:20:50,890 --> 00:20:53,790
Svo lengi sem þú gefur henni rétt
inntak, verður það að gera rétt framleiðsla.

423
00:20:53,790 --> 00:20:57,850
>> Og hluti getur verið
hugsun af á sama hátt.

424
00:20:57,850 --> 00:21:00,280
Þetta CardView er eins
bókasafn virka.

425
00:21:00,280 --> 00:21:03,400
Ef þú gefa honum spjald
sem eign, verður það

426
00:21:03,400 --> 00:21:05,095
prenta út innihald það kort.

427
00:21:05,095 --> 00:21:16,820
Eins og ef ég breyti kortið mitt til
í staðinn að vera eins og það er 5 plús 37,

428
00:21:16,820 --> 00:21:19,210
það mun uppfæra í samræmi við.

429
00:21:19,210 --> 00:21:21,955
Svo bara með því að breyta inntak,
það fær ákveðna framleiðsla.

430
00:21:21,955 --> 00:21:24,830
Svo er hægt að hugsa um hluti nánast
sem virka á þennan hátt, sem

431
00:21:24,830 --> 00:21:25,920
þú getur sett saman.

432
00:21:25,920 --> 00:21:29,440
Þú færð inntak, eins og þetta CardView
sem inntak, þú færð framleiðsla.

433
00:21:29,440 --> 00:21:31,900
Í þessu tilfelli, framleiðsla er HTML.

434
00:21:31,900 --> 00:21:34,404
Skynsamleg svo langt?

435
00:21:34,404 --> 00:21:36,890
Cool, svo aftur, eru eiginleikar
hvernig er hægt að fara upplýsingar

436
00:21:36,890 --> 00:21:40,900
inn og út af hlutum.

437
00:21:40,900 --> 00:21:42,740
>> OK, þannig að við skulum gera þetta
hlutur gagnvirkt.

438
00:21:42,740 --> 00:21:44,450
Núna er það voða leiðinlegt.

439
00:21:44,450 --> 00:21:45,520
Hvað er [inaudible]?

440
00:21:45,520 --> 00:21:48,210
Hægt er að prenta sumir út,
en það er allt sem það getur gert.

441
00:21:48,210 --> 00:21:51,550
>> Svo við skulum fara aftur til
gamall spurningu bara fyrir núna.

442
00:21:51,550 --> 00:21:54,405
OK, svo núna þessir þættir
eru leiðinlegur vegna þess að allt sem þeir gera,

443
00:21:54,405 --> 00:21:55,030
þeir fá inntak.

444
00:21:55,030 --> 00:21:56,100
Þeir gera framleiðsla, ekki satt?

445
00:21:56,100 --> 00:21:57,049
Það er voða leiðinlegt.

446
00:21:57,049 --> 00:21:59,090
Við viljum hafa okkar
hluti til að vera fær um að hafa

447
00:21:59,090 --> 00:22:02,150
einhvers konar innra ástand,
eins muna eitthvað.

448
00:22:02,150 --> 00:22:05,320
>> Fyrir flashcard, fyrir
dæmi, hvers konar ástand

449
00:22:05,320 --> 00:22:07,550
þú might vilja til að
muna að flashcard?

450
00:22:07,550 --> 00:22:09,740
Hvað tímabundið staða
gætir þú vilt að muna

451
00:22:09,740 --> 00:22:12,491
fyrir flashcard í Flashcard app?

452
00:22:12,491 --> 00:22:13,990
Áhorfendur: Hvort sem það er verið hreifi?

453
00:22:13,990 --> 00:22:14,990
NEEL MEHTA: Já, rétt.

454
00:22:14,990 --> 00:22:17,665
Svo þú might vilja til að halda
utan um ertu að horfast í augu eða eru

455
00:22:17,665 --> 00:22:19,100
þú hvolfi á kortinu.

456
00:22:19,100 --> 00:22:23,420
Á Facebook, til dæmis, þú myndir
vilja til að muna hvar í fréttastraumi

457
00:22:23,420 --> 00:22:25,870
Ert þú eða eins og hver er uppsetningu
ert þú að gera núna.

458
00:22:25,870 --> 00:22:30,127
>> Á Messenger, eins og það sem texti þig
tegund í innsláttarreitinn, ekki satt?

459
00:22:30,127 --> 00:22:31,710
Ef þú uppfærir síðuna, fer það í burtu.

460
00:22:31,710 --> 00:22:32,793
En þú í raun ekki sama.

461
00:22:32,793 --> 00:22:33,770
Það er bara tímabundið.

462
00:22:33,770 --> 00:22:34,548
Já?

463
00:22:34,548 --> 00:22:36,152
>> Áhorfendur: [inaudible]

464
00:22:36,152 --> 00:22:38,360
NEEL MEHTA: Like a glampi
kort, eins og þú getur að sjá

465
00:22:38,360 --> 00:22:40,290
spurningin hlið eða svarið hlið?

466
00:22:40,290 --> 00:22:41,070
>> Áhorfendur: OK.

467
00:22:41,070 --> 00:22:43,270
>> NEEL MEHTA: eins og
tvíhliða flashcard, ekki satt?

468
00:22:43,270 --> 00:22:46,370
Já, svo þú vilt
hafa þessa hugmynd um núna

469
00:22:46,370 --> 00:22:50,370
Ég hef eiginleika, sem er eins og aðföngum,
en ríkið, sem er tímabundin, uh,

470
00:22:50,370 --> 00:22:51,839
þar sem þú ert á síðunni, ekki satt?

471
00:22:51,839 --> 00:22:54,380
Aftur, ég sagði í Facebook
Messenger, ég hef eins sem maður

472
00:22:54,380 --> 00:22:56,550
þú ert að skoða Facebook
eða sem er sniðið, ekki satt?

473
00:22:56,550 --> 00:22:58,030
>> Þetta er aðeins tímabundið.

474
00:22:58,030 --> 00:23:01,200
Það er mikilvægt að sýna notandanum
hvað er að gerast, en uppfæra síðuna.

475
00:23:01,200 --> 00:23:02,250
Það skiptir ekki máli.

476
00:23:02,250 --> 00:23:04,530
Svo það er tímabundið ástand,
þannig að við það ástand.

477
00:23:04,530 --> 00:23:06,250
>> Svo, aftur, það er ríkis og leikmunir.

478
00:23:06,250 --> 00:23:09,084
Props er inntak gefið
frá gagnagrunni okkar.

479
00:23:09,084 --> 00:23:10,250
Ríkið er bara eins og vanskila.

480
00:23:10,250 --> 00:23:13,700
Það er bara eins og efni sem
gerir málið gagnvirkt.

481
00:23:13,700 --> 00:23:17,720
>> Svo í okkar CardView-- skulum hafa
okkar CardView-- svo það var gaman.

482
00:23:17,720 --> 00:23:21,420
Það sem við erum að fara að gera hér, við erum að fara
að snerta CardView og aðeins CardView.

483
00:23:21,420 --> 00:23:25,105
Og svo vinur minn sem fékk þetta, þeir
myndi ekki vart.

484
00:23:25,105 --> 00:23:27,230
Þeir myndu ekki þurfa að breyta
eitthvað af eigin númer þeirra,

485
00:23:27,230 --> 00:23:29,410
en þeir myndu sjá sitt
CardView fékk souped upp.

486
00:23:29,410 --> 00:23:31,270
Það er a ágætur hluti um hluti.

487
00:23:31,270 --> 00:23:35,290
>> OK, svo í CardView okkar, við skulum reyna að
halda utan um hvort við erum í áföngum upp

488
00:23:35,290 --> 00:23:36,560
eða á grúfu.

489
00:23:36,560 --> 00:23:40,480
Í bregðast við gerum þetta með fyrst
skilgreina upphaflegu ástandi.

490
00:23:40,480 --> 00:23:42,070
Hvar er kortið byrja?

491
00:23:42,070 --> 00:23:48,480
>> Svo vera fall sem kallast getInitialState
virka, og við aftur hlut.

492
00:23:48,480 --> 00:23:53,310
Þessi hlutur inniheldur nokkur ríki, og
ástand er bara lykill-gildi par.

493
00:23:53,310 --> 00:23:56,950
Eins og í kenna, hefur þú a lykill og
gildi, hefur þú eins nafn er strengur.

494
00:23:56,950 --> 00:24:01,410
>> Í þessu tilviki, við skulum segja að framan er satt.

495
00:24:01,410 --> 00:24:03,760
Þetta segir að við höfum ástand.

496
00:24:03,760 --> 00:24:06,570
Einn hluti þess ríkis
er eiginleiki sem heitir framan.

497
00:24:06,570 --> 00:24:09,649
[Inaudible], svo sjálfgefið,
við erum í the andlit af the kort,

498
00:24:09,649 --> 00:24:11,440
og við getum breytt þessu
eins og við Flip kortið.

499
00:24:11,440 --> 00:24:13,380
Meikar sens?

500
00:24:13,380 --> 00:24:18,190
>> OK, svo í bakið, núna erum við
sýnir spurningu og svar.

501
00:24:18,190 --> 00:24:20,860
Nú hvað við ættum að gera
er sýna spurninguna

502
00:24:20,860 --> 00:24:24,370
ef við erum á framhliðinni svo
svarið er fyrir aftan á kortinu.

503
00:24:24,370 --> 00:24:26,850
Þess vegna allt að
kortið gagnvirkt.

504
00:24:26,850 --> 00:24:28,100
Svo skulum reyna og þetta hér.

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

506
00:24:31,600 --> 00:24:33,620
Jæja, fyrst bara að gera breytu.

507
00:24:33,620 --> 00:24:37,790
Við getum spurt nú this.state.front.

508
00:24:37,790 --> 00:24:42,010
Við aðgang tilgreina sama við
Aðgangur leikmunir, svo this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Ef við erum að framan, þá texta
er this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Ef við erum á the andlit af the
kort, við erum að fara að reyna að grípa

512
00:24:51,360 --> 00:24:52,485
spurningin af kortinu.

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

514
00:24:54,782 --> 00:24:57,240
Annars, ef við erum á bak
kortsins, hvað gerum við?

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

516
00:25:01,830 --> 00:25:02,750
>> Áhorfendur: Svarið?

517
00:25:02,750 --> 00:25:05,041
>> NEEL MEHTA: Já, svo texti
jafngildir this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
En ef þú tekur eftir, við erum með
ríkið að taka ákvörðun

520
00:25:10,930 --> 00:25:14,420
því nú hluti
mun líta öðruvísi

521
00:25:14,420 --> 00:25:16,710
byggt á hvernig þessir samskipti við það.

522
00:25:16,710 --> 00:25:20,355
Svo í stað þess að prenta út þetta,
við verðum bara að prenta út texta.

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

524
00:25:25,270 --> 00:25:28,650
Cool, svo nú, eins og þú sérð,
Við sjáum aðeins spurningunni.

525
00:25:28,650 --> 00:25:37,720
Og ef ég breyta stöðu hér handvirkt
að framan er ósatt við fáum 42 aftur.

526
00:25:37,720 --> 00:25:39,720
>> Svo aftur, þessi hluti
hefur eigin stöðu sína.

527
00:25:39,720 --> 00:25:43,440
Eins og hnappur veit hvort
það er verið ýtt eða ekki,

528
00:25:43,440 --> 00:25:46,080
Þessi hlutur, veit hver er
framan eða að aftan.

529
00:25:46,080 --> 00:25:48,320
Sjálfgefið er það að framan.

530
00:25:48,320 --> 00:25:50,840
Og þá ef það er á framhlið,
við munum prenta út spurninguna.

531
00:25:50,840 --> 00:25:53,106
Ef það er á bak, við munum
prenta út svarið.

532
00:25:53,106 --> 00:25:54,980
Svo aftur, upplýsingar
gefið er sama.

533
00:25:54,980 --> 00:25:59,090
Það lítur bara öðruvísi
byggt á hvernig þú program það.

534
00:25:59,090 --> 00:26:02,670
Svo, til dæmis, Facebook Messenger,
jafnvel ef þú færð sömu gögn uppspretta,

535
00:26:02,670 --> 00:26:05,170
það gæti litið öðruvísi
vegna þess að ríkið er öðruvísi.

536
00:26:05,170 --> 00:26:08,421
Þú ert að horfa á a
Skilaboð mismunandi einstaklingsins.

537
00:26:08,421 --> 00:26:10,930
>> OK, þannig að þetta er allt vel og
gott, en nú er það í raun og veru

538
00:26:10,930 --> 00:26:15,940
gera okkur kleift að breyta, hvort
kort okkar er að framan eða bak.

539
00:26:15,940 --> 00:26:19,010
Við getum gert þetta með því að bæta a Flip
hnappinn, hnappinn á kortið sem

540
00:26:19,010 --> 00:26:22,950
snýst kortið ef það er [inaudible].

541
00:26:22,950 --> 00:26:31,770
Svo skulum bæta hnappinn hér, þetta
hnappinn, og þessi hnappur mun segja flip.

542
00:26:31,770 --> 00:26:35,650
>> Og svo núna, það
gerir ekki neitt.

543
00:26:35,650 --> 00:26:37,075
Það lítur bara ágætur.

544
00:26:37,075 --> 00:26:43,650
Það sem við getum gert er að við getum bætt smell
stjórnandinn, onClick jafngildir this.flip,

545
00:26:43,650 --> 00:26:44,820
og við munum skilgreina Flip síðar.

546
00:26:44,820 --> 00:26:47,120
En í grundvallaratriðum, onClick
er fall sem

547
00:26:47,120 --> 00:26:48,675
fær kallað þegar notandi smellir á hana.

548
00:26:48,675 --> 00:26:52,330
>> Svo á hnappinn vilja vita
þegar það er verið smellt.

549
00:26:52,330 --> 00:26:54,750
Fór það hefur verið smellt
það snýst kortið.

550
00:26:54,750 --> 00:26:58,382
Það er góður af eins og þinn
pizza sending strákur.

551
00:26:58,382 --> 00:27:01,590
Þú ert eins og, allt í lagi, þegar einhver
kallar mig, ég skila pizzu, ekki satt?

552
00:27:01,590 --> 00:27:03,420
>> Þú skráir þig á þessa hlustandi.

553
00:27:03,420 --> 00:27:04,530
Þú hlusta fyrir atburð.

554
00:27:04,530 --> 00:27:07,657
Þú kallaður, og þegar
atburður gerist, þú gerir eitthvað.

555
00:27:07,657 --> 00:27:08,240
Þú færð pizzu.

556
00:27:08,240 --> 00:27:11,480
Í þessu tilfelli, þegar þú ert
smellt þú flettir kortið.

557
00:27:11,480 --> 00:27:14,560
>> Og svo þurfum við að skilgreina
fall sem snýst kortið,

558
00:27:14,560 --> 00:27:17,930
þannig að við munum skrifa það rétt
hér, Flip virka.

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

560
00:27:20,850 --> 00:27:23,680
Og svo hvað finnst þér Flip mun gera?

561
00:27:23,680 --> 00:27:27,180
Aftur þetta fær kallað þegar
smelltu við selbiti hnappinn.

562
00:27:27,180 --> 00:27:29,406
Hvað ætti að virka Flip gera?

563
00:27:29,406 --> 00:27:34,136
>> Áhorfendur: Breyta this.state.front
sanni að rangar, rangar satt.

564
00:27:34,136 --> 00:27:38,420
>> NEEL MEHTA: Já, svo taka hvað sem
this.front is-- framan ríkið er.

565
00:27:38,420 --> 00:27:40,930
Taktu framan ástand, ef
það er satt, að það ósatt.

566
00:27:40,930 --> 00:27:42,530
Ef það er rangt, að gera það satt, ekki satt?

567
00:27:42,530 --> 00:27:45,330
Svo skulum reyna það.

568
00:27:45,330 --> 00:27:48,240
>> Þú getur ekki breytt stöðu
bara með því að gera this.state.

569
00:27:48,240 --> 00:27:50,380
Þú getur ekki gert þetta.

570
00:27:50,380 --> 00:27:52,030
Þú getur ekki gert það.

571
00:27:52,030 --> 00:27:55,810
Þú þarft að nota virka
kallað this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Svo þú getur sagt this.setState framan
ristill þetta þar, aftur, upphrópun

573
00:28:03,230 --> 00:28:04,330
lið þýðir hið gagnstæða.

574
00:28:04,330 --> 00:28:07,420
Ég held að ef þetta. state.front
er satt, það mun snúa rangar.

575
00:28:07,420 --> 00:28:09,170
Þannig að við munum stilla stöðu
sanni að rangar.

576
00:28:09,170 --> 00:28:11,430
Ef það er rangt, við munum
setja það ósatt í satt.

577
00:28:11,430 --> 00:28:17,210
>> Bara eftir að við setjum og fá örlítið
öðruvísi, og svo skulum reyna þetta.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, líta á þetta.

579
00:28:18,675 --> 00:28:21,810
The Flip hnappur mun nú
skipta framan til baka ástand.

580
00:28:21,810 --> 00:28:24,990
>> Og svo er hér þar sem þú sérð
smá töfra React.

581
00:28:24,990 --> 00:28:28,420
Eins og við aldrei sagt það að það að koma aftur bakið.

582
00:28:28,420 --> 00:28:30,910
Við sögðum aldrei það uppkast neitt.

583
00:28:30,910 --> 00:28:32,630
Ef þú ert að gera þetta
án Bregðast, að þú vilt

584
00:28:32,630 --> 00:28:34,588
hafa to-- eins og þegar
Flip hnappur er smellt

585
00:28:34,588 --> 00:28:37,290
þú þyrftir að segja það að
handvirkt aftur bakið, ekki satt?

586
00:28:37,290 --> 00:28:43,050
>> Bregðast er mjög flott þannig að ef þú
gefa það ákveðna stöðu og eignir,

587
00:28:43,050 --> 00:28:45,760
það verður alltaf að láta
nákvæmlega það sama.

588
00:28:45,760 --> 00:28:48,690
Og svo þegar við alltaf við breyta
ríki og eignir,

589
00:28:48,690 --> 00:28:50,819
bregðast bara aftur gerir heild hlutur.

590
00:28:50,819 --> 00:28:52,860
Það veit að það er
einn-á-einn bréfaskipti

591
00:28:52,860 --> 00:28:57,270
milli ríkis og breytu og HTML.

592
00:28:57,270 --> 00:29:00,110
Svo þegar annað hvort þeirra
breytingar frá í gegnum safn ríkisins,

593
00:29:00,110 --> 00:29:03,750
það mun breyta því hvernig
borga er aftur veitt.

594
00:29:03,750 --> 00:29:06,650
Og svo í rauninni React er eins
að bíða eftir þér til að breyta.

595
00:29:06,650 --> 00:29:09,870
>> Alltaf þegar það breytist eitthvað,
það verður aftur láta alla síðuna.

596
00:29:09,870 --> 00:29:12,480
Og ef það hljómar óhagkvæmt,
það er vegna þess að það væri,

597
00:29:12,480 --> 00:29:15,050
en bregðast notar neitt
kallað Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
Í stað þess að teikna á síðunni beint, það
heldur raunverulegur HTML tré í minni.

599
00:29:19,950 --> 00:29:23,620
>> Þú veist, HTML er eins og tré,
eins hierarchic gögn uppbygging.

600
00:29:23,620 --> 00:29:28,990
Það heldur falsa tré í minni,
og þegar þú uppfærir síðuna,

601
00:29:28,990 --> 00:29:31,940
það mun draga aðra falsa
tré, og það mun reikna

602
00:29:31,940 --> 00:29:35,120
hvað breytist það þarf að gera
síðu að gera tvö tré jafnir.

603
00:29:35,120 --> 00:29:38,540
Svo í rauninni, nánast það
aftur gerir mikið.

604
00:29:38,540 --> 00:29:41,540
Og þá aðeins það eins breytir
síðu í litlu klip sem þörf krefur,

605
00:29:41,540 --> 00:29:44,240
svo það er mjög, mjög, mjög duglegur.

606
00:29:44,240 --> 00:29:46,970
>> Svo í rauninni viðbragðsflýtir
þegar þú breyta einhverju,

607
00:29:46,970 --> 00:29:49,010
það verður aftur gera síðuna nánast.

608
00:29:49,010 --> 00:29:52,830
Það verður að reikna út hvað ég þarf að
breyta til að gera alvöru síðu endurspegla

609
00:29:52,830 --> 00:29:55,602
raunverulegur síðu, og það mun gera það.

610
00:29:55,602 --> 00:29:56,560
Það er raunverulegur DOM.

611
00:29:56,560 --> 00:29:59,350
Það er eitt af stærstu
aðgerðir bregðast.

612
00:29:59,350 --> 00:30:00,880
>> Er að skynsamleg?

613
00:30:00,880 --> 00:30:01,540
Einhverjar spurningar?

614
00:30:01,540 --> 00:30:02,040
Já?

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

616
00:30:05,568 --> 00:30:08,969
>> Áhorfendur: Hvernig virkar
bera saman enn á MVC

617
00:30:08,969 --> 00:30:10,760
sem við ræddum um
áður eins og auðlindir.

618
00:30:10,760 --> 00:30:13,527
>> NEEL MEHTA: Já, spurningin
er hvernig er það bera saman við MVC?

619
00:30:13,527 --> 00:30:14,610
Þú baðst um auðlindir.

620
00:30:14,610 --> 00:30:16,445
Jæja, við skulum tala um hvernig það virkar.

621
00:30:16,445 --> 00:30:18,190
>> Í MVC, þú vilt uppfæra líkanið.

622
00:30:18,190 --> 00:30:20,560
Í þessu tilfelli erum við myndum hafa kort líkan.

623
00:30:20,560 --> 00:30:24,540
Útsýnið myndi hafa
Flip hnappur og stjórn

624
00:30:24,540 --> 00:30:26,310
hefði selbiti virka.

625
00:30:26,310 --> 00:30:28,450
Svo útsýnið myndi segja að
stjórnandi að Flip Flip.

626
00:30:28,450 --> 00:30:30,370
Flip myndi segja að
líkan til að breyta, ekki satt?

627
00:30:30,370 --> 00:30:33,915
>> Og svo þegar þú gerir að MVC, þér
hlusta eftir fyrirmynd til að breyta,

628
00:30:33,915 --> 00:30:37,150
og þú aftur láta þá skoðun í samræmi við.

629
00:30:37,150 --> 00:30:39,210
Eða þú ert bara að eins
hafa stjórnandi.

630
00:30:39,210 --> 00:30:42,418
Bíða eftir fyrirmynd til að breyta, og þá
velja og velja hluti af eins og hlutur

631
00:30:42,418 --> 00:30:44,032
breyta.

632
00:30:44,032 --> 00:30:45,740
Hér höfum við eitt,
en í stórum app,

633
00:30:45,740 --> 00:30:48,510
þú þarft að eins muna hvað
breyting á hverjum einasta stað,

634
00:30:48,510 --> 00:30:50,290
svo það er svolítið pirrandi.

635
00:30:50,290 --> 00:30:53,670
Og svo bregðast er gott
vegna þess að það hefur Shadow Dom.

636
00:30:53,670 --> 00:30:56,040
Það hefur efni á að bara
umrita allt hlutur.

637
00:30:56,040 --> 00:30:58,680
Þú þarft ekki að vali
eins giska á hvað á að uppfæra.

638
00:30:58,680 --> 00:31:02,186
>> Á Facebook ef þú vilt
fá ný skilaboð, í MVC,

639
00:31:02,186 --> 00:31:04,060
þú vilt að muna,
OK, breyta því sem

640
00:31:04,060 --> 00:31:06,260
efst á
síðu, táknið skilaboð.

641
00:31:06,260 --> 00:31:08,290
Einnig skjóta nýjum glugga neðst.

642
00:31:08,290 --> 00:31:10,070
Einnig gera nýja hlutur í þeim glugga.

643
00:31:10,070 --> 00:31:11,060
Einnig spila hljóð.

644
00:31:11,060 --> 00:31:13,150
>> Það er mikið af efni
að fara út á sama tíma.

645
00:31:13,150 --> 00:31:15,320
Og svo ef þú ert ekki
hafa Shadow Dom, að þú vilt

646
00:31:15,320 --> 00:31:18,740
þarft að gera það handvirkt því
þú getur ekki fá losa af alla síðuna.

647
00:31:18,740 --> 00:31:21,430
Þú getur ekki efni á að, svo þú þarft
að breyta hver hlutur handvirkt,

648
00:31:21,430 --> 00:31:23,990
sem er mjög pirrandi í MVC.

649
00:31:23,990 --> 00:31:27,640
>> Svo í því skyni að vera
thrifty, þeir vali

650
00:31:27,640 --> 00:31:30,750
uppfæra síðuna, sem er
duglegur, en einnig pirrandi.

651
00:31:30,750 --> 00:31:34,002
Í bregðast, vegna skuggans
Dom, þú færð bæði hluti fyrir frjáls.

652
00:31:34,002 --> 00:31:35,710
Það er skilvirk vegna
í skugga Dom.

653
00:31:35,710 --> 00:31:37,210
Flöskuháls er að uppfæra síðuna.

654
00:31:37,210 --> 00:31:40,292
Það er ekki að gera tré meðferð.

655
00:31:40,292 --> 00:31:41,250
Þú færð skilvirkni.

656
00:31:41,250 --> 00:31:45,420
Þú færð einnig vellíðan af nota vegna
ef þú umrita bara alla síðuna,

657
00:31:45,420 --> 00:31:48,970
en þú veist bara, allt í lagi, það
eru að fara að vera á síðunni einhvers staðar.

658
00:31:48,970 --> 00:31:51,180
Það gæti verið í öðru sæti, en
það er að fara að vera á síðunni, ekki satt?

659
00:31:51,180 --> 00:31:52,860
Svo þú bara aftur veitt
allt hlutur nánast,

660
00:31:52,860 --> 00:31:55,540
og þú gætir gert nokkrar
breytingar á síðunni sjálfri.

661
00:31:55,540 --> 00:31:57,850
>> Svo, aftur, í MVC þig
þyrfti að velja

662
00:31:57,850 --> 00:32:01,840
milli vellíðan af nota og skilvirkni,
og bregðast, þú færð bæði.

663
00:32:01,840 --> 00:32:04,020
Svo það er betra.

664
00:32:04,020 --> 00:32:05,220
Meikar sens?

665
00:32:05,220 --> 00:32:06,676
Solid.

666
00:32:06,676 --> 00:32:12,080
>> OK, þannig að við skulum sjá skulum tala
svolítið um skref 4,

667
00:32:12,080 --> 00:32:14,740
hvernig við getum embed hluti.

668
00:32:14,740 --> 00:32:16,260
Þannig að við höfum þetta rétt núna.

669
00:32:16,260 --> 00:32:19,420
Við höfum okkar kaldur litla hnappinn.

670
00:32:19,420 --> 00:32:23,157
Við getum Flip það aftur og
fram, og það er allt það er.

671
00:32:23,157 --> 00:32:24,990
Segjum að við viljum
hafa annað hluti.

672
00:32:24,990 --> 00:32:28,730
Skulum segja flashcard app okkar ætti
finna lista yfir öll spilin

673
00:32:28,730 --> 00:32:31,520
sem þú hefur, svo það þýðir að við
ætti að hafa aðra hluti.

674
00:32:31,520 --> 00:32:32,970
Jæja, kannski kalla það listi útsýni.

675
00:32:32,970 --> 00:32:36,200
Við skulum gera lista skoðun að
coexists með CardView,

676
00:32:36,200 --> 00:32:39,680
og þessi listi skoða og CardView
verður eins vinna saman.

677
00:32:39,680 --> 00:32:43,190
Og þú getur sameinað þá
að gera app okkar fyrir þig.

678
00:32:43,190 --> 00:32:45,160
>> Svo fyrst, við skulum gera
par fleiri spil rétt.

679
00:32:45,160 --> 00:32:46,370
Við skulum segja, hvaða spil?

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

681
00:32:49,619 --> 00:32:51,910
Og bara svo ég þarf ekki að
ól þig með því að slá það inn,

682
00:32:51,910 --> 00:32:53,410
Ég ætla bara að fara að afrita það hér.

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

684
00:33:01,664 --> 00:33:03,580
Og svo ég ætla að ekki
gefa það bara eitt spil.

685
00:33:03,580 --> 00:33:06,910
Ég ætla að gefa það upp á fjölbreytta spil.

686
00:33:06,910 --> 00:33:10,240
Svo fyrstu apps
að fara að brjóta nú.

687
00:33:10,240 --> 00:33:14,717
Allt í lagi, þannig að við erum að fara að gera
þetta fær til handleika margfeldi spil.

688
00:33:14,717 --> 00:33:17,800
Svo fyrst, við erum að fara að gefa það, ekki
bara eitt kort heldur array af kortum,

689
00:33:17,800 --> 00:33:18,700
eins lista af kortum.

690
00:33:18,700 --> 00:33:20,980
Og í þessu tilfelli höfum við þrjú af þeim.

691
00:33:20,980 --> 00:33:27,280
>> Allt í lagi, svo svo app er
fara að fá lista spil,

692
00:33:27,280 --> 00:33:29,870
og það er að fara að ákveða hvaða
eitt til að sýna að CardView.

693
00:33:29,870 --> 00:33:33,740
The CardView getur aðeins
láta eitt kort, en app

694
00:33:33,740 --> 00:33:37,610
fær lista yfir öll spilin, ekki satt?

695
00:33:37,610 --> 00:33:40,820
>> Svo þegar þú reikna út einn
kort til að gefa CardView,

696
00:33:40,820 --> 00:33:44,660
hvernig myndir þú giska á að þú might vera fær
að taka ákvörðun um hvaða kort

697
00:33:44,660 --> 00:33:47,064
til að sýna?

698
00:33:47,064 --> 00:33:49,980
Til að gefa þér vísbendingu, það er tímabundið
Þú verður að lesa ákveðna kort.

699
00:33:49,980 --> 00:33:53,260
Ef þú uppfærir síðuna, þú munt
bara fara aftur til fyrsta kortið.

700
00:33:53,260 --> 00:33:55,464
Það er allt í lagi vegna þess að það er tímabundið.

701
00:33:55,464 --> 00:33:56,630
Hvað tækni gætum við nota?

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

703
00:34:02,534 --> 00:34:08,760
>> Áhorfendur: Þú gætir gert breytu
svo bara eins og þú hefðir framan.

704
00:34:08,760 --> 00:34:11,989
Er það satt, þú gætir
hafa núverandi kort er 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL MEHTA: Já, svo við
vilt hafa stöðu, ekki satt?

706
00:34:14,150 --> 00:34:16,080
Þú myndir nota ríkið í
hluti til að reikna út

707
00:34:16,080 --> 00:34:17,288
sem kortið viljum við fá.

708
00:34:17,288 --> 00:34:19,290
Eins og við hafa a listi af
öll spilin, við munum

709
00:34:19,290 --> 00:34:21,630
nota stöðu til að reikna út
einn af fyrsta kortið,

710
00:34:21,630 --> 00:34:23,710
annað kort, Þriðja kortið, og svo framvegis.

711
00:34:23,710 --> 00:34:28,760
>> Svo app svo app vilja fá a
hafa getInitialState virka,

712
00:34:28,760 --> 00:34:35,020
getInitialState virka aftur.

713
00:34:35,020 --> 00:34:39,929
Og við verðum bara að segja activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Svo nú hefur app okkar það eigin ríki.

715
00:34:42,889 --> 00:34:47,179
>> Og svo nú á bakið, til að reikna út
kort, við skulum fara bara til fylkisins

716
00:34:47,179 --> 00:34:49,969
og grípa málið á vísitölu.

717
00:34:49,969 --> 00:34:53,580
Veldu kort jafnt this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Svo eins og þú sérð hér, leikmunir og
ríkið í raun vinna saman.

720
00:35:00,162 --> 00:35:08,990
Svo nú er að við höfum activeCard okkar,
við munum kalla það activeCard,

721
00:35:08,990 --> 00:35:10,470
og við skulum sjá hvort þetta virkar.

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

723
00:35:20,320 --> 00:35:20,820
[Inaudible]

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

725
00:35:41,504 --> 00:35:44,900
>> Ó, það var texti villa.

726
00:35:44,900 --> 00:35:45,400
Ah.

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

728
00:35:51,420 --> 00:35:54,840
>> Cool, jebb, svo nú við vorum aftur
að þar sem við vorum áður, ekki satt?

729
00:35:54,840 --> 00:35:57,100
Sama gamla program nema
nú getum við styðjum

730
00:35:57,100 --> 00:35:59,390
listi af kortum, ekki bara eitt kort.

731
00:35:59,390 --> 00:36:04,130
Og nú, aftur, ef við breyta
activeIndex, getum við farið frá 0 til 1,

732
00:36:04,130 --> 00:36:07,330
og nú að annað kortið,
og þá fórum við 0.

733
00:36:07,330 --> 00:36:10,390
Svo er hér ný
souped upp útgáfa af okkar.

734
00:36:10,390 --> 00:36:16,000
>> OK, svo nú skulum við hafa a listi skjáinn sem
sýnir öll spilin í forritinu,

735
00:36:16,000 --> 00:36:19,980
þannig að við munum gera nýtt
hluti heitir ListView.

736
00:36:19,980 --> 00:36:22,155
Láta ListView jafngildir react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Þannig að við viljum láta óraðaðan
skrá með atriði á listanum fyrir hvert kort.

739
00:36:38,800 --> 00:36:41,490
Og svo við höfum fullt af kortum.

740
00:36:41,490 --> 00:36:44,990
Við viljum einn lista atriði
fyrir hvert kort, ekki satt?

741
00:36:44,990 --> 00:36:47,490
Við gætum gert fyrir lykkju eða
eitthvað til að gera nýja lista atriði.

742
00:36:47,490 --> 00:36:50,522
En eins og þú gerir það í
Bregðast við, nota neitt sem heitir kort.

743
00:36:50,522 --> 00:36:57,150
Kortið er tól eða fall sem þú notar
að fyrir hvert lið, rekur sumir virka,

744
00:36:57,150 --> 00:36:59,510
tekur aftur gildi, og
gefur þér að baka.

745
00:36:59,510 --> 00:37:06,310
>> Svo sem dæmi, höfum við fjölda
1, 2, 3.map function-- og þetta

746
00:37:06,310 --> 00:37:12,120
er styttingin fyrir a
function-- x arrow x sinnum x.

747
00:37:12,120 --> 00:37:16,110
Þetta segir, fyrir hvert númer
í 1, 2, 3, taka það.

748
00:37:16,110 --> 00:37:17,800
Ferningur það, og gefa það til baka.

749
00:37:17,800 --> 00:37:22,090
Svo hvað finnst þér 1,
2, 3.map x fer x sinnum

750
00:37:22,090 --> 00:37:25,480
x gefur þú aftur gefið
að þessi aðgerð er

751
00:37:25,480 --> 00:37:27,680
keyra á hvert þáttur þessi fylking.

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

753
00:37:30,837 --> 00:37:32,190
>> Áhorfendur: 1, 4 9?

754
00:37:32,190 --> 00:37:35,709
>> NEEL MEHTA: Já, 1, 4, 9
vegna þess að þú gerir 1 sinnum 1.

755
00:37:35,709 --> 00:37:36,500
Sem gefur þér einn.

756
00:37:36,500 --> 00:37:37,690
Það er fyrsti þátturinn.

757
00:37:37,690 --> 00:37:38,530
>> 2 sinnum 2 er 4.

758
00:37:38,530 --> 00:37:39,570
Það er annað þáttur.

759
00:37:39,570 --> 00:37:40,310
3 sinnum 3 er 9.

760
00:37:40,310 --> 00:37:41,540
Það er þriðja þáttur.

761
00:37:41,540 --> 00:37:42,640
Meikar sens?

762
00:37:42,640 --> 00:37:45,015
Svo Kortið er tækni sem þú
nota í hagnýtur forritari,

763
00:37:45,015 --> 00:37:48,090
nýja stíl
forritun til að gera eitthvað

764
00:37:48,090 --> 00:37:50,500
að hvert frumefni í listanum þínum.

765
00:37:50,500 --> 00:37:51,970
Og svo hljómar þetta kunnuglega.

766
00:37:51,970 --> 00:37:53,370
Við erum með lista yfir kort.

767
00:37:53,370 --> 00:37:56,860
Við viljum fá lista atriði fyrir hvert
einn, þannig að við munum bara nota kortið hér.

768
00:37:56,860 --> 00:38:00,250
Við munum segja, láta lista jafn
this.props, spil, kort.

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

770
00:38:10,580 --> 00:38:15,070
>> Og svo gefið kort, við erum
að fara að búa til lista atriði

771
00:38:15,070 --> 00:38:17,580
með að kortið er innihaldi megin við það.

772
00:38:17,580 --> 00:38:20,660
Við skulum bara segja að við viljum gefa út
spilin spurningu svo card.question.

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

774
00:38:24,990 --> 00:38:30,649
Svo inniheldur þessi listi er
array af LI eða listaeigindi

775
00:38:30,649 --> 00:38:32,440
þar sem það er einn lista
atriði fyrir hvert kort,

776
00:38:32,440 --> 00:38:35,150
og sem inniheldur spil spurningu.

777
00:38:35,150 --> 00:38:37,640
Meikar sens?

778
00:38:37,640 --> 00:38:39,450
>> Cool, svo nú skulum
í raun prenta það út.

779
00:38:39,450 --> 00:38:46,521
Þannig að við munum skila ul.

780
00:38:46,521 --> 00:38:49,020
Inni að óraðaðan lista,
við verðum bara að standa allan listann

781
00:38:49,020 --> 00:38:49,890
sem þeir gáfu okkur.

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

783
00:38:52,851 --> 00:38:53,350
Cool.

784
00:38:53,350 --> 00:38:56,060
>> Allt í lagi, svo nú þetta
Listaglugginn virkar bara finna.

785
00:38:56,060 --> 00:38:59,842
Einhverjar spurningar um nafnalista?

786
00:38:59,842 --> 00:39:01,270
Þú ert með fullt af kortum.

787
00:39:01,270 --> 00:39:02,800
Þú gera lista atriði fyrir hvert kort.

788
00:39:02,800 --> 00:39:05,466
Og þú setur þá inn óraðaðan
lista, og þú gefur það aftur.

789
00:39:05,466 --> 00:39:09,410
Svo nú skulum bregðast svo við embed
þetta inni heimshornum,

790
00:39:09,410 --> 00:39:14,310
svo við getum gert þetta, listi skjáinn.

791
00:39:14,310 --> 00:39:17,070
Hvað rök ekki við framhjá að skrá útsýni?

792
00:39:17,070 --> 00:39:18,320
Hvað eiginleika eigum við að gefa það?

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

794
00:39:25,111 --> 00:39:26,860
Mundu að ef þú gefur
það fullt af kortum,

795
00:39:26,860 --> 00:39:29,590
það mun gera lista
sjá fyrir þeim kortum.

796
00:39:29,590 --> 00:39:32,267
Svo hvað myndum við fara
hér sem rök?

797
00:39:32,267 --> 00:39:33,350
Áhorfendur: Listi af kortum?

798
00:39:33,350 --> 00:39:37,130
NEEL MEHTA: Já, svo spil
jafngildir this.props.cards, ekki satt?

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

800
00:39:39,850 --> 00:39:44,370
Og svo eina vandamálið
er að þú getur aðeins

801
00:39:44,370 --> 00:39:48,600
þá á einn í efsta þrepi þáttur í bakið,
svo þú hefur fengið að vefja það í div.

802
00:39:48,600 --> 00:39:49,100
Þetta er skrýtið.

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
Svo skulum sjá hvort það.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Er að vinna?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Já, þar sem þú ferð.

809
00:40:31,030 --> 00:40:33,700
Svo nú höfum við lista
spil neðst,

810
00:40:33,700 --> 00:40:36,180
og þá höfum við okkar
CardView sig á toppinn,

811
00:40:36,180 --> 00:40:40,486
og það mun selbiti milli
tvær hliðar á kortinu.

812
00:40:40,486 --> 00:40:42,610
Nú er að skynsamleg hvernig ég gerði það?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Já, svo aftur, höfum við tvo hluti.

815
00:40:46,790 --> 00:40:49,666
Fyrsti þátturinn prentar
út á hverjum kortið í listanum.

816
00:40:49,666 --> 00:40:50,540
Það er listi.

817
00:40:50,540 --> 00:40:54,770
Og seinni hluti
prentar út bara þessi kort.

818
00:40:54,770 --> 00:40:58,840
Ef þú gefur það ákveðna kort, það verður
prenta út upplýsingar um það kort

819
00:40:58,840 --> 00:41:01,870
og láta þú flettir fram og til baka.

820
00:41:01,870 --> 00:41:05,850
>> Svo ef við viljum, við getum reynt og tala
um að bæta við nokkrum nýjum möguleikum að þessu.

821
00:41:05,850 --> 00:41:09,482
Annars getum við talað aðeins meira
um af rennslishraða reactor,

822
00:41:09,482 --> 00:41:11,190
eða við getum svarað
spurningar sem þú gætir hafa

823
00:41:11,190 --> 00:41:15,050
vegna þess að þetta eru allar helstu hlutum
af bregðast að ég vil tala um.

824
00:41:15,050 --> 00:41:16,540
Við getum farið á undan.

825
00:41:16,540 --> 00:41:17,590
Við getum svarað spurningum.

826
00:41:17,590 --> 00:41:18,560
Hvað sem þú vilt.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Áhorfendur: Er hægt að nota
JSX í venjulegum JavaScript?

829
00:41:24,205 --> 00:41:27,150
Eða er það eitthvað sem
kom með [inaudible]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL MEHTA: Spurningin er dós
þú notar JSX með eðlilega JavaScript?

831
00:41:30,760 --> 00:41:32,620
Svarið er já.

832
00:41:32,620 --> 00:41:41,070
JSX er bara leið til að Hún tekur
JavaScript sem hefur HTML inni af því,

833
00:41:41,070 --> 00:41:44,215
og það safnar í JavaScript sem
er ekki með HTML inni af því.

834
00:41:44,215 --> 00:41:47,880
Svo eftir that-- svo eftir hér.

835
00:41:47,880 --> 00:41:50,820
Þetta lítur út eins og þú ert eins og div
og þú hefur efni inni af því.

836
00:41:50,820 --> 00:41:54,970
>> Sem safnar JavaScript að
eins býr það sama.

837
00:41:54,970 --> 00:41:59,590
Ég giska á hvað ég er að segja er að
JSX er bara nokkur dæmi um setningarleg, eins og það er

838
00:41:59,590 --> 00:42:03,530
a Preprocessor fyrir JavaScript mikið
eins og PHP er Preprocessor fyrir HTML.

839
00:42:03,530 --> 00:42:05,490
JSC er Preprocessor
fyrir JavaScript sem leyfir

840
00:42:05,490 --> 00:42:12,970
þú setur HTML inni þinn JavaScript.

841
00:42:12,970 --> 00:42:16,425
Og svo ef þú hefur rétt spenni
sem er hlutur sem kallast [inaudible]

842
00:42:16,425 --> 00:42:17,300
sem mun breyta.

843
00:42:17,300 --> 00:42:19,360
Rétturinn Preprocessor,
það mun láta þig gera það.

844
00:42:19,360 --> 00:42:20,235
>> Áhorfendur: [inaudible]

845
00:42:20,235 --> 00:42:23,026
NEEL MEHTA: Yfirleitt þú þarft ekki
að setja HTML inni JavaScript

846
00:42:23,026 --> 00:42:24,110
nema gera þinn React.

847
00:42:24,110 --> 00:42:27,146
En þú getur gert það engu að síður.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Áhorfendur: Ég held að þú
hafði lýst React

850
00:42:29,353 --> 00:42:31,970
sem hagnýtur forritun tungumál.

851
00:42:31,970 --> 00:42:35,646
Við höfum verið að læra C í CS50.

852
00:42:35,646 --> 00:42:38,032
Er C einnig hagnýtur tungumál?

853
00:42:38,032 --> 00:42:39,990
NEEL MEHTA: Svo spurningin
er um hagnýtur

854
00:42:39,990 --> 00:42:43,010
móti annar hlutur sem kallast
mikilvægt eða málsmeðferð forritun.

855
00:42:43,010 --> 00:42:44,820
Það er tvær tegundir af forritum vinsælustu.

856
00:42:44,820 --> 00:42:48,550
Einn heitir málsmeðferð, sem
er allur óður í eins og að gera skipanir,

857
00:42:48,550 --> 00:42:51,510
og einn er hagnýtur, sem er allt
um að hafa aðgerðir og hafa

858
00:42:51,510 --> 00:42:52,930
inntak og framleiðsla þeirra.

859
00:42:52,930 --> 00:42:55,930
Bregðast er hagnýtur fyrirmynd.

860
00:42:55,930 --> 00:42:58,010
C er mjög málsmeðferð fyrirmynd.

861
00:42:58,010 --> 00:43:02,360
>> Og sem dæmi, C til dæmis,
þú gerir það ekki þetta declarative hátt

862
00:43:02,360 --> 00:43:04,390
að gera áætlun, ekki satt?

863
00:43:04,390 --> 00:43:06,826
Þú þarft að segja, prenta þetta.

864
00:43:06,826 --> 00:43:07,950
Breyta þessu gögn uppbygging.

865
00:43:07,950 --> 00:43:08,530
Prenta þessa.

866
00:43:08,530 --> 00:43:10,160
Það er allt um skipanir.

867
00:43:10,160 --> 00:43:12,640
>> Í bregðast, það er ekki
sem margir skipanir.

868
00:43:12,640 --> 00:43:15,145
Það er allt um að hafa
þættir sem þú setur saman.

869
00:43:15,145 --> 00:43:16,300
Þeir eru eins og aðgerðir.

870
00:43:16,300 --> 00:43:26,360
Þú ert eins og fall
heitir CardView,

871
00:43:26,360 --> 00:43:28,680
sem er fall
sem hefur inntak, úttak,

872
00:43:28,680 --> 00:43:30,660
og svo bregðast er allt
um þessa hugmyndafræði

873
00:43:30,660 --> 00:43:32,700
okkur af having-- þú hefur gögn.

874
00:43:32,700 --> 00:43:34,910
Þú gefa það í gegnum þetta
reiknirit, og það mun

875
00:43:34,910 --> 00:43:36,800
framleiðsla HTML sem þú
bara prentað á síðunni,

876
00:43:36,800 --> 00:43:39,180
og svo þú verður að
byggja það stykki af stykki.

877
00:43:39,180 --> 00:43:42,800
>> Svo til að draga samlíking að það
Ég sagði áður, þú veist hvernig

878
00:43:42,800 --> 00:43:47,050
á Facebook ef þú færð skilaboð,
og þú velur hvaða hlutar að uppfæra,

879
00:43:47,050 --> 00:43:47,882
það er málsmeðferð.

880
00:43:47,882 --> 00:43:48,840
Það er mikilvægt, ekki satt?

881
00:43:48,840 --> 00:43:49,806
OK, ég fékk skilaboð.

882
00:43:49,806 --> 00:43:50,930
Skulum breyta reikning þar.

883
00:43:50,930 --> 00:43:52,110
>> Við skulum skjóta glugga hér.

884
00:43:52,110 --> 00:43:52,780
Skulum breyta reikning þar.

885
00:43:52,780 --> 00:43:53,700
Við skulum draga þetta hér.

886
00:43:53,700 --> 00:43:55,220
Það er málsmeðferð nálgun.

887
00:43:55,220 --> 00:44:00,240
>> Það er það, sem eins Angular,
Boost, burðarás, nota önnur umgjörð.

888
00:44:00,240 --> 00:44:01,200
Bregðast er hagnýtur.

889
00:44:01,200 --> 00:44:03,324
Það er mjög mismunandi hátt
hugsa um hlutina.

890
00:44:03,324 --> 00:44:07,950
Það tekur þessa hugmynd við skulum hafa
aðgerðir eða reiknirit sem mun þú

891
00:44:07,950 --> 00:44:08,800
gefa það gögn.

892
00:44:08,800 --> 00:44:11,820
Það verður spýta út hvað það
ætti að vera, og tölvan

893
00:44:11,820 --> 00:44:13,490
mun sjá um vigtun út.

894
00:44:13,490 --> 00:44:15,890
Þú höndla það ekki sjálfur.

895
00:44:15,890 --> 00:44:18,470
Er að gera smá hluti af skilningi?

896
00:44:18,470 --> 00:44:18,970
Já?

897
00:44:18,970 --> 00:44:24,180
>> Áhorfendur: Í hagnýtur tungumáli,
allt gerist í einu?

898
00:44:24,180 --> 00:44:26,800
>> NEEL MEHTA: Nei, það gerist í röð.

899
00:44:26,800 --> 00:44:29,320
Eins og hér það er enn
panta, en það er ekki

900
00:44:29,320 --> 00:44:32,390
gerast í röð eins og
hrósa, stjórn, stjórn.

901
00:44:32,390 --> 00:44:36,459
Það gerist í röð
virka gefur þér framleiðsla.

902
00:44:36,459 --> 00:44:37,750
Setja það inn annan valkost.

903
00:44:37,750 --> 00:44:39,550
Setja það inn annað
virka, annað virka.

904
00:44:39,550 --> 00:44:41,470
>> Ef þú gerir CS51, þú munt
læra hagnýtur forrit

905
00:44:41,470 --> 00:44:42,886
lítið út á umfangi þessa.

906
00:44:42,886 --> 00:44:45,090
En í grundvallaratriðum, það sem gerir
Bregðast kaldur er ekki aðeins

907
00:44:45,090 --> 00:44:46,840
The einn-vegur gögn flæði
og raunverulegur Dom,

908
00:44:46,840 --> 00:44:48,700
en einnig þessi hugmynd um
hagnýtur forritun.

909
00:44:48,700 --> 00:44:51,720
Og hagnýtur forritun er mjög auðvelt
að semja og gera flott dót út af,

910
00:44:51,720 --> 00:44:53,844
og það er mjög auðvelt að hugsa
um og ástæða um.

911
00:44:53,844 --> 00:44:55,450
Svo það er annar góður draga af React.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Einhverjar fleiri spurningar?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Já?

916
00:45:03,150 --> 00:45:06,840
>> Áhorfendur: Um, hvers vegna vildi þú
nota láta öfugt við Var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL MEHTA: Svo er spurningin
hvers vegna heldur þú að nota láta í staðinn Var?

918
00:45:10,450 --> 00:45:13,220
Þetta er hlutur sem kallast
ES6 eða EcmaScript 6.

919
00:45:13,220 --> 00:45:15,820
Það er ný útgáfa af JavaScript.

920
00:45:15,820 --> 00:45:19,050
Það er fullt af tæknilegum ástæðum,
En láttu er betri útgáfa af var.

921
00:45:19,050 --> 00:45:20,724
>> Það er hvernig þú lýsa breytum.

922
00:45:20,724 --> 00:45:21,390
Þú getur notað látið.

923
00:45:21,390 --> 00:45:22,140
Þú getur notað var.

924
00:45:22,140 --> 00:45:23,825
Let hefur fullt af tæknilegum
reasons-- þú getur litið þá

925
00:45:23,825 --> 00:45:25,610
upp later-- fyrir hvers vegna það er betra.

926
00:45:25,610 --> 00:45:28,780
Í grundvallaratriðum, ES6 hefur sumir ágætur
Ný setningafræði, sumir nýr lögun

927
00:45:28,780 --> 00:45:30,720
ofan á gamla JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Þannig að við höfum eins og fimm mínútur.

929
00:45:32,782 --> 00:45:34,990
Ég vildi bara að tala um
eitt í viðbót alvöru hratt.

930
00:45:34,990 --> 00:45:36,450
Ef þú hefðir einhverjar spurningar,
við skulum tala um það eftir þetta.

931
00:45:36,450 --> 00:45:38,366
En bara svo fær þetta
lent á myndavélinni, ég bara

932
00:45:38,366 --> 00:45:41,550
langar að tala svolítið um hvernig þú
reyndar nota bregðast apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Ef þú ferð hér,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
þetta er heimasíða fyrir React, og
hann mun sýna þér hvernig þú notar í raun

936
00:46:03,320 --> 00:46:05,320
Bregðast á síðum þínum.

937
00:46:05,320 --> 00:46:08,845
Í grundvallaratriðum, það er lítið
flókið að reyna að setja upp bregðast.

938
00:46:08,845 --> 00:46:12,300
Það er ekki eins auðvelt og þú dregur bara
og sleppa Javascript í það.

939
00:46:12,300 --> 00:46:15,890
>> Þú þarft að hafa spenni þitt
sett upp, sem mun, eins og það gerði áður,

940
00:46:15,890 --> 00:46:18,120
snúa JSX inn í
eðlilegt JavaScript.

941
00:46:18,120 --> 00:46:21,030
Þú þarft að hlutur sem mun
safna saman þú ES6 í eðlilegt horf.

942
00:46:21,030 --> 00:46:24,720
JavaScript það er mikið af áhrifamikill
hlutum sem þú þarft að gera, þannig að það er hlutur

943
00:46:24,720 --> 00:46:27,200
kallað Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Og þetta er a stjórn lína tól sem munum
hjálpa þér scaffold út þinn React

945
00:46:31,110 --> 00:46:32,380
verkefni auðveldlega.

946
00:46:32,380 --> 00:46:38,660
>> Svo er hægt að lesa um þetta
síðar, en það eru nokkur tæki

947
00:46:38,660 --> 00:46:40,160
sem Yeoman býður.

948
00:46:40,160 --> 00:46:43,280
Þeir láta þig búa til React
app með allt byggt á.

949
00:46:43,280 --> 00:46:46,030
Eins og það mun hafa byggt
í, hluti byggt á.

950
00:46:46,030 --> 00:46:47,880
Það verður spennir þinn byggð í.

951
00:46:47,880 --> 00:46:50,699
Þeir hafa a einhver fjöldi af kaldur
efni byggt á sjálfkrafa

952
00:46:50,699 --> 00:46:52,240
nota þetta kallast rafala.

953
00:46:52,240 --> 00:46:54,620
>> Svo las um þetta ef þú vilt.

954
00:46:54,620 --> 00:46:59,110
Bara fara á Yeoman, Y-E-O-M-A-N og
þú getur fundið rafala eins og þessir.

955
00:46:59,110 --> 00:47:01,263
Og með rafala eins
þetta, eins og þú bara einn

956
00:47:01,263 --> 00:47:03,010
er a par stjórn lína stjórn.

957
00:47:03,010 --> 00:47:05,530
Það verður scaffold út
Allt Bregðast app fyrir þig.

958
00:47:05,530 --> 00:47:10,470
Það verður að fá allar handbók lagnir,
og grunt vinnu fyrir þig,

959
00:47:10,470 --> 00:47:13,010
og þetta er hvers vegna þú einblína bara
á bara að skrifa í React.

960
00:47:13,010 --> 00:47:16,739
>> Svo í rauninni að byggja upp
Bregðast app er nontrivial.

961
00:47:16,739 --> 00:47:19,530
Það er hefðbundin allt saman, en það
eru verkfæri sem mun gera það fyrir þig.

962
00:47:19,530 --> 00:47:23,070
Þannig að ef þú vilt gera a bregðast
app, reyna að gera það þannig.

963
00:47:23,070 --> 00:47:26,360
Ef þú vilt bara að gera tilraunir,
þú getur prófað að nota þessa CodePen

964
00:47:26,360 --> 00:47:28,550
vegna þess að þetta CodePen hefur
allt bregðast raflögn.

965
00:47:28,550 --> 00:47:30,240
Ég hef gert allt verkið fyrir þig nú þegar.

966
00:47:30,240 --> 00:47:34,610
>> Þannig að ef þú vilt gera eins og
framleiðslu til að losa bregðast app,

967
00:47:34,610 --> 00:47:37,220
reyna einn af þessum rafala.

968
00:47:37,220 --> 00:47:40,240
Ef þú vilt bara að spila
um, það er oft þess virði bara

969
00:47:40,240 --> 00:47:44,490
eins reyna að leika í kring á CodePen hér.

970
00:47:44,490 --> 00:47:45,470
Hljóð góður?

971
00:47:45,470 --> 00:47:45,970
Cool.

972
00:47:45,970 --> 00:47:47,890
>> Svo er það allt sem ég þarf.

973
00:47:47,890 --> 00:47:52,470
Aftur, allt fyrir og dæmi eru
að fara að vera á þessum vef hér.

974
00:47:52,470 --> 00:47:55,509
Svo aftur, við ekki tala
um mikið setningafræði React,

975
00:47:55,509 --> 00:47:57,550
en að finna alla þá
litla syntactical upplýsingar,

976
00:47:57,550 --> 00:48:00,320
það er allt að fara að vera í boði
á þessari vefsíðu hér.

977
00:48:00,320 --> 00:48:02,660
>> Svo ég myndi mæla með eins og
að taka fyrsta skrefið.

978
00:48:02,660 --> 00:48:06,277
Setja það inn í CodePen þinn.

979
00:48:06,277 --> 00:48:08,110
Reyna að vinna að því að gera
það til seinni skref.

980
00:48:08,110 --> 00:48:11,310
Það er fjórða skrefið, og bara
sjá hvar þú færð frá þeim.

981
00:48:11,310 --> 00:48:14,840
>> Einhverjar fleiri spurningar, athuga
út að síðunni eða sendu mér tölvupóst.

982
00:48:14,840 --> 00:48:16,490
Það er netfangið mitt.

983
00:48:16,490 --> 00:48:19,885
En ég myndi elska að hjálpa þér með eitthvað
spurningar sem þú gætir hafa um React.

984
00:48:19,885 --> 00:48:21,010
Svo, Já, það er allt sem ég hef.

985
00:48:21,010 --> 00:48:23,410
Þakka ykkur öllum kærlega fyrir
horfa eða til að sækja.

986
00:48:23,410 --> 00:48:26,820
Og ég tek einhverjar spurningar
þú gætir hafa eftir þetta núna.

987
00:48:26,820 --> 00:48:29,140
Svo þakka ykkur öllum fyrir að horfa á.

988
00:48:29,140 --> 00:48:31,270