1
00:00:00,000 --> 00:00:02,910
>> [Muusika mängib]

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

3
00:00:04,850 --> 00:00:07,275
>> Neel Mehta: Siin see läheb.

4
00:00:07,275 --> 00:00:11,070
>> Noh, igaüks teretulnud web
apps tulevikus reageerida.

5
00:00:11,070 --> 00:00:11,870
See on CS50.

6
00:00:11,870 --> 00:00:12,930
Minu nimi on Neel.

7
00:00:12,930 --> 00:00:17,689
Ma olen LS CS50 ja üliõpilane
Harvardi kolledž ja väga, väga

8
00:00:17,689 --> 00:00:18,730
kirglik veebi arendaja.

9
00:00:18,730 --> 00:00:20,730
Nii et ma olen väga põnev
räägi teile täna,

10
00:00:20,730 --> 00:00:24,550
kas sa oled siin või kodus
vaadates umbes React, mis on jällegi

11
00:00:24,550 --> 00:00:27,270
nagu ma ütlesin, tulevik web apps.

12
00:00:27,270 --> 00:00:29,055
>> Nii reageerimisvõimalus web raamistikku.

13
00:00:29,055 --> 00:00:30,930
Ja nagu ma olen öelnud,
et mõned inimesed siin,

14
00:00:30,930 --> 00:00:33,400
raamistik on vaid
tööriistade komplekt, mida saab kasutada

15
00:00:33,400 --> 00:00:35,770
struktureerida ja luua oma web app.

16
00:00:35,770 --> 00:00:39,010
Ja veebirakendused, jälle, veebilehed
mis on interaktiivne nagu Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, mida iganes.

18
00:00:42,330 --> 00:00:45,590
>> Nii Facebook on veebipõhine raames
mis töötati välja Facebook

19
00:00:45,590 --> 00:00:48,060
paar aastat back-- reageerimisvõimalus.

20
00:00:48,060 --> 00:00:50,830
See on nüüdseks kasutatakse
Facebook oma mobiiltelefoni apps

21
00:00:50,830 --> 00:00:52,460
ja web app, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy on teine
silmapaistev alguses kasutuselevõtja reageerida.

23
00:00:56,350 --> 00:00:58,630
>> See on tõesti olnud saada
väga populaarne.

24
00:00:58,630 --> 00:01:03,420
Kui te olete kunagi kasutada asju nagu Nurga või
Selgroog, see on ühe ja sama perekonna,

25
00:01:03,420 --> 00:01:05,830
kuid pärast seda on palju
viljelijäksi populaarsust.

26
00:01:05,830 --> 00:01:06,890
See on kuum uus asi.

27
00:01:06,890 --> 00:01:09,590
See on tõesti suur.

28
00:01:09,590 --> 00:01:13,470
>> Ja nii Reageerima on hea mitte ainult kui
web raamistik hoone liidesed.

29
00:01:13,470 --> 00:01:16,020
See on hea hoone web liidesed.

30
00:01:16,020 --> 00:01:18,350
Seal on ka asi
nimetatakse Reageerima Native mis

31
00:01:18,350 --> 00:01:22,200
võimaldab teil luua liidesed
Android ja iOS

32
00:01:22,200 --> 00:01:26,390
ja võibolla teistele platvormidele tulevikus
kasutades ainult sama JavaScript koodi.

33
00:01:26,390 --> 00:01:31,130
Sa võid kasutada täpselt sama
JavaScript koodi muuta veebilehed,

34
00:01:31,130 --> 00:01:33,040
muuta Android apps ja iOS rakendusi.

35
00:01:33,040 --> 00:01:35,000
>> See on väga, väga põnev aeg.

36
00:01:35,000 --> 00:01:37,070
See on tõesti väga lahe võimalus.

37
00:01:37,070 --> 00:01:42,020
See on tõesti universaalne web
liides arengu vahend,

38
00:01:42,020 --> 00:01:44,420
nii et see on väga, väga
Oluline teada.

39
00:01:44,420 --> 00:01:46,949
Ja nagu ma ütlen inimestele
Enne seda, ma arvan,

40
00:01:46,949 --> 00:01:48,990
on muutu, kuidas me
ehitada veebirakendusi igavesti.

41
00:01:48,990 --> 00:01:55,820
Nii et see on võibolla natuke liialdus, aga ma
arvan, et see on päris hea asi teada.

42
00:01:55,820 --> 00:01:57,580
>> OK, siis millised on reageeriksid?

43
00:01:57,580 --> 00:02:01,020
Reageerida on raamistik võite
kasuta hoone liidesed.

44
00:02:01,020 --> 00:02:03,240
Liides on jällegi
veebileht, eks?

45
00:02:03,240 --> 00:02:06,340
Nii et siin on Instagram.com, kasutab reageerida.

46
00:02:06,340 --> 00:02:08,740
>> Reageerida on ehitatud
Idee komponente.

47
00:02:08,740 --> 00:02:11,900
Komponent on HTML
element steroidid,

48
00:02:11,900 --> 00:02:14,470
nii HTML element on nagu nupp.

49
00:02:14,470 --> 00:02:15,250
See on punkt.

50
00:02:15,250 --> 00:02:17,500
See on päis, eks?

51
00:02:17,500 --> 00:02:22,740
Ja Instagram kasutab neid, kuid see
Samuti kasutame komponente reageerida.

52
00:02:22,740 --> 00:02:25,740
>> Reageerida komponendid
souped-up HTML elemendid

53
00:02:25,740 --> 00:02:28,100
et on oma käitumist
milles need sisalduvad.

54
00:02:28,100 --> 00:02:31,800
Nii, näiteks, me ei ole
aeg element, aeg, komponent,

55
00:02:31,800 --> 00:02:34,095
mis sisaldavad näiteks
ajatempel, sa tead,

56
00:02:34,095 --> 00:02:37,170
Profiili komponent, mis
ei sisalda profiili pilti

57
00:02:37,170 --> 00:02:38,820
ja isiku nimi.

58
00:02:38,820 --> 00:02:42,930
See võib olla näiteks counter, mis
võib loota, nagu mitmed muud sarnast,

59
00:02:42,930 --> 00:02:45,610
ja kui sa vajutad seda, siis see
arvu suurendada meeldib.

60
00:02:45,610 --> 00:02:48,200
Komponent on lihtsalt
kamp HTML koodi

61
00:02:48,200 --> 00:02:50,520
on teatud funktsioone
pakitud sees on.

62
00:02:50,520 --> 00:02:53,770
Nii et see on nagu HTML element
steroidid, nagu ma enne ütlesin.

63
00:02:53,770 --> 00:02:56,270
Te võite võtta neid komponente,
ja võite panna need kokku

64
00:02:56,270 --> 00:02:59,060
teha uusi komponente, in
Sel juhul postituse osa,

65
00:02:59,060 --> 00:03:00,505
mis sisaldab kogu see kraam.

66
00:03:00,505 --> 00:03:04,050
See võiks sisaldada aeg, Profiil,
LikeCounter, võibolla kommentaar

67
00:03:04,050 --> 00:03:06,100
ja võibolla pilt ise.

68
00:03:06,100 --> 00:03:10,810
Ja nii veebirakendused lihtsalt ehitatud, võttes
komponendid ja paneb need kokku.

69
00:03:10,810 --> 00:03:15,620
Instagram feed on midagi enamat kui
hunnik postitusi üksteise järel,

70
00:03:15,620 --> 00:03:19,032
iga postitus sisaldab nagu aeg,
Profiil, LikeCounter, ja nii edasi.

71
00:03:19,032 --> 00:03:20,490
See on selline nagu maja ehitamine.

72
00:03:20,490 --> 00:03:22,660
Sa ei ehitada
maja ülevalt alla.

73
00:03:22,660 --> 00:03:24,960
Võtad components-- sa
võtta nagu vannituba.

74
00:03:24,960 --> 00:03:28,320
Võtad bedroom-- sa kinni neid
koos, ja sul on uus osa.

75
00:03:28,320 --> 00:03:29,760
Sul on uus osa maja.

76
00:03:29,760 --> 00:03:32,860
>> Nii reageerimisvõimalus kõik ehitatud
Selle idee komponendid, mis

77
00:03:32,860 --> 00:03:36,600
on interaktiivne, mis on deklaratiivse.

78
00:03:36,600 --> 00:03:39,650
Nagu sa ütlesid, milline
profiil on, ja see muudab selle.

79
00:03:39,650 --> 00:03:40,600
Nad on komponeeritav.

80
00:03:40,600 --> 00:03:43,880
Te võite võtta aega ja profiili, panna
need kokku, et midagi paremat.

81
00:03:43,880 --> 00:03:47,770
Ja nad on korduvkasutatavad, nii et kui sa
on lähtekoodi post,

82
00:03:47,770 --> 00:03:49,440
siis võiks kinnistada, et kuskil.

83
00:03:49,440 --> 00:03:53,160
>> Võite embed Instagram
asi oma kodulehel.

84
00:03:53,160 --> 00:03:56,830
Võite kinnistada Facebook, näiteks
nii kaua kui see kasutab React samuti.

85
00:03:56,830 --> 00:04:00,360
Nii komponendid on tõesti, tõesti, tõesti
võimas ehituskivid veebis

86
00:04:00,360 --> 00:04:04,180
mida saab kasutada kõikjal ja panna
koos teha uusi ehituskivid.

87
00:04:04,180 --> 00:04:07,159
See on väga, väga
põhjaliku ülevaate.

88
00:04:07,159 --> 00:04:09,200
Niisiis, jälle, kui teil on
Küsimuste üheski punktis

89
00:04:09,200 --> 00:04:14,470
filosoofia kohta reaktori
kodeerimine, et mind peatada, ja andke mulle teada.

90
00:04:14,470 --> 00:04:18,420
>> OK, nii et reageerida on lahe, sest see
on teistmoodi otsin

91
00:04:18,420 --> 00:04:19,870
kuidas saab ehitada veebirakendusi.

92
00:04:19,870 --> 00:04:23,620
Te olete ilmselt kuulnud MVC, et
mudel sa kontrolli CS50 või mis iganes

93
00:04:23,620 --> 00:04:25,940
teiste katsetamine klassid te kasutate.

94
00:04:25,940 --> 00:04:29,000
Ja kõige raamistikud on
ehitatud ideele MVC.

95
00:04:29,000 --> 00:04:30,410
Reageerida ei ole.

96
00:04:30,410 --> 00:04:32,980
Lasta on üles ehitatud ideele
ühesuunalisi andmevoo

97
00:04:32,980 --> 00:04:36,510
nagu näha selle diagrammi või graafilise siin.

98
00:04:36,510 --> 00:04:38,260
>> Põhimõtteliselt sul on andmete allikas.

99
00:04:38,260 --> 00:04:42,380
Ja andmeallika otsustab
kuidas panema teatud komponente.

100
00:04:42,380 --> 00:04:45,452
Ja komponendid
siis, kui nad muutuvad,

101
00:04:45,452 --> 00:04:47,160
nad ütlevad
andmeallika muuta.

102
00:04:47,160 --> 00:04:49,350
>> Kui soovid kasutada Instagram
Näiteks võib teil olla

103
00:04:49,350 --> 00:04:52,050
nimekirja post esemeid nagu
andmebaasi või midagi.

104
00:04:52,050 --> 00:04:53,310
See andmeid.

105
00:04:53,310 --> 00:04:57,600
Ja siis meie post komponendid
võtab, et andmed,

106
00:04:57,600 --> 00:05:01,830
ja kasutada seda andmete muuta
asi ekraanil.

107
00:05:01,830 --> 00:05:04,300
Seda noole
andmetelt komponent on

108
00:05:04,300 --> 00:05:07,930
ja siis, et samu andmeid kasutatakse
muuta kamp komponendid.

109
00:05:07,930 --> 00:05:10,290
>> Facebook Messenger, et
Näiteks, mis on React,

110
00:05:10,290 --> 00:05:13,410
sa oleks võinud nimekirja
Sõnumite oma andmete allikas.

111
00:05:13,410 --> 00:05:15,927
Ja mis muudaks mitte
ainult sõnumite loend

112
00:05:15,927 --> 00:05:17,510
vaid ka nimekirja sõpru sul on.

113
00:05:17,510 --> 00:05:19,200
Teil on lugemata arv.

114
00:05:19,200 --> 00:05:23,330
Võib-olla ka muuta Facebook asi
see on allosas Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Samad andmed on
ühes allikas tõde

116
00:05:25,610 --> 00:05:28,290
ning et põhjustab palju
komponentide eest.

117
00:05:28,290 --> 00:05:30,290
Ja alati, kui üks nendest
komponentide vahetamisel

118
00:05:30,290 --> 00:05:32,320
see läheb tagasi
muudab andmete allikas.

119
00:05:32,320 --> 00:05:33,460
>> Sa saatke sõnum, eks?

