1
00:00:00,000 --> 00:00:02,910
>> [Muzikos grojimo]

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

3
00:00:04,850 --> 00:00:07,275
>> Neel Mehta: Štai jis eina.

4
00:00:07,275 --> 00:00:11,070
>> Na, visi, kviečiame internete
programos ateities su reaguoti.

5
00:00:11,070 --> 00:00:11,870
Tai CS50.

6
00:00:11,870 --> 00:00:12,930
Mano vardas Neel.

7
00:00:12,930 --> 00:00:17,689
Aš TA už CS50 ir antrakursis
Harvardo koledže ir labai, labai

8
00:00:17,689 --> 00:00:18,730
aistringa kūrėjas.

9
00:00:18,730 --> 00:00:20,730
Taigi, aš labai įdomu
kalbėti su jumis šiandien

10
00:00:20,730 --> 00:00:24,550
ar esate čia arba namuose
žiūrėti, apie React, kuris yra, vėl

11
00:00:24,550 --> 00:00:27,270
kaip sakiau, web apps ateityje.

12
00:00:27,270 --> 00:00:29,055
>> Taigi Pareikšk yra interneto sistema.

13
00:00:29,055 --> 00:00:30,930
Ir kaip aš jau sakau
kad kai kurie žmonės čia

14
00:00:30,930 --> 00:00:33,400
pagrindų yra tik
rinkinys įrankių, galite naudoti

15
00:00:33,400 --> 00:00:35,770
susisteminti ir sukurti savo Web App ".

16
00:00:35,770 --> 00:00:39,010
Ir žiniatinklio programos yra, vėlgi, svetainės
kad yra interaktyvus, kaip "Facebook",

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

18
00:00:42,330 --> 00:00:45,590
>> Taigi "Facebook" yra interneto sistema
kuris buvo sukurtas "Facebook"

19
00:00:45,590 --> 00:00:48,060
pora metų back-- reaguoti yra.

20
00:00:48,060 --> 00:00:50,830
Tai nuo to laiko buvo naudojama
"Facebook" savo mobiliajame apps

21
00:00:50,830 --> 00:00:52,460
ir Web App ", Instagram.

22
00:00:52,460 --> 00:00:56,350
Khano akademija yra dar vienas
garsių anksti taikantysis reaguoti.

23
00:00:56,350 --> 00:00:58,630
>> Tai tikrai buvo gauti
labai populiarus.

24
00:00:58,630 --> 00:01:03,420
Jei jūs kada nors naudoti tokius dalykus kaip kampinius arba
Pagrindas, tai yra iš tos pačios šeimos,

25
00:01:03,420 --> 00:01:05,830
tačiau ji turi, nes kiek
viršys jų populiarumą.

26
00:01:05,830 --> 00:01:06,890
Tai karšta naujas dalykas.

27
00:01:06,890 --> 00:01:09,590
Tai tikrai, tikrai didžiulis.

28
00:01:09,590 --> 00:01:13,470
>> Ir taip reaguoti yra gera ne tik kaip
Web sistema statybinių sąsajos.

29
00:01:13,470 --> 00:01:16,020
Tai geras pastato interneto sąsajos.

30
00:01:16,020 --> 00:01:18,350
Taip pat dalykas
vadinamas reaguoti Gimtoji kuris

31
00:01:18,350 --> 00:01:22,200
leidžia jums sukurti sąsajas
"Android" ir "iOS"

32
00:01:22,200 --> 00:01:26,390
o gal kitos platformos ateityje
naudojant tik tą patį JavaScript kodą.

33
00:01:26,390 --> 00:01:31,130
Jūs galite naudoti tą patį
JavaScript kodą teikti interneto svetaines,

34
00:01:31,130 --> 00:01:33,040
teikti Android Apps ir IOS programas.

35
00:01:33,040 --> 00:01:35,000
>> Tai labai, labai puikus laikas.

36
00:01:35,000 --> 00:01:37,070
Tai tikrai, tikrai cool galimybė.

37
00:01:37,070 --> 00:01:42,020
Tai tikrai universalus interneto
sąsaja kūrimo įrankis,

38
00:01:42,020 --> 00:01:44,420
todėl tai yra labai, labai
Svarbu žinoti.

39
00:01:44,420 --> 00:01:46,949
Ir, kaip man buvo informuoti žmones
Prieš tai, manau,

40
00:01:46,949 --> 00:01:48,990
ketina keisti kaip mes
kurti interneto programas amžinai.

41
00:01:48,990 --> 00:01:55,820
Taigi, tai gal šiek tiek Hiperbolė, bet aš
manau, kad tai gana geras dalykas žinoti.

42
00:01:55,820 --> 00:01:57,580
>> Gerai, kad tai, kas reaguoja?

43
00:01:57,580 --> 00:02:01,020
Reaguoti yra pagrindas galite
naudoti statybos sąsajas.

44
00:02:01,020 --> 00:02:03,240
Sąsaja yra, vėlgi,
interneto puslapis, tiesa?

45
00:02:03,240 --> 00:02:06,340
Taigi čia Instagram.com, naudojimas reaguoti.

46
00:02:06,340 --> 00:02:08,740
>> Reaguoti yra pastatytas ant
idėja komponentų.

47
00:02:08,740 --> 00:02:11,900
Komponentas yra HTML
elementas ant steroidų,

48
00:02:11,900 --> 00:02:14,470
taip HTML elementas yra tarsi mygtuką.

49
00:02:14,470 --> 00:02:15,250
Tai dalis.

50
00:02:15,250 --> 00:02:17,500
Tai galva, tiesa?

51
00:02:17,500 --> 00:02:22,740
Ir Instagram bus naudotis, tačiau ji
taip pat naudoti komponentus reaguoti.

52
00:02:22,740 --> 00:02:25,740
>> Pareikšk komponentai
Souped up HTML elementai

53
00:02:25,740 --> 00:02:28,100
kad turi savo elgesį
pateikta per juos.

54
00:02:28,100 --> 00:02:31,800
Taigi, kaip, pavyzdžiui, galėtume turėti
laikas elementas, laikas komponentas,

55
00:02:31,800 --> 00:02:34,095
kuri bus pateikta kaip
laikas antspaudas, žinote,

56
00:02:34,095 --> 00:02:37,170
profilis, komponentas, kuris
bus pateikta aprašymą vaizdas

57
00:02:37,170 --> 00:02:38,820
ir asmens pavadinimą.

58
00:02:38,820 --> 00:02:42,930
Jis gali turėti kaip skaitiklį, kuris
gali tikėtis kaip ir mėgsta skaičius,

59
00:02:42,930 --> 00:02:45,610
ir jei paspausite ant jos, jis bus
padidinti mėgsta, skaičių.

60
00:02:45,610 --> 00:02:48,200
Komponentas yra tik
krūva HTML kodas, kad

61
00:02:48,200 --> 00:02:50,520
turi funkcionalumą
suvynioti viduje ji.

62
00:02:50,520 --> 00:02:53,770
Taigi, tai, kaip HTML elementas
ant steroidų, kaip sakiau anksčiau.

63
00:02:53,770 --> 00:02:56,270
Galite imtis šių komponentų,
ir jūs galite įdėti juos kartu

64
00:02:56,270 --> 00:02:59,060
užmegzti naujus komponentus, kad
Šiuo atveju, po komponentą,

65
00:02:59,060 --> 00:03:00,505
kuriame yra visa tai stuff.

66
00:03:00,505 --> 00:03:04,050
Tai būtų tokia Laikas, profilis,
LikeCounter, gal komentaras

67
00:03:04,050 --> 00:03:06,100
o gal pati vaizdą.

68
00:03:06,100 --> 00:03:10,810
Ir taip žiniatinklio programos yra tiesiog pastatytas atsižvelgiant
dalys ir jų išleidimą kartu.

69
00:03:10,810 --> 00:03:15,620
Instagram pašaras yra nieko daugiau, nei
etatų vienas po kito krūva,

70
00:03:15,620 --> 00:03:19,032
kiekvienos žinutės yra kaip laikas,
Profilio, LikeCounter ir pan.

71
00:03:19,032 --> 00:03:20,490
Tai tipo kaip statyti namą.

72
00:03:20,490 --> 00:03:22,660
Jūs neturite statyti
namas iš viršaus į apačią,.

73
00:03:22,660 --> 00:03:24,960
Jūs imtis components-- jus
imtis, pavyzdžiui vonios kambaryje.

74
00:03:24,960 --> 00:03:28,320
Jūs imtis bedroom-- jums laikytis jų
kartu, ir jūs turite naują komponentą.

75
00:03:28,320 --> 00:03:29,760
Turite naują dalį namo.

76
00:03:29,760 --> 00:03:32,860
>> Taigi reaguoti yra viskas pastatyta aplink
Šis komponentų idėja, kad

77
00:03:32,860 --> 00:03:36,600
yra interaktyvus, kad yra deklaratyvi.

78
00:03:36,600 --> 00:03:39,650
Kaip jums tiesiog pasakyti, ką
profilis yra, ir ji perduoda jį.

79
00:03:39,650 --> 00:03:40,600
Jie komponentų surenkama.

80
00:03:40,600 --> 00:03:43,880
Galite imtis laiko ir aprašymą, įdėti
juos kartu, kad kažkas geriau.

81
00:03:43,880 --> 00:03:47,770
Ir jie daugkartinio naudojimo, todėl, jei jūs
turi kodą eiti pareigas,

82
00:03:47,770 --> 00:03:49,440
galite įdėti, kad bet kur.

83
00:03:49,440 --> 00:03:53,160
>> Jūs galite įdėti savo Instagram
dalykas, dėl savo svetainę.

84
00:03:53,160 --> 00:03:56,830
Jūs galite įdėti į "Facebook", pavyzdžiui,
tol, kol ji naudoja React, taip pat.

85
00:03:56,830 --> 00:04:00,360
Taigi sudedamosios dalys yra tikrai, tikrai, tikrai
galingi blokai internete

86
00:04:00,360 --> 00:04:04,180
, kuris gali būti naudojamas bet kur ir įdėti
kartu, kad naujas pastatas blokai.

87
00:04:04,180 --> 00:04:07,159
Štai labai, labai
aukšto lygio apžvalga.

88
00:04:07,159 --> 00:04:09,200
Taigi, dar kartą, jei turite
bet bet kuriuo momentu klausimai

89
00:04:09,200 --> 00:04:14,470
apie reaktoriaus, filosofija
kodavimas, sustabdyti mane, ir leiskite man žinoti.

90
00:04:14,470 --> 00:04:18,420
>> Gerai, kad reaguos yra kietas, nes juo
turi skirtingą būdą ieško

91
00:04:18,420 --> 00:04:19,870
tuo, kaip jums sukurti interneto programas.

92
00:04:19,870 --> 00:04:23,620
Jūs tikriausiai girdėjote apie MVC A
modelis jums kontroliuoti į CS50 ar kas

93
00:04:23,620 --> 00:04:25,940
kita zondavimo klasių galite naudoti.

94
00:04:25,940 --> 00:04:29,000
Ir dauguma sistemos yra
pastatytas aplink MVC idėja.

95
00:04:29,000 --> 00:04:30,410
Reaguoja yra ne.

96
00:04:30,410 --> 00:04:32,980
Reaguoti yra pastatytas aplink idėja
iš ištisinių duomenų srauto

97
00:04:32,980 --> 00:04:36,510
kaip matyti šioje schemoje ar grafinį čia.

98
00:04:36,510 --> 00:04:38,260
>> Iš esmės, jūs turite duomenų šaltinį.

99
00:04:38,260 --> 00:04:42,380
Ir duomenų šaltinį spręs
Kaip išdėstyti tam tikrus komponentus.

100
00:04:42,380 --> 00:04:45,452
Ir komponentai
tada, kai jie pakeisti,

101
00:04:45,452 --> 00:04:47,160
jie pasakys
duomenų šaltinis keistis.

102
00:04:47,160 --> 00:04:49,350
>> Norėdami naudoti Instagram
Pavyzdžiui, jums gali tekti

103
00:04:49,350 --> 00:04:52,050
aukštesnįjį objektų, tokių kaip sąrašą
į duomenų bazę ar kažką.

104
00:04:52,050 --> 00:04:53,310
Kad duomenų.

105
00:04:53,310 --> 00:04:57,600
Ir tada mūsų post komponentai
imsis, kad duomenys,

106
00:04:57,600 --> 00:05:01,830
ir naudoti tuos duomenis teikia
ant ekrano dalykas.

107
00:05:01,830 --> 00:05:04,300
Štai ką rodyklė
iš duomenų, kad komponentas yra,

108
00:05:04,300 --> 00:05:07,930
ir tada, kad tie patys duomenys yra naudojamas
teikti keletą sudėtinių dalių krūva.

109
00:05:07,930 --> 00:05:10,290
>> Facebook Messenger ", už
pavyzdys, kuris yra React,

110
00:05:10,290 --> 00:05:13,410
jums gali turėti sąrašą
pranešimus kaip savo duomenų šaltinį.

111
00:05:13,410 --> 00:05:15,927
Ir tai taptų ne
tik žinučių sąrašas

112
00:05:15,927 --> 00:05:17,510
bet taip pat draugų sąrašą turite.

113
00:05:17,510 --> 00:05:19,200
Turite neskaitytų skaičius.

114
00:05:19,200 --> 00:05:23,330
Gal taip pat teikia "Facebook dalyką
tai ne iš Facebook.com apačioje.

115
00:05:23,330 --> 00:05:25,610
Tie patys duomenys yra
vieno šaltinio tiesos

116
00:05:25,610 --> 00:05:28,290
ir kad sukelia daug
komponentai suteiktos.

117
00:05:28,290 --> 00:05:30,290
Ir kiekvieną kartą, kai viena iš tų,
komponentai yra pakeistas,

118
00:05:30,290 --> 00:05:32,320
jis eina atgal ir
keičia duomenų šaltinį.