120
00:05:33,460 --> 00:05:34,780
See muudab andmete allikas.

121
00:05:34,780 --> 00:05:39,490
Sa loe oma sõnumeid
nii seate lugemata 0.

122
00:05:39,490 --> 00:05:41,136
See muudab andmete allikas.

123
00:05:41,136 --> 00:05:44,010
Ja teate, et kõik need ühe
nool läheb tagasi samal andmeid

124
00:05:44,010 --> 00:05:47,662
allikas, et sa tead,
arvestades teatud andmete kogum,

125
00:05:47,662 --> 00:05:49,870
sa tead täpselt, mida
lehele läheb nägema.

126
00:05:49,870 --> 00:05:50,700
See on determineeritud.

127
00:05:50,700 --> 00:05:53,451
Tead, kui teatavad andmed, mida
lehe läheb nägema.

128
00:05:53,451 --> 00:05:56,158
Sa ei saa ennustada, kuidas see läheb
käituda ja kuidas asjad lähevad

129
00:05:56,158 --> 00:05:57,650
töötada, kui nad kokku panna.

130
00:05:57,650 --> 00:06:00,410
>> Ja kui mul oleks miljon komponendid
Siin oleks käituda samamoodi, eks?

131
00:06:00,410 --> 00:06:02,290
Sa ei ole mingit
imelik ühendusi.

132
00:06:02,290 --> 00:06:04,120
Üks andmeid sulatatud miljoni komponendid.

133
00:06:04,120 --> 00:06:06,879
Miljon komponendid võiksid
minna tagasi ja muuta andmeid.

134
00:06:06,879 --> 00:06:07,920
Ja nii see on väga tore.

135
00:06:07,920 --> 00:06:10,870
Me arendame komponeeritav,
kergesti skaalautuvia veebirakendusi.

136
00:06:10,870 --> 00:06:13,150
>> Teil on üks andmeallikas,
allikas tõde.

137
00:06:13,150 --> 00:06:15,790
See ütleb teie komponendid
kuidas panema lehel

138
00:06:15,790 --> 00:06:18,190
ja komponendid
hakkama suhtlemist.

139
00:06:18,190 --> 00:06:20,150
Ja kui nad tahavad muuta
asju, minge tagasi

140
00:06:20,150 --> 00:06:21,750
ja öelda andmeallika muuta.

141
00:06:21,750 --> 00:06:22,850
On loogiline?

142
00:06:22,850 --> 00:06:26,010
Nii Reageerima on kõike mõista
kuidas ehitada osa

143
00:06:26,010 --> 00:06:29,540
ja kuidas teha oma osa
suhelda välismaailmaga.

144
00:06:29,540 --> 00:06:31,850
>> Making osa üksteist mõjutavad,
välismaailmaga

145
00:06:31,850 --> 00:06:34,490
kasutab teise tehnoloogia
nimetatakse Flux, mis

146
00:06:34,490 --> 00:06:36,872
on raamistik, mis on
lisada peal reageerida.

147
00:06:36,872 --> 00:06:38,330
Me ei räägi sellest.

148
00:06:38,330 --> 00:06:42,990
Me läheme lähemalt rääkida, kuna
andmed, siis kuidas saab muuta komponent?

149
00:06:42,990 --> 00:06:47,010
>> Ja nii Reageerima on väga lahe, sest sa
saab seda kasutada mis tahes kolp soovite.

150
00:06:47,010 --> 00:06:50,480
Kui teil on nagu Python kolp,
kui teie Python võib välja sülitada mõned andmed,

151
00:06:50,480 --> 00:06:51,610
Reageerida võivad selle muuta.

152
00:06:51,610 --> 00:06:54,700
Kui te ei ole JS väljundid
Andmete, React muudab selle.

153
00:06:54,700 --> 00:06:56,890
Ruby rööpad üles
andmed reageerivad muudab.

154
00:06:56,890 --> 00:07:01,860
>> Nii Reageerima on põhimõtteliselt web
view-- esiotsa koos komponendid

155
00:07:01,860 --> 00:07:03,910
iga andmeallika üldse.

156
00:07:03,910 --> 00:07:07,145
Ja nii läheb andmeallika
reageerida komponendid on üsna lihtne.

157
00:07:07,145 --> 00:07:08,770
Minnes teistpidi on natuke raskem.

158
00:07:08,770 --> 00:07:10,462
See kasutab Flux nagu ma mainisin.

159
00:07:10,462 --> 00:07:11,420
Me ei saa sinna.

160
00:07:11,420 --> 00:07:13,740
Me keskendume rohkem
data-to-komponendi poolel.

161
00:07:13,740 --> 00:07:15,880
Sel moel saab teha
lahe, lõbus web apps.

162
00:07:15,880 --> 00:07:19,870
See ei mõjuta välismaailmaga
nüüd, kuid see on teine ​​lugu.

163
00:07:19,870 --> 00:07:22,210
>> OK, nii et kui sa olid siin
minu viimane seminar

164
00:07:22,210 --> 00:07:26,610
sa tead, et kõik koodi jaoks
Tänapäeva rääkida saab olema sellelt aadressilt

165
00:07:26,610 --> 00:07:29,320
siin, vabandust, see URL siin.

166
00:07:29,320 --> 00:07:32,730
Ja põhimõtteliselt me ​​läheme
läbi nelja etappi, võibolla viis,

167
00:07:32,730 --> 00:07:33,510
Tõenäoliselt mitte viis.

168
00:07:33,510 --> 00:07:37,300
Me liikuda neljast etapist
hoone proovi Reageerima app.

169
00:07:37,300 --> 00:07:39,550
Ja nii kõik lähtekoodi
iga sammul

170
00:07:39,550 --> 00:07:42,216
saab olema siin, nii et kui
Te jälgite koos kodus,

171
00:07:42,216 --> 00:07:43,991
julgelt tutvuma selle koodi.

172
00:07:43,991 --> 00:07:46,740
Kui oled järgmised mööda siin,
saadame selle näitamist ekraanil

173
00:07:46,740 --> 00:07:47,739
nii ei muretse.

174
00:07:47,739 --> 00:07:50,930
Aga kui sa oled kodus, tunnen
tasuta külastada sellel veebilehel.

175
00:07:50,930 --> 00:07:56,400
Ja, jah, siis peaks olema võimalik saada
kõik koodi sa kunagi vaja siin.

176
00:07:56,400 --> 00:08:01,380
Nii et see on hea petma lehte ka
oma tulevikku seiklustest reageerida.

177
00:08:01,380 --> 00:08:04,490
Cool, nii et kui igaüks, kes on siin,
ja isegi kui sa oled kodus,

178
00:08:04,490 --> 00:08:11,580
tõmba sellele leheküljele is.gd/cs50react,
no kapitali, ei alakriips, ei midagi.

179
00:08:11,580 --> 00:08:15,849
>> Näete lehele, mis näeb välja
natuke niimoodi.

180
00:08:15,849 --> 00:08:17,140
See on asi, mida nimetatakse CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen on koostööprojekt
kodeerimine keskkond

182
00:08:20,030 --> 00:08:23,364
kellega ma võin kirjutada koodi siin, ja
see saab automaatselt saadetakse teile.

183
00:08:23,364 --> 00:08:24,780
Ja nii ma ei kirjuta koodi.

184
00:08:24,780 --> 00:08:26,920
Ma saan käivitada koodi siin.

185
00:08:26,920 --> 00:08:33,470
>> Sest example-- ja kui see reloads-- näha,
Ma töötab JavaScript koodi lehel

186
00:08:33,470 --> 00:08:36,390
siinsamas, ja siis see
automaatselt muuta veebilehe

187
00:08:36,390 --> 00:08:37,980
Selle JavaScript koodi.

188
00:08:37,980 --> 00:08:40,039
Ja nii on see nii
meil proovida koodi

189
00:08:40,039 --> 00:08:43,089
tõesti kiire, ilma et peaksid kasutama
meie ID või kasutada meie kohaliku masina

190
00:08:43,089 --> 00:08:44,290
või mis iganes.

191
00:08:44,290 --> 00:08:47,670
See on väga kiire viis, kuidas saate mockup
ja katsetada erinevaid koodi.

192
00:08:47,670 --> 00:08:50,560
>> Nii et ma lähen võttes
Näiteks koodi, paneb ta siin.

193
00:08:50,560 --> 00:08:52,374
Me läheme töötavad läbi.

194
00:08:52,374 --> 00:08:54,540
Ja kui sa oled kodus, siis
ei tõmba see üles ka.

195
00:08:54,540 --> 00:08:57,530
Ja ma olen juba paigaldatud
Reageerida siin, nii saad lihtsalt

196
00:08:57,530 --> 00:09:00,770
kirjutada oma koodi siin, ja
proovida, kui sinu oma mänguväljak.

197
00:09:00,770 --> 00:09:04,940
>> Jah, kui igaühel
avada see link siin.

198
00:09:04,940 --> 00:09:08,080
Palun andke mulle thumbs
up kui sul on see avatud.

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

200
00:09:10,960 --> 00:09:13,770
Cool, külmas jahtuda.

201
00:09:13,770 --> 00:09:16,914
Siin ei ole midagi nüüd, kuid
muudame, et väga kiiresti.

202
00:09:16,914 --> 00:09:21,250
>> OK, nii Reageerima on JavaScript
raamatukogu ja sellisena

203
00:09:21,250 --> 00:09:24,480
nõuab teadmisi JavaScript,
mis on veebi programmeerimine keeles.

204
00:09:24,480 --> 00:09:27,660
Ja see on kasutatud muid asju
nüüd liiga, kuid peamiselt veebi arendada

205
00:09:27,660 --> 00:09:32,040
keeles, nii et kui sa ei tunne
et lugeda saidi nimega JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
See on imeline.

207
00:09:32,700 --> 00:09:34,240
Sa võid õppida JavaScript
poole tunni pärast.

208
00:09:34,240 --> 00:09:34,990
See on uskumatu.

209
00:09:34,990 --> 00:09:36,420
>> Nii et see on väga lugeda.

210
00:09:36,420 --> 00:09:39,960
Samuti on palju HTML siin, sest
me veebilehekülgede muidugi.

211
00:09:39,960 --> 00:09:43,890
Nii et kui sa oled võõras
HTML, tutvu HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Ma arvan, õppimine Reageerima on
miljon korda lihtsam, kui sa juba

213
00:09:46,520 --> 00:09:47,892
tean ehituskivid.

214
00:09:47,892 --> 00:09:50,600
Kui teil on komponente, see on
lihtne teha suurem osa.

215
00:09:50,600 --> 00:09:51,860
See on Reageerima keele jaoks.

216
00:09:51,860 --> 00:09:54,270
>> Nii et laske käia ja anda
need asjad loetud.

217
00:09:54,270 --> 00:09:55,070
Paus see video.

218
00:09:55,070 --> 00:09:57,440
Anna lugeda, kui te olete
kodus, kui te ei ole

219
00:09:57,440 --> 00:10:00,794
tuttav HTML või JavaScripti

220
00:10:00,794 --> 00:10:02,960
OK, nii et me läheme
teha, on meil lähed tegema

221
00:10:02,960 --> 00:10:06,470
väga lihtne sähvik app kasutades reageerida.

222
00:10:06,470 --> 00:10:08,210
Me läheme on sähvikute.

223
00:10:08,210 --> 00:10:09,880
Võite klapp kaardi edasi ja tagasi.

224
00:10:09,880 --> 00:10:12,399
Ja me ka nimekiri
kõik kaardid, mis meil on,

225
00:10:12,399 --> 00:10:14,190
ja kui me ei tunne
ambitsioonikas, me võiksime olla

226
00:10:14,190 --> 00:10:17,060
võimalik vahetada
autod neile klõpsates.

227
00:10:17,060 --> 00:10:20,360
>> Aga see on oma paljaste
luud, väga lihtne Reageerima app.

228
00:10:20,360 --> 00:10:22,560
Ja nii see on tegelikult
ei ole tühine rakendada,

229
00:10:22,560 --> 00:10:26,030
kuid me kavatseme näidata, et kui sa
see, et see on väga lihtne laiendada seda

230
00:10:26,030 --> 00:10:27,680
kui teised inimesed sind aidata sellega.

231
00:10:27,680 --> 00:10:33,750
Nii et me läheme läbi nelja etappi
alustades nullist üles ehitada seda.

232
00:10:33,750 --> 00:10:36,740
>> OK, nii et neli etappi, siis me
alustad esimene samm.

233
00:10:36,740 --> 00:10:39,790
Esimene samm saab olema
hoone oma esimese osa.

234
00:10:39,790 --> 00:10:44,830
Nagu ma enne ütlesin, on osaks Reageerima
on lihtsalt HTML element steroidid.

235
00:10:44,830 --> 00:10:49,660
See määrab HTML
ja mõned käitumismallid ning see