119
00:05:32,320 --> 00:05:33,460
>> Jūs išsiųsti žinutę, tiesa?

120
00:05:33,460 --> 00:05:34,780
Tai keičia duomenų šaltinį.

121
00:05:34,780 --> 00:05:39,490
Jūs skaityti pranešimus,
todėl jūs nustatyti neskaitytą 0.

122
00:05:39,490 --> 00:05:41,136
Tai keičia duomenų šaltinį.

123
00:05:41,136 --> 00:05:44,010
Ir pastebėti, kad visi šie vienas
arrow grįžta į tą pačią duomenų

124
00:05:44,010 --> 00:05:47,662
šaltinis, todėl žinote,
suteiktas tam tikras duomenų rinkinys,

125
00:05:47,662 --> 00:05:49,870
jūs tiksliai žinote, ką
puslapis atrodys.

126
00:05:49,870 --> 00:05:50,700
Tai deterministinis.

127
00:05:50,700 --> 00:05:53,451
Jūs žinote, nes tam tikrus duomenis, kas
puslapis ketina atrodyti.

128
00:05:53,451 --> 00:05:56,158
Jūs galite prognozuoti, kaip jis ketina
elgtis ir kaip viskas vyksta

129
00:05:56,158 --> 00:05:57,650
dirbti, kai jie kartu sudėjus.

130
00:05:57,650 --> 00:06:00,410
>> Ir jei aš turėjo milijoną komponentai
čia jis elgtųsi tas pats, tiesa?

131
00:06:00,410 --> 00:06:02,290
Jūs neturės jokių
keistam jungtys.

132
00:06:02,290 --> 00:06:04,120
Vienas duomenys lydyti milijoną komponentus.

133
00:06:04,120 --> 00:06:06,879
A mln komponentai galėtų
grįžti ir redaguoti duomenis.

134
00:06:06,879 --> 00:06:07,920
Ir todėl tai yra labai gražus.

135
00:06:07,920 --> 00:06:10,870
Mes statome komponentų surenkama,
lengvai keičiamo dydžio Web Apps.

136
00:06:10,870 --> 00:06:13,150
>> Jūs turite vieną duomenų šaltinį,
tiesos šaltinis.

137
00:06:13,150 --> 00:06:15,790
Tai pasako savo komponentus
Kaip išdėstyti puslapį,

138
00:06:15,790 --> 00:06:18,190
ir komponentai
tvarkyti sąveiką.

139
00:06:18,190 --> 00:06:20,150
Ir jei jie nori pakeisti
dalykų, tiesiog grįžti

140
00:06:20,150 --> 00:06:21,750
ir pasakykite duomenų šaltinis keistis.

141
00:06:21,750 --> 00:06:22,850
Logiška?

142
00:06:22,850 --> 00:06:26,010
Taigi Pareikšk yra visa informacija apie supratimą
kaip sukurti komponentas

143
00:06:26,010 --> 00:06:29,540
ir kaip padaryti jūsų komponentą
bendrauti su išoriniu pasauliu.

144
00:06:29,540 --> 00:06:31,850
>> Padaryti sudėtinės jaunuolystė
su išoriniu pasaulyje

145
00:06:31,850 --> 00:06:34,490
naudoja kitą technologiją
vadinamas Fliusas, kuris

146
00:06:34,490 --> 00:06:36,872
yra sistema, kuri yra
pridėta ant React.

147
00:06:36,872 --> 00:06:38,330
Mes neketiname kalbėti apie tai.

148
00:06:38,330 --> 00:06:42,990
Mes ketiname kalbėti daugiau apie, atsižvelgiant
duomenys, kaip jūs galite padaryti komponentas?

149
00:06:42,990 --> 00:06:47,010
>> Ir taip reaguoti yra tikrai cool, nes jus
galite naudoti ją su bet nugaros pabaigoje norite.

150
00:06:47,010 --> 00:06:50,480
Jei turite kaip Python nugaros pabaigoje,
Jei jūsų Python gali išspjauti kai kuriuos duomenis,

151
00:06:50,480 --> 00:06:51,610
Pareikšk gali ją suteikti.

152
00:06:51,610 --> 00:06:54,700
Jei nėra JS išėjimai
Duomenų, reaguoti jis tampa.

153
00:06:54,700 --> 00:06:56,890
Ruby bėgiai su
duomenys, reaguoti jis tampa.

154
00:06:56,890 --> 00:07:01,860
>> Taigi reaguoti iš esmės yra interneto
view-- priekis su komponentais

155
00:07:01,860 --> 00:07:03,910
bet kokio duomenų šaltinio kokia.

156
00:07:03,910 --> 00:07:07,145
Ir taip vyksta nuo duomenų šaltinio,
reaguoti komponentai yra gana lengva.

157
00:07:07,145 --> 00:07:08,770
Ėjimas į kitą pusę yra šiek tiek sunkiau.

158
00:07:08,770 --> 00:07:10,462
Tai naudoja Flux, kaip jau minėjau anksčiau.

159
00:07:10,462 --> 00:07:11,420
Mes ne gauti į tai.

160
00:07:11,420 --> 00:07:13,740
Mes daugiau dėmesio skiriama
duomenų-to-komponento pusėje.

161
00:07:13,740 --> 00:07:15,880
Šiuo būdu jūs galite padaryti
cool, įdomus Web Apps.

162
00:07:15,880 --> 00:07:19,870
Tai neturės įtakos išorinį pasaulį
dabar, bet tai jau kita istorija.

163
00:07:19,870 --> 00:07:22,210
>> Gerai, kad jei buvo čia
mano paskutinio seminaro

164
00:07:22,210 --> 00:07:26,610
jūs žinosite, kad visi už kodas
šiandien aptarimas bus šiuo adresu

165
00:07:26,610 --> 00:07:29,320
čia, atsiprašau, tai URL čia.

166
00:07:29,320 --> 00:07:32,730
Ir iš esmės mes ketiname eiti
per keturis žingsnius, gal penki,

167
00:07:32,730 --> 00:07:33,510
tikriausiai ne penki.

168
00:07:33,510 --> 00:07:37,300
Mes perkelti per keturis žingsnius
pastato mėginys reaguoja programą.

169
00:07:37,300 --> 00:07:39,550
Ir taip visą kodą
kiekvienam žingsnyje

170
00:07:39,550 --> 00:07:42,216
bus čia, todėl, jei
jūs taip kartu namuose,

171
00:07:42,216 --> 00:07:43,991
nedvejodami žiūrinėti šį kodą.

172
00:07:43,991 --> 00:07:46,740
Jei taip palei čia
mes bus parodyti jį ekrane,

173
00:07:46,740 --> 00:07:47,739
todėl nereikia nerimauti apie tai.

174
00:07:47,739 --> 00:07:50,930
Bet jei jūs esate namie, jaučiasi
nemokamai aplankyti šią svetainę.

175
00:07:50,930 --> 00:07:56,400
Ir, taip, jums turėtų būti suteikta galimybė gauti
visi kodą, kurį kada nors reikia čia.

176
00:07:56,400 --> 00:08:01,380
Taigi tai gera Cheat sheet, taip pat
už savo ateitį nuotykius su reaguoti.

177
00:08:01,380 --> 00:08:04,490
Cool, todėl, jei visi, kas čia
ir net jei esate namuose,

178
00:08:04,490 --> 00:08:11,580
atsigriebti šią svetainę, is.gd/cs50react,
ne kapitalo, nėra pabraukimas, nėra nieko.

179
00:08:11,580 --> 00:08:15,849
>> Pamatysite puslapį, kuris atrodo
šiek tiek panašus į šį.

180
00:08:15,849 --> 00:08:17,140
Tai yra dalykas, vadinamas CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen yra bendradarbiavimo
kodavimo aplinka

182
00:08:20,030 --> 00:08:23,364
su kuriais galiu rašyti kodą čia, ir
jis bus automatiškai išsiųstas jums.

183
00:08:23,364 --> 00:08:24,780
Ir šiuo būdu, galiu rašyti kodą.

184
00:08:24,780 --> 00:08:26,920
Galiu paleisti kodą čia.

185
00:08:26,920 --> 00:08:33,470
>> Dėl example-- ir jei jis reloads-- pamatyti,
Bėgu JavaScript puslapyje

186
00:08:33,470 --> 00:08:36,390
čia, ir jis bus
automatiškai tampa tinklalapį

187
00:08:36,390 --> 00:08:37,980
su šiuo JavaScript.

188
00:08:37,980 --> 00:08:40,039
Ir taip, tai yra būdas
mums išbandyti kodą

189
00:08:40,039 --> 00:08:43,089
tikrai greitai nenaudodami
Mūsų ID arba pasinaudokite mūsų vietinio kompiuterio

190
00:08:43,089 --> 00:08:44,290
ar kas.

191
00:08:44,290 --> 00:08:47,670
Tai labai greitas būdas jums maketą
ir išbandyti įvairius kodą.

192
00:08:47,670 --> 00:08:50,560
>> Taigi, aš ruošiuosi būti atsižvelgiant
pavyzdys kodas, išleisti jį čia.

193
00:08:50,560 --> 00:08:52,374
Mes ketiname dirbti per ją.

194
00:08:52,374 --> 00:08:54,540
Ir jei esate namuose, jūs
gali traukti tai taip pat.

195
00:08:54,540 --> 00:08:57,530
Ir aš jau įdiegta
Pareikšk čia, todėl galite tiesiog

196
00:08:57,530 --> 00:09:00,770
parašyti savo kodą čia, ir
pabandykite jį kaip savo žaidimų aikštelėje.

197
00:09:00,770 --> 00:09:04,940
>> Taip, jei kiekvienas
atverti šią nuorodą čia.

198
00:09:04,940 --> 00:09:08,080
Prašau duoti man nykščius
vieną kartą jūs turite jį atidaryti.

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

200
00:09:10,960 --> 00:09:13,770
Cool, vėsioje gerai.

201
00:09:13,770 --> 00:09:16,914
Nėra nieko čia dabar, bet
mes pakeisime, kad labai greitai.

202
00:09:16,914 --> 00:09:21,250
>> Gerai, kad Pareikšk yra Javaskriptą
biblioteka, ir kaip toks,

203
00:09:21,250 --> 00:09:24,480
reikia išmanyti JavaScript,
kuri yra žiniatinklio programavimo kalba.

204
00:09:24,480 --> 00:09:27,660
Ir tai naudojama kitų dalykų
dabar taip pat, bet pirmiausia interneto plėtoti

205
00:09:27,660 --> 00:09:32,040
kalba, todėl, jei esate susipažinę su
, kad perskaičiau svetainę vadinamas JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Nuostabu.

207
00:09:32,700 --> 00:09:34,240
Galite sužinoti JavaScript
pusvalandį.

208
00:09:34,240 --> 00:09:34,990
Tai neįtikėtina.

209
00:09:34,990 --> 00:09:36,420
>> Taigi suteikti jai skaityti.

210
00:09:36,420 --> 00:09:39,960
Mes taip pat yra HTML daug, nes čia
mes projektuojant tinklalapius žinoma.

211
00:09:39,960 --> 00:09:43,890
Taigi, jei esate susipažinę su
HTML, patikrinkite HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Manau, mokymosi Pareikšk yra
milijoną kartų lengviau, jei jau

213
00:09:46,520 --> 00:09:47,892
žinoti blokai.

214
00:09:47,892 --> 00:09:50,600
Jei turite komponentus, tai
lengva padaryti didesnę komponentą.

215
00:09:50,600 --> 00:09:51,860
Štai reaguoti kalbą jums.

216
00:09:51,860 --> 00:09:54,270
>> Taigi pirmyn ir suteikti
šie dalykai perskaitymo.

217
00:09:54,270 --> 00:09:55,070
Pauzė šį vaizdo įrašą.

218
00:09:55,070 --> 00:09:57,440
Give it a skaityti, jei esate
namuose, jei nesate

219
00:09:57,440 --> 00:10:00,794
susipažinę su HTML arba JavaScript

220
00:10:00,794 --> 00:10:02,960
Gerai, kad tai, ką mes ketiname
padaryti, tai mes ketiname padaryti

221
00:10:02,960 --> 00:10:06,470
labai paprastas iliustracijų app naudojant reaguoti.

222
00:10:06,470 --> 00:10:08,210
Mes ketiname turėti iliustracijų.

223
00:10:08,210 --> 00:10:09,880
Jūs galite apversti kortelės ir atgal.

224
00:10:09,880 --> 00:10:12,399
Ir mes taip pat turėsite iš sąrašo
visos kortos, kad mes,

225
00:10:12,399 --> 00:10:14,190
ir jei mes jaučiatės
ambicingas, mes galime būti

226
00:10:14,190 --> 00:10:17,060
galėtų perjungti
automobiliai pagal paspaudę ant jų.

227
00:10:17,060 --> 00:10:20,360
>> Bet tai yra, savo plikomis
kaulai, labai paprastas reaguoti programą.

228
00:10:20,360 --> 00:10:22,560
Ir taip iš tikrųjų tai yra
nėra trivialus įgyvendinti,

229
00:10:22,560 --> 00:10:26,030
bet mes ketiname parodyti, kad jei jūs darote
tai, tai labai, labai lengva jį pratęsti

230
00:10:26,030 --> 00:10:27,680
jei kiti žmonės padės jums su juo.

231
00:10:27,680 --> 00:10:33,750
Taigi mes ketiname eiti per keturių žingsnių
pradedant nuo nulio statyti tai.

232
00:10:33,750 --> 00:10:36,740
>> Gerai, kad keturi žingsniai, mes
pradėti nuo pirmojo žingsnio.

233
00:10:36,740 --> 00:10:39,790
Pirmasis žingsnis bus
kurti savo pirmąjį komponentą.

234
00:10:39,790 --> 00:10:44,830
Kaip minėjau anksčiau, komponentas Pareikšk
yra tik HTML elementas ant steroidų.

235
00:10:44,830 --> 00:10:49,660
Jame taip pat nurodoma HTML
ir kai elgesį, ir ji

236
00:10:49,660 --> 00:10:52,600
bus nurodyti kaip žmonės
gali sąveikauti su juo how

237
00:10:52,600 --> 00:10:54,270
ji turės vidaus būklę.

238
00:10:54,270 --> 00:10:57,630
Kaip mygtuką žinosite, pavyzdžiui, kaip daugelis
kartų jis buvo paspaudėte pavyzdžiui,

239
00:10:57,630 --> 00:11:01,010
ir jis žinos, kaip nustatyti save.

240
00:11:01,010 --> 00:11:04,430
>> Taigi eikime į priekį ir kurti savo
Pirmasis komponentas, naudojant "JavaScript".

241
00:11:04,430 --> 00:11:09,711
Taigi, jei sintaksė atrodo keistai,
tai todėl, kad jis rūšies yra.

242
00:11:09,711 --> 00:11:11,710
Taigi, dar kartą, mes einame
padaryti kintamasis vadinamas

243
00:11:11,710 --> 00:11:14,580
App naudojant raktažodį tegul,
kuris daro kintamąjį,

244
00:11:14,580 --> 00:11:18,210
tegul App vienodą React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Reaguoja yra biblioteka, ir turi
Sukurti klasės funkciją.

246
00:11:22,609 --> 00:11:24,400
Ir ši funkcija yra
kodo tiek, kad jus

247
00:11:24,400 --> 00:11:29,090
galite naudoti norėdami sukurti naują
tipo reaguoti komponentą.

248
00:11:29,090 --> 00:11:32,780
Ir taip React.createClass
pademonstravo komponentą,

249
00:11:32,780 --> 00:11:35,270
ir tai komponentas
sugebėti daryti stuff.

250
00:11:35,270 --> 00:11:40,460
Svarbiausia tai galite padaryti, tai padaryti
kažkas, padaryti kaip funkcija.

251
00:11:40,460 --> 00:11:44,500
>> Vėlgi, jei šis rodiklis nėra akivaizdu, kad
tu, aš rekomenduoju jums eiti JS katėms

252
00:11:44,500 --> 00:11:45,682
ir check it out.

253
00:11:45,682 --> 00:11:47,710
Ar tai Mastelis pakankamai gerai?

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

255
00:11:48,490 --> 00:11:50,670
>> Taigi kiekvienas komponentas poreikiai
turėti įpareigoti funkciją.

256
00:11:50,670 --> 00:11:53,010
Užkrauta funkcija sako,
ką man spausdinti ekrane?

257
00:11:53,010 --> 00:11:54,760
Bet komponentas yra
nenaudingas, jei jis nėra

258
00:11:54,760 --> 00:11:58,060
Žinokite, ką spausdinti ant ekrano, todėl
Jums reikia turėti įpareigoti funkciją.

259
00:11:58,060 --> 00:12:01,904
>> Taigi tinko dalykas, jums
tiesiog reikia grįžti šiek tiek HTML.

260
00:12:01,904 --> 00:12:03,820
Ir kas cool kad
ten dalykas, vadinamas

261
00:12:03,820 --> 00:12:08,660
JSX, kuri yra pratęsimas
Javaskriptą, kad yra naudojamas reaguoti.

262
00:12:08,660 --> 00:12:11,845
Tai tegul rašote HTML viduje
Jūsų JavaScript, kurie

263
00:12:11,845 --> 00:12:13,970
skamba keistai, kai rūšies
Pirmą kartą apie tai galvoti,

264
00:12:13,970 --> 00:12:15,553
bet ji daro daug prasmės vėliau.

265
00:12:15,553 --> 00:12:17,430
Taigi, mes galime tai padaryti.

266
00:12:17,430 --> 00:12:21,360
Jei esate susipažinę su HTML, aš žinau,
turime div su bendros paskirties

267
00:12:21,360 --> 00:12:22,790
konteineris stuff.

268
00:12:22,790 --> 00:12:26,380
Mes galime grįžti div, o viduje
DIV, mes galime įdėti stuff.

269
00:12:26,380 --> 00:12:32,390
>> Taigi tarkime, mes norime suteikti tik
tiesi-up iliustracijų dabar.

270
00:12:32,390 --> 00:12:34,890
Iliustracijų, sakyčiau,
turės klausimą ir atsakymą.

271
00:12:34,890 --> 00:12:37,530
Taigi viduje DIV, tegul
atsispausdinti punktą

272
00:12:37,530 --> 00:12:42,155
kad sako question-- Kas yra
Galutinis atsakymas į gyvenimą, Visata?

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

274
00:12:47,640 --> 00:12:50,345
Ir tada atsakymas yra
bus, žinoma, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Tai neateina pat ne visi.

277
00:12:59,730 --> 00:13:04,164
Taip, kad iš esmės galima tikrai
rašyti HTML viduje savo JavaScript.

278
00:13:04,164 --> 00:13:06,330
Ir tai bus
atspausdinti į ekraną.

279
00:13:06,330 --> 00:13:08,250
Taigi pabandykime jį.

280
00:13:08,250 --> 00:13:09,520
>> Taigi, mes turime komponentą.

281
00:13:09,520 --> 00:13:12,210
Turime pasakyti reaguoti įdėti
ant ekrano komponentas

282
00:13:12,210 --> 00:13:18,990
taip React.render, todėl pastebėti, kad mes
gydyti programą kaip ir bet kurio kito elemento.

283
00:13:18,990 --> 00:13:21,010
Mes rašome tai, kaip ji buvo HTML elementas.

284
00:13:21,010 --> 00:13:25,100
Kaip vietoj sakydamas kaip img
už įvaizdį arba p už dalį,

285
00:13:25,100 --> 00:13:28,120
rašote App, todėl App
traktuojami kaip HTML elementas.

286
00:13:28,120 --> 00:13:30,380
Kaip minėjau anksčiau, tai
on steroidų elementas.

287
00:13:30,380 --> 00:13:32,870
>> Taigi jūs padaryti App, ir jūs
suteikti jai vietą įdėti ją.

288
00:13:32,870 --> 00:13:37,170
Ir tai, kaip galite
pasakyti, kur įdėti.

289
00:13:37,170 --> 00:13:46,200
Aš sukūriau paprastą div ant
puslapis vadinama su puslapio ID,

290
00:13:46,200 --> 00:13:48,300
ir tai, kur
elementas ketina eiti.

291
00:13:48,300 --> 00:13:49,841
>> Ir mes neketiname paleisti su HTML.

292
00:13:49,841 --> 00:13:53,145
Iš esmės tai yra ketina gauti
įdėti viduje šio puslapio elementą

293
00:13:53,145 --> 00:13:54,270
kad turime ekrane.

294
00:13:54,270 --> 00:13:59,210
Taigi ji veikia šį kodą, o ji atkreipia tai
dalykas ekrane, todėl čia mes esame.

295
00:13:59,210 --> 00:14:01,770
Mes padarėme mūsų pirmasis reaguoti komponentą.

296
00:14:01,770 --> 00:14:08,000
>> Taigi tik kaip Priminti mes švelniai padarė
naujo tipo komponento, tiesa?

297
00:14:08,000 --> 00:14:10,145
Štai ką React.createClass.

298
00:14:10,145 --> 00:14:12,680
Ir tuo, kad komponentas, mes
papasakojo, ką ji turėtų daryti.

299
00:14:12,680 --> 00:14:15,590
Kai šis komponentas yra
būti spausdinami ant ekrano,

300
00:14:15,590 --> 00:14:19,300
ji bus išspausdinti div su
viduje ji du punktai.

301
00:14:19,300 --> 00:14:24,460
>> Ir ką mes padarėme, mes padarėme naują programą
naudojant kampas laikiklis app notacijos.

302
00:14:24,460 --> 00:14:27,160
Mes tai pasakė, kad jį
viduje puslapio elementas.

303
00:14:27,160 --> 00:14:29,867
Ir taip, ką aš padariau, ji sukūrė
nauja programa iš šio šablono.

304
00:14:29,867 --> 00:14:31,200
Ir tada aš pasakiau, kad padaryti ją.

305
00:14:31,200 --> 00:14:33,680
Taigi sakė, gerai, programa,
ką turėčiau atsispausdinti?

306
00:14:33,680 --> 00:14:36,970
"App sako, eikite spausdinti div
su dviem pastraipomis viduje ji.

307
00:14:36,970 --> 00:14:40,420
Ir voila, ten mūsų div su
viduje ji dvi pastraipas.

308
00:14:40,420 --> 00:14:43,180
Prasmės iki šiol?

309
00:14:43,180 --> 00:14:46,690
>> Taigi, dar kartą, visa iššūkis Pareikšk
yra tik žinant, kaip padaryti komponentus.

310
00:14:46,690 --> 00:14:48,500
Kaip padaryti, kad
komponentai dirbti kartu.

311
00:14:48,500 --> 00:14:51,780
Dabar, kad mes padarėme mūsų pirmasis
komponentas, grįžkime

312
00:14:51,780 --> 00:14:54,284
ir padaryti komponentai pritaikoma.

313
00:14:54,284 --> 00:14:56,700
Taigi jūs žinote, kaip HTML jums
gali duoti savo mygtukus klases?

314
00:14:56,700 --> 00:14:59,146
Jūs galite suteikti savo inkarai href.

315
00:14:59,146 --> 00:15:00,770
Jūs galite suteikti savo įėjimai tipo, tiesa?

316
00:15:00,770 --> 00:15:04,740
Jūs galite suteikti daugiau užsakymą
savybes, visi jūsų elementai

317
00:15:04,740 --> 00:15:06,490
kad jis taptų įdomus.

318
00:15:06,490 --> 00:15:09,030
Ir mes iš tikrųjų galime padaryti
lygiai toks pats dalykas.

319
00:15:09,030 --> 00:15:17,500
>> Taigi tarkime, mes norime, kad mūsų
App eiti padaryti bet kortelę.

320
00:15:17,500 --> 00:15:19,630
Dabar mes tiesiog
lydyti labai kieta kortelę.

321
00:15:19,630 --> 00:15:22,530
Mes žinome, yra tik vienas
Anketa ji gali padaryti, todėl mes

322
00:15:22,530 --> 00:15:25,960
ketina išbandyti ir pakeisti dabar taip
kad mes galime tik suteikti jai tam tikrą kortelę.

323
00:15:25,960 --> 00:15:27,410
Tai bus išspausdinti kortelę.

324
00:15:27,410 --> 00:15:29,380
>> Turėtum pabandyti ir padaryti savo
komponentai labai bendrosios paskirties.

325
00:15:29,380 --> 00:15:31,654
Taigi, aš tokiu būdu gali rašyti
tai mano draugas ir bus kaip,

326
00:15:31,654 --> 00:15:33,820
kokia iliustracijų turite,
tik pamaitinti jį į čia

327
00:15:33,820 --> 00:15:35,290
ir jis tai padarys pats.

328
00:15:35,290 --> 00:15:37,650
Jūs galite įdėti kitą
dalykų savo app.

329
00:15:37,650 --> 00:15:40,600
>> Bet pirmiausia, tegul padalyti
į dvi sudedamąsias dalis,

330
00:15:40,600 --> 00:15:44,500
bet mes nori atskirti kortelę
spausdinimas dalis nuo faktinės app dalis.

331
00:15:44,500 --> 00:15:46,660
Taigi, ką mes galime padaryti, tai mes
galite tai pakeisti iš App

332
00:15:46,660 --> 00:15:51,300
į CardView, tik
naujas vardas app,

333
00:15:51,300 --> 00:15:54,450
ir mes galime padaryti nauja
komponentas vadinamas App,

334
00:15:54,450 --> 00:15:56,336
neturi būti painiojama su senuoju App.

335
00:15:56,336 --> 00:16:00,730
Mes turime createClass,
ir kaip HTML,

336
00:16:00,730 --> 00:16:03,590
galite lizdą reaguoti komponentai
viduje viena nuo kitos.

337
00:16:03,590 --> 00:16:16,430
>> Taigi šiuo atlygina funkcija,
funkcija grąža CardView,

338
00:16:16,430 --> 00:16:18,234
ir tai yra lygiai toks pats dalykas.

339
00:16:18,234 --> 00:16:19,400
Sužinokite, kodėl tai tas pats?

340
00:16:19,400 --> 00:16:22,590
Vietoj utilizavimo tik app, kad
turi div ir prijungimas viduje ji,

341
00:16:22,590 --> 00:16:26,194
app paverčia CardView ir
CardView teikia div ir punktą.

342
00:16:26,194 --> 00:16:29,110
Taigi tai yra mūsų pirmasis pavyzdys
lizdavietes elementai viduje tarpusavyje.

343
00:16:29,110 --> 00:16:32,177
Ar tai prasminga?

344
00:16:32,177 --> 00:16:33,760
Taigi, dar kartą, mes turime CardView elementas.

345
00:16:33,760 --> 00:16:37,250
Mes turime app elementus
kad tai daugiau nei.

346
00:16:37,250 --> 00:16:40,990
>> Gerai, kad mes norime, kad mūsų CardView-- jei jus
duoti gerą CardView tam tikrą kortelę,

347
00:16:40,990 --> 00:16:43,370
jis bus išspausdinti už jus, tiesa?

348
00:16:43,370 --> 00:16:48,050
Taigi, pirmiausia, turime padaryti kortelę,
taip padarykime kortelės objektą.

349
00:16:48,050 --> 00:17:02,930
Taigi leiskite savo kortelę equal--
jei esate visi susipažinę,

350
00:17:02,930 --> 00:17:05,260
tai tik žymėjimas priėmimas
paprieštarauti JavaScript.

351
00:17:05,260 --> 00:17:09,280
Tai tipo kaip struct
C, todėl mes padarė kortelę,

352
00:17:09,280 --> 00:17:15,920
ir taip dabar mes galime perduoti šią kortelę
savybė arba kaip HTML atributas