236
00:10:49,660 --> 00:10:52,600
täpsustatakse, kuidas inimesed
saab suhelda ta kuidas

237
00:10:52,600 --> 00:10:54,270
see oleks seesmist olekut.

238
00:10:54,270 --> 00:10:57,630
Nagu nuppu teavad meeldib, kuidas paljud
korda on see olnud klõpsanud näiteks

239
00:10:57,630 --> 00:11:01,010
ja siis tead, kuidas panna ennast välja.

240
00:11:01,010 --> 00:11:04,430
>> Nii lähme edasi ja ehitada meie
Esimene osa kasutades JavaScript.

241
00:11:04,430 --> 00:11:09,711
Nii et kui süntaks näeb imelik,
Ongi, sest see selline on.

242
00:11:09,711 --> 00:11:11,710
Niisiis, jälle, me ei kavatse
teha muutuja nimega

243
00:11:11,710 --> 00:11:14,580
app kasutades märksõna lasta,
mis muudab muutuja,

244
00:11:14,580 --> 00:11:18,210
lase App võrdne React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Reageerida on raamatukogu ja on
create klassi funktsioon.

246
00:11:22,609 --> 00:11:24,400
Ja see funktsioon on
natuke koodi, mis sa

247
00:11:24,400 --> 00:11:29,090
saab kasutada, et luua uus
tüüpi Reageerima komponent.

248
00:11:29,090 --> 00:11:32,780
Ja nii React.createClass
teeb komponendi

249
00:11:32,780 --> 00:11:35,270
ja see komponent
saaks teha asju.

250
00:11:35,270 --> 00:11:40,460
Peaasi see saab teha, on muuta
midagi, muuta funktsioonina.

251
00:11:40,460 --> 00:11:44,500
>> Jällegi, kui see indeks ei ole selge,
sa, ma soovitan teil minna JS kassidele

252
00:11:44,500 --> 00:11:45,682
ja seda kontrollida.

253
00:11:45,682 --> 00:11:47,710
Kas see suumitud piisavalt hästi?

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

255
00:11:48,490 --> 00:11:50,670
>> Nii et iga komponent vajadustele
olema muudavad funktsiooni.

256
00:11:50,670 --> 00:11:53,010
Renderda funktsioon ütleb,
Mida ma printida ekraanil?

257
00:11:53,010 --> 00:11:54,760
Kuid osa on
kasutu, kui see ei ole

258
00:11:54,760 --> 00:11:58,060
tea, mida printida ekraanil, nii
sa pead olema muudavad funktsiooni.

259
00:11:58,060 --> 00:12:01,904
>> Nii et muuta asi, siis
lihtsalt vaja naasta mõned HTML.

260
00:12:01,904 --> 00:12:03,820
Ja mis on lahe on see, et
seal on asi, mida nimetatakse

261
00:12:03,820 --> 00:12:08,660
JSX, mis on pikendamine
JavaScript mida kasutab reageerida.

262
00:12:08,660 --> 00:12:11,845
See olgem teil kirjutada HTML sees
sinu JavaScript, mida

263
00:12:11,845 --> 00:12:13,970
kõlab selline imelik, kui
kõigepealt mõtle selle peale,

264
00:12:13,970 --> 00:12:15,553
kuid see muudab palju mõistust hiljem.

265
00:12:15,553 --> 00:12:17,430
Nii et me saame seda teha.

266
00:12:17,430 --> 00:12:21,360
Kui te olete juba tuttav HTML, ma tean
meil div üldotstarbelise

267
00:12:21,360 --> 00:12:22,790
konteinerisse kraami.

268
00:12:22,790 --> 00:12:26,380
Me ei tagasta div ja sees
div, saame panna stuff.

269
00:12:26,380 --> 00:12:32,390
>> Ütleme, et me tahame muuta ainult
otse-up sähvik nüüd.

270
00:12:32,390 --> 00:12:34,890
Sähvik, ma ütleksin,
on küsimus ja vastus.

271
00:12:34,890 --> 00:12:37,530
Nii sees div, olgem
välja printida lõikes

272
00:12:37,530 --> 00:12:42,155
mis ütleb question-- Mis on
lõplik vastus elu, universumi?

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

274
00:12:47,640 --> 00:12:50,345
Ja siis on vastus
saab olema muidugi 42.

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

276
00:12:56,880 --> 00:12:59,730
>> See ei tulnud ka üldse.

277
00:12:59,730 --> 00:13:04,164
Jah, nii et põhimõtteliselt saab tõesti
kirjutada HTML sees JavaScript.

278
00:13:04,164 --> 00:13:06,330
Ja see saab olema
trükitud viidud ekraani.

279
00:13:06,330 --> 00:13:08,250
Nii saab seda proovida.

280
00:13:08,250 --> 00:13:09,520
>> Nii et meil on meie osa.

281
00:13:09,520 --> 00:13:12,210
Me peame rääkima Reageerida panna
komponent ekraanile

282
00:13:12,210 --> 00:13:18,990
nii React.render, et märgata, et meil
raviks app nagu iga teine ​​element.

283
00:13:18,990 --> 00:13:21,010
Me kirjutada nii, nagu ta oli HTML element.

284
00:13:21,010 --> 00:13:25,100
Nagu asemel, et öelda, nagu img
pildi või p lõikes,

285
00:13:25,100 --> 00:13:28,120
Sa kirjutad App, et App on
kohelda nagu HTML element.

286
00:13:28,120 --> 00:13:30,380
Nagu ma enne ütlesin, et see on
element steroidid.

287
00:13:30,380 --> 00:13:32,870
>> Nii et sa muuta App, ja sa
anna see asetada see.

288
00:13:32,870 --> 00:13:37,170
Ja see, kuidas saad
ütlen seda, kuhu panna see.

289
00:13:37,170 --> 00:13:46,200
Olen loonud lihtsa div kohta
leheküljel nimetatakse ID-lehel,

290
00:13:46,200 --> 00:13:48,300
ja see on kui
element läheb minema.

291
00:13:48,300 --> 00:13:49,841
>> Ja me ei kavatse joosta HTML.

292
00:13:49,841 --> 00:13:53,145
Põhimõtteliselt see ei hakka
asetada selle lehekülje element

293
00:13:53,145 --> 00:13:54,270
et meil on ekraanil.

294
00:13:54,270 --> 00:13:59,210
Nii see töötab see kood, ja see juhib seda
asi ekraanil, nii et siin me oleme.

295
00:13:59,210 --> 00:14:01,770
Me oleme teinud meie esimene Reageerima komponent.

296
00:14:01,770 --> 00:14:08,000
>> Nii nagu sulgege, me õrnalt tehtud
uut tüüpi komponent, eks?

297
00:14:08,000 --> 00:14:10,145
See on see, mida React.createClass.

298
00:14:10,145 --> 00:14:12,680
Ja mis osa me
ütles ta, mida ta peaks tegema.

299
00:14:12,680 --> 00:14:15,590
Kui see komponent on
trükitakse ekraanile,

300
00:14:15,590 --> 00:14:19,300
see välja printida div koos
kahe lõigu sees on.

301
00:14:19,300 --> 00:14:24,460
>> Ja mida me tegime, tegime uue app
abil nurksulu app märke.

302
00:14:24,460 --> 00:14:27,160
Me rääkisime seda panna see
sees lehel element.

303
00:14:27,160 --> 00:14:29,867
Ja nii ma tegin, see loodud
uus rakendus, mis malli.

304
00:14:29,867 --> 00:14:31,200
Ja siis ma ütlesin seda, et muuta see.

305
00:14:31,200 --> 00:14:33,680
Nii ta ütles, OK, app,
Mida ma peaksin välja printida?

306
00:14:33,680 --> 00:14:36,970
App ütleb, minna välja printida div
Kahe punktid sees on.

307
00:14:36,970 --> 00:14:40,420
Ja voila, seal on meie div koos
kaks lõiku sees on.

308
00:14:40,420 --> 00:14:43,180
Mõtet nii palju?

309
00:14:43,180 --> 00:14:46,690
>> Niisiis, jälle kogu väljakutse React
on lihtsalt teada, kuidas teha komponente.

310
00:14:46,690 --> 00:14:48,500
Kuidas teha
komponendid töötavad koos.

311
00:14:48,500 --> 00:14:51,780
Nüüd, kui oleme teinud meie esimene
komponent, lähme tagasi

312
00:14:51,780 --> 00:14:54,284
ja teha komponente kohandatav.

313
00:14:54,284 --> 00:14:56,700
Nii et sa tead, kuidas HTML teile
saab anda oma nupud klassi?

314
00:14:56,700 --> 00:14:59,146
Võite anda oma ankrud href.

315
00:14:59,146 --> 00:15:00,770
Võite anda oma sisendid tüüp, eks?

316
00:15:00,770 --> 00:15:04,740
Võite anda rohkem custom
omadused kõik oma elemendid

317
00:15:04,740 --> 00:15:06,490
et muuta see huvitav.

318
00:15:06,490 --> 00:15:09,030
Ja me tegelikult saame teha
täpselt sama asi.

319
00:15:09,030 --> 00:15:17,500
>> Ütleme, et me tahame, et meie
app minna, et mõni kaart.

320
00:15:17,500 --> 00:15:19,630
Praegu me lihtsalt
sulatatud hardcoded kaardi.

321
00:15:19,630 --> 00:15:22,530
Me teame, et on ainult üks
Kaardiga saab teha, nii et me oleme

322
00:15:22,530 --> 00:15:25,960
kavatsen proovida ja muuta see nüüd nii
et me ei anna talle mõned kaardi.

323
00:15:25,960 --> 00:15:27,410
Seda saad välja printida kaardile.

324
00:15:27,410 --> 00:15:29,380
>> Sa peaksid püüdma teha oma
komponente väga üldine eesmärk.

325
00:15:29,380 --> 00:15:31,654
Nii et see, kuidas ma saaksin posti
see mu sõber ja olla nagu,

326
00:15:31,654 --> 00:15:33,820
mida iganes sähvik pead,
lihtsalt toita see siin,

327
00:15:33,820 --> 00:15:35,290
ja see teen seda ise.

328
00:15:35,290 --> 00:15:37,650
Võid panna teisi
asju oma app.

329
00:15:37,650 --> 00:15:40,600
>> Aga kõigepealt, olgem murda
kuni kaheks komponendiks,

330
00:15:40,600 --> 00:15:44,500
kuid me tahame, et eraldada kaart
trükkimine osa tegelikust app osa.

331
00:15:44,500 --> 00:15:46,660
Mida me saame teha, on meil
võid seda App

332
00:15:46,660 --> 00:15:51,300
to CardView, vaid
uus nimi app,

333
00:15:51,300 --> 00:15:54,450
ja me saame teha uus
komponent nimega App,

334
00:15:54,450 --> 00:15:56,336
ei tohi segi ajada vana App.

335
00:15:56,336 --> 00:16:00,730
Me ju createClass,
ja nagu HTML,

336
00:16:00,730 --> 00:16:03,590
võite pesa Reageerima komponendid
sees üksteist.

337
00:16:03,590 --> 00:16:16,430
>> Nii et muuta funktsiooni,
funktsiooni tagastamise CardView,

338
00:16:16,430 --> 00:16:18,234
ja see on täpselt sama asi.

339
00:16:18,234 --> 00:16:19,400
Vaata, miks see on sama asi?

340
00:16:19,400 --> 00:16:22,590
Selle asemel, et muuta ainult app, mis
on div sidumist sees on,

341
00:16:22,590 --> 00:16:26,194
app muudab CardView ja
CardView muudab div ja punkt.

342
00:16:26,194 --> 00:16:29,110
Nii et see on meie esimene näide
pesitsevate elemente sees üksteise peale.

343
00:16:29,110 --> 00:16:32,177
Kas see on mõtet?

344
00:16:32,177 --> 00:16:33,760
Niisiis, jälle on meil CardView element.

345
00:16:33,760 --> 00:16:37,250
Meil on app elemendid
et see on suurem kui.

346
00:16:37,250 --> 00:16:40,990
>> OK, nii et me tahame, et meie CardView-- kui te
annavad hea CardView teatud kaardi,

347
00:16:40,990 --> 00:16:43,370
see saab välja printida teile, eks?

348
00:16:43,370 --> 00:16:48,050
Nii et kõigepealt peame tegema kaart
nii et vaatame teha kaardi objekti.

349
00:16:48,050 --> 00:17:02,930
Nii et minu kaart equal--
kui sa oled kõik tuttavad,

350
00:17:02,930 --> 00:17:05,260
see on lihtsalt märke tegemine
vaidlustada JavaScript.

351
00:17:05,260 --> 00:17:09,280
See on selline nagu struct
C, nii et tegime kaardi,

352
00:17:09,280 --> 00:17:15,920
ja nii nüüd saame taolist kaart
vara või atribuudi HTML