353
00:17:15,920 --> 00:17:17,290
terminija, mūsų app.

354
00:17:17,290 --> 00:17:20,210
Taigi, mes galime tai padaryti, App
Anketa yra lygus myCard.

355
00:17:20,210 --> 00:17:23,200
>> Jūs žinote, kaip į įvestį, jūs
įvesties lygus tekstą arba mygtuką

356
00:17:23,200 --> 00:17:25,240
klasė lygus BTN už bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Tą pačią idėją, App skyriaus equals--
jūs turite įdėti petnešos here--

358
00:17:29,500 --> 00:17:33,830
"App skyriaus lygus myCard, todėl šis
sako, kad mes turime šią kortelę objektą.

359
00:17:33,830 --> 00:17:39,149
Aš ruošiuosi perduoti jį kaip
nuosavybės į App komponentas.

360
00:17:39,149 --> 00:17:41,440
Ir ši programa komponentas
galės ja naudotis ir daryti

361
00:17:41,440 --> 00:17:43,580
įdomių dalykų su juo.

362
00:17:43,580 --> 00:17:47,650
>> Taigi, mūsų programa bus
suteikta kortelė, todėl dabar,

363
00:17:47,650 --> 00:17:49,980
tegul turi app tiesiog duoti
atsakymas į CardView skyriaus

364
00:17:49,980 --> 00:17:53,110
pati, nes kaip app yra ne
ketina nežino, ką daryti su juo,

365
00:17:53,110 --> 00:17:54,850
todėl mes tiesiog suteikti jį CardView.

366
00:17:54,850 --> 00:18:00,050
Taigi mes perduoti jį į
pačiu būdu, kortelės lygus,

367
00:18:00,050 --> 00:18:05,426
ir todėl kiekvienas komponentas gali prieiti prie
dalykų, kurie buvo pateikti į jį.

368
00:18:05,426 --> 00:18:07,800
Jie gali naudotis savybes
, kurie buvo duota

369
00:18:07,800 --> 00:18:09,470
naudojant šią sintaksę, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Taigi, kas atsitinka čia
Jūs turite myCard objektą.

372
00:18:14,920 --> 00:18:18,250
Jūs perduoti jį į app
naudojant App kortelę lygus myCard.

373
00:18:18,250 --> 00:18:21,420
Tai skyriaus objektas yra skiriamas jūsų app.

374
00:18:21,420 --> 00:18:24,400
App gali jį pasiekti
kaip this.props.card.

375
00:18:24,400 --> 00:18:28,780
Tai tipo kaip paveikslėlį
žino, ką tai šaltinis yra.

376
00:18:28,780 --> 00:18:31,972
>> Ši programa žino, ką tai skyriaus
yra, ir ji gali padaryti medžiagą su juo.

377
00:18:31,972 --> 00:18:32,930
Tai galite padaryti skaičiavimus.

378
00:18:32,930 --> 00:18:35,290
Tai gali padaryti sprendimus, pagrįstus ne apie tai.

379
00:18:35,290 --> 00:18:39,950
>> Nes dabar, aš buvau ketinate perduoti
this.props.card ant CardView.

380
00:18:39,950 --> 00:18:43,420
Prasmės iki šiol?

381
00:18:43,420 --> 00:18:45,210
Tai bus padaryti daugiau prasmės dabar.

382
00:18:45,210 --> 00:18:46,990
>> Gerai, kad dabar mes ne CardView.

383
00:18:46,990 --> 00:18:51,719
Mūsų CardView, atsižvelgiant į kortelę, turėtų
spausdinti savo klausimą ir atsakymą.

384
00:18:51,719 --> 00:18:54,510
Dabar mes tiesiog atspausdinti kai
kieta klausimus ir atsakymus.

385
00:18:54,510 --> 00:18:57,720
Turime išsiaiškinti out-- turime
paklausti kortelę, kad jie davė mums

386
00:18:57,720 --> 00:19:01,360
kas yra klausimas ir atsakymas, ir
tada atspausdinti šį išėję į ekraną.

387
00:19:01,360 --> 00:19:02,470
>> Taigi, mes galime tai padaryti čia.

388
00:19:02,470 --> 00:19:06,135
Be padaryti begin-- pirmasis daryti lygus.

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

390
00:19:08,710 --> 00:19:13,050
Taigi, ką mes darome čia mes žinome, kad
kortelės yra davęs mums su nekilnojamuoju turtu,

391
00:19:13,050 --> 00:19:13,580
tiesa?

392
00:19:13,580 --> 00:19:15,930
Tai mums duota kaip indėlį.

393
00:19:15,930 --> 00:19:19,440
Kaip tai beveik kaip
argumentai funkciją.

394
00:19:19,440 --> 00:19:22,810
Kortelė yra argumentas
beveik į šį CardView.

395
00:19:22,810 --> 00:19:25,239
>> Mes ekstraktas, kad ir įdėti
jį į kintamąjį klausimą.

396
00:19:25,239 --> 00:19:27,280
Įsitikinkite, kad atsakymas nuėjo
kintamojo atsakymą.

397
00:19:27,280 --> 00:19:31,130
Paragina, kad skyriaus atsakyti.

398
00:19:31,130 --> 00:19:35,072
Ir dabar, kad mes turime tai,
vietoj spausdinimo, kad tekstą

399
00:19:35,072 --> 00:19:37,030
mes ketiname spausdinti
ką jie mums davė.

400
00:19:37,030 --> 00:19:43,580
>> Taigi tai stuff-- todėl mes ketiname
irtis atsakyti į pirmojo klausimo.

401
00:19:43,580 --> 00:19:46,380
Leiskite pamatyti, jei tai veikia.

402
00:19:46,380 --> 00:19:52,800
Cool, tad dėti per jį
dar kartą tiesiog būti tikri.

403
00:19:52,800 --> 00:20:00,470
>> Taigi, mano kortelė yra skyriaus objektą, ir mes
yra duoti, kad kortelę app.

404
00:20:00,470 --> 00:20:04,790
Ir app ketina imtis
kortelę ir suteikti jai į CardView.

405
00:20:04,790 --> 00:20:09,190
Ir tai CardView sako, jei jūs
man jokio iliustracijų objektą,

406
00:20:09,190 --> 00:20:11,920
Aš atsispausdinti savo klausimą
ir jos atsakymas, tiesa?

407
00:20:11,920 --> 00:20:14,590
>> Taigi, ką aš galėčiau padaryti, tai galiu
siųsti šį kodą, pirmasis

408
00:20:14,590 --> 00:20:16,580
kaip 10 eilučių mano kodas, mano draugas.

409
00:20:16,580 --> 00:20:18,820
Jis galėjo įdėti jį į
jo pareiškimui.

410
00:20:18,820 --> 00:20:27,200
Ir tol, kol jis padarė tą patį,
kaip CardView skyriaus lygi tai,

411
00:20:27,200 --> 00:20:30,580
tol, kol jis sukūrė CardView
ir davė jai reikiamą informaciją,

412
00:20:30,580 --> 00:20:31,987
jis galėtų teikti savo kortelę.

413
00:20:31,987 --> 00:20:34,320
Ir todėl šis būdas, tai tikrai
kietas būdas jums sukurti

414
00:20:34,320 --> 00:20:35,906
komponentai, kurie naudoja tarpusavyje, tiesa?

415
00:20:35,906 --> 00:20:38,280
Ši kortelė, galėčiau paskelbti
tai CardView internete,

416
00:20:38,280 --> 00:20:39,790
ir žmonės galėtų jį naudoti.

417
00:20:39,790 --> 00:20:45,070
Taigi, iš esmės, tai kaip viena iš
standartinės funkcijos, C biblioteką.

418
00:20:45,070 --> 00:20:47,280
>> Tai funkcija, kur
kažkas parašė ją.

419
00:20:47,280 --> 00:20:48,419
Jūs suteikti tam tikrą įvestį.

420
00:20:48,419 --> 00:20:49,710
Tai bus pagaminti tam tikrą produkciją.

421
00:20:49,710 --> 00:20:50,890
Jūs nerūpi, kaip ji veikia iš vidaus.

422
00:20:50,890 --> 00:20:53,790
Tol, kol jūs suteikiate jai teisę
įėjimo, jis bus padaryti teisingą išėjimą.

423
00:20:53,790 --> 00:20:57,850
>> Ir komponentas gali būti
manoma, kad tuo pačiu būdu.

424
00:20:57,850 --> 00:21:00,280
Tai CardView yra tarsi
biblioteka funkcija.

425
00:21:00,280 --> 00:21:03,400
Jei mano, kad tai šiek tiek kortelė
kaip turto, jis bus

426
00:21:03,400 --> 00:21:05,095
spausdinti tos kortelės turinį.

427
00:21:05,095 --> 00:21:16,820
Pavyzdžiui, jei aš galiu pasikeisti savo kortelę
o bus kaip kas 5 plius 37,

428
00:21:16,820 --> 00:21:19,210
ji atitinkamai atnaujinti.

429
00:21:19,210 --> 00:21:21,955
Taigi tik keičiant įvesties,
jis gauna tam tikrą gamybos apimtį.

430
00:21:21,955 --> 00:21:24,830
Taigi jūs galite galvoti apie komponentus beveik
kaip funkcijos šiuo būdu, kuris

431
00:21:24,830 --> 00:21:25,920
galite sudėti.

432
00:21:25,920 --> 00:21:29,440
Jūs gaunate įvesties, kaip šis CardView
kaip indėlį, gausite rezultatus.

433
00:21:29,440 --> 00:21:31,900
Šiuo atveju, išėjimas yra HTML.

434
00:21:31,900 --> 00:21:34,404
Prasmės iki šiol?

435
00:21:34,404 --> 00:21:36,890
Cool, todėl vėl savybės
kaip galima perduoti informaciją

436
00:21:36,890 --> 00:21:40,900
į ir iš komponentų.

437
00:21:40,900 --> 00:21:42,740
>> Gerai, kad padarykime tai
dalykas interaktyvus.

438
00:21:42,740 --> 00:21:44,450
Dabar tai tipo nuobodu.

439
00:21:44,450 --> 00:21:45,520
Kas yra [nesigirdi]?

440
00:21:45,520 --> 00:21:48,210
Jūs galite išspausdinti kai iš,
bet tai visa tai gali padaryti.

441
00:21:48,210 --> 00:21:51,550
>> Taigi grįžkime į
senas klausimas tik dabar.

442
00:21:51,550 --> 00:21:54,405
Gerai, kad dabar šie komponentai
yra nuobodu, nes visi jie,

443
00:21:54,405 --> 00:21:55,030
jie gauna įvestį.

444
00:21:55,030 --> 00:21:56,100
Jie produkcija, tiesa?

445
00:21:56,100 --> 00:21:57,049
Tai tipo nuobodu.

446
00:21:57,049 --> 00:21:59,090
Mes norime, kad mūsų
komponentai, kad būtų galima turėti

447
00:21:59,090 --> 00:22:02,150
kai valstybės vidaus natūra,
kaip prisiminti kažką.

448
00:22:02,150 --> 00:22:05,320
>> Dėl iliustracijų, nes
Pavyzdžiui, kokios valstybės

449
00:22:05,320 --> 00:22:07,550
gali norite
prisiminti už iliustracijų?

450
00:22:07,550 --> 00:22:09,740
Kas laikina būsena
gali norite prisiminti

451
00:22:09,740 --> 00:22:12,491
už A iliustracijų app iliustracijų?

452
00:22:12,491 --> 00:22:13,990
Auditorija: Nesvarbu, ar tai buvo apversta?

453
00:22:13,990 --> 00:22:14,990
Neel Mehta: Taip, tiesa.

454
00:22:14,990 --> 00:22:17,665
Taigi jūs galbūt norėsite laikyti
trasa esate susiduria arba yra

455
00:22:17,665 --> 00:22:19,100
Jūs veidu žemyn ant kortelės.

456
00:22:19,100 --> 00:22:23,420
"Facebook", pavyzdžiui, galėtumėte
norite prisiminti, kur į naujienų

457
00:22:23,420 --> 00:22:25,870
tu ar like kas profilis
tu darai dabar.

458
00:22:25,870 --> 00:22:30,127
>> Apie Messenger, patinka tai, ką tekstą
įveskite įvesties langelį, tiesa?

459
00:22:30,127 --> 00:22:31,710
Jei atnaujinkite puslapį, ji nueina.

460
00:22:31,710 --> 00:22:32,793
Bet jūs neturite iš tikrųjų rūpi.

461
00:22:32,793 --> 00:22:33,770
Tai tiesiog laikinas.

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

463
00:22:34,548 --> 00:22:36,152
>> Auditorija: [nesigirdi]

464
00:22:36,152 --> 00:22:38,360
Neel Mehta: Kaip blykste
skyriaus, kaip jūs galite matome

465
00:22:38,360 --> 00:22:40,290
klausimas pusė arba atsakymas pusė?

466
00:22:40,290 --> 00:22:41,070
>> Auditorija: Gerai.

467
00:22:41,070 --> 00:22:43,270
>> Neel Mehta: Like A
dvipusiam iliustracijų, tiesa?

468
00:22:43,270 --> 00:22:46,370
Taip, taip, jūs norite
turi šią idėją dabar

469
00:22:46,370 --> 00:22:50,370
Turiu NT, kuris yra tarsi įėjimai,
bet valstybė, kuri yra laikina, uh,

470
00:22:50,370 --> 00:22:51,839
kur esate puslapyje, tiesa?

471
00:22:51,839 --> 00:22:54,380
Vėlgi, aš pasakiau "Facebook"
Messenger ", aš turiu kaip kuris asmuo

472
00:22:54,380 --> 00:22:56,550
jūs Facebook peržiūrėti
arba kurie profilio, tiesa?

473
00:22:56,550 --> 00:22:58,030
>> Tai tik laikinas.