353
00:17:15,920 --> 00:17:17,290
terminoloogia meie app.

354
00:17:17,290 --> 00:17:20,210
Nii et me saame seda teha, App
kaardi võrdub myCard.

355
00:17:20,210 --> 00:17:23,200
>> Sa tead, kuidas sisend, sa
input type võrdub teksti või nuppu

356
00:17:23,200 --> 00:17:25,240
klassi võrdub btn eest alglaadimise ,?

357
00:17:25,240 --> 00:17:29,500
Sama mõte, App kaardi equals--
sul panna traksid siin--

358
00:17:29,500 --> 00:17:33,830
App kaardi võrdub myCard, nii et see
ütleb meil seda kaarti objekti.

359
00:17:33,830 --> 00:17:39,149
Ma lähen edasi seda
vara app komponent.

360
00:17:39,149 --> 00:17:41,440
Ja see app komponent
pääse ta ja teha

361
00:17:41,440 --> 00:17:43,580
huvitav värk sellega.

362
00:17:43,580 --> 00:17:47,650
>> Nii et meie app saab olema
antud kaart, nii et praegu

363
00:17:47,650 --> 00:17:49,980
olgem on app lihtsalt anda
mälukaardilt CardView

364
00:17:49,980 --> 00:17:53,110
ise, sest nagu app ei ole
läheb tea, mida sellega teha,

365
00:17:53,110 --> 00:17:54,850
nii me lihtsalt anna see CardView.

366
00:17:54,850 --> 00:18:00,050
Nii me andke seda
Samamoodi kaardi võrdne,

367
00:18:00,050 --> 00:18:05,426
ja nii iga komponendi pääseb
asju, mis on talle antud.

368
00:18:05,426 --> 00:18:07,800
Nad pääsevad omadused
mis on talle antud

369
00:18:07,800 --> 00:18:09,470
kasutades seda süntaksit, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Mis juhtub siin
sul on myCard objekti.

372
00:18:14,920 --> 00:18:18,250
Jätate see app
kasutades App kaardi võrdub myCard.

373
00:18:18,250 --> 00:18:21,420
See kaart objekti manustatakse teie app.

374
00:18:21,420 --> 00:18:24,400
Rakendus võib seda kasutada
kui this.props.card.

375
00:18:24,400 --> 00:18:28,780
See on selline nagu pildi
teab, mida see allikas on.

376
00:18:28,780 --> 00:18:31,972
>> See app teab, mis see on kaardi
on, ja seda saab teha asju koos sellega.

377
00:18:31,972 --> 00:18:32,930
Seda saab teha arvutusi.

378
00:18:32,930 --> 00:18:35,290
Seda saab teha otsuseid, mis välja sellest.

379
00:18:35,290 --> 00:18:39,950
>> Sest nüüd, ma läksin edasi
this.props.card peale CardView.

380
00:18:39,950 --> 00:18:43,420
Mõtet nii palju?

381
00:18:43,420 --> 00:18:45,210
Seda saad mõttekam nüüd.

382
00:18:45,210 --> 00:18:46,990
>> OK, nii et nüüd me oleme CardView.

383
00:18:46,990 --> 00:18:51,719
Meie CardView, kuna kaardi, peaks
välja printida oma küsimus ja vastus.

384
00:18:51,719 --> 00:18:54,510
Praegu me lihtsalt välja printida mõned
hardcoded küsimused ja vastused.

385
00:18:54,510 --> 00:18:57,720
Me peame mõtlema out-- vajame
küsida kaardi, et nad andsid meile

386
00:18:57,720 --> 00:19:01,360
Mis on küsimus ja vastus, ja
printige viidud ekraani.

387
00:19:01,360 --> 00:19:02,470
>> Nii et me saame seda teha siin.

388
00:19:02,470 --> 00:19:06,135
In muuta begin-- esmalt teha võrdne.

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

390
00:19:08,710 --> 00:19:13,050
Mida me teeme siin me teame, et
kaardid on andnud meile kinnistuga,

391
00:19:13,050 --> 00:19:13,580
õige?

392
00:19:13,580 --> 00:19:15,930
See on andnud meile sisendina.

393
00:19:15,930 --> 00:19:19,440
Nagu see on peaaegu nagu
argumente funktsioon.

394
00:19:19,440 --> 00:19:22,810
Kaardil on argument
Peaaegu sellele CardView.

395
00:19:22,810 --> 00:19:25,239
>> Me ekstrakti, mis ja panna
see muutuja küsimus.

396
00:19:25,239 --> 00:19:27,280
Veenduge, et vastus läks
muutuva vastus.

397
00:19:27,280 --> 00:19:31,130
Küsib, et kaardi vastata.

398
00:19:31,130 --> 00:19:35,072
Ja nüüd, et meil on neid,
printimise asemel, et teksti

399
00:19:35,072 --> 00:19:37,030
me läheme välja printida
mida iganes nad andsid meile.

400
00:19:37,030 --> 00:19:43,580
>> Nii et see stuff-- nii me läheme
välja pandud Küsimus Vastus.

401
00:19:43,580 --> 00:19:46,380
Vaatame, kas see toimib.

402
00:19:46,380 --> 00:19:52,800
Cool, nii et vaatame samm läbi
veel üks kord lihtsalt olla kindel.

403
00:19:52,800 --> 00:20:00,470
>> Nii et minu kaart on kaart objekti, ja me
on andnud sellele kaardi app.

404
00:20:00,470 --> 00:20:04,790
Ja app läheb võtma
kaardi ja annab selle CardView.

405
00:20:04,790 --> 00:20:09,190
Ja see CardView ütleb, kui te
anna mulle sähvik objekti,

406
00:20:09,190 --> 00:20:11,920
Ma printida oma küsimus
ja tema vastus, eks?

407
00:20:11,920 --> 00:20:14,590
>> Mida ma võiksin teha, on mul võimalik
Kirjuta selle koodi, esimene

408
00:20:14,590 --> 00:20:16,580
nagu 10 rida minu kood, mu sõber.

409
00:20:16,580 --> 00:20:18,820
Ta võiks kinnistada seda
oma taotluse.

410
00:20:18,820 --> 00:20:27,200
Ja nii kaua, kui ta tegi sama asja,
nagu CardView kaardi võrdub see,

411
00:20:27,200 --> 00:20:30,580
nii kaua, kui ta lõi CardView
ja andis talle õiguse saamiseks

412
00:20:30,580 --> 00:20:31,987
ta muudaks oma kaardi.

413
00:20:31,987 --> 00:20:34,320
Ja nii see tee, see on tõesti
lahe viis, kuidas saate luua

414
00:20:34,320 --> 00:20:35,906
komponendid, mis kasutavad üksteisega, eks?

415
00:20:35,906 --> 00:20:38,280
See kaart, ma võiks avaldada
Selle CardView internetis,

416
00:20:38,280 --> 00:20:39,790
ja inimesed saaks seda kasutada.

417
00:20:39,790 --> 00:20:45,070
Ühesõnaga, see on nagu üks
standard funktsioone C raamatukogu.

418
00:20:45,070 --> 00:20:47,280
>> See on funktsioon, kus
keegi on kirjutanud.

419
00:20:47,280 --> 00:20:48,419
Sa annad teatavat sisendit.

420
00:20:48,419 --> 00:20:49,710
Seda saad toota teatud toodangut.

421
00:20:49,710 --> 00:20:50,890
Sa ei hooli, kuidas see toimib sisemiselt.

422
00:20:50,890 --> 00:20:53,790
Niikaua kui sa annad talle õiguse
sisend, siis teen õige väljund.

423
00:20:53,790 --> 00:20:57,850
>> Ja osa võib olla
mõelnud samamoodi.

424
00:20:57,850 --> 00:21:00,280
See CardView on nagu
raamatukogu funktsiooni.

425
00:21:00,280 --> 00:21:03,400
Kui annad talle kaardi
kui vara, siis see

426
00:21:03,400 --> 00:21:05,095
välja printida sisu, et kaardi.

427
00:21:05,095 --> 00:21:16,820
Nagu siis, kui ma muudan kaart
asemel olla nagu see, mis on 5 pluss 37

428
00:21:16,820 --> 00:21:19,210
ajakohastab vastavalt.

429
00:21:19,210 --> 00:21:21,955
Nii lihtsalt muutes sisendi,
see saab teatud toodangut.

430
00:21:21,955 --> 00:21:24,830
Nii et sa ei mõtle komponendid peaaegu
funktsioonidena sel viisil, mis

431
00:21:24,830 --> 00:21:25,920
saab kokku panna.

432
00:21:25,920 --> 00:21:29,440
Sa saad sisestada, nagu seda CardView
kui sisend, saad toodangut.

433
00:21:29,440 --> 00:21:31,900
Sel juhul väljund on HTML.

434
00:21:31,900 --> 00:21:34,404
Mõtet nii palju?

435
00:21:34,404 --> 00:21:36,890
Cool, et jälle omadused
kuidas saab edastada teavet

436
00:21:36,890 --> 00:21:40,900
ja sealt komponendid.

437
00:21:40,900 --> 00:21:42,740
>> OK, nii et vaatame seda
asi interaktiivne.

438
00:21:42,740 --> 00:21:44,450
Praegu on selline igav.

439
00:21:44,450 --> 00:21:45,520
Mis on [kuuldamatu]?

440
00:21:45,520 --> 00:21:48,210
Saate printida mõned välja,
kuid see on kõik ta saab teha.

441
00:21:48,210 --> 00:21:51,550
>> Nii lähme tagasi
vana küsimus just nüüd.

442
00:21:51,550 --> 00:21:54,405
OK, nii et just nüüd on need komponendid
on igav, sest kõik nad teevad,

443
00:21:54,405 --> 00:21:55,030
nad saavad sisestada.

444
00:21:55,030 --> 00:21:56,100
Nad teevad väljund, eks?

445
00:21:56,100 --> 00:21:57,049
See on selline igav.

446
00:21:57,049 --> 00:21:59,090
Me tahame oma
komponentide saama

447
00:21:59,090 --> 00:22:02,150
mingi sisemine riik
nagu mäletan midagi.

448
00:22:02,150 --> 00:22:05,320
>> Sest sähvikute jaoks
Näiteks milline riik

449
00:22:05,320 --> 00:22:07,550
Võib soovid
mäletan sähvikute?

450
00:22:07,550 --> 00:22:09,740
Mis ajutine seisund
Võib mida tahate mäletada

451
00:22:09,740 --> 00:22:12,491
jaoks sähvikute in sähvikute app?

452
00:22:12,491 --> 00:22:13,990
Sihtrühm: Kas see on keerata?

453
00:22:13,990 --> 00:22:14,990
Neel Mehta: Jah, muidugi.

454
00:22:14,990 --> 00:22:17,665
Nii võiksite hoida
peal on teil toime tulla või on

455
00:22:17,665 --> 00:22:19,100
sa kummuli kaardi.

456
00:22:19,100 --> 00:22:23,420
On Facebook, näiteks, siis oleks
tahad meeles pidada, kus uudistevoo

457
00:22:23,420 --> 00:22:25,870
sa oled või soovid, kes on profiili
sa teed praegu.

458
00:22:25,870 --> 00:22:30,127
>> On Messenger, nagu mida tekst, mida
kirjuta sisend kasti, eks?

459
00:22:30,127 --> 00:22:31,710
Kui te värskenda lehekülge, see läheb ära.

460
00:22:31,710 --> 00:22:32,793
Aga sa tõesti ei hooli.

461
00:22:32,793 --> 00:22:33,770
See on lihtsalt ajutine.

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

463
00:22:34,548 --> 00:22:36,152
>> Sihtrühm: [kuuldamatu]

464
00:22:36,152 --> 00:22:38,360
Neel Mehta: Nagu välk
kaart, nagu sa ei näe

465
00:22:38,360 --> 00:22:40,290
küsimus poolel või vastuse poole?

466
00:22:40,290 --> 00:22:41,070
>> Sihtrühm: OK.

467
00:22:41,070 --> 00:22:43,270
>> Neel Mehta: Like a
kahepoolne sähvik, eks?

468
00:22:43,270 --> 00:22:46,370
Jah, nii soovid
on see idee nüüd

469
00:22:46,370 --> 00:22:50,370
Mul on omadused, mis on nagu sisendid,
kuid riik, mis on ajutine, uh,

470
00:22:50,370 --> 00:22:51,839
kus sa oled lehel, eks?

471
00:22:51,839 --> 00:22:54,380
Jällegi, ma ütlesin Facebook
Messenger, mul on nagu, kus isik

472
00:22:54,380 --> 00:22:56,550
vaatate Facebook
või kes on profiili, eks?

473
00:22:56,550 --> 00:22:58,030
>> See on vaid ajutine.