474
00:22:58,030 --> 00:23:01,200
Svarbu parodyti naudotojui
kas vyksta, tačiau atnaujinti puslapį.

475
00:23:01,200 --> 00:23:02,250
Jis tikrai ne klausimas.

476
00:23:02,250 --> 00:23:04,530
Taigi, tai laikina būsena,
kad mes visi tai valstybė.

477
00:23:04,530 --> 00:23:06,250
>> Taigi, dar kartą, ten valstybės ir rekvizitas.

478
00:23:06,250 --> 00:23:09,084
Lanksčiojo yra įėjimas suteikta
iš savo duomenų šaltinį.

479
00:23:09,084 --> 00:23:10,250
Valstybė yra kaip numatytuosius.

480
00:23:10,250 --> 00:23:13,700
Tai kaip stuff, kad
daro dalykas interaktyvus.

481
00:23:13,700 --> 00:23:17,720
>> Taigi mūsų CardView-- tegul turi
Mūsų CardView-- todėl buvo gražus.

482
00:23:17,720 --> 00:23:21,420
Ką mes ketiname padaryti čia, mes ketiname
paliesti CardView ir tik CardView.

483
00:23:21,420 --> 00:23:25,105
Ir todėl mano draugas, kuris gavo tai, jie
nepastebės jokio skirtumo.

484
00:23:25,105 --> 00:23:27,230
Jie neturės keisti
bet kurį iš jų pačių kodu,

485
00:23:27,230 --> 00:23:29,410
bet jie nori pamatyti savo
CardView gavo Souped iki.

486
00:23:29,410 --> 00:23:31,270
Štai gražus dalis apie komponentus.

487
00:23:31,270 --> 00:23:35,290
>> Gerai, kad mūsų CardView, pabandykime ir
sekti, ar mes palaipsniui iki

488
00:23:35,290 --> 00:23:36,560
arba veidu žemyn.

489
00:23:36,560 --> 00:23:40,480
Be reaguoti mes tai darome pirmiausia
nurodant pradinę būseną.

490
00:23:40,480 --> 00:23:42,070
Kur kortelė pradėti?

491
00:23:42,070 --> 00:23:48,480
>> Taigi būkite funkcija vadinama getInitialState
veikti, ir mes grąžinti daiktą.

492
00:23:48,480 --> 00:23:53,310
Šis objektas yra keletas būklę ir
valstybė yra tik raktas-reikšmė pora.

493
00:23:53,310 --> 00:23:56,950
Kaip ir pavesti, turite pagrindinis ir
vertė, jūs turite kaip vardas yra eilutė.

494
00:23:56,950 --> 00:24:01,410
>> Šiuo atveju, tarkim priekyje yra tiesa.

495
00:24:01,410 --> 00:24:03,760
Tai sako, kad mes turime valstybę.

496
00:24:03,760 --> 00:24:06,570
Vienas komponentas valstybės
yra atributas vadinamas priekyje.

497
00:24:06,570 --> 00:24:09,649
[Nesigirdi], todėl pagal nutylėjimą,
mes į kortelės priekyje,

498
00:24:09,649 --> 00:24:11,440
ir mes galime tai pakeisti
kaip mes apversti kortelę.

499
00:24:11,440 --> 00:24:13,380
Logiška?

500
00:24:13,380 --> 00:24:18,190
>> Gerai, kad į padaryti, dabar, mes
rodo į klausimą ir atsakymą.

501
00:24:18,190 --> 00:24:20,860
Dabar, ką turėtume daryti
yra parodyti klausimą

502
00:24:20,860 --> 00:24:24,370
jei mes ant kortelės priekyje taip
atsakymas yra už kortelės pusėje.

503
00:24:24,370 --> 00:24:26,850
Štai kodėl jūs visi padaryti
kortelė interaktyvus.

504
00:24:26,850 --> 00:24:28,100
Taigi pabandykime ir tai čia.

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

506
00:24:31,600 --> 00:24:33,620
Na, visų pirma tiesiog padaryti kintamąjį.

507
00:24:33,620 --> 00:24:37,790
Mes galime paklausti dabar this.state.front.

508
00:24:37,790 --> 00:24:42,010
Mes prieiti teigti tą patį mes
prieigos rekvizitas, todėl this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Jei mes priekyje, tada tekstas
yra this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Jei mes ant priekinio
skyriaus, mes ketiname bandyti ir patraukti

512
00:24:51,360 --> 00:24:52,485
klausimas iš kortelės.

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

514
00:24:54,782 --> 00:24:57,240
Priešingu atveju, jei mes ant nugaros
kortelę, ką mes galime padaryti?

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

516
00:25:01,830 --> 00:25:02,750
>> Auditorija: Atsakymas?

517
00:25:02,750 --> 00:25:05,041
>> Neel Mehta: Yep, todėl tekstas
lygus this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Bet jei pastebėjote, mes naudojame
Valstybinė priimti sprendimą

520
00:25:10,930 --> 00:25:14,420
nes dabar komponento
atrodys kitaip

521
00:25:14,420 --> 00:25:16,710
pagrįsta ne, kaip jie sąveikauja su juo.

522
00:25:16,710 --> 00:25:20,355
Taigi vietoj to išspausdinimas tai,
mes tiesiog atsispausdinti tekstą.

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

524
00:25:25,270 --> 00:25:28,650
Šaunu, taip ir dabar, kaip matote,
matome tik klausimą.

525
00:25:28,650 --> 00:25:37,720
Ir jei aš čia pakeisti būseną rankiniu būdu
į priekinio yra klaidinga mes gauname 42 atgal.

526
00:25:37,720 --> 00:25:39,720
>> Taigi, dar kartą, šis komponentas,
turi savo būseną.

527
00:25:39,720 --> 00:25:43,440
Kaip mygtuką nežino, ar
jis buvo paspaustas, ar ne,

528
00:25:43,440 --> 00:25:46,080
šis dalykas žino, kas yra
priekinis arba ant nugaros.

529
00:25:46,080 --> 00:25:48,320
Pagal nutylėjimą, tai ant priekinio.

530
00:25:48,320 --> 00:25:50,840
Ir tada, jei ji priekyje,
mes atsispausdinti šį klausimą.

531
00:25:50,840 --> 00:25:53,106
Jei tai ant nugaros, mes
spausdinti atsakymą.

532
00:25:53,106 --> 00:25:54,980
Taigi, dar kartą, informacija
suteiktas yra ta pati.

533
00:25:54,980 --> 00:25:59,090
Jis tiesiog atrodo kitaip
remiantis tuo, kaip jums programuoti ją.

534
00:25:59,090 --> 00:26:02,670
Taigi, pavyzdžiui, "Facebook" Messenger
Net jei jūs gaunate tą patį duomenų šaltinį,

535
00:26:02,670 --> 00:26:05,170
tai gali atrodyti kitaip
nes būsena yra skirtingi.

536
00:26:05,170 --> 00:26:08,421
Jūs ieškote ne
Skirtingi asmens pranešimas.

537
00:26:08,421 --> 00:26:10,930
>> Gerai, kad tai yra viskas gerai ir
gerai, bet dabar kas iš tikrųjų

538
00:26:10,930 --> 00:26:15,940
kad mums gali pakeisti, ar
Mūsų kortelė pirmyn ar atgal.

539
00:26:15,940 --> 00:26:19,010
Mes galime tai padaryti, pridedant pasukt
mygtuką, mygtuką į kortelę, kad

540
00:26:19,010 --> 00:26:22,950
bus apversti kortelę, jei ji [nesigirdi].

541
00:26:22,950 --> 00:26:31,770
Taigi leiskite pridėti mygtuką čia tai
mygtuką, šis mygtukas bus pasakyti apversti.

542
00:26:31,770 --> 00:26:35,650
>> Ir taip dabar, tai
nieko nedaro.

543
00:26:35,650 --> 00:26:37,075
Jis tiesiog atrodo gražiai.

544
00:26:37,075 --> 00:26:43,650
Ką mes galime padaryti, tai mes galime pridėti spragtelėjimą
prižiūrėtojas, onclick lygus this.flip,

545
00:26:43,650 --> 00:26:44,820
ir mes apibrėžti pasukt vėliau.

546
00:26:44,820 --> 00:26:47,120
Bet iš esmės, onclick
yra funkcija, kuri

547
00:26:47,120 --> 00:26:48,675
iškviečiamas, kai vartotojas paspaudžia ją.

548
00:26:48,675 --> 00:26:52,330
>> Taigi mygtuką žinos
kai jis buvo paspaudėte.

549
00:26:52,330 --> 00:26:54,750
Nuėjo jis buvo paspaudėte,
ji apversti kortelę.

550
00:26:54,750 --> 00:26:58,382
Tai lyg savo
picos pristatymo vaikinas.

551
00:26:58,382 --> 00:27:01,590
Jūs esate kaip, viskas gerai, kai kas nors
ragina mane, aš pristatyti picą, tiesa?

552
00:27:01,590 --> 00:27:03,420
>> Jūs užsiregistruoti šį klausytoją.

553
00:27:03,420 --> 00:27:04,530
Jūs klausytis įvykį.

554
00:27:04,530 --> 00:27:07,657
Gauni vadinamas, ir kai
Renginys atsitiks, jūs kažką daryti.

555
00:27:07,657 --> 00:27:08,240
Jūs gaunate pica.

556
00:27:08,240 --> 00:27:11,480
Tokiu atveju, kai esate
paspaudėte, galite apversti kortelę.

557
00:27:11,480 --> 00:27:14,560
>> Ir todėl mes turime apibrėžti
funkcija, kuri bus apversti kortelę,

558
00:27:14,560 --> 00:27:17,930
todėl mes rašyti šią teisę
čia apversti funkciją.

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

560
00:27:20,850 --> 00:27:23,680
Ir taip, ką jūs manote Flip darys?

561
00:27:23,680 --> 00:27:27,180
Vėlgi tai iškviečiamas, kai
mes spustelėkite Flip "mygtuką.

562
00:27:27,180 --> 00:27:29,406
Ką reikėtų funkcija atvirkštinė daryti?

563
00:27:29,406 --> 00:27:34,136
>> Auditorija: Pakeisti this.state.front
nuo ištikimi klaidinga, klaidinga tiesa.

564
00:27:34,136 --> 00:27:38,420
>> Neel Mehta: Yep, todėl imtis visų
this.front is-- priekinis valstybė.

565
00:27:38,420 --> 00:27:40,930
Paimkite priekinį valstybėje, jei
tai tiesa, kad ji klaidinga.

566
00:27:40,930 --> 00:27:42,530
Jei tai klaidinga, kad tai tiesa, tiesa?

567
00:27:42,530 --> 00:27:45,330
Taigi pabandykime tai.

568
00:27:45,330 --> 00:27:48,240
>> Jūs negalite keisti būseną
tiesiog daro this.state.

569
00:27:48,240 --> 00:27:50,380
Jūs galite tai padaryti.

570
00:27:50,380 --> 00:27:52,030
Jūs negalite padaryti.

571
00:27:52,030 --> 00:27:55,810
Jūs turite naudoti funkciją
vadinamas this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Taigi galima sakyti, this.setState priekyje
dvitaškis tai kur vėl, šauktukas

573
00:28:03,230 --> 00:28:04,330
taškas reiškia priešingai.

574
00:28:04,330 --> 00:28:07,420
Manau, jei tai. state.front
Tiesa, jis bus paversti klaidinga.

575
00:28:07,420 --> 00:28:09,170
Taigi mes nustatyti valstybę
nuo ištikimi klaidinga.

576
00:28:09,170 --> 00:28:11,430
Jei tai klaidinga, mes
nustatyti, kad jis klaidinga tiesa.

577
00:28:11,430 --> 00:28:17,210
>> Tiesiog pastebėti, kad mes sukurti ir gauti šiek tiek
skirtingai, todėl pabandykime tai.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, pažvelgti į tai.

579
00:28:18,675 --> 00:28:21,810
Atvirkštinė mygtukas dabar
perjungti priekio į galą būklę.

580
00:28:21,810 --> 00:28:24,990
>> Ir taip čia, kur matote
Šiek tiek apie reaguoti magija.

581
00:28:24,990 --> 00:28:28,420
Kaip mes niekada jis pasakė, kad ji vėl taptų.

582
00:28:28,420 --> 00:28:30,910
Mes niekada sakė jis perbraižyti nieko.

583
00:28:30,910 --> 00:28:32,630
Jei darai tai
be reaguoti, norite

584
00:28:32,630 --> 00:28:34,588
jau to-- patinka, kai
Flip mygtuku,

585
00:28:34,588 --> 00:28:37,290
jūs turite pasakyti jį
rankiniu būdu iš naujo teikti, tiesa?

586
00:28:37,290 --> 00:28:43,050
>> Reaguoti yra tikrai cool, kad jei jūs
suteikti jai tam tikrą būklę ir savybes,

587
00:28:43,050 --> 00:28:45,760
ji visada suteiks
lygiai toks pats dalykas.

588
00:28:45,760 --> 00:28:48,690
Ir todėl, kai mes kada nors mes pakeisime
Valstybės ir savybės,

589
00:28:48,690 --> 00:28:50,819
reaguoja tik vėl tampa visa tai.

590
00:28:50,819 --> 00:28:52,860
Ji žino, kad yra
vienas su viena korespondencija

591
00:28:52,860 --> 00:28:57,270
tarp valstybės ir parametru ir HTML.

592
00:28:57,270 --> 00:29:00,110
Taigi, kai kuris nors iš jų
pasikeičia per nustatytą valstybės,

593
00:29:00,110 --> 00:29:03,750
jis pasikeis, kaip
mokėti iš naujo suteiktos.

594
00:29:03,750 --> 00:29:06,650
Ir todėl iš esmės reaguoti yra tarsi
laukia jums pakeisti.

595
00:29:06,650 --> 00:29:09,870
>> Kai jis keičia kažką,
jis bus iš naujo suteikti visą puslapį.

596
00:29:09,870 --> 00:29:12,480
Ir jei tai skamba neefektyvus,
tai todėl, kad jis būtų,

597
00:29:12,480 --> 00:29:15,050
bet reaguoti naudoja dalyką
vadinamas šešėlis DOM.

598
00:29:15,050 --> 00:29:19,950
Vietoj piešimo puslapį tiesiogiai, ji
išlaiko virtualų HTML medį atmintyje.

599
00:29:19,950 --> 00:29:23,620
>> Žinote, HTML kaip medis,
kaip hierarchinė duomenų struktūra.

600
00:29:23,620 --> 00:29:28,990
Jis saugo netikrą medį atmintyje,
ir kai jūs atnaujinsite puslapį,

601
00:29:28,990 --> 00:29:31,940
jis bus atkreipti vienas suklastotas
medis, ir jis bus apskaičiuoti

602
00:29:31,940 --> 00:29:35,120
ką pakeisti reikia padaryti
puslapis padaryti du medžiai lygūs.

603
00:29:35,120 --> 00:29:38,540
Taigi, iš esmės, tai beveik
Re-teikia daug.

604
00:29:38,540 --> 00:29:41,540
Ir tada jis tik patinka keičia
puslapis mažai tweaks, kiek reikia,

605
00:29:41,540 --> 00:29:44,240
todėl labai, labai, labai veiksminga.

606
00:29:44,240 --> 00:29:46,970
>> Taigi, iš esmės reaguoti bus
kai jūs ką nors pakeisti,

607
00:29:46,970 --> 00:29:49,010
jis bus pakartotinai teikti puslapį praktiškai.

608
00:29:49,010 --> 00:29:52,830
Tai bus išsiaiškinti ką man reikia
pakeisti, kad tikrasis puslapis atspindi

609
00:29:52,830 --> 00:29:55,602
virtualus puslapis, ir jis bus tai padaryti.

610
00:29:55,602 --> 00:29:56,560
Štai virtualus DOM.

611
00:29:56,560 --> 00:29:59,350
Tai vienas iš didžiausių
savybės reaguoti.

612
00:29:59,350 --> 00:30:00,880
>> Ar tai prasminga?

613
00:30:00,880 --> 00:30:01,540
Turite klausimų?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Auditorija: Kaip veikia
palyginti dar MVC

617
00:30:08,969 --> 00:30:10,760
kad mes kalbėjome apie
prieš kaip išteklius.

618
00:30:10,760 --> 00:30:13,527
>> Neel Mehta: Taip, klausimas
kaip tai palyginti su MVC?

619
00:30:13,527 --> 00:30:14,610
Jūs klausėte apie išteklius.

620
00:30:14,610 --> 00:30:16,445
Na, pakalbėkime apie tai, kaip ji veikia.

621
00:30:16,445 --> 00:30:18,190
>> Be MVC, norite atnaujinti modelį.

622
00:30:18,190 --> 00:30:20,560
Šiuo atveju mes norime turėti kortelė.

623
00:30:20,560 --> 00:30:24,540
Vaizdas būtų turėti
Flip mygtuką ir valdymo

624
00:30:24,540 --> 00:30:26,310
būtų pasukt funkciją.

625
00:30:26,310 --> 00:30:28,450
Taigi vaizdas būtų papasakoti
valdiklis apversti apversti.

626
00:30:28,450 --> 00:30:30,370
Apversti būtų papasakoti
Modelis pakeisti, tiesa?

627
00:30:30,370 --> 00:30:33,915
>> Ir todėl, kai jūs darote tai MVC, jums
klausytis modelis pakeisti,

628
00:30:33,915 --> 00:30:37,150
ir jūs vėl teikti nuomonę pakeisti.

629
00:30:37,150 --> 00:30:39,210
Arba jūs tiesiog turite patinka
turėti valdiklį.

630
00:30:39,210 --> 00:30:42,418
Palaukite modelis keisti, o tada
rinktis iš kaip daikto dalis

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

632
00:30:44,032 --> 00:30:45,740
Čia mes turime vieną dalyką,
bet didelis app,

633
00:30:45,740 --> 00:30:48,510
jūs turite prisiminti, kas patinka
Į kiekvieną vietos pakeitimas,

634
00:30:48,510 --> 00:30:50,290
todėl šiek tiek erzina.

635
00:30:50,290 --> 00:30:53,670
Ir taip reaguoti yra gražus
nes ji turi šešėlį Dom.

636
00:30:53,670 --> 00:30:56,040
Jis gali sau leisti tik
perrašyti visą dalykas.

637
00:30:56,040 --> 00:30:58,680
Jūs neturite selektyviai
kaip atspėti, ką atnaujinti.

638
00:30:58,680 --> 00:31:02,186
>> "Facebook", jei norite
gauti naują žinutę, kad MVC,

639
00:31:02,186 --> 00:31:04,060
jūs turite prisiminti,
Gerai, pakeisti dalykus

640
00:31:04,060 --> 00:31:06,260
ne iš viršaus
puslapis žinutės piktograma.

641
00:31:06,260 --> 00:31:08,290
Taip pat pop naują langą apačioje.

642
00:31:08,290 --> 00:31:10,070
Taip pat padarys naują dalyką į tą langą.

643
00:31:10,070 --> 00:31:11,060
Taip pat atkurti garsą.

644
00:31:11,060 --> 00:31:13,150
>> Štai daug daiktų
išeinant tuo pačiu metu.

645
00:31:13,150 --> 00:31:15,320
Ir taip, jei jūs neturite
turi šešėlį Dom, norite

646
00:31:15,320 --> 00:31:18,740
turite padaryti, kad rankiniu būdu, nes
Jūs negalite atsikratyti visą puslapį.

647
00:31:18,740 --> 00:31:21,430
Jūs negalite sau leisti, todėl jūs turite
keisti kiekvieną daiktą rankiniu būdu,

648
00:31:21,430 --> 00:31:23,990
kuri yra tikrai erzina MVC.

649
00:31:23,990 --> 00:31:27,640
>> Taigi, siekiant, kad būtų
ekonomiškas, jie selektyviai

650
00:31:27,640 --> 00:31:30,750
atnaujinti puslapyje, kuris yra
efektyvus, bet ir erzina.

651
00:31:30,750 --> 00:31:34,002
Be reaguoti, nes šešėlis
Namas, gausite abu dalykus nemokamai.

652
00:31:34,002 --> 00:31:35,710
Tai efektyvus, nes
šešėlis Dom.

653
00:31:35,710 --> 00:31:37,210
Silpnoji atnaujina puslapį.

654
00:31:37,210 --> 00:31:40,292
Tai ne daro medis manipuliacijos.

655
00:31:40,292 --> 00:31:41,250
Jūs gaunate efektyvumą.

656
00:31:41,250 --> 00:31:45,420
Jūs taip pat gausite naudojimo paprastumas, nes
jei jūs tiesiog perrašyti visą puslapį,

657
00:31:45,420 --> 00:31:48,970
bet jūs tiesiog žinau, viskas gerai, ką
ketinate būti puslapyje kažkur.

658
00:31:48,970 --> 00:31:51,180
Tai gali būti kitoje vietoje, bet
tai bus ant puslapio, tiesa?

659
00:31:51,180 --> 00:31:52,860
Taigi jūs tiesiog iš naujo suteiktos
visa, ką praktiškai,

660
00:31:52,860 --> 00:31:55,540
ir tu gali padaryti pora
pokyčiai paties puslapio.

661
00:31:55,540 --> 00:31:57,850
>> Taigi, dar kartą, MVC jums
turėtų pasirinkti

662
00:31:57,850 --> 00:32:01,840
tarp naudojimo paprastumas ir efektyvumas,
ir reaguoti, gausite tiek.

663
00:32:01,840 --> 00:32:04,020
Taigi, tai geriau.

664
00:32:04,020 --> 00:32:05,220
Logiška?

665
00:32:05,220 --> 00:32:06,676
Kieta medžiaga.

666
00:32:06,676 --> 00:32:12,080
>> Gerai, kad pažiūrėkime pakalbėkime
šiek tiek apie 4 žingsnyje,

667
00:32:12,080 --> 00:32:14,740
kaip mes galime įdėti komponentus.

668
00:32:14,740 --> 00:32:16,260
Taigi, mes turime šią teisę dabar.

669
00:32:16,260 --> 00:32:19,420
Mes turime atvėsti mažai mygtuką.

670
00:32:19,420 --> 00:32:23,157
Mes galime apversti jį atgal ir
pirmyn, ir kad visa tai daro.

671
00:32:23,157 --> 00:32:24,990
Tarkime, mes norime
turi kitą komponentą.

672
00:32:24,990 --> 00:32:28,730
Tarkime, mūsų iliustracijų app turėtų
jose visų kortelių sąrašą

673
00:32:28,730 --> 00:32:31,520
kad jūs turite, kad reiškia, kad mes
turėtų turėti kitą komponentą.

674
00:32:31,520 --> 00:32:32,970
Na, gal ją vadina sąrašo rodinį.

675
00:32:32,970 --> 00:32:36,200
Pakelkime sąrašo rodinį, kad
koegzistuoja su CardView,

676
00:32:36,200 --> 00:32:39,680
ir šis sąrašas peržiūrėti ir CardView
patiks dirbti kartu.

677
00:32:39,680 --> 00:32:43,190
Ir jūs galite juos sujungti
kad mūsų app už jus.

678
00:32:43,190 --> 00:32:45,160
>> Taigi, pirmiausia, tegul padaryti
pora daugiau kortų į dešinę.

679
00:32:45,160 --> 00:32:46,370
Tarkime, ką kortos?

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

681
00:32:49,619 --> 00:32:51,910
Ir tik todėl aš neturiu
pagimdė jums rašyti jį,

682
00:32:51,910 --> 00:32:53,410
Aš tik ketina nukopijuokite jį iš čia.

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

684
00:33:01,664 --> 00:33:03,580
Ir todėl aš ruošiuosi ne
suteikti jai tik vieną kortelę.

685
00:33:03,580 --> 00:33:06,910
Aš ruošiuosi suteikti jai kortelių masyvo.

686
00:33:06,910 --> 00:33:10,240
Taigi pirmieji Apps
ketina nutraukti dabar.

687
00:33:10,240 --> 00:33:14,717
Gerai, kad mes ketiname padaryti
Tai sugeba kelias korteles.

688
00:33:14,717 --> 00:33:17,800
Taigi, pirmiausia, mes ketiname duoti, o ne
tik vieną kortelę tačiau kortelių masyvas,

689
00:33:17,800 --> 00:33:18,700
kaip kortų sąrašą.

690
00:33:18,700 --> 00:33:20,980
Ir šiuo atveju, turime tris iš jų.

691
00:33:20,980 --> 00:33:27,280
>> Gerai, taip taip app yra
ketinate gauti sąrašą korteles,

692
00:33:27,280 --> 00:33:29,870
ir jis ketina nuspręsti, kuris
vienas parodyti į CardView.

693
00:33:29,870 --> 00:33:33,740
CardView gali tik
padaryti vieną kortelę, tačiau programą

694
00:33:33,740 --> 00:33:37,610
gauna visų kortelių sąrašą, tiesa?

695
00:33:37,610 --> 00:33:40,820
>> Taigi, kai jūs išsiaiškinti vieną
skyriaus duoti CardView,

696
00:33:40,820 --> 00:33:44,660
kaip jūs atspėti jums gali būti suteikta
priimti sprendimą, apie kurį skyriaus

697
00:33:44,660 --> 00:33:47,064
parodyti?

698
00:33:47,064 --> 00:33:49,980
Norėdami suteikti jums užuominą, kad tai laikinai
Būsite peržiūrėti tam tikrą kortelę.

699
00:33:49,980 --> 00:33:53,260
Jei atnaujinkite puslapį, jums
tiesiog grįžti į pirmą kortelę.

700
00:33:53,260 --> 00:33:55,464
Tai gerai, nes tai laikina.

701
00:33:55,464 --> 00:33:56,630
Kas technika gali mes naudojame?

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

703
00:34:02,534 --> 00:34:08,760
>> Auditorija: Jūs galite padaryti kintamąjį
taip kaip jūs turėjo priekyje.

704
00:34:08,760 --> 00:34:11,989
Ar tai tiesa, galite
turi dabartinis skyriaus lygus 1?

705
00:34:11,989 --> 00:34:14,150
>> Neel Mehta: Taip, kad mes
nori turėti valstybę, tiesa?

706
00:34:14,150 --> 00:34:16,080
Galima būtų naudoti narė, kurios
komponentas išsiaiškinti

707
00:34:16,080 --> 00:34:17,288
kurią kortelę mes norime gauti.

708
00:34:17,288 --> 00:34:19,290
Kaip mes turime sąrašą
visos kortos, mes

709
00:34:19,290 --> 00:34:21,630
naudoti valstybės išsiaiškinti
vienas iš pirmųjų kortele,

710
00:34:21,630 --> 00:34:23,710
antroji plokštė, trečioji kortelė, ir taip toliau.

711
00:34:23,710 --> 00:34:28,760
>> Taigi app taip app bus gauti
turi getInitialState funkciją,

712
00:34:28,760 --> 00:34:35,020
getInitialState funkcija grąža.

713
00:34:35,020 --> 00:34:39,929
Ir mes tiesiog pasakyti activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Taigi dabar mūsų app turi savo valstybę.

715
00:34:42,889 --> 00:34:47,179
>> Ir taip dabar padaryti, išsiaiškinti
kortelė, tegul tiesiog eiti į masyvą

716
00:34:47,179 --> 00:34:49,969
ir patraukti į šio indekso dalykas.

717
00:34:49,969 --> 00:34:53,580
Pasirinkite kortelių lygios this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Taigi, kaip matote čia, rekvizitai ir
valstybė iš tikrųjų dirbti kartu.