474
00:22:58,030 --> 00:23:01,200
Oluline on näidata kasutajale
mis toimub, kuid värskenda lehekülge.

475
00:23:01,200 --> 00:23:02,250
See ei ole tegelikult küsimus.

476
00:23:02,250 --> 00:23:04,530
Nii et see on ajutine riigi,
nii et me kõik seda riiki.

477
00:23:04,530 --> 00:23:06,250
>> Niisiis, jälle, seal on riigi ja rekvisiidid.

478
00:23:06,250 --> 00:23:09,084
Rekvisiidid on antud sisend
Teie andmete allikas.

479
00:23:09,084 --> 00:23:10,250
Riik on nagu vaikimisi.

480
00:23:10,250 --> 00:23:13,700
See on nagu asjad, mis
teeb asja interaktiivne.

481
00:23:13,700 --> 00:23:17,720
>> Nii meie CardView-- et vaatame
Meie CardView-- nii see oli tore.

482
00:23:17,720 --> 00:23:21,420
Mida me teeme siin, me läheme
puudutada CardView ja ainult CardView.

483
00:23:21,420 --> 00:23:25,105
Ja nii mu sõber, kes sai selle, et nad
ei märka mingit vahet.

484
00:23:25,105 --> 00:23:27,230
Nad ei pea muutma
ükskõik oma koodi,

485
00:23:27,230 --> 00:23:29,410
kuid nad tahaks näha oma
CardView sai souped üles.

486
00:23:29,410 --> 00:23:31,270
See on kena asi komponendid.

487
00:23:31,270 --> 00:23:35,290
>> OK, nii et meie CardView, proovime ja
jälgida, kas me järk-up

488
00:23:35,290 --> 00:23:36,560
või kummuli.

489
00:23:36,560 --> 00:23:40,480
In Reageerima me teeme seda esimest
täpsustades algse seisundi.

490
00:23:40,480 --> 00:23:42,070
Kust kaardi hakata?

491
00:23:42,070 --> 00:23:48,480
>> Nii on funktsioon nimega getInitialState
toimida, ja me tagasi objekt.

492
00:23:48,480 --> 00:23:53,310
See objekt sisaldab mingile riigile ja
riik on lihtsalt võtmeväärtuste paari.

493
00:23:53,310 --> 00:23:56,950
Nagu juhendada, siis on oluline ja
väärtus, siis on nagu nimi on string.

494
00:23:56,950 --> 00:24:01,410
>> Sel juhul oletame ees on tõsi.

495
00:24:01,410 --> 00:24:03,760
See ütleb, et meil on riik.

496
00:24:03,760 --> 00:24:06,570
Üks osa riigi
on atribuut nimega ees.

497
00:24:06,570 --> 00:24:09,649
[Kuuldamatu], et vaikimisi
me ees kaardi,

498
00:24:09,649 --> 00:24:11,440
ja me saame seda muuta
kui me flip kaart.

499
00:24:11,440 --> 00:24:13,380
On loogiline?

500
00:24:13,380 --> 00:24:18,190
>> OK, nii muudab, just nüüd, me oleme
näidates küsimus ja vastus.

501
00:24:18,190 --> 00:24:20,860
Nüüd, mida me peaksime tegema
on näidata küsimus

502
00:24:20,860 --> 00:24:24,370
kui me esiküljel kaart nii
Vastus on, et tagaküljele.

503
00:24:24,370 --> 00:24:26,850
Sellepärast te kõik teha
kaardi interaktiivne.

504
00:24:26,850 --> 00:24:28,100
Nii proovime ja sellele siin.

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

506
00:24:31,600 --> 00:24:33,620
Noh, esiteks lihtsalt muutuja.

507
00:24:33,620 --> 00:24:37,790
Me ei küsi nüüd this.state.front.

508
00:24:37,790 --> 00:24:42,010
Me riigisaladusele juurdepääsuks sama meil
juurdepääsu rekvisiidid, nii this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Kui me ees, siis teksti
on this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Kui me oleme ees
kaardi, me ei kavatse proovida ja haarata

512
00:24:51,360 --> 00:24:52,485
küsimus kaardist.

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

514
00:24:54,782 --> 00:24:57,240
Vastasel juhul, kui me oleme taga
kaardi, mida me teeme?

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

516
00:25:01,830 --> 00:25:02,750
>> Sihtrühm: Vastus?

517
00:25:02,750 --> 00:25:05,041
>> Neel Mehta: Yep, nii teksti
võrdub this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Aga kui te märkate, me kasutame
riik tegema otsuse

520
00:25:10,930 --> 00:25:14,420
sest nüüd komponendi
siis teistmoodi

521
00:25:14,420 --> 00:25:16,710
põhineb off kuidas need suhelda ta.

522
00:25:16,710 --> 00:25:20,355
Nii et selle asemel välja trükkida seda,
me lihtsalt välja printida teksti.

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

524
00:25:25,270 --> 00:25:28,650
Cool, nii et nüüd, kui sa näed,
me näeme ainult küsimus.

525
00:25:28,650 --> 00:25:37,720
Ja kui ma saan muuta riik siin käsitsi
et ees on vale saame 42 tagasi.

526
00:25:37,720 --> 00:25:39,720
>> Niisiis, jälle selle komponendi
on oma riik.

527
00:25:39,720 --> 00:25:43,440
Nagu nuppu teab, kas
see on vajutatud või mitte,

528
00:25:43,440 --> 00:25:46,080
see asi ei tea, mis on
esi- või tagaküljel.

529
00:25:46,080 --> 00:25:48,320
Vaikimisi on ees.

530
00:25:48,320 --> 00:25:50,840
Ja siis, kui see on ees,
me välja printida küsimus.

531
00:25:50,840 --> 00:25:53,106
Kui see on tagaküljel, siis me
välja printida vastus.

532
00:25:53,106 --> 00:25:54,980
Niisiis, jälle teabe
arvestades on sama.

533
00:25:54,980 --> 00:25:59,090
See lihtsalt tundub teistsugune
põhjal, kuidas sa programm seda.

534
00:25:59,090 --> 00:26:02,670
Nii näiteks Facebook Messenger,
isegi kui saad sama andmeallika

535
00:26:02,670 --> 00:26:05,170
see võib erineda
sest riik on erinev.

536
00:26:05,170 --> 00:26:08,421
Sa vaadates
teine ​​inimene sõnumit.

537
00:26:08,421 --> 00:26:10,930
>> OK, nii et see on kõik hästi ja
hea, kuid mis nüüd on tegelikult

538
00:26:10,930 --> 00:26:15,940
teeb meid võimalik muuta, kas
Meie kaart on ees või taga.

539
00:26:15,940 --> 00:26:19,010
Me saame seda teha, lisades flip
nuppu, nuppu, et kaart, mis

540
00:26:19,010 --> 00:26:22,950
flip kaart, kui see on [kuuldamatu].

541
00:26:22,950 --> 00:26:31,770
Lisame nupule siin, see
nuppu, ja see ütleb nupp flip.

542
00:26:31,770 --> 00:26:35,650
>> Ja nii kohe, see
ei tee midagi.

543
00:26:35,650 --> 00:26:37,075
See lihtsalt ilus.

544
00:26:37,075 --> 00:26:43,650
Mida me saame teha, on meil võimalik lisada klõpsuga
handler, onClick võrdub this.flip,

545
00:26:43,650 --> 00:26:44,820
ja me määrata flip hiljem.

546
00:26:44,820 --> 00:26:47,120
Aga põhimõtteliselt, onClick
on funktsioon, mis

547
00:26:47,120 --> 00:26:48,675
saab nimetada, kui kasutaja klõpsab ta.

548
00:26:48,675 --> 00:26:52,330
>> Nii nuppu teavad
kui see on klõpsatud.

549
00:26:52,330 --> 00:26:54,750
Läks see on klõpsatud,
see klapp kaardi.

550
00:26:54,750 --> 00:26:58,382
See on selline nagu teie
pizza tarne kutt.

551
00:26:58,382 --> 00:27:01,590
Sa oled nagu kõik õige, kui keegi
kutsub mind, ma pakkuda pizza, eks?

552
00:27:01,590 --> 00:27:03,420
>> Sa registreerib kuulaja.

553
00:27:03,420 --> 00:27:04,530
Kuula sündmuse.

554
00:27:04,530 --> 00:27:07,657
Sa saad kutsutud ja kui
Kui juhtub, kui midagi.

555
00:27:07,657 --> 00:27:08,240
Sa saad pizza.

556
00:27:08,240 --> 00:27:11,480
Sel juhul, kui sa oled
klõpsatud, siis flip kaart.

557
00:27:11,480 --> 00:27:14,560
>> Ja nii on meil vaja määratleda
funktsioon, mis flip kaart

558
00:27:14,560 --> 00:27:17,930
nii me kirjutada, et õigus
siin, flip funktsiooni.

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

560
00:27:20,850 --> 00:27:23,680
Ja mis sa arvad flip teeme?

561
00:27:23,680 --> 00:27:27,180
Jälle see saab nimetada, kui
me Klõpsuga nupule.

562
00:27:27,180 --> 00:27:29,406
Mida peaks funktsiooni flip teha?

563
00:27:29,406 --> 00:27:34,136
>> Sihtrühm: Change this.state.front
alates true false, false true.

564
00:27:34,136 --> 00:27:38,420
>> Neel Mehta: Yep, nii võtta mis tahes
this.front on-- ees riik.

565
00:27:38,420 --> 00:27:40,930
Võtke ees riik, kui
see on tõsi, et see vale.

566
00:27:40,930 --> 00:27:42,530
Kui see on vale, et see oleks tõene, eks?

567
00:27:42,530 --> 00:27:45,330
Nii proovime seda.

568
00:27:45,330 --> 00:27:48,240
>> Sa ei saa muuta riigi
lihtsalt tehes this.state.

569
00:27:48,240 --> 00:27:50,380
Sa ei saa seda teha.

570
00:27:50,380 --> 00:27:52,030
Sa ei saa seda teha.

571
00:27:52,030 --> 00:27:55,810
Sa pead kasutama funktsiooni
nimetatakse this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Nii saab öelda this.setState ees
koolon seda, kus jällegi hüüatus

573
00:28:03,230 --> 00:28:04,330
punkt tähendab vastupidist.

574
00:28:04,330 --> 00:28:07,420
Ma arvan, et kui see. state.front
On tõsi, siis see keerata vale.

575
00:28:07,420 --> 00:28:09,170
Nii me määrata riigi
alates true false.

576
00:28:09,170 --> 00:28:11,430
Kui see on vale, siis me
seadke see vale, et tõsi.

577
00:28:11,430 --> 00:28:17,210
>> Just märgata, et me seame ja saada veidi
erinevalt, ja nii proovime seda.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, vaata seda.

579
00:28:18,675 --> 00:28:21,810
Klapp nupp nüüd
lülitage taha riik.

580
00:28:21,810 --> 00:28:24,990
>> Ja nii siin, kus sa näed
Natuke maagiat reageerida.

581
00:28:24,990 --> 00:28:28,420
Nagu me ei rääkinud ta seda uuesti muuta.

582
00:28:28,420 --> 00:28:30,910
Me ei rääkinud ta tõmmata midagi.

583
00:28:30,910 --> 00:28:32,630
Kui sa teed seda
ilma Reageerima, soovid

584
00:28:32,630 --> 00:28:34,588
on mina-- meeldib, kui
flip nupule vajutamist,

585
00:28:34,588 --> 00:28:37,290
sa pead seda rääkima
käsitsi ümber muuta, eks?

586
00:28:37,290 --> 00:28:43,050
>> Reageerida on väga lahe, et kui te
annab see teatud riigi ja omadused,

587
00:28:43,050 --> 00:28:45,760
see alati muuta
täpselt sama asi.

588
00:28:45,760 --> 00:28:48,690
Ja nii, kui me oskame ja muuta
Riigi ja omadused,

589
00:28:48,690 --> 00:28:50,819
reageerida lihtsalt uuesti muudab kogu asi.

590
00:28:50,819 --> 00:28:52,860
Ta teab, et seal on
üks-ühene vastavus

591
00:28:52,860 --> 00:28:57,270
riigi ja parameetri ja HTML.

592
00:28:57,270 --> 00:29:00,110
Nii et kui üks nendest
muutub läbi olekusse,

593
00:29:00,110 --> 00:29:03,750
see muutub, kuidas
tasustamise ümber sulatatud.

594
00:29:03,750 --> 00:29:06,650
Ja nii põhimõtteliselt reageerimisvõimalus nagu
Teid ootab muuta.

595
00:29:06,650 --> 00:29:09,870
>> Iga kord, kui muutub midagi,
see saab uuesti muuta kogu lehel.

596
00:29:09,870 --> 00:29:12,480
Ja kui see kõlab ebaefektiivne,
sellepärast oleks,