720
00:35:00,162 --> 00:35:08,990
Taigi dabar, kad mes turime activeCard,
mes jį vadiname activeCard,

721
00:35:08,990 --> 00:35:10,470
ir pažiūrėkime, jei tai veikia.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> O, kad buvo tekstas klaida.

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

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

728
00:35:51,420 --> 00:35:54,840
>> Cool, yep, todėl dabar mes buvome atgal
kur buvome anksčiau, tiesa?

729
00:35:54,840 --> 00:35:57,100
Sena programa, išskyrus
dabar mes galime padėti

730
00:35:57,100 --> 00:35:59,390
kortų sąrašas ne tik vieną kortelę.

731
00:35:59,390 --> 00:36:04,130
Ir dabar, vėlgi, jei mes pakeisti
activeIndex, mes galime pereiti nuo 0 iki 1,

732
00:36:04,130 --> 00:36:07,330
ir dabar, kad antra korta,
ir tada mes nuėjome į 0.

733
00:36:07,330 --> 00:36:10,390
Taigi čia nauja
Souped up versija mūsų.

734
00:36:10,390 --> 00:36:16,000
>> Gerai, kad dabar galime turėti sąrašo rodinį, kad
rodo visus į savo programą korteles,

735
00:36:16,000 --> 00:36:19,980
todėl mes padaryti nauja
komponentas vadinamas ListView.

736
00:36:19,980 --> 00:36:22,155
Tegul ListView lygus react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Taigi, mes norime suteikti tikriausias nerūšiuotas
Sąrašas su sąrašo elemento už kiekvieną kortelę.

739
00:36:38,800 --> 00:36:41,490
Ir todėl mes turime kortų krūva.

740
00:36:41,490 --> 00:36:44,990
Norime vieną elementą
už kiekvieną kortelę, tiesa?

741
00:36:44,990 --> 00:36:47,490
Mes galime padaryti už kilpa arba
ką padaryti naują sąrašo elementą.

742
00:36:47,490 --> 00:36:50,522
Bet kaip jums tai padaryti
Pareikšk, naudokite dalykas vadinamas žemėlapis.

743
00:36:50,522 --> 00:36:57,150
Žemėlapis yra įrankis, ar funkcija galite naudotis
kad už kiekvieną elementą, veikia šiek funkciją,

744
00:36:57,150 --> 00:36:59,510
trunka grąžos vertę, ir
suteikia jums tą atgal.

745
00:36:59,510 --> 00:37:06,310
>> Taigi, kaip, pavyzdžiui, turime masyvą
1, 2, 3.map function--, ir šis

746
00:37:06,310 --> 00:37:12,120
yra sutrumpinta dėl
function-- x rodyklių x kartų x.

747
00:37:12,120 --> 00:37:16,110
Tai sako, už kiekvieną numerį
1, 2, 3, jį priimti.

748
00:37:16,110 --> 00:37:17,800
Square ją ir duoti atgal.

749
00:37:17,800 --> 00:37:22,090
Taigi, ką jūs manote 1,
2, 3.map x eina x kartų

750
00:37:22,090 --> 00:37:25,480
x suteikia jums atgal suteikta
kad ši funkcija yra

751
00:37:25,480 --> 00:37:27,680
paleisti ant kiekvieno minėto masyvo elementas.

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

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

754
00:37:32,190 --> 00:37:35,709
>> Neel Mehta: Taip, 1, 4, 9
nes jūs darote 1 kartus 1 d.

755
00:37:35,709 --> 00:37:36,500
Tai suteikia jums vieną.

756
00:37:36,500 --> 00:37:37,690
Štai pirmasis elementas.

757
00:37:37,690 --> 00:37:38,530
>> 2 kartus 2 yra 4.

758
00:37:38,530 --> 00:37:39,570
Štai antrasis elementas.

759
00:37:39,570 --> 00:37:40,310
3 kartus 3 yra 9.

760
00:37:40,310 --> 00:37:41,540
Štai trečiasis elementas.

761
00:37:41,540 --> 00:37:42,640
Logiška?

762
00:37:42,640 --> 00:37:45,015
Taigi žemėlapis turi metodas, kurį
naudoti funkcines programuotojų,

763
00:37:45,015 --> 00:37:48,090
naujas stilius
programavimo kažką daryti

764
00:37:48,090 --> 00:37:50,500
kiekvienam savo sąrašą elementas.

765
00:37:50,500 --> 00:37:51,970
Ir taip, tai skamba pažįstamas.

766
00:37:51,970 --> 00:37:53,370
Mes turime kortelės.

767
00:37:53,370 --> 00:37:56,860
Mes norime gauti sąrašo elementą už kiekvieną
vienas, todėl mes tiesiog naudoti žemėlapį čia.

768
00:37:56,860 --> 00:38:00,250
Mes pasakyti, tegul sąrašas dydžiu neprilygstami
this.props, atvirukai, žemėlapis.

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

770
00:38:10,580 --> 00:38:15,070
>> Ir taip suteikiama kortelė, mes
ketina sukurti sąrašo elementą

771
00:38:15,070 --> 00:38:17,580
su to kortelės turinį pusėje jį.

772
00:38:17,580 --> 00:38:20,660
Leiskite tik pasakyti, mes norime duoti
kortelės apklausti Taigi card.question.

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

774
00:38:24,990 --> 00:38:30,649
Taigi šis sąrašas Sudėtyje yra
masyvas Li arba sąrašo elementus

775
00:38:30,649 --> 00:38:32,440
ten, kur vienas sąrašas
Prekė už kiekvieną kortelę,

776
00:38:32,440 --> 00:38:35,150
ir kad yra CARDS klausimą.

777
00:38:35,150 --> 00:38:37,640
Logiška?

778
00:38:37,640 --> 00:38:39,450
>> Cool, todėl dabar tegul
iš tikrųjų spausdinti, kad iš.

779
00:38:39,450 --> 00:38:46,521
Taigi, mes grįš ul.

780
00:38:46,521 --> 00:38:49,020
Viduje, kad netvarkingai sąrašą
mes tiesiog klijuoti visą sąrašą

781
00:38:49,020 --> 00:38:49,890
kad jie davė mums.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Gerai, kad dabar ši
Sąrašas Peržiūrėti veikia tik rasti.

785
00:38:56,060 --> 00:38:59,842
Bet apie sąrašo rodinyje klausimų?

786
00:38:59,842 --> 00:39:01,270
Jūs turite kortų krūva.

787
00:39:01,270 --> 00:39:02,800
Jūs darote sąrašo elementą už kiekvieną kortelę.

788
00:39:02,800 --> 00:39:05,466
Ir jūs įdėti juos viduje netvarkingai
sąrašas ir galite duoti jį atgal.

789
00:39:05,466 --> 00:39:09,410
Taigi dabar galime veikti taip, mes įdėti
Tai mūsų app viduje,

790
00:39:09,410 --> 00:39:14,310
todėl mes galime tai padaryti, sąrašo rodinį.

791
00:39:14,310 --> 00:39:17,070
Kas argumentas mes pereiti į sąrašą požiūrį?

792
00:39:17,070 --> 00:39:18,320
Kas savybės mes duoti?

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

794
00:39:25,111 --> 00:39:26,860
Atminkite, jei galite duoti
jis kortų krūva,

795
00:39:26,860 --> 00:39:29,590
jis bus padaryti sąrašą
peržiūrėti šių kortelių.

796
00:39:29,590 --> 00:39:32,267
Taigi, kas būtų mes pereiname
čia kaip argumentas?

797
00:39:32,267 --> 00:39:33,350
Auditorija: kortų sąrašas?

798
00:39:33,350 --> 00:39:37,130
Neel Mehta: Taip, taip, kortelės
lygus this.props.cards, tiesa?

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

800
00:39:39,850 --> 00:39:44,370
Ir taip tik problema
yra tai, kad jūs galite tik

801
00:39:44,370 --> 00:39:48,600
Paaiškėjo vieną aukščiausio lygio elementas teikia,
todėl jūs turite wrap jį div.

802
00:39:48,600 --> 00:39:49,100
Tai keista.

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

804
00:39:56,190 --> 00:39:57,530
Taigi pažiūrėkime, jei tai.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Ar tai veikia?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Taip, ten jūs einate.

809
00:40:31,030 --> 00:40:33,700
Taigi dabar mes turime sąrašą
kortelių apačioje,

810
00:40:33,700 --> 00:40:36,180
ir tada mes turime
CardView save ant viršaus,

811
00:40:36,180 --> 00:40:40,486
ir kad bus apversti tarp
dviejų pusių kortelę.

812
00:40:40,486 --> 00:40:42,610
Dabar Ar tai prasminga, kaip aš padariau, kad?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Taip, taip, ir vėl, mes turime dvi sudedamąsias dalis.

815
00:40:46,790 --> 00:40:49,666
Pirmasis komponentas atspaudai
atliekamas kas sąraše skyriaus.

816
00:40:49,666 --> 00:40:50,540
Štai sąrašas vaizdas.

817
00:40:50,540 --> 00:40:54,770
Ir antrasis komponentas
spausdina tik tą kortelę.

818
00:40:54,770 --> 00:40:58,840
Jei suteikti jai tam tikrą kortelę, jis bus
spausdinti informaciją apie tą kortelę

819
00:40:58,840 --> 00:41:01,870
ir jums apversti pirmyn ir atgal.

820
00:41:01,870 --> 00:41:05,850
>> Taigi, jei norime, mes galime pabandyti ir aptarimas
apie pridedant keletą naujų funkcijų tai.

821
00:41:05,850 --> 00:41:09,482
Priešingu atveju galime kalbėti šiek tiek daugiau
apie iš reaktoriaus greičio,

822
00:41:09,482 --> 00:41:11,190
ar mes galime atsakyti
Jums iškilusius klausimus

823
00:41:11,190 --> 00:41:15,050
nes jie visi yra iš pagrindinių dalių
iš reaguoti, kad aš noriu kalbėti apie.

824
00:41:15,050 --> 00:41:16,540
Mes galime eiti į priekį.

825
00:41:16,540 --> 00:41:17,590
Mes galime atsakyti į klausimus.

826
00:41:17,590 --> 00:41:18,560
Ką gi, jūs norite.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Auditorija: Ar galima naudoti
JSX normaliai JavaScript?

829
00:41:24,205 --> 00:41:27,150
Arba tai, kad kažkas, kad
atėjo su [nesigirdi]?

830
00:41:27,150 --> 00:41:30,760
>> Neel Mehta: Kyla klausimas, ar
naudoti JSX su normaliu JavaScript?

831
00:41:30,760 --> 00:41:32,620
Atsakymas yra taip.

832
00:41:32,620 --> 00:41:41,070
JSX yra tik tai būdas trunka jūsų
JavaScript, kad turi HTML viduje ji,

833
00:41:41,070 --> 00:41:44,215
ir kaupia į JavaScript, kad
neturi HTML viduje ji.

834
00:41:44,215 --> 00:41:47,880
Taigi pastebėti that-- todėl pastebėsite čia.

835
00:41:47,880 --> 00:41:50,820
Tai atrodo kaip jūs turite kaip div
ir jūs turite stuff viduje ji.

836
00:41:50,820 --> 00:41:54,970
>> Tai kaupia į JavaScript, kad
kaip generuoja tą patį.

837
00:41:54,970 --> 00:41:59,590
Manau, tai, ką aš noriu pasakyti yra tai, kad
JSX yra tik sintaksinė, kaip tai

838
00:41:59,590 --> 00:42:03,530
už JavaScript Preprocesorius daug
kaip PHP yra HTML Preprocesorius.

839
00:42:03,530 --> 00:42:05,490
UAB yra preprocesoriaus
už JavaScript, kad leidžia

840
00:42:05,490 --> 00:42:12,970
jūs įtraukėte HTML viduje jūsų "JavaScript".

841
00:42:12,970 --> 00:42:16,425
Ir todėl, jei turite tinkamą transformatorius
kuris yra dalykas, vadinamas [nesigirdi],

842
00:42:16,425 --> 00:42:17,300
kuris pakeis.

843
00:42:17,300 --> 00:42:19,360
Teisė Preprocesorius,
jis bus jums tai padaryti.

844
00:42:19,360 --> 00:42:20,235
>> Auditorija: [nesigirdi]

845
00:42:20,235 --> 00:42:23,026
Neel Mehta: Paprastai nereikia
įdėti HTML viduje JavaScript

846
00:42:23,026 --> 00:42:24,110
nebent jūs darote reaguoti.

847
00:42:24,110 --> 00:42:27,146
Bet jūs galite tai padaryti bet kuriuo atveju.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Auditorija: Manau, kad jūs
aprašė Pareikšk

850
00:42:29,353 --> 00:42:31,970
kaip funkcinis programavimas kalba.

851
00:42:31,970 --> 00:42:35,646
Mes jau mokytis C į CS50.

852
00:42:35,646 --> 00:42:38,032
Ar taip pat C funkcinis kalbos?

853
00:42:38,032 --> 00:42:39,990
Neel Mehta: Taigi klausimas
apie funkcinis

854
00:42:39,990 --> 00:42:43,010
palyginti su kitu dalykas vadinamas
būtina arba procedūrinių programavimo.

855
00:42:43,010 --> 00:42:44,820
Yra dviejų rūšių programas populiarus.

856
00:42:44,820 --> 00:42:48,550
Vienas vadinamas procesinis, kuris
yra visa informacija apie, kaip daro komandas,

857
00:42:48,550 --> 00:42:51,510
ir vienas yra funkcinis, kuris yra visa
apie atsižvelgdamas funkcijas ir turintys

858
00:42:51,510 --> 00:42:52,930
įvesties ir išvesties iš tų.

859
00:42:52,930 --> 00:42:55,930
Reaguoti yra funkcinė paradigma.

860
00:42:55,930 --> 00:42:58,010
C yra labai procesinis paradigma.

861
00:42:58,010 --> 00:43:02,360
>> Ir, kaip pavyzdžiui, C, pavyzdžiui,
jūs neturite padaryti deklaratyvi būdas

862
00:43:02,360 --> 00:43:04,390
padaryti programą, tiesa?

863
00:43:04,390 --> 00:43:06,826
Jūs turite pasakyti, atspausdinti.

864
00:43:06,826 --> 00:43:07,950
Pakeiskite šiuos duomenis struktūrą.

865
00:43:07,950 --> 00:43:08,530
Spausdinti tai.

866
00:43:08,530 --> 00:43:10,160
Tai viskas apie komandas.

867
00:43:10,160 --> 00:43:12,640
>> Be reaguoti, ten nėra
kad daugelis komandos.

868
00:43:12,640 --> 00:43:15,145
Tai viskas apie atsižvelgdamas
komponentai jums kartu sudėjus.

869
00:43:15,145 --> 00:43:16,300
Jie kaip funkcijų.

870
00:43:16,300 --> 00:43:26,360
Jūs turite kaip funkcija
vadinamas CardView,

871
00:43:26,360 --> 00:43:28,680
kuris yra funkcija
kad turi įvesties, išvesties,

872
00:43:28,680 --> 00:43:30,660
ir taip reaguoti yra viskas
apie šios filosofijos

873
00:43:30,660 --> 00:43:32,700
mums having-- turite duomenis.

874
00:43:32,700 --> 00:43:34,910
Jūs perduoti jį per šį
algoritmas, ir jis bus

875
00:43:34,910 --> 00:43:36,800
išvesties HTML kad jus
tiesiog atspausdinti puslapį,

876
00:43:36,800 --> 00:43:39,180
ir todėl jūs turite
statyti Kuskas.

877
00:43:39,180 --> 00:43:42,800
>> Taigi, norint atkreipti į tai, kas metafora
Minėjau anksčiau, jūs žinote, kaip

878
00:43:42,800 --> 00:43:47,050
"Facebook", jei jūs gaunate pranešimą,
ir pasirinkti, ką dalys atnaujinti,

879
00:43:47,050 --> 00:43:47,882
tai procesinis.

880
00:43:47,882 --> 00:43:48,840
Tai būtina, tiesa?

881
00:43:48,840 --> 00:43:49,806
Gerai, aš žinutę.

882
00:43:49,806 --> 00:43:50,930
Leiskite pakeisti sąskaitą ten.

883
00:43:50,930 --> 00:43:52,110
>> Leiskite pop langą čia.

884
00:43:52,110 --> 00:43:52,780
Leiskite pakeisti sąskaitą ten.

885
00:43:52,780 --> 00:43:53,700
Leiskite atkreipti tai čia.

886
00:43:53,700 --> 00:43:55,220
Štai procesinis požiūris.

887
00:43:55,220 --> 00:44:00,240
>> Štai ką, pavyzdžiui Kampinis,
Boost, stuburą, kitus sistemas naudoti.

888
00:44:00,240 --> 00:44:01,200
Reaguoti yra funkcionalus.

889
00:44:01,200 --> 00:44:03,324
Tai labai skiriasi būdas
mąstymo apie dalykus.

890
00:44:03,324 --> 00:44:07,950
Tai užtrunka šį tegul turi idėją
funkcijas arba algoritmai, kad bus jums

891
00:44:07,950 --> 00:44:08,800
suteikti jai duomenis.

892
00:44:08,800 --> 00:44:11,820
Tai bus išspjauti, kas tai
turėtų būti, o kompiuteris

893
00:44:11,820 --> 00:44:13,490
rūpinsis svėrimą.

894
00:44:13,490 --> 00:44:15,890
Jūs neturite tvarkyti patys.

895
00:44:15,890 --> 00:44:18,470
Ar tai padaryti šiek tiek prasme?

896
00:44:18,470 --> 00:44:18,970
Taip?

897
00:44:18,970 --> 00:44:24,180
>> Auditorija: funkciniu kalba
viskas vyksta vienu metu?

898
00:44:24,180 --> 00:44:26,800
>> Neel Mehta: Ne, viskas atsitiks tvarka.

899
00:44:26,800 --> 00:44:29,320
Kaip čia dar yra
užsisakyti, tačiau tai nėra

900
00:44:29,320 --> 00:44:32,390
atsitikti tvarka kaip
pagirti, komandą, komandą.

901
00:44:32,390 --> 00:44:36,459
Taip atsitinka tvarka
funkcija suteikia jums rezultatus.

902
00:44:36,459 --> 00:44:37,750
Įdėk kad į kitas pareigas.

903
00:44:37,750 --> 00:44:39,550
Įdėk kad į kitą
funkcija, kita funkcija.

904
00:44:39,550 --> 00:44:41,470
>> Jei CS51, jums
sužinoti funkcinių programas

905
00:44:41,470 --> 00:44:42,886
šiek tiek iš taikoma ši.

906
00:44:42,886 --> 00:44:45,090
Bet iš esmės, ką daro
Pareikšk kietas ne tik

907
00:44:45,090 --> 00:44:46,840
į vieną pusę duomenų srautų
ir virtualus Namas,

908
00:44:46,840 --> 00:44:48,700
bet tai idėja
Funkcinis programavimas.

909
00:44:48,700 --> 00:44:51,720
Ir funkcinio programavimo yra labai lengva
komponuoti ir padaryti cool stuff iš,

910
00:44:51,720 --> 00:44:53,844
ir tai labai lengva galvoti
apie ir priežastis, apie tai.

911
00:44:53,844 --> 00:44:55,450
Taigi, tai dar vienas geras traukimui reaguoti.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Bet daugiau klausimų?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Taip?

916
00:45:03,150 --> 00:45:06,840
>> Auditorija: Hm, kodėl gi jūs
naudoti tegul, o ne var?

917
00:45:06,840 --> 00:45:10,450
>> Neel Mehta: Taigi klausimas yra
kodėl jūs naudojate tegul vietoj var?

918
00:45:10,450 --> 00:45:13,220
Tai yra dalykas, vadinamas
ES6 arba ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Tai nauja versija JavaScript.

920
00:45:15,820 --> 00:45:19,050
Yra daug techninių priežasčių krūva,
Bet tegul tai geriau versija var.

921
00:45:19,050 --> 00:45:20,724
>> Tai, kaip jūs deklaruoti kintamuosius.

922
00:45:20,724 --> 00:45:21,390
Galite naudoti tegul.

923
00:45:21,390 --> 00:45:22,140
Galite naudoti var.

924
00:45:22,140 --> 00:45:23,825
Tegul turi techninių krūva
reasons-- jūs galite ieškoti juos

925
00:45:23,825 --> 00:45:25,610
iki later-- kodėl tai geriau.

926
00:45:25,610 --> 00:45:28,780
Iš esmės, ES6 yra keletas gražus
nauja sintaksė, keletą naujų funkcijų

927
00:45:28,780 --> 00:45:30,720
ant senojo JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Taigi, mes turime kaip penkias minutes.

929
00:45:32,782 --> 00:45:34,990
Aš tik norėjau kalbėti apie
dar vienas dalykas labai greitai.

930
00:45:34,990 --> 00:45:36,450
Jei jūs turėjote kokių nors klausimų,
pakalbėkime apie tai po to.

931
00:45:36,450 --> 00:45:38,366
Bet tik todėl šis gauna
sugauti kamera, aš tiesiog

932
00:45:38,366 --> 00:45:41,550
noriu kalbėti šiek tiek apie tai, kaip
iš tikrųjų naudoti Pareikšk savo apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Jeigu jūs einate čia
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
tai puslapis skirtas reaguoti ir
jis bus parodyti jums, kaip jūs iš tikrųjų naudoti

936
00:46:03,320 --> 00:46:05,320
Pareikšk savo puslapiuose.

937
00:46:05,320 --> 00:46:08,845
Iš esmės, tai šiek tiek
sudėtinga bandote įdiegti reaguoti.

938
00:46:08,845 --> 00:46:12,300
Tai nėra taip paprasta, kaip jūs tiesiog vilkite
ir upuść JavaScript ten.

939
00:46:12,300 --> 00:46:15,890
>> Jūs turite savo transformatorius
įsteigti, kuri, kaip ji tai padarė anksčiau,

940
00:46:15,890 --> 00:46:18,120
paversti savo JSX į
normalus "JavaScript".

941
00:46:18,120 --> 00:46:21,030
Turite dalykas, kad bus
kaupia jums ES6 normalus.

942
00:46:21,030 --> 00:46:24,720
JavaScript ten juda daug
dalys turite daryti, kad ten dalykas

943
00:46:24,720 --> 00:46:27,200
vadinamas Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Ir tai yra komandų eilutės įrankis, kad mes
padėti Jums pastoliai iš jūsų Pareikšk

945
00:46:31,110 --> 00:46:32,380
projektai lengvai.

946
00:46:32,380 --> 00:46:38,660
>> Taigi jūs galite skaityti apie tai
vėliau, tačiau yra keletas įrankiai

947
00:46:38,660 --> 00:46:40,160
kad Yeoman siūlo.

948
00:46:40,160 --> 00:46:43,280
Jie leidžia jums sukurti reaguoti
APP su viskuo pastatytas.

949
00:46:43,280 --> 00:46:46,030
Kaip jis bus sukūrėme
į, jų komponentai pastatytas.

950
00:46:46,030 --> 00:46:47,880
Tai bus turėti savo transformatorius pastatytas.

951
00:46:47,880 --> 00:46:50,699
Jie turi daug kietas
Daiktai pastatytas automatiškai

952
00:46:50,699 --> 00:46:52,240
naudojant šiuos dalykus, vadinamus generatoriai.

953
00:46:52,240 --> 00:46:54,620
>> Taigi skaitykite apie tai, jei jums patinka.

954
00:46:54,620 --> 00:46:59,110
Tiesiog eikite į Yeoman, Y-E-O-M-A-N ir
Jūs rasite generatoriai, kaip šie.

955
00:46:59,110 --> 00:47:01,263
Ir generatoriai, pavyzdžiui,
tai, jums tiesiog patinka vienas

956
00:47:01,263 --> 00:47:03,010
yra pora komandų eilutės komandas.

957
00:47:03,010 --> 00:47:05,530
Tai bus pastoliai patikrinimą
Visa reaguoti app už jus.

958
00:47:05,530 --> 00:47:10,470
Tai bus gauti visą vadovą vamzdynai,
ir grunt darbą už jus,

959
00:47:10,470 --> 00:47:13,010
ir tai, kodėl jūs tiesiog sutelkti
nuo tiesiog raštu reaguoti.

960
00:47:13,010 --> 00:47:16,739
>> Taigi, iš esmės, statome
Pareikšk app yra nontrivial.

961
00:47:16,739 --> 00:47:19,530
Tai laidinio visi kartu, tačiau
yra įrankiai, kad bus padaryti tai už jus.

962
00:47:19,530 --> 00:47:23,070
Taigi, jei norite padaryti Pareikšk
App, pabandykite daryti, kad taip.

963
00:47:23,070 --> 00:47:26,360
Jei tiesiog norite eksperimentuoti,
galite pabandyti naudoti šį CodePen

964
00:47:26,360 --> 00:47:28,550
nes tai CodePen turi
visi reaguoja laidus.

965
00:47:28,550 --> 00:47:30,240
Aš padariau visą darbą už jus jau.

966
00:47:30,240 --> 00:47:34,610
>> Taigi, jei norite, kad tarsi
gamyba išleisti reaguoti programą,

967
00:47:34,610 --> 00:47:37,220
pabandyti vieną iš šių generatorių.

968
00:47:37,220 --> 00:47:40,240
Jei tiesiog norite žaisti
aplink, tai dažnai verta tik

969
00:47:40,240 --> 00:47:44,490
kaip pabandykite žaisti aplink CodePen čia.

970
00:47:44,490 --> 00:47:45,470
Garsas geras?

971
00:47:45,470 --> 00:47:45,970
Saunus.

972
00:47:45,970 --> 00:47:47,890
>> Taigi, kad viskas, ką turiu.

973
00:47:47,890 --> 00:47:52,470
Vėlgi, visa kodas ir pavyzdžiai
bus šiame tinklalapyje čia.

974
00:47:52,470 --> 00:47:55,509
Taigi, dar kartą, mes ne kalbėti
apie daug sintaksės reaguoti,

975
00:47:55,509 --> 00:47:57,550
bet rasti visus tuos
mažai sintaksiniai detalės,

976
00:47:57,550 --> 00:48:00,320
visa tai bus prieinama
Šioje svetainėje čia.

977
00:48:00,320 --> 00:48:02,660
>> Taigi aš rekomenduoju kaip
imtis pirmąjį žingsnį.

978
00:48:02,660 --> 00:48:06,277
Įdėkite jį į savo CodePen.

979
00:48:06,277 --> 00:48:08,110
Pabandykite dirbti priėmimo
ji į antrąjį etapą.

980
00:48:08,110 --> 00:48:11,310
Yra Ketvirtasis žingsnis, ir tik
pamatyti, kur jūs gaunate iš to.

981
00:48:11,310 --> 00:48:14,840
>> Bet daugiau klausimų, patikrinkite
iš to puslapio, arba rašykite man.

982
00:48:14,840 --> 00:48:16,490
Štai mano elektroninio pašto.

983
00:48:16,490 --> 00:48:19,885
Bet aš norėčiau, kad padėtų jums su bet
Jums iškilusius klausimus apie reaguoti.

984
00:48:19,885 --> 00:48:21,010
Taigi, yep, tai viskas, ką turiu.

985
00:48:21,010 --> 00:48:23,410
Ačiū visiems labai už
žiūrėti arba dalyvauti.

986
00:48:23,410 --> 00:48:26,820
Ir aš paimsiu visus klausimus
jums gali tekti po to dabar.

987
00:48:26,820 --> 00:48:29,140
Taigi ačiū visiems už žiūrėti.

988
00:48:29,140 --> 00:48:31,270