597
00:29:12,480 --> 00:29:15,050
aga reageerivad kasutab asi
nimetatakse Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
Selle asemel, et joonistus lehel otse,
hoiab virtuaalne HTML puu mälu.

599
00:29:19,950 --> 00:29:23,620
>> Sa tead, HTML on nagu puu,
nagu hierarhiline andmete struktuuri.

600
00:29:23,620 --> 00:29:28,990
See hoiab võlts puu mälu
ja kui sa uuendada lehel

601
00:29:28,990 --> 00:29:31,940
see saab juhtida teise võlts
puust ja see saab arvutada

602
00:29:31,940 --> 00:29:35,120
mida muuta on vaja teha
mis teeb kaks puud võrdsed.

603
00:29:35,120 --> 00:29:38,540
Ühesõnaga, see praktiliselt
re-muudab palju.

604
00:29:38,540 --> 00:29:41,540
Ja siis ta ainult meeldi muutused
lehekülje vähe tweaks kui vaja,

605
00:29:41,540 --> 00:29:44,240
nii et see on väga, väga, väga tõhus.

606
00:29:44,240 --> 00:29:46,970
>> Nii et põhimõtteliselt reaktsioonivõime
kui sa midagi muuta,

607
00:29:46,970 --> 00:29:49,010
see saab uuesti muuta lehekülje praktiliselt.

608
00:29:49,010 --> 00:29:52,830
Seda saad aru saada, mida ma pean
muuta enam reaalne lehel kajastada

609
00:29:52,830 --> 00:29:55,602
virtuaalne lehele ja siis saad seda teha.

610
00:29:55,602 --> 00:29:56,560
See on virtuaalne DOM.

611
00:29:56,560 --> 00:29:59,350
See on üks suurimaid
funktsioonid reageerida.

612
00:29:59,350 --> 00:30:00,880
>> Kas see on mõtet?

613
00:30:00,880 --> 00:30:01,540
Kas küsimusi on?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Sihtrühm: Kuidas
võrrelda veel MVC

617
00:30:08,969 --> 00:30:10,760
et me rääkisime
Enne nagu vahendeid.

618
00:30:10,760 --> 00:30:13,527
>> Neel Mehta: Jah, küsimus
kuidas see on võrreldes MVC?

619
00:30:13,527 --> 00:30:14,610
Sa küsisid ressursse.

620
00:30:14,610 --> 00:30:16,445
Noh, räägime, kuidas see toimib.

621
00:30:16,445 --> 00:30:18,190
>> In MVC, soovid uuendada mudelit.

622
00:30:18,190 --> 00:30:20,560
Sellisel juhul oleks meil kaardi mudel.

623
00:30:20,560 --> 00:30:24,540
Vaade oleks
flip nuppu ja kontrolli

624
00:30:24,540 --> 00:30:26,310
oleks flip funktsiooni.

625
00:30:26,310 --> 00:30:28,450
Nii arvates oleks öelda
controller klapp klapp.

626
00:30:28,450 --> 00:30:30,370
Flip oleks öelda
mudel muuta, eks?

627
00:30:30,370 --> 00:30:33,915
>> Ja nii, kui sa MVC, siis
kuulata mudeli muutmiseks,

628
00:30:33,915 --> 00:30:37,150
ja sa uuesti muuta seisukohta vastavalt.

629
00:30:37,150 --> 00:30:39,210
Või sa lihtsalt meeldib
on kontroller.

630
00:30:39,210 --> 00:30:42,418
Oodake mudeli muutmiseks ja seejärel
valida ja valida osa nagu asi

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

632
00:30:44,032 --> 00:30:45,740
Siin on meil üks asi,
kuid suur app,

633
00:30:45,740 --> 00:30:48,510
sa pead nagu mäletame, mis
muutus iga koht,

634
00:30:48,510 --> 00:30:50,290
nii et see on natuke tüütu.

635
00:30:50,290 --> 00:30:53,670
Ja nii reageerimisvõimalus kena
sest see on Shadow Dom.

636
00:30:53,670 --> 00:30:56,040
Seda saab endale lubada vaid
kirjutada kogu asi.

637
00:30:56,040 --> 00:30:58,680
Sa ei pea valikuliselt
nagu arvata, mida uuendada.

638
00:30:58,680 --> 00:31:02,186
>> On Facebook kui soovid
saada uus sõnum, MVC,

639
00:31:02,186 --> 00:31:04,060
sa pead meeles pidama,
OK, muuta asju

640
00:31:04,060 --> 00:31:06,260
ülaosas on
lehele, sõnumi ikooni.

641
00:31:06,260 --> 00:31:08,290
Ka pop uues aknas allosas.

642
00:31:08,290 --> 00:31:10,070
Samuti teeb uus asi, et aken.

643
00:31:10,070 --> 00:31:11,060
Mängida ka heli.

644
00:31:11,060 --> 00:31:13,150
>> See on palju asju
läheb läbi samal ajal.

645
00:31:13,150 --> 00:31:15,320
Ja kui sa seda ei tee
on Shadow Dom, soovid

646
00:31:15,320 --> 00:31:18,740
pead tegema, et käsitsi, sest
sa ei saa lahti terve lehekülje.

647
00:31:18,740 --> 00:31:21,430
Sa ei saa, nii et teil on
muuta iga asi käsitsi

648
00:31:21,430 --> 00:31:23,990
mis on tõesti tüütu MVC.

649
00:31:23,990 --> 00:31:27,640
>> Nii et olla
kokkuhoidlik, nad valikuliselt

650
00:31:27,640 --> 00:31:30,750
lehekülge uuendada, mis on
tõhus, vaid ka tüütu.

651
00:31:30,750 --> 00:31:34,002
In reageerida, sest Shadow
Dom, saad nii asju tasuta.

652
00:31:34,002 --> 00:31:35,710
See on tõhus, sest
Shadow Dom.

653
00:31:35,710 --> 00:31:37,210
Pudelikael uuendab lehel.

654
00:31:37,210 --> 00:31:40,292
See ei tee puu manipuleerimist.

655
00:31:40,292 --> 00:31:41,250
Sa saad tõhusust.

656
00:31:41,250 --> 00:31:45,420
Lisaks saate kasutusmugavus, sest
kui sa lihtsalt kirjutada terve lehekülje,

657
00:31:45,420 --> 00:31:48,970
aga sa lihtsalt tean, kõik õige, asjad
saab olema leheküljel kuhugi.

658
00:31:48,970 --> 00:31:51,180
See võib olla teises kohas, kuid
see saab olema lehel, eks?

659
00:31:51,180 --> 00:31:52,860
Nii et sa lihtsalt uuesti sulatatud
Kogu asi peaaegu,

660
00:31:52,860 --> 00:31:55,540
ja te võite teha paar
muudatusi leht ise.

661
00:31:55,540 --> 00:31:57,850
>> Niisiis, jällegi MVC te
oleks valida

662
00:31:57,850 --> 00:32:01,840
vahel kasutusmugavus ja efektiivsus,
ja reaktsioonikiirust, saad mõlemad.

663
00:32:01,840 --> 00:32:04,020
Nii et see on parem.

664
00:32:04,020 --> 00:32:05,220
On loogiline?

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

666
00:32:06,676 --> 00:32:12,080
>> OK, nii et vaatame, räägime
natuke samm 4,

667
00:32:12,080 --> 00:32:14,740
kuidas me saame kinnistada komponendid.

668
00:32:14,740 --> 00:32:16,260
Nii et meil on see praegu.

669
00:32:16,260 --> 00:32:19,420
Meil on lahe väike nupp.

670
00:32:19,420 --> 00:32:23,157
Saame flip ta tagasi ja
edasi, ja see on kõik, mida ta teeb.

671
00:32:23,157 --> 00:32:24,990
Oletame, et me tahame
on teine ​​osa.

672
00:32:24,990 --> 00:32:28,730
Oletame, et meie sähvik rakendust
sisaldab loetelu kõigist kaardid

673
00:32:28,730 --> 00:32:31,520
et teil on, et tähendab, et me
peaks olema teine ​​komponent.

674
00:32:31,520 --> 00:32:32,970
Noh, võib-olla nimetaks seda nimekirja vaadata.

675
00:32:32,970 --> 00:32:36,200
Teeme nimekirja seisukohal, et
eksisteerib koos CardView,

676
00:32:36,200 --> 00:32:39,680
ja seda nimekirja vaadata ja CardView
tahaks koos töötada.

677
00:32:39,680 --> 00:32:43,190
Ja saate nende
et meie app teile.

678
00:32:43,190 --> 00:32:45,160
>> Nii esimene, olgem teha
Paar rohkem kaarte paremale.

679
00:32:45,160 --> 00:32:46,370
Oletame, mis kaardid?

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

681
00:32:49,619 --> 00:32:51,910
Ja just nii ma ei pea
kandis teile kirjutades seda,

682
00:32:51,910 --> 00:32:53,410
Ma lihtsalt kopeerida siit.

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

684
00:33:01,664 --> 00:33:03,580
Ja nii ma ei
annab see vaid üks kaart.

685
00:33:03,580 --> 00:33:06,910
Ma annan selle massiivi kaardid.

686
00:33:06,910 --> 00:33:10,240
Nii esimese rakendused
läheb katki nüüd.

687
00:33:10,240 --> 00:33:14,717
Kõik õige, et me läheme tegema
Selle võimelised lahendama mitu kaarti.

688
00:33:14,717 --> 00:33:17,800
Nii et kõigepealt hakkame me anda talle mitte
lihtsalt üks kaart, vaid hulga kaarte,

689
00:33:17,800 --> 00:33:18,700
nagu nimekirja kaardid.

690
00:33:18,700 --> 00:33:20,980
Ja sel juhul on meil kolm neist.

691
00:33:20,980 --> 00:33:27,280
>> Olgu, nii et app on
hakka nimekirja kaardid,

692
00:33:27,280 --> 00:33:29,870
ja see läheb otsustada, milline
ühe näidata, et CardView.

693
00:33:29,870 --> 00:33:33,740
CardView võib ainult
et ühe kaardi, kuid app

694
00:33:33,740 --> 00:33:37,610
saab kuvada kõiki kaarte, eks?

695
00:33:37,610 --> 00:33:40,820
>> Nii et kui sa aru saada, üks
kaardi anda CardView,

696
00:33:40,820 --> 00:33:44,660
kuidas te arvan, sa võiksid
teha otsus selle kohta, milline kaart

697
00:33:44,660 --> 00:33:47,064
näidata?

698
00:33:47,064 --> 00:33:49,980
Et anda teile vihje, et see on ajutiselt
Sul vaatamise teatud kaardi.

699
00:33:49,980 --> 00:33:53,260
Kui te värskenda lehekülge, saate
minge tagasi esimese kaardi.

700
00:33:53,260 --> 00:33:55,464
See on OK, sest see on ajutine.

701
00:33:55,464 --> 00:33:56,630
Mis tehnikat võiks me kasutada?

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

703
00:34:02,534 --> 00:34:08,760
>> Sihtrühm: Sa võid teha muutuva
nii nagu sa olid ees.

704
00:34:08,760 --> 00:34:11,989
Kas see on tõsi, siis võiks
on praeguse kaardi võrdub 1?

705
00:34:11,989 --> 00:34:14,150
>> Neel Mehta: Jah, nii me
tahad olla riik, õigus?

706
00:34:14,150 --> 00:34:16,080
Sa kasutad olekus
osa välja nuputada

707
00:34:16,080 --> 00:34:17,288
mis kaart me tahame saada.

708
00:34:17,288 --> 00:34:19,290
Nagu meil on nimekiri
kõik kaardid, siis me

709
00:34:19,290 --> 00:34:21,630
kasutada riigi nuputada
üks esimesi kaardi,

710
00:34:21,630 --> 00:34:23,710
teine ​​kaart, kolmas kaart, ja nii edasi.

711
00:34:23,710 --> 00:34:28,760
>> Nii app nii app saavad
on getInitialState funktsiooni,

712
00:34:28,760 --> 00:34:35,020
getInitialState funktsiooni tagasi.

713
00:34:35,020 --> 00:34:39,929
Ja me lihtsalt öelda activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Nüüd meie app on ta enda riigi.

715
00:34:42,889 --> 00:34:47,179
>> Ja nii nüüd muuta, et aru saada,
kaardi, Lähme massiivi

716
00:34:47,179 --> 00:34:49,969
ja haarata asi on, et indeks.

717
00:34:49,969 --> 00:34:53,580
Vali kaardi võrdne this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Nii nagu näete siin, rekvisiidid ja
riik tegelikult töötavad koos.

720
00:35:00,162 --> 00:35:08,990
Nüüd, et meil on activeCard,
me nimetame seda activeCard,

721
00:35:08,990 --> 00:35:10,470
ja vaatame kas see töötab.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, see oli teksti viga.

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, yep, nii et nüüd olime tagasi
kus olime enne, eks?

729
00:35:54,840 --> 00:35:57,100
Sama vana programmi välja
Nüüd saame toetada

730
00:35:57,100 --> 00:35:59,390
nimekirja kaardid, mitte ainult ühe kaardi.

731
00:35:59,390 --> 00:36:04,130
Ja nüüd jälle, kui me muudame
activeIndex, saame minna 0-1,

732
00:36:04,130 --> 00:36:07,330
ja nüüd, et teine ​​kaart,
ja siis läksime 0.

733
00:36:07,330 --> 00:36:10,390
Nii et siin on uus
souped-up versioon meie.

734
00:36:10,390 --> 00:36:16,000
>> OK, nii et nüüd lähme on nimekirjas et
näitab kõiki kaarte oma programmi,

735
00:36:16,000 --> 00:36:19,980
nii teeme uue
komponent nimega Nimekirjavaade.

736
00:36:19,980 --> 00:36:22,155
Lubage Nimekirjavaade võrdub react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Nii et me tahame muudaks järjestamata
nimekirja loendiüksusele iga kaart.

739
00:36:38,800 --> 00:36:41,490
Ja nii on meil hunnik kaarte.

740
00:36:41,490 --> 00:36:44,990
Me tahame üks loendiüksusele
iga kaardi, eks?

741
00:36:44,990 --> 00:36:47,490
Me võiks teha silmus või
midagi teha uusi nimekirja objekt.

742
00:36:47,490 --> 00:36:50,522
Aga kuidas sa seda
Reageerida, kasutage asi nimega kaart.

743
00:36:50,522 --> 00:36:57,150
Kaart on vahend või funktsiooni kasutada
et iga objekt, jookseb mõne funktsiooni,

744
00:36:57,150 --> 00:36:59,510
võtab tagastatav väärtus, ja
annab teile, et tagasi.

745
00:36:59,510 --> 00:37:06,310
>> Nii näiteks on meil hulgaliselt
1, 2, 3.map funktsioon-- ja see

746
00:37:06,310 --> 00:37:12,120
on stenografisti jaoks
funktsioon-- x nool x korda x.

747
00:37:12,120 --> 00:37:16,110
See ütleb, et iga number
1, 2, 3, võtke see.

748
00:37:16,110 --> 00:37:17,800
Ruut, ja anda see tagasi.

749
00:37:17,800 --> 00:37:22,090
Mis sa arvad, 1,
2 3.map x läheb x korda

750
00:37:22,090 --> 00:37:25,480
x annab teile tagasi anda
et see funktsioon on

751
00:37:25,480 --> 00:37:27,680
käivitada iga element, mis massiivi.

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

753
00:37:30,837 --> 00:37:32,190
>> Sihtrühm: 1, 4 9?

754
00:37:32,190 --> 00:37:35,709
>> Neel Mehta: Yep, 1, 4, 9
sest sa 1 korda 1.

755
00:37:35,709 --> 00:37:36,500
See annab sulle ühe.

756
00:37:36,500 --> 00:37:37,690
See on esimene element.

757
00:37:37,690 --> 00:37:38,530
>> 2 korda 2 on 4.

758
00:37:38,530 --> 00:37:39,570
See on teine ​​element.

759
00:37:39,570 --> 00:37:40,310
3 korda 3 on 9.

760
00:37:40,310 --> 00:37:41,540
See on kolmas element.

761
00:37:41,540 --> 00:37:42,640
On loogiline?

762
00:37:42,640 --> 00:37:45,015
Nii kaart on tehnikat sa
kasuta funktsionaalse programmeerijad,

763
00:37:45,015 --> 00:37:48,090
uus stiil
programmeerimine midagi

764
00:37:48,090 --> 00:37:50,500
iga element oma nimekirja.

765
00:37:50,500 --> 00:37:51,970
Ja nii see tuttav.

766
00:37:51,970 --> 00:37:53,370
Meil on nimekiri kaarte.

767
00:37:53,370 --> 00:37:56,860
Tahame saada loendiüksusele iga
üks, nii me lihtsalt kasutada kaart siin.

768
00:37:56,860 --> 00:38:00,250
Me ütleme, lase nimekirja võrdsete
this.props, kaardid, kaart.

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

770
00:38:10,580 --> 00:38:15,070
>> Ja nii anti-kaardi, me oleme
läheb tekitada loendiüksusele

771
00:38:15,070 --> 00:38:17,580
omaga kaardi sisu pool seda.

772
00:38:17,580 --> 00:38:20,660
Ütleme nii, et me tahame anda välja
kaardid küsitleda nii card.question.

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

774
00:38:24,990 --> 00:38:30,649
Nii et see nimekiri sisaldab
massiivi Li või siis nimekiri

775
00:38:30,649 --> 00:38:32,440
kus seal on üks nimekirja
kirje iga kaardi,

776
00:38:32,440 --> 00:38:35,150
ja mis sisaldab kaarte küsimus.

777
00:38:35,150 --> 00:38:37,640
On loogiline?

778
00:38:37,640 --> 00:38:39,450
>> Cool, nii et nüüd lähme
tegelikult trükkida selle välja.

779
00:38:39,450 --> 00:38:46,521
Nii me naaseb ul.

780
00:38:46,521 --> 00:38:49,020
Toas et järjestamata nimekirja,
me lihtsalt kinni kogu nimekirja

781
00:38:49,020 --> 00:38:49,890
et nad andsid meile.

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
>> Olgu, nii et nüüd see
Nimekirja vaade töötab just leida.

785
00:38:56,060 --> 00:38:59,842
Kõik küsimused loendivaates?

786
00:38:59,842 --> 00:39:01,270
Sul on hunnik kaarte.

787
00:39:01,270 --> 00:39:02,800
Sa teed loendiüksusele iga kaart.

788
00:39:02,800 --> 00:39:05,466
Ja paned neid sees järjestamata
nimekirja ja sa annad selle tagasi.

789
00:39:05,466 --> 00:39:09,410
Vaatame nüüd tegutsema nii me kinnistada
Selle sees on meie app,

790
00:39:09,410 --> 00:39:14,310
nii et me saame seda teha, loendivaate.

791
00:39:14,310 --> 00:39:17,070
Mis argument me läheb Nimekirja vaade?

792
00:39:17,070 --> 00:39:18,320
Mis omadused me anname seda?

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

794
00:39:25,111 --> 00:39:26,860
Pea meeles, et kui sa annad
see kamp kaardid,

795
00:39:26,860 --> 00:39:29,590
See teeb nimekirja
Vaata neid kaarte.

796
00:39:29,590 --> 00:39:32,267
Mis siis võtame
siin argument?

797
00:39:32,267 --> 00:39:33,350
Sihtrühm: nimekiri kaardid?

798
00:39:33,350 --> 00:39:37,130
Neel Mehta: Jah, nii kaardid
võrdub this.props.cards, eks?

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

800
00:39:39,850 --> 00:39:44,370
Ja nii ainus probleem
on see, et saad ainult

801
00:39:44,370 --> 00:39:48,600
välja ühe tipptasemel element muuta,
nii et sa pead murrab ta div.

802
00:39:48,600 --> 00:39:49,100
See on imelik.

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
Vaatame, kui see.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Kas see toimib?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Yep, et te lähete.

809
00:40:31,030 --> 00:40:33,700
Nüüd on meil nimekiri
kaarte allosas,

810
00:40:33,700 --> 00:40:36,180
ja siis on meil
CardView ise peal,

811
00:40:36,180 --> 00:40:40,486
ja mis klapp vahel
kahel pool kaardile.

812
00:40:40,486 --> 00:40:42,610
Nüüd teeb seda mõtet, kuidas ma seda tegin?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Jah, seda uuesti, meil on kaks komponenti.

815
00:40:46,790 --> 00:40:49,666
Esimene komponent pildid
läbi iga kaart nimekirjas.

816
00:40:49,666 --> 00:40:50,540
See on loendivaate.

817
00:40:50,540 --> 00:40:54,770
Ja teine ​​osa
prindib välja just seda kaarti.

818
00:40:54,770 --> 00:40:58,840
Kui annad talle teatud kaardi, siis see
välja printida infot selle kaardi

819
00:40:58,840 --> 00:41:01,870
ja saate flip edasi-tagasi.

820
00:41:01,870 --> 00:41:05,850
>> Nii et kui me tahame, saame proovida ja rääkida
umbes lisades mõned uued funktsioonid sellele.

821
00:41:05,850 --> 00:41:09,482
Muidu saame rääkida natuke rohkem
umbes liikumiskiiruse reaktori

822
00:41:09,482 --> 00:41:11,190
või saame vastata
Teie küsimustele

823
00:41:11,190 --> 00:41:15,050
sest need on kõik tuumikosade
ning reageerida, et ma tahan rääkida.

824
00:41:15,050 --> 00:41:16,540
Me võime minna.

825
00:41:16,540 --> 00:41:17,590
Me saame vastata küsimustele.

826
00:41:17,590 --> 00:41:18,560
Mida iganes sa soovid.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Sihtrühm: Kas te kasutate
JSX normaalse JavaScript?

829
00:41:24,205 --> 00:41:27,150
Või on see midagi, mis
kaasas [kuuldamatu]?

830
00:41:27,150 --> 00:41:30,760
>> Neel Mehta: Küsimus on, kas
te kasutate JSX normaalse JavaScript?

831
00:41:30,760 --> 00:41:32,620
Vastus on jah.

832
00:41:32,620 --> 00:41:41,070
JSX on lihtsalt viis ta võtab oma
JavaScript et on HTML sees on,

833
00:41:41,070 --> 00:41:44,215
ja see kogub sisse JavaScript, et
ei pea HTML sees on.

834
00:41:44,215 --> 00:41:47,880
Nii märkate selle-- nii märkate siin.

835
00:41:47,880 --> 00:41:50,820
See näeb välja nagu teil on nagu div
ja sul on asjad sees on.

836
00:41:50,820 --> 00:41:54,970
>> See koostab et JavaScript, et
nagu tekitab sama asi.

837
00:41:54,970 --> 00:41:59,590
Ma arvan, mida ma tahan öelda, et
JSX on lihtsalt süntaktiliste, nagu see on

838
00:41:59,590 --> 00:42:03,530
eeltöötluseta JavaScripti palju
nagu PHP on eeltöötluse HTML.

839
00:42:03,530 --> 00:42:05,490
JSC on eeltöötluse
JavaScripti, mis võimaldab

840
00:42:05,490 --> 00:42:12,970
paned HTML sees oma JavaScript.

841
00:42:12,970 --> 00:42:16,425
Ja kui sul on õigus trafo
mis on asi, mida nimetatakse [kuuldamatu]

842
00:42:16,425 --> 00:42:17,300
mis muudab.

843
00:42:17,300 --> 00:42:19,360
Õigus preprotsessoris
see lasen sul seda teha.

844
00:42:19,360 --> 00:42:20,235
>> Sihtrühm: [kuuldamatu]

845
00:42:20,235 --> 00:42:23,026
Neel Mehta: Tavaliselt ei ole vaja
panna HTML sees JavaScript

846
00:42:23,026 --> 00:42:24,110
kui ei ole teie teed reageerida.

847
00:42:24,110 --> 00:42:27,146
Aga sa ei saa seda teha niikuinii.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Sihtrühm: Ma arvan, et sa
oli kirjeldatud Reageerima

850
00:42:29,353 --> 00:42:31,970
funktsionaalse Planeerimise keeles.

851
00:42:31,970 --> 00:42:35,646
Oleme olnud õppimise C CS50.

852
00:42:35,646 --> 00:42:38,032
Kas C ka funktsionaalne keel?

853
00:42:38,032 --> 00:42:39,990
Neel Mehta: Seega on küsimus
on umbes funktsionaalne

854
00:42:39,990 --> 00:42:43,010
versus teine ​​asi nimega
hädavajalik või menetlusõiguse programmeerimine.

855
00:42:43,010 --> 00:42:44,820
Seal on kahte liiki programme populaarne.

856
00:42:44,820 --> 00:42:48,550
Üks nimetatakse menetluslikke, mis
on kõike nagu teevad käske,

857
00:42:48,550 --> 00:42:51,510
ja üks on funktsionaalne, mis on kõik
umbes võttes funktsioone ja võttes

858
00:42:51,510 --> 00:42:52,930
sisend ja väljund neile.

859
00:42:52,930 --> 00:42:55,930
Reageerida on funktsionaalne paradigma.

860
00:42:55,930 --> 00:42:58,010
C on väga menetlusõiguse paradigma.

861
00:42:58,010 --> 00:43:02,360
>> Ja näitena, C näiteks
sa ei saa seda teha deklaratiivne viis

862
00:43:02,360 --> 00:43:04,390
tegemise programm, eks?

863
00:43:04,390 --> 00:43:06,826
Sa pead ütlema, printida.

864
00:43:06,826 --> 00:43:07,950
Muuda andmeid struktuuri.

865
00:43:07,950 --> 00:43:08,530
Trüki.

866
00:43:08,530 --> 00:43:10,160
See kõik on umbes juhtimine.

867
00:43:10,160 --> 00:43:12,640
>> In reageerida seal ei ole
et paljud käsud.

868
00:43:12,640 --> 00:43:15,145
See kõik on umbes võttes
komponendid, mida kokku panna.

869
00:43:15,145 --> 00:43:16,300
Nad on nagu funktsioone.

870
00:43:16,300 --> 00:43:26,360
Sul on nagu funktsioon
nimetatakse CardView,

871
00:43:26,360 --> 00:43:28,680
mis on funktsioon
mis on sisend, väljund,

872
00:43:28,680 --> 00:43:30,660
ja nii reageerimisvõimalus kõik
selle filosoofia

873
00:43:30,660 --> 00:43:32,700
meile having-- teil on andmeid.

874
00:43:32,700 --> 00:43:34,910
Sa andke seda läbi selle
algoritm, ja siis see

875
00:43:34,910 --> 00:43:36,800
väljund HTML, et sa
lihtsalt trükitud lehe,

876
00:43:36,800 --> 00:43:39,180
ja nii sa pead
ehitada see jaokaupa.

877
00:43:39,180 --> 00:43:42,800
>> Nii juhtida metafoor, mida
Ma ütlesin, sa tead, kuidas

878
00:43:42,800 --> 00:43:47,050
Facebook kui saate teate,
ja valida, millist osa uuendada,

879
00:43:47,050 --> 00:43:47,882
et menetluskulud.

880
00:43:47,882 --> 00:43:48,840
See on hädavajalik, eks?

881
00:43:48,840 --> 00:43:49,806
OK, ma sain sõnumi.

882
00:43:49,806 --> 00:43:50,930
Muudame konto olemas.

883
00:43:50,930 --> 00:43:52,110
>> Olgem pop aknas siin.

884
00:43:52,110 --> 00:43:52,780
Muudame konto olemas.

885
00:43:52,780 --> 00:43:53,700
Joonistame selle siin.

886
00:43:53,700 --> 00:43:55,220
See on menetlusest loobuma.

887
00:43:55,220 --> 00:44:00,240
>> Just asjad Nurga,
Boost, selgroog, teiste raamistike kasutada.

888
00:44:00,240 --> 00:44:01,200
Reageerida on funktsionaalne.

889
00:44:01,200 --> 00:44:03,324
See on väga teistmoodi
mõelda asju.

890
00:44:03,324 --> 00:44:07,950
See võtab selle idee et vaatame
funktsioone või algoritme, et eks

891
00:44:07,950 --> 00:44:08,800
annab ta andmeid.

892
00:44:08,800 --> 00:44:11,820
Seda saad sülitama, mida ta
peaksid olema ja arvuti

893
00:44:11,820 --> 00:44:13,490
hoolitseb kaalumist.

894
00:44:13,490 --> 00:44:15,890
Sa ei oska seda ise.

895
00:44:15,890 --> 00:44:18,470
Kas see teeb natuke mõistust?

896
00:44:18,470 --> 00:44:18,970
Jah?

897
00:44:18,970 --> 00:44:24,180
>> Sihtrühm: In funktsionaalne keel,
kõik juhtub korraga?

898
00:44:24,180 --> 00:44:26,800
>> Neel Mehta: Ei, asjad juhtuvad järjekorras.

899
00:44:26,800 --> 00:44:29,320
Nagu siin seal on veel
tellida, kuid see ei ole

900
00:44:29,320 --> 00:44:32,390
juhtuda, et sarnaste
annan, käsk, käsk.

901
00:44:32,390 --> 00:44:36,459
See juhtub, et on
funktsioon annab teile väljund.

902
00:44:36,459 --> 00:44:37,750
Pane see teise funktsiooni.

903
00:44:37,750 --> 00:44:39,550
Pane see teise
funktsiooni teise funktsiooni.

904
00:44:39,550 --> 00:44:41,470
>> Kui sa CS51, saate
õppida funktsionaalne programmid

905
00:44:41,470 --> 00:44:42,886
natuke välja käesoleva.

906
00:44:42,886 --> 00:44:45,090
Aga põhimõtteliselt see, mis teeb
Reageerida lahe on mitte ainult

907
00:44:45,090 --> 00:44:46,840
Ühesuunalise andmevoo
ja virtuaalne Dom,

908
00:44:46,840 --> 00:44:48,700
kuid ka see idee
funktsionaalne programmeerimine.

909
00:44:48,700 --> 00:44:51,720
Ja funktsionaalne programmeerimine on väga lihtne
koostada ja teha cool stuff välja,

910
00:44:51,720 --> 00:44:53,844
ja see on väga lihtne mõelda
umbes ja põhjus kohta.

911
00:44:53,844 --> 00:44:55,450
Nii et see on üks hea loositud reageerida.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Veel küsimusi?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Jah?

916
00:45:03,150 --> 00:45:06,840
>> Sihtrühm: Um, miks sa
Kasutage lase mitte var?

917
00:45:06,840 --> 00:45:10,450
>> Neel Mehta: Seega on küsimus
miks te kasutate lasta asemel var?

918
00:45:10,450 --> 00:45:13,220
See on asi, mida nimetatakse
ES6 või ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
See on uus versioon JavaScript.

920
00:45:15,820 --> 00:45:19,050
Seal on hunnik tehnilistel põhjustel,
Kuid olgem on parem versioon var.

921
00:45:19,050 --> 00:45:20,724
>> See, kuidas deklareerida muutujaid.

922
00:45:20,724 --> 00:45:21,390
Võite kasutada lase.

923
00:45:21,390 --> 00:45:22,140
Võite kasutada var.

924
00:45:22,140 --> 00:45:23,825
Let on hunnik tehnilise
reasons-- võite vaadata neid

925
00:45:23,825 --> 00:45:25,610
kuni later-- miks see on parem.

926
00:45:25,610 --> 00:45:28,780
Põhimõtteliselt ES6 on mõne kena
uus süntaks, mõned uued funktsioonid

927
00:45:28,780 --> 00:45:30,720
peal vana JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Nii et meil on nagu viis minutit.

929
00:45:32,782 --> 00:45:34,990
Ma tahtsin rääkida
üks asi veel päris kiire.

930
00:45:34,990 --> 00:45:36,450
Kui teil on olnud mingeid küsimusi,
Räägime siis pärast seda.

931
00:45:36,450 --> 00:45:38,366
Aga just nii see läheb
püütud kaamera, ma lihtsalt

932
00:45:38,366 --> 00:45:41,550
tahan rääkida natuke, kuidas sa
tegelikult kasutada reageerida oma apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Kui te lähete siin
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
see on avalehel reageerida ja
see näitan teile, kuidas tegelikult kasutada

936
00:46:03,320 --> 00:46:05,320
Reageerida lehekülgedele.

937
00:46:05,320 --> 00:46:08,845
Põhimõtteliselt, see on natuke
keeruline proovite installida reageerida.

938
00:46:08,845 --> 00:46:12,300
See ei ole nii lihtne, nagu te tõmmake
ja tilk JavaScript seal.

939
00:46:12,300 --> 00:46:15,890
>> Sa pead oma trafo
luua, mis, nagu enne,

940
00:46:15,890 --> 00:46:18,120
muuta oma JSX sisse
normaalne JavaScript.

941
00:46:18,120 --> 00:46:21,030
Sul on asi, et tulen
koostada sa ES6 normaalne.

942
00:46:21,030 --> 00:46:24,720
JavaScript seal on palju liikuvaid
osad, mida pead tegema, et seal on asi

943
00:46:24,720 --> 00:46:27,200
nimetatakse Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Ja see on käsurea tööriist, mis teen
aitab tellingud välja oma Reageerima

945
00:46:31,110 --> 00:46:32,380
projektide lihtsalt.

946
00:46:32,380 --> 00:46:38,660
>> Nii saate lugeda seda
hiljem, kuid on mõned tööriistad

947
00:46:38,660 --> 00:46:40,160
et Yeoman pakub.

948
00:46:40,160 --> 00:46:43,280
Nad annan sulle luua Reageerima
app kõike ehitatud.

949
00:46:43,280 --> 00:46:46,030
Nagu siis see on ehitatud
aastal, komponendid ehitatud.

950
00:46:46,030 --> 00:46:47,880
See on teil oma trafo ehitatud.

951
00:46:47,880 --> 00:46:50,699
Neil on palju lahedaid
stuff ehitatud automaatselt

952
00:46:50,699 --> 00:46:52,240
kasutades neid asju nimetatakse generaatorid.

953
00:46:52,240 --> 00:46:54,620
>> Nii lugesin seda, kui soovite.

954
00:46:54,620 --> 00:46:59,110
Lihtsalt minna Yeoman, Y-E-O-M-A-N ja
leiad generaatorid nagu need.

955
00:46:59,110 --> 00:47:01,263
Ja generaatorid nagu
Neist sa lihtsalt meeldib üks

956
00:47:01,263 --> 00:47:03,010
on paar käsureakäsud.

957
00:47:03,010 --> 00:47:05,530
Seda saad tellingud läbi
Kogu Reageerima app teile.

958
00:47:05,530 --> 00:47:10,470
Seda saad sa kõik käsitsi torustik,
ja grunt töö sinu jaoks,

959
00:47:10,470 --> 00:47:13,010
ja see on põhjus, miks teil keskenduda ainult
just kirjalikult reageerida.

960
00:47:13,010 --> 00:47:16,739
>> Nii et põhimõtteliselt hoone
Reageerida app on nontrivial.

961
00:47:16,739 --> 00:47:19,530
See on juhtmega kõik koos, kuid
on vahendid, et teen seda sinu jaoks.

962
00:47:19,530 --> 00:47:23,070
Nii et kui sa tahad teha Reageerima
app, proovige teha seda nii.

963
00:47:23,070 --> 00:47:26,360
Kui tahad lihtsalt proovida,
võite proovida kasutada seda CodePen

964
00:47:26,360 --> 00:47:28,550
sest see CodePen on
kõik reageerivad juhtmestik.

965
00:47:28,550 --> 00:47:30,240
Ma olen teinud kõik tööd teile juba.

966
00:47:30,240 --> 00:47:34,610
>> Nii et kui sa tahad teha nagu
tootmise vabastada Reageerima app,

967
00:47:34,610 --> 00:47:37,220
proovida ühte neist generaatorid.

968
00:47:37,220 --> 00:47:40,240
Kui tahad lihtsalt mängida
ümber, on sageli väärt lihtsalt

969
00:47:40,240 --> 00:47:44,490
nagu proovida mängides ringi CodePen siin.

970
00:47:44,490 --> 00:47:45,470
Kõlab hästi?

971
00:47:45,470 --> 00:47:45,970
Cool.

972
00:47:45,970 --> 00:47:47,890
>> Nii et kõik, mis mul.

973
00:47:47,890 --> 00:47:52,470
Jällegi, kõik koodi ja nende näideteks on
saab olema sellel veebilehel siin.

974
00:47:52,470 --> 00:47:55,509
Niisiis, jälle, me ei räägi
umbes palju süntaks reageerida

975
00:47:55,509 --> 00:47:57,550
kuid leiab üles kõik
vähe süntaktiline üksikasjad,

976
00:47:57,550 --> 00:48:00,320
see kõik saab olema saadaval
Käesoleval veebilehel siin.

977
00:48:00,320 --> 00:48:02,660
>> Nii et ma soovitan nagu
tegema esimese sammu.

978
00:48:02,660 --> 00:48:06,277
Pane see oma CodePen.

979
00:48:06,277 --> 00:48:08,110
Proovige tööd tehes
see teine ​​samm.

980
00:48:08,110 --> 00:48:11,310
Seal on neljas etapp, ja lihtsalt
vaata kus sa saad selle.

981
00:48:11,310 --> 00:48:14,840
>> Veel küsimusi, vaadake
välja, et lehel või kirjuta mulle.

982
00:48:14,840 --> 00:48:16,490
See on minu e-posti.

983
00:48:16,490 --> 00:48:19,885
Aga ma armastan sind aidata mis tahes
Teie küsimustele umbes reageerida.

984
00:48:19,885 --> 00:48:21,010
Niisiis, jah, see on kõik, mis mul on.

985
00:48:21,010 --> 00:48:23,410
Tänan teid kõiki väga
vaadates või käivad.

986
00:48:23,410 --> 00:48:26,820
Ja ma võtan küsimusi
sa oleks võinud pärast seda nüüd.

987
00:48:26,820 --> 00:48:29,140
Nii aitäh kõigile vaatamiseks.

988
00:48:29,140 --> 00:48:31,270