1
00:00:00,000 --> 00:00:02,910
>> [MUZIKO Ludante]

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

3
00:00:04,850 --> 00:00:07,275
>> Neel Mehta: tie iras.

4
00:00:07,275 --> 00:00:11,070
>> Nu, ĉiuj, bonvena retejo
apps de la estonteco kun React.

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

6
00:00:11,870 --> 00:00:12,930
Mia nomo estas Neel.

7
00:00:12,930 --> 00:00:17,689
Mi estas TA por CS50 kaj duajarulino
ĉe Harvard College kaj tre, tre

8
00:00:17,689 --> 00:00:18,730
pasia ttt desarrollador.

9
00:00:18,730 --> 00:00:20,730
Do mi estas tre ekscita
parolos al vi hodiaŭ,

10
00:00:20,730 --> 00:00:24,550
ĉu vi estas ĉi tie aŭ ĉe hejmo
rigardante, pri React, kiu estas, denove

11
00:00:24,550 --> 00:00:27,270
kiel mi diris, la estonteco de retejo apps.

12
00:00:27,270 --> 00:00:29,055
>> Do React estas retejo kadro.

13
00:00:29,055 --> 00:00:30,930
Kaj kiel mi estis rakontanta
al kelkaj homoj ĉi tie,

14
00:00:30,930 --> 00:00:33,400
kadron estas nur
aro de iloj vi povas uzi

15
00:00:33,400 --> 00:00:35,770
strukturi kaj konstrui vian ttt app.

16
00:00:35,770 --> 00:00:39,010
Kaj retejo apps estas, denove, retejoj
ke estas interagaj kiel Facebook,

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

18
00:00:42,330 --> 00:00:45,590
>> Do Facebook estas retejo kadro
kiu estis disvolvita de Facebook

19
00:00:45,590 --> 00:00:48,060
paron jaroj back-- React estas.

20
00:00:48,060 --> 00:00:50,830
Ĝi poste estis uzita en
Facebook sur ilia movebla apps

21
00:00:50,830 --> 00:00:52,460
kaj la retejo app, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Akademio estas alia
elstara frua adopter de React.

23
00:00:56,350 --> 00:00:58,630
>> Ĝi estas vere estis akiranta
ekstreme populara.

24
00:00:58,630 --> 00:01:03,420
Se vi iam uzi aĵojn kiel Angular aŭ
Backbone, tiu estas de la sama familio,

25
00:01:03,420 --> 00:01:05,830
sed ĝi havas ekde nun
superos ilia populareco.

26
00:01:05,830 --> 00:01:06,890
Ĝi estas la varma nova afero.

27
00:01:06,890 --> 00:01:09,590
Estas vere, vere grandega.

28
00:01:09,590 --> 00:01:13,470
>> Kaj tiel React estas bona ne nur kiel
ttt enkadrigi konstruaĵo interfacoj.

29
00:01:13,470 --> 00:01:16,020
Bonas por konstruado ttt interfacoj.

30
00:01:16,020 --> 00:01:18,350
Ekzistas ankaŭ afero
nomata React Indijena kiu

31
00:01:18,350 --> 00:01:22,200
ebligas konstrui interfacojn
por Android kaj iOS

32
00:01:22,200 --> 00:01:26,390
kaj eble aliaj platformoj en la estonteco
uzante nur la sama kodo JavaScript.

33
00:01:26,390 --> 00:01:31,130
Vi povus uzi la samajn
JavaScript kodo repagi retejoj,

34
00:01:31,130 --> 00:01:33,040
repagi Android apps kaj iOS apps.

35
00:01:33,040 --> 00:01:35,000
>> Ĝi estas tre, tre ekscita tempo.

36
00:01:35,000 --> 00:01:37,070
Estas vere, vere malvarmeta ŝancon.

37
00:01:37,070 --> 00:01:42,020
Estas vere universala retejo
interfaco programilo,

38
00:01:42,020 --> 00:01:44,420
Do ĝi estas tre, tre
grava afero scii.

39
00:01:44,420 --> 00:01:46,949
Kaj, kiel mi estis rakontanta personoj
antaŭe, tio, mi opinias,

40
00:01:46,949 --> 00:01:48,990
tuj ŝanĝos kiel ni
konstrui retejo apps ĉiam.

41
00:01:48,990 --> 00:01:55,820
Do estas eble iom hiperbolo, sed mi
kredas ke estas sufiĉe bona afero scii.

42
00:01:55,820 --> 00:01:57,580
>> Bone, do kion estas React?

43
00:01:57,580 --> 00:02:01,020
React estas kadro vi povas
uzi por konstruado interfacoj.

44
00:02:01,020 --> 00:02:03,240
Interfaco estas, denove,
retpaĝo, ĉu ne?

45
00:02:03,240 --> 00:02:06,340
Do jen Instagram.com, uzoj React.

46
00:02:06,340 --> 00:02:08,740
>> React estas konstruita sur la
ideo de komponantoj.

47
00:02:08,740 --> 00:02:11,900
Komponanto estas HTML
elemento en esteroides,

48
00:02:11,900 --> 00:02:14,470
tial HTML elemento estas kiel butono.

49
00:02:14,470 --> 00:02:15,250
Ĝi estas alineo.

50
00:02:15,250 --> 00:02:17,500
Estas kaploko, dekstra?

51
00:02:17,500 --> 00:02:22,740
Kaj Instagram uzos tiujn, sed
ankaŭ uzos komponantojn de React.

52
00:02:22,740 --> 00:02:25,740
>> React komponantoj
souped funkciadon HTML elementoj

53
00:02:25,740 --> 00:02:28,100
kiuj havas sian propran konduton
enhavis ene de ili.

54
00:02:28,100 --> 00:02:31,800
Do, kiel ekzemplo, ni povus havi
tempo elemento, tempo komponanton,

55
00:02:31,800 --> 00:02:34,095
kiu enhavos kiel
la tempo poŝtmarko, sciu,

56
00:02:34,095 --> 00:02:37,170
profilan komponanto kiu
enhavos la profilon bildo

57
00:02:37,170 --> 00:02:38,820
kaj la nomo de la persono.

58
00:02:38,820 --> 00:02:42,930
Ĝi povas havi kiel vendotablo, kiu
povas kalkuli kiel la nombro de homo,

59
00:02:42,930 --> 00:02:45,610
kaj se vi alklakas ĝin, ĝi devos
pliigi la nombron da gustoj.

60
00:02:45,610 --> 00:02:48,200
Komponanto estas nur
faskon de HTML kodo ke

61
00:02:48,200 --> 00:02:50,520
havas iuj funcionalidad
envolvita ene de ĝi.

62
00:02:50,520 --> 00:02:53,770
Do estas kiel HTML elemento
en esteroides, kiel mi diris antaŭe.

63
00:02:53,770 --> 00:02:56,270
Vi povas preni ĉi tiuj komponantoj,
kaj vi povas meti ilin kune

64
00:02:56,270 --> 00:02:59,060
fari novajn komponantojn, en
tiu kazo, post ero,

65
00:02:59,060 --> 00:03:00,505
kiu enhavas ĉiuj ĉi aĵoj.

66
00:03:00,505 --> 00:03:04,050
Ĝi enhavus Tempo, Profilo,
LikeCounter, eble la komenton

67
00:03:04,050 --> 00:03:06,100
kaj eble la bildo mem.

68
00:03:06,100 --> 00:03:10,810
Kaj tial retejo apps jxus konstruita per prenante
komponantojn kaj metante ilin kune.

69
00:03:10,810 --> 00:03:15,620
Instagram feed estas nenio pli ol
faskon de artikoloj unu post alia,

70
00:03:15,620 --> 00:03:19,032
kolono enhavas kiel la Tempo,
Profilo, LikeCounter, kaj tiel plu.

71
00:03:19,032 --> 00:03:20,490
Estas ia kiel konstruante domon.

72
00:03:20,490 --> 00:03:22,660
Vi ne konstruu la
domo de la supro malsupren.

73
00:03:22,660 --> 00:03:24,960
Vi prenu components-- vi
preni kiel la banĉambro.

74
00:03:24,960 --> 00:03:28,320
Vi prenu la bedroom-- vi batas ilin
kune, kaj vi havas novan komponanton.

75
00:03:28,320 --> 00:03:29,760
Vi havas novan parton de la domo.

76
00:03:29,760 --> 00:03:32,860
>> Do reagi estas ĉiuj konstruitaj ĉirkaŭ
tiu ideo de komponantoj kiuj

77
00:03:32,860 --> 00:03:36,600
estas interagaj, kiuj estas enunciativo.

78
00:03:36,600 --> 00:03:39,650
Kiel vi nur diri kion oni
profilo estas, kaj ĝi faras ĝin.

79
00:03:39,650 --> 00:03:40,600
Ili estas composable.

80
00:03:40,600 --> 00:03:43,880
Vi povas preni tempon kaj profilo, metis
ili kune, fari ion bonan.

81
00:03:43,880 --> 00:03:47,770
Kaj ili estas reuzebla, do se vi
havi la fontkodon por fosto,

82
00:03:47,770 --> 00:03:49,440
vi povus enkorpigi ke ie.

83
00:03:49,440 --> 00:03:53,160
>> Oni povas enigi Instagram
afero en via propra retejo.

84
00:03:53,160 --> 00:03:56,830
Vi povas enkorpigi en Facebook, ekzemple,
kiel longe kiel ĝi uzas React tiel.

85
00:03:56,830 --> 00:04:00,360
Do komponantoj estas vere, vere, vere
potenca konstruelementoj de la retejo

86
00:04:00,360 --> 00:04:04,180
kiu povas esti uzita anywhere kaj metis
kune fari novajn konstruelementoj.

87
00:04:04,180 --> 00:04:07,159
Tio estas la tre, tre
alta nivelo superrigardon.

88
00:04:07,159 --> 00:04:09,200
Do, denove, se vi havas
demandojn je ajna punkto

89
00:04:09,200 --> 00:04:14,470
pri la filozofio de reaktoro, la
kodigo, halti min, kaj lasu min scii.

90
00:04:14,470 --> 00:04:18,420
>> Bone, do reagi estas malvarmeta ĉar
havas malsaman manieron de rigardado

91
00:04:18,420 --> 00:04:19,870
ĉe kiel vi konstruos retejo apps.

92
00:04:19,870 --> 00:04:23,620
Vi verŝajne aŭdis de MVC, a
modelo kontrolas en CS50 aŭ kio ajn

93
00:04:23,620 --> 00:04:25,940
aliaj sondado klasoj uzas.

94
00:04:25,940 --> 00:04:29,000
Kaj plej kadroj
konstruita ĉirkaŭ la ideo de MVC.

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

96
00:04:30,410 --> 00:04:32,980
React estas konstruita ĉirkaŭ la ideo
de unudirekta datumoj fluo

97
00:04:32,980 --> 00:04:36,510
kiel vidita de tiu abako aŭ grafika tie.

98
00:04:36,510 --> 00:04:38,260
>> Esence, Vi havas datumfonto.

99
00:04:38,260 --> 00:04:42,380
Kaj la datumfonto decidos
kiamaniere meti iujn komponantojn.

100
00:04:42,380 --> 00:04:45,452
Kaj la komponantoj
tiam, kiam ili ŝanĝas,

101
00:04:45,452 --> 00:04:47,160
ili diros al la
datumfonto ŝanĝi.

102
00:04:47,160 --> 00:04:49,350
>> Uzi la Instagram
Ekzemple, vi eble devas

103
00:04:49,350 --> 00:04:52,050
listo de post celoj kiel
en datumbazo aŭ io.

104
00:04:52,050 --> 00:04:53,310
Ke la datumoj.

105
00:04:53,310 --> 00:04:57,600
Kaj tiam nia post komponantoj
prenos tion datumojn,

106
00:04:57,600 --> 00:05:01,830
kaj uzi tiun datumon por repagi
ion sur la ekrano.

107
00:05:01,830 --> 00:05:04,300
Tion la sagon
de datumoj al komponanto estas,

108
00:05:04,300 --> 00:05:07,930
kaj tiam ke sama datumo estas uzata
repagi faskon de komponantoj.

109
00:05:07,930 --> 00:05:10,290
>> En Facebook Messenger,
Ekzemple, kiu estas React,

110
00:05:10,290 --> 00:05:13,410
vi eble havas liston de
mesaĝojn kiel via datumfonto.

111
00:05:13,410 --> 00:05:15,927
Kaj kiu redonu ne
nur la listo de mesaĝoj

112
00:05:15,927 --> 00:05:17,510
sed ankaŭ la lerta de amikoj vi havas.

113
00:05:17,510 --> 00:05:19,200
Vi havas la nelegita grafo.

114
00:05:19,200 --> 00:05:23,330
Eble ankaŭ repagi la Facebook afero
jen funde de Facebook.com.

115
00:05:23,330 --> 00:05:25,610
La sama datumoj estas
ununura fonto de vero

116
00:05:25,610 --> 00:05:28,290
kaj kiu kaŭzas multajn
komponantoj esti pruntitaj.

117
00:05:28,290 --> 00:05:30,290
Kaj kiam ajn unu el tiuj
komponantoj estas ŝanĝita,

118
00:05:30,290 --> 00:05:32,320
ĝi superas kaj
ŝanĝas la datumfonto.

119
00:05:32,320 --> 00:05:33,460
>> Vi sendu mesaĝon, ĉu ne?

120
00:05:33,460 --> 00:05:34,780
Kiu ŝanĝas la datumfonto.

121
00:05:34,780 --> 00:05:39,490
Vi legas viajn mesaĝojn,
tiel vi starigis nelegita al 0.

122
00:05:39,490 --> 00:05:41,136
Kiu ŝanĝas la datumfonto.

123
00:05:41,136 --> 00:05:44,010
Kaj rimarki ke ĉiuj tiuj de unu
arrow revenanta al la samaj datumoj

124
00:05:44,010 --> 00:05:47,662
fonto, tiel vi scias,
donita certa datumoj aro,

125
00:05:47,662 --> 00:05:49,870
Vi scias ĝuste kion la
Paĝa tuj aspekti.

126
00:05:49,870 --> 00:05:50,700
Ĝi estas determinisma.

127
00:05:50,700 --> 00:05:53,451
Vi scias, donitaj iuj datumoj, kio
la paĝo tuj aspekti.

128
00:05:53,451 --> 00:05:56,158
Vi povas antaŭdiri kiom ĝi tuj
kondutas kaj kiel aferoj estas irantaj

129
00:05:56,158 --> 00:05:57,650
labori kiam ili estas kunmetitaj.

130
00:05:57,650 --> 00:06:00,410
>> Kaj se mi havus milionon komponantoj
tie, ĝi kondutus la sama, ĉu ne?

131
00:06:00,410 --> 00:06:02,290
Vi ne havus ajnan
weird interconexiones.

132
00:06:02,290 --> 00:06:04,120
Unu datumoj sendadis miliono komponantoj.

133
00:06:04,120 --> 00:06:06,879
Miliono komponantoj povis
reiri kaj redakti la datumojn.

134
00:06:06,879 --> 00:06:07,920
Kaj tiel tio estas tre bela.

135
00:06:07,920 --> 00:06:10,870
Ni konstruas composable,
facile skalebla retejo apps.

136
00:06:10,870 --> 00:06:13,150
>> Vi havas unu datumfonto,
la fonto de vero.

137
00:06:13,150 --> 00:06:15,790
Kiu rakontas vian komponantoj
Kiel meti ekstere la paĝo,

138
00:06:15,790 --> 00:06:18,190
kaj la komponantoj
manipuli interago.

139
00:06:18,190 --> 00:06:20,150
Kaj se ili volas ŝanĝi
aferojn, nur iri reen

140
00:06:20,150 --> 00:06:21,750
kaj diri al la datumfonto ŝanĝi.

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

142
00:06:22,850 --> 00:06:26,010
Do React estas ĉiuj pri kompreno
kiel konstrui komponanto

143
00:06:26,010 --> 00:06:29,540
kaj kiel fari vian komponanto
interagi kun la ekstera mondo.

144
00:06:29,540 --> 00:06:31,850
>> Farante la komponanto Interact
kun la ekstera mondo

145
00:06:31,850 --> 00:06:34,490
uzas alian teknologio
nomata Flux, kiu

146
00:06:34,490 --> 00:06:36,872
estas kadro kiu estas
aldonita aldone reagi.

147
00:06:36,872 --> 00:06:38,330
Ni ne tuj paroli pri tio.

148
00:06:38,330 --> 00:06:42,990
Ni tuj parolos pli pri, donita
datumoj, kiel vi povas repagi komponanto?

149
00:06:42,990 --> 00:06:47,010
>> Kaj tiel React estas vere malvarmeta ĉar vi
povas uzi ĝin kun ajna malantauxo vi volas.

150
00:06:47,010 --> 00:06:50,480
Se vi havas kiel Python malantauxo,
se via Python povas kraĉi iuj datumoj,

151
00:06:50,480 --> 00:06:51,610
React povas repagi ĝin.

152
00:06:51,610 --> 00:06:54,700
Se vi estas jam JS eligoj
de datumoj, React bildigas ĝin.

153
00:06:54,700 --> 00:06:56,890
Ruby rails kun
datumoj, React bildigas ĝin.

154
00:06:56,890 --> 00:07:01,860
>> Do React estas esence retejo
view-- fasado kun komponantoj

155
00:07:01,860 --> 00:07:03,910
por ajna datumfonto whatsoever.

156
00:07:03,910 --> 00:07:07,145
Kaj tiel iranta de datumfonto al
reagi komponantoj estas sufiĉe facila.

157
00:07:07,145 --> 00:07:08,770
Irus inverse estas iom pli malfacila.

158
00:07:08,770 --> 00:07:10,462
Kiu uzas Flux kiel mi menciis antaŭe.

159
00:07:10,462 --> 00:07:11,420
Ni ne eniros en tiu.

160
00:07:11,420 --> 00:07:13,740
Ni enfokusigi pli sur la
datumoj-al-komponanto flanko.

161
00:07:13,740 --> 00:07:15,880
Tiel vi povas fari
malvarmeta, amuza retejo apps.

162
00:07:15,880 --> 00:07:19,870
Ĝi ne tuŝas la eksteran mondon
por nun, sed tio estas alia rakonto.

163
00:07:19,870 --> 00:07:22,210
>> Bone, do se vi estus ĉi tie
por mia lasta seminario

164
00:07:22,210 --> 00:07:26,610
vi scios ke la kodon por
hodiaŭa babilado tuj estos ĉe tiu URL

165
00:07:26,610 --> 00:07:29,320
tie, bedaŭras, ĉi URL tie.

166
00:07:29,320 --> 00:07:32,730
Kaj esence ni tuj iru
tra kvar paŝoj, eble kvin,

167
00:07:32,730 --> 00:07:33,510
probable ne kvin.

168
00:07:33,510 --> 00:07:37,300
Ni moviĝas tra kvar paŝoj
konstrui specimeno React app.

169
00:07:37,300 --> 00:07:39,550
Kaj tial ĉiuj fontkodo
por ĉiu paŝo de la vojo

170
00:07:39,550 --> 00:07:42,216
tuj estos ĉi tie, do se
vi sekvajn kune hejme,

171
00:07:42,216 --> 00:07:43,991
bonvolu peruse tiu kodo.

172
00:07:43,991 --> 00:07:46,740
Se vi sekvante kune tie,
ni montros tion sur la ekrano,

173
00:07:46,740 --> 00:07:47,739
do ne zorgu pri tio.

174
00:07:47,739 --> 00:07:50,930
Sed se vi estas ĉe hejmo, senti
libera viziti ĉi tiun retejon.

175
00:07:50,930 --> 00:07:56,400
Kaj, jes, vi devus povi akiri
tuta kodo oni kredus iam bezonos tie.

176
00:07:56,400 --> 00:08:01,380
Do ĝi estas bona cheat folio tiel
por via estonteco aventuroj kun React.

177
00:08:01,380 --> 00:08:04,490
Cool, do se ĉiuj kiuj estas ĉi tie,
kaj eĉ se vi estas hejme,

178
00:08:04,490 --> 00:08:11,580
elsxiros tiun retejon, is.gd/cs50react,
neniu kapitalo, neniu substreko, neniu nenio.

179
00:08:11,580 --> 00:08:15,849
>> Vi vidos paĝo kiu aspektas
iomete kiel ĉi.

180
00:08:15,849 --> 00:08:17,140
Jen afero nomata CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen estas kunlabora
kodigo medio

182
00:08:20,030 --> 00:08:23,364
kun kiu mi povas skribi kodon tie, kaj
ĝi estos aŭtomate sendita al vi.

183
00:08:23,364 --> 00:08:24,780
Kaj al tiu vojo, mi povas skribi kodon.

184
00:08:24,780 --> 00:08:26,920
Mi povas kuri kodo tie.

185
00:08:26,920 --> 00:08:33,470
>> Por example-- kaj se reloads-- vidi,
Mi kuras JavaScript kodo en la paĝo

186
00:08:33,470 --> 00:08:36,390
tie ĉi, kaj ĝi malebligos
aŭtomate redonu retpaĝo

187
00:08:36,390 --> 00:08:37,980
kun tiu kodo JavaScript.

188
00:08:37,980 --> 00:08:40,039
Kaj tiel tio estas vojo
por ni provi kodo

189
00:08:40,039 --> 00:08:43,089
vere rapida sen devi uzi
niaj ID aŭ uzi niajn loka maŝino

190
00:08:43,089 --> 00:08:44,290
aŭ kio ajn.

191
00:08:44,290 --> 00:08:47,670
Ĝi estas tre rapida maniero por vi mockup
kaj provi malsamajn specojn de kodo.

192
00:08:47,670 --> 00:08:50,560
>> Do mi tuj devas preni
Ekzemple kodo, metante ŝin tie.

193
00:08:50,560 --> 00:08:52,374
Ni tuj laboros per ĝi.

194
00:08:52,374 --> 00:08:54,540
Kaj se vi estas ĉe hejmo, Vi
povas tiri ĉi supre ankaŭ.

195
00:08:54,540 --> 00:08:57,530
Kaj mi jam instalita
Reagi ĉi tie, tiel ke oni nur

196
00:08:57,530 --> 00:09:00,770
skribi vian propran kodon tie, kaj
provu ĝin kiel via propra ludejo.

197
00:09:00,770 --> 00:09:04,940
>> Jes, se ĉiuj
malfermu tiun ligilon ĉi tie.

198
00:09:04,940 --> 00:09:08,080
Bonvolu doni al mi dikfingroj
supren unufoje vi havas ĝin malferma.

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

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

201
00:09:13,770 --> 00:09:16,914
Nenio ĉi tie nuntempe, sed
ni ŝanĝos ke tre baldaŭ.

202
00:09:16,914 --> 00:09:21,250
>> Bone, do React estas JavaScript
biblioteko, kaj kiel tia,

203
00:09:21,250 --> 00:09:24,480
postulas konon de Ĝavoskripto,
kiu estas la ttt programlingvo.

204
00:09:24,480 --> 00:09:27,660
Kaj ĝi estas uzata por aliaj aferoj
nun tro sed unuavice la ttt disvolvi

205
00:09:27,660 --> 00:09:32,040
lingvo, do se vi ne kutimas
ke, legis retejon nomitan JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Ĝi estas mirinda.

207
00:09:32,700 --> 00:09:34,240
Vi povas lerni Ĝavoskripto
en duonhoro.

208
00:09:34,240 --> 00:09:34,990
Ĝi estas nekredebla.

209
00:09:34,990 --> 00:09:36,420
>> Do donu ĝin legita.

210
00:09:36,420 --> 00:09:39,960
Ni ankaŭ trovas multajn HTML tie ĉar
ni desegni retpaĝojn kompreneble.

211
00:09:39,960 --> 00:09:43,890
Do se vi estas nekonata kun
HTML, kontrolu HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Mi pensas lerni React estas
milionoble pli facila se vi jam

213
00:09:46,520 --> 00:09:47,892
scias la konstruelementoj.

214
00:09:47,892 --> 00:09:50,600
Se vi havas la komponantoj, estas
facile fari pli grandan komponanton.

215
00:09:50,600 --> 00:09:51,860
Tio React lingvo por vi.

216
00:09:51,860 --> 00:09:54,270
>> Do iru antaŭen kaj doni
tion legita.

217
00:09:54,270 --> 00:09:55,070
Paŭzi tiu video.

218
00:09:55,070 --> 00:09:57,440
Donu ĝin legita se vi estas
hejme, se vi ne

219
00:09:57,440 --> 00:10:00,794
familiara kun HTML aŭ Javascript

220
00:10:00,794 --> 00:10:02,960
Bone, do kion ni tuj
fari estas ni tuj faros

221
00:10:02,960 --> 00:10:06,470
tre baza flashcard app uzanta React.

222
00:10:06,470 --> 00:10:08,210
Ni tuj havos flashcard.

223
00:10:08,210 --> 00:10:09,880
Vi povas klaki la karton reen.

224
00:10:09,880 --> 00:10:12,399
Kaj ni ankaŭ havas liston de
ĉiuj kartoj kiujn ni havas,

225
00:10:12,399 --> 00:10:14,190
kaj se ni sentas
ambiciaj, eble ni

226
00:10:14,190 --> 00:10:17,060
povis ŝanĝi inter
aŭtoj alklakante ilin.

227
00:10:17,060 --> 00:10:20,360
>> Sed tio estas, de via nuda
ostoj, tre simpla React app.

228
00:10:20,360 --> 00:10:22,560
Kaj tiel tio estas vere
ne banalaj implementar,

229
00:10:22,560 --> 00:10:26,030
sed ni tuj montras, ke se vi faros
tiu, ĝi estas tre, tre facila de etendi ŝin

230
00:10:26,030 --> 00:10:27,680
se aliaj personoj helpi vin kun ĝi.

231
00:10:27,680 --> 00:10:33,750
Do ni tuj iru tra kvar paŝoj
ekde nulo konstrui ĉi.

232
00:10:33,750 --> 00:10:36,740
>> Bone, do la kvar ŝtupoj, ni
dividi kun la unua paŝo.

233
00:10:36,740 --> 00:10:39,790
La unua paŝo estas tuj estos
konstruante via unua komponanto.

234
00:10:39,790 --> 00:10:44,830
Kiel mi diris antaŭe, komponanto en React
estas nur HTML elemento en esteroides.

235
00:10:44,830 --> 00:10:49,660
Ĝi specifas la HTML
kaj iu konduto, kaj ĝi

236
00:10:49,660 --> 00:10:52,600
specifos kiel homoj
povas interagi kun ĝi kiel

237
00:10:52,600 --> 00:10:54,270
ĝi havus internan staton.

238
00:10:54,270 --> 00:10:57,630
Kiel butono scios kiel kiom
tempoj ĝi estas klakita ekzemple,

239
00:10:57,630 --> 00:11:01,010
kaj ĝi scias kiel meti sin el.

240
00:11:01,010 --> 00:11:04,430
>> Do ni iru antaŭen kaj konstrui nian
unua komponanto uzante JavaScript.

241
00:11:04,430 --> 00:11:09,711
Do se la sintakso aspektas stranga,
tio estas ĉar ĝi ia estas.

242
00:11:09,711 --> 00:11:11,710
Do, denove, ni tuj
fari variablo nomis

243
00:11:11,710 --> 00:11:14,580
app uzante la ŝlosilvorto lasu,
kion faras variablon,

244
00:11:14,580 --> 00:11:18,210
lasu App egalaj React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> React estas biblioteko kaj havas
la krei klason funkcio.

246
00:11:22,609 --> 00:11:24,400
Kaj ĉi tiu funkcio estas
iom de kodo kiun vi

247
00:11:24,400 --> 00:11:29,090
povas uzi por krei novan
tipo de React komponanto.

248
00:11:29,090 --> 00:11:32,780
Kaj tiel React.createClass
faras komponanton,

249
00:11:32,780 --> 00:11:35,270
kaj tiu komponanto
povos fari aĵojn.

250
00:11:35,270 --> 00:11:40,460
La ĉefa afero povas fari estas render
io, redonu kiel funkcio.

251
00:11:40,460 --> 00:11:44,500
>> Denove, se tiu indekso ne estas evidentaj al
vi, mi rekomendas al vi iri sur JS por katoj

252
00:11:44,500 --> 00:11:45,682
kaj kontrolu ĝin.

253
00:11:45,682 --> 00:11:47,710
Estas ke zomis en sufiĉe bone?

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

255
00:11:48,490 --> 00:11:50,670
>> Do ĉiu kompono bezonoj
havi redonu funkcio.

256
00:11:50,670 --> 00:11:53,010
La render funkcio diras,
kion mi presi sur la ekrano?

257
00:11:53,010 --> 00:11:54,760
Sed la komponanto estas
senutila se ne

258
00:11:54,760 --> 00:11:58,060
sciis kion presi sur la ekrano, tiel
vi bezonas havi redonu funkcio.

259
00:11:58,060 --> 00:12:01,904
>> Do en la redonu afero, vi
nur bezonas reveni iuj HTML.

260
00:12:01,904 --> 00:12:03,820
Kaj kio estas malvarmeta estas ke
ekzistas io nomata

261
00:12:03,820 --> 00:12:08,660
JSX, kiu estas pligrandigo de
JavaScript kiu estas uzita de reagi.

262
00:12:08,660 --> 00:12:11,845
Ĝi ni vin skribas HTML ene
de via JavaScript, kiu

263
00:12:11,845 --> 00:12:13,970
sonas iomete bizara kiam
vi unue pensas pri ĝi,

264
00:12:13,970 --> 00:12:15,553
sed ĝi faras multan senton poste.

265
00:12:15,553 --> 00:12:17,430
Do ni povas fari tion.

266
00:12:17,430 --> 00:12:21,360
Se vi estas familiara kun HTML, mi scias
ni havos div kun ĝenerala celo

267
00:12:21,360 --> 00:12:22,790
ujo por vazaro.

268
00:12:22,790 --> 00:12:26,380
Ni povas reveni div, kaj interne
ĉi div, ni povas meti aĵojn.

269
00:12:26,380 --> 00:12:32,390
>> Do diru ni volas repagi nur
leviĝas rekte flashcard nun.

270
00:12:32,390 --> 00:12:34,890
La flashcard, mi dirus,
havos demandon kaj respondon.

271
00:12:34,890 --> 00:12:37,530
Do ene ĉi div, ni
elprinti paragrafo

272
00:12:37,530 --> 00:12:42,155
kiu diras question-- Kio estas la
finfina respondo al vivo, la universo?

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

274
00:12:47,640 --> 00:12:50,345
Kaj tiam la respondo estas
tuj estos, kompreneble, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Ke ne venis bone entute.

277
00:12:59,730 --> 00:13:04,164
Jes, do esence vi povas vere
skribi HTML ene via Javascript.

278
00:13:04,164 --> 00:13:06,330
Kaj tiu tuj estos
presita sur la ekrano.

279
00:13:06,330 --> 00:13:08,250
Do ni provu ĝin.

280
00:13:08,250 --> 00:13:09,520
>> Do ni havas nian komponanto.

281
00:13:09,520 --> 00:13:12,210
Ni bezonas diri React meti
la komponanto sur la ekrano

282
00:13:12,210 --> 00:13:18,990
tiel React.render, tiel rimarki ke ni
trakti app kiel ajna alia elemento.

283
00:13:18,990 --> 00:13:21,010
Ni skribas ĝin kiel estis HTML elemento.

284
00:13:21,010 --> 00:13:25,100
Kiel anstataŭ diri kiel img
por bildo aŭ p por alineo,

285
00:13:25,100 --> 00:13:28,120
vi skribas App, do App estas
traktata kiel HTML elemento.

286
00:13:28,120 --> 00:13:30,380
Kiel mi diris antaŭe, estas
elementon en esteroides.

287
00:13:30,380 --> 00:13:32,870
>> Do vi redonu App, kaj vi
doni al ĝi lokon por meti ĝin.

288
00:13:32,870 --> 00:13:37,170
Kaj jen kiel vi povas
sciigi kie meti ĝin.

289
00:13:37,170 --> 00:13:46,200
Mi kreis simplan div sur la
paĝo nomita kun ID de paĝo,

290
00:13:46,200 --> 00:13:48,300
kaj estas kie la
elemento tuj iras.

291
00:13:48,300 --> 00:13:49,841
>> Kaj ni ne tuj kuri kun HTML.

292
00:13:49,841 --> 00:13:53,145
Esence ĉi tiu tuj akiri
metis ene de ĉi paĝon elemento

293
00:13:53,145 --> 00:13:54,270
ke ni havas sur la ekrano.

294
00:13:54,270 --> 00:13:59,210
Do ĝi kuras tiun kodon, kaj ĝi desegnas ĉi
afero sur la ekrano, do jen ni estas.

295
00:13:59,210 --> 00:14:01,770
Ni faris nian unuan React komponanto.

296
00:14:01,770 --> 00:14:08,000
>> Do ĝuste kiel recap, ni milde faris
nova tipo de komponanto, ĝuste?

297
00:14:08,000 --> 00:14:10,145
Tion la React.createClass.

298
00:14:10,145 --> 00:14:12,680
Kaj en tiu komponanto, ni
rakontis kion ĝi devus fari.

299
00:14:12,680 --> 00:14:15,590
Kiam ajn tiu komponanto estas
presi sur la ekranon,

300
00:14:15,590 --> 00:14:19,300
ĝi estos presi la div kun
la du paragrafoj ene de ĝi.

301
00:14:19,300 --> 00:14:24,460
>> Kaj kion ni faris, ni faris novan app
uzante la angulo krampo app skribmaniero.

302
00:14:24,460 --> 00:14:27,160
Ni rakontis meti ĝin
ene la paĝo elemento.

303
00:14:27,160 --> 00:14:29,867
Kaj do kion mi faris, ĝi kreis
nova app de tiu ŝablono.

304
00:14:29,867 --> 00:14:31,200
Kaj poste mi rakontis al redonu ĝin.

305
00:14:31,200 --> 00:14:33,680
Do ĝi diris, OK, app,
kion mi devus elprinti?

306
00:14:33,680 --> 00:14:36,970
App diras, iru elprinti div
kun du alineoj ene de ĝi.

307
00:14:36,970 --> 00:14:40,420
Kaj voila, tie estas nia div kun
du paragrafoj ene de ĝi.

308
00:14:40,420 --> 00:14:43,180
Sencon ĝis nun?

309
00:14:43,180 --> 00:14:46,690
>> Do, denove, la tuta defio de React
Estas simple scianta kiel fari komponantojn.

310
00:14:46,690 --> 00:14:48,500
Kiel fari la
komponantoj labori kune.

311
00:14:48,500 --> 00:14:51,780
Nun ke ni faris nian unuan
komponanto, ni revenu

312
00:14:51,780 --> 00:14:54,284
kaj fari komponantoj personalizable.

313
00:14:54,284 --> 00:14:56,700
Do vi scipovas en HTML vin
povas doni vian butonoj klasoj?

314
00:14:56,700 --> 00:14:59,146
Vi povas doni viajn ankrojn la href.

315
00:14:59,146 --> 00:15:00,770
Vi povas doni vian enigoj tipo, dekstra?

316
00:15:00,770 --> 00:15:04,740
Vi povas doni pli kutimo
propraĵoj al ĉiuj viaj elementoj

317
00:15:04,740 --> 00:15:06,490
fari ĝin pli interesa.

318
00:15:06,490 --> 00:15:09,030
Kaj ni fakte povas fari
la ĝusta sama afero.

319
00:15:09,030 --> 00:15:17,500
>> Do diru ni volas nian
app iri repagi ajnan karton.

320
00:15:17,500 --> 00:15:19,630
Ĝuste nun ni nur
kapitulacigis hardcoded karto.

321
00:15:19,630 --> 00:15:22,530
Ni scias, ke estas nur unu
karton povas fari, tial ni estas

322
00:15:22,530 --> 00:15:25,960
tuj provi kaj ŝanĝi ĉi nun tiel
ke ni povas simple doni ĝin iuj karto.

323
00:15:25,960 --> 00:15:27,410
Ĝi devos presi la karto.

324
00:15:27,410 --> 00:15:29,380
>> Vi devus provi kaj fari via
komponantoj tre ĝenerala celo.

325
00:15:29,380 --> 00:15:31,654
Do tiu vojo mi povus retmesaĝi
cxi tiu mia amiko kaj esti kiel,

326
00:15:31,654 --> 00:15:33,820
ajn flashcard vi havas,
nur nutri ĝin tie,

327
00:15:33,820 --> 00:15:35,290
kaj tion faros per sin.

328
00:15:35,290 --> 00:15:37,650
Vi povas meti aliajn
aferoj en via propra app.

329
00:15:37,650 --> 00:15:40,600
>> Sed unue, ni rompos ĉi
supren en du komponantoj,

330
00:15:40,600 --> 00:15:44,500
sed ni volas disigi la karto
preso parto de la fakta app parto.

331
00:15:44,500 --> 00:15:46,660
Do kion ni povas fari estas ni
povas ŝanĝi ĉi de App

332
00:15:46,660 --> 00:15:51,300
al CardView, nur
nova nomo por la app,

333
00:15:51,300 --> 00:15:54,450
kaj ni povas fari novan
komponanto nomita App,

334
00:15:54,450 --> 00:15:56,336
Ne konfuzi kun la malnova App.

335
00:15:56,336 --> 00:16:00,730
Ni havas la createClass,
kaj kiel en HTML,

336
00:16:00,730 --> 00:16:03,590
vi povas nesto React komponantoj
ene de ĉiu alia.

337
00:16:03,590 --> 00:16:16,430
>> Do en tiu render funkcio,
funkcio reveno CardView,

338
00:16:16,430 --> 00:16:18,234
kaj tiu estas la ĝusta sama afero.

339
00:16:18,234 --> 00:16:19,400
Vidu por tio estas la sama afero?

340
00:16:19,400 --> 00:16:22,590
Anstataŭ faranta ĝuste la app ke
havas la div kaj parigo internon,

341
00:16:22,590 --> 00:16:26,194
la app faras la CardView, kaj la
CardView bildigas la div kaj alineo.

342
00:16:26,194 --> 00:16:29,110
Do tiu estas nia unua ekzemplo de
nestumado elementoj ene de unu la alian.

343
00:16:29,110 --> 00:16:32,177
Ĉu tio havas sencon?

344
00:16:32,177 --> 00:16:33,760
Do, denove, ni havas CardView elemento.

345
00:16:33,760 --> 00:16:37,250
Ni havas app elementoj
ke ĝi estas pli granda ol.

346
00:16:37,250 --> 00:16:40,990
>> Bone, do ni volas nian CardView-- se vi
doni bonan CardView certa karto,

347
00:16:40,990 --> 00:16:43,370
ĝi devos presi ekstere por vi, dekstra?

348
00:16:43,370 --> 00:16:48,050
Do unue ni devas fari karto,
tial ni ebriigu karton objekto.

349
00:16:48,050 --> 00:17:02,930
Tiel mia karto equal--
se vi ĉiuj konas,

350
00:17:02,930 --> 00:17:05,260
tiu estas nur la notacio-farado
kontesti en JavaScript.

351
00:17:05,260 --> 00:17:09,280
Estas ia kiel struct
en C, do ni faris karto,

352
00:17:09,280 --> 00:17:15,920
kaj do nun ni povas pasi tiun karton kiel
propraĵo aŭ kiel atributo en HTML

353
00:17:15,920 --> 00:17:17,290
terminologio nian programon.

354
00:17:17,290 --> 00:17:20,210
Do ni povas fari tion, App
karto egalas myCard.

355
00:17:20,210 --> 00:17:23,200
>> Vi scias kiamaniere en enigo, vi faras
input type egalas teksto aŭ butono

356
00:17:23,200 --> 00:17:25,240
klaso egalas BTN por startigi ,?

357
00:17:25,240 --> 00:17:29,500
Sama ideo, App karto equals--
vi devas meti krampoj here--

358
00:17:29,500 --> 00:17:33,830
App karto egalas myCard, do ĉi
diras ni havi ĉi karto objekto.

359
00:17:33,830 --> 00:17:39,149
Mi tuj pasos ĝin kiel
posedaĵo al la app komponanto.

360
00:17:39,149 --> 00:17:41,440
Kaj tiu app komponanto
povos aliri ĝin kaj fari

361
00:17:41,440 --> 00:17:43,580
interesajn aferojn kun ĝi.

362
00:17:43,580 --> 00:17:47,650
>> Do nia app estas iranta esti
donita karton, tiel por nun,

363
00:17:47,650 --> 00:17:49,980
ni havas la app nur donu
la karto al la CardView

364
00:17:49,980 --> 00:17:53,110
mem ĉar kiel la app ne
tuj scios kion fari kun ĝi,

365
00:17:53,110 --> 00:17:54,850
tial ni simple doni ĝin al la CardView.

366
00:17:54,850 --> 00:18:00,050
Do ni fordoni la
sammaniere, karto egalas,

367
00:18:00,050 --> 00:18:05,426
kaj tiel ĉiu komponento povas aliri la
aferoj kiu estis donita al ĝi.

368
00:18:05,426 --> 00:18:07,800
Ili povas aliri la propraĵoj
kiuj estas donitaj al ĝi

369
00:18:07,800 --> 00:18:09,470
uzante tiu sintakso, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Do kio okazas ĉi tie estas
vi havas la myCard objekto.

372
00:18:14,920 --> 00:18:18,250
Vi pasas ĝin en la app
uzante App karto egalas myCard.

373
00:18:18,250 --> 00:18:21,420
Ke karto objekto estas donita al via app.

374
00:18:21,420 --> 00:18:24,400
La programo povas aliri ĝin
kiel this.props.card.

375
00:18:24,400 --> 00:18:28,780
Estas ia kiel bildo
scias kion ĝia fonto estas.

376
00:18:28,780 --> 00:18:31,972
>> Tiu ĉi programo scias kio ĝi estas karto
estas, kaj ĝi povas fari aferojn kun ĝi.

377
00:18:31,972 --> 00:18:32,930
Ĝi povas fari kalkulojn.

378
00:18:32,930 --> 00:18:35,290
Ĝi povas fari decidojn surbaze de tio.

379
00:18:35,290 --> 00:18:39,950
>> Nuntempe, mi tuj pasos
this.props.card sur la CardView.

380
00:18:39,950 --> 00:18:43,420
Sencon ĝis nun?

381
00:18:43,420 --> 00:18:45,210
Ĝi faros pli sentita nun.

382
00:18:45,210 --> 00:18:46,990
>> Bone, do nun ni estas en CardView.

383
00:18:46,990 --> 00:18:51,719
Nia CardView, donita la karto, devus
elprinti lia demando kaj respondo.

384
00:18:51,719 --> 00:18:54,510
Ĝuste nun ni ĵus presita ekster iuj
hardcoded demandoj kaj respondoj.

385
00:18:54,510 --> 00:18:57,720
Ni devas kalkuli fjordon ni bezonas
demandi la karto ke ili donis nin

386
00:18:57,720 --> 00:19:01,360
kio estas la demando kaj respondo, kaj
tiam printi sur la ekrano.

387
00:19:01,360 --> 00:19:02,470
>> Do ni povas fari ĉi tie.

388
00:19:02,470 --> 00:19:06,135
En redonu begin-- unua fari egaluloj.

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

390
00:19:08,710 --> 00:19:13,050
Do kion ni faras ĉi tie estas ni scias ke
la kartoj estas donitaj nin al propraĵo,

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

392
00:19:13,580 --> 00:19:15,930
Ĝi estas donita al ni kiel enigaĵoj.

393
00:19:15,930 --> 00:19:19,440
Kiel ĝi estas preskaŭ kiel
argumentoj al funkcio.

394
00:19:19,440 --> 00:19:22,810
La karto estas argumento
preskaŭ al ĉi CardView.

395
00:19:22,810 --> 00:19:25,239
>> Ni ĉerpi ke, kaj metis
ĝin en la variablo demando.

396
00:19:25,239 --> 00:19:27,280
Certiĝu la respondo venis
al la variablo respondo.

397
00:19:27,280 --> 00:19:31,130
Instigas ke karto respondi.

398
00:19:31,130 --> 00:19:35,072
Kaj nun ke ni havas tiujn,
anstataŭ presi el tiu teksto,

399
00:19:35,072 --> 00:19:37,030
ni tuj presi
kion ili donis al ni.

400
00:19:37,030 --> 00:19:43,580
>> Do tiu stuff-- do ni tuj
estingi Demando Respondo.

401
00:19:43,580 --> 00:19:46,380
Ni vidu se tio funkcias.

402
00:19:46,380 --> 00:19:52,800
Cool, do ni tretas tra ĝi
unu pli tempon ĝuste por certi.

403
00:19:52,800 --> 00:20:00,470
>> Do mia karto estas karto objekto, kaj ni
donas tiu karto al la app.

404
00:20:00,470 --> 00:20:04,790
Kaj la app tuj prenos la
karton kaj doni ĝin al la CardView.

405
00:20:04,790 --> 00:20:09,190
Kaj ĉi CardView diras, se vi
donas min ajna flashcard objekto,

406
00:20:09,190 --> 00:20:11,920
Mi presi lian demandon
kaj lia respondo, ĉu ne?

407
00:20:11,920 --> 00:20:14,590
>> Do kion mi povus fari estas mi povas
sendu tiun kodon, la unua

408
00:20:14,590 --> 00:20:16,580
kiel 10 linioj de mia kodo, al mia amiko.

409
00:20:16,580 --> 00:20:18,820
Li povis enkorpigi ĝin en
lia propra apliko.

410
00:20:18,820 --> 00:20:27,200
Kaj tiel longe, kiel li faris la samon,
kiel CardView karto egalas tio,

411
00:20:27,200 --> 00:20:30,580
tiel longe kiel li kreis la CardView
kaj donis al ĝi la rajton informoj,

412
00:20:30,580 --> 00:20:31,987
li povus repagi sian propran karton.

413
00:20:31,987 --> 00:20:34,320
Do tiu vojo, ĝi estas vere
malvarmeta maniero por vi konstrui

414
00:20:34,320 --> 00:20:35,906
komponantoj kiuj uzas reciproke, ĉu ne?

415
00:20:35,906 --> 00:20:38,280
Tiu karto, mi povis eldoni
ĉi CardView sur la Interreto,

416
00:20:38,280 --> 00:20:39,790
kaj homoj povos uzi ĝin.

417
00:20:39,790 --> 00:20:45,070
Do resume, estas kiel unu el la
normo funkciojn en la C biblioteko.

418
00:20:45,070 --> 00:20:47,280
>> Ĝi estas funkcio kie
iu skribis ĝin.

419
00:20:47,280 --> 00:20:48,419
Vi donas certan enigo.

420
00:20:48,419 --> 00:20:49,710
Ĝi devos produkti certan eligo.

421
00:20:49,710 --> 00:20:50,890
Vi ne zorgas kiel ĝi funkcias interne.

422
00:20:50,890 --> 00:20:53,790
Tiel longe kiel vi donos ĝin dekstren
enigo, ĝi faros la dekstran eligo.

423
00:20:53,790 --> 00:20:57,850
>> Kaj komponanto povas esti
pensis sammaniere.

424
00:20:57,850 --> 00:21:00,280
Ĉi CardView similas
biblioteko funkcio.

425
00:21:00,280 --> 00:21:03,400
Se vi donos al ĝi iun karton
kiel proprieto, ĝi devos

426
00:21:03,400 --> 00:21:05,095
presi la enhavon de tiu karto.

427
00:21:05,095 --> 00:21:16,820
Kiel se mi ŝanĝas mian karton
anstataŭ esti kiel kio estas 5 plus 37,

428
00:21:16,820 --> 00:21:19,210
ĝi ĝisdatigos laŭe.

429
00:21:19,210 --> 00:21:21,955
Do simple ŝanĝante la enigo,
ĝi ricevas certan eligo.

430
00:21:21,955 --> 00:21:24,830
Do vi povas pensi de komponantoj preskaŭ
kiel funkcioj en ĉi tiu vojo, kiun

431
00:21:24,830 --> 00:21:25,920
vi povas kunmeti.

432
00:21:25,920 --> 00:21:29,440
Vi ricevas enigo, kiel ĉi CardView
kiel la enigo, vi ricevas eligo.

433
00:21:29,440 --> 00:21:31,900
En tiu kazo, eligo estas la HTML.

434
00:21:31,900 --> 00:21:34,404
Sencon ĝis nun?

435
00:21:34,404 --> 00:21:36,890
Cool, do denove, posedaĵoj estas
kiel vi povas pasi informon

436
00:21:36,890 --> 00:21:40,900
en kaj el komponantoj.

437
00:21:40,900 --> 00:21:42,740
>> Bone, do ni faru ĉi
afero interagaj.

438
00:21:42,740 --> 00:21:44,450
Ĝuste nun ĝi estas speco de enuiga.

439
00:21:44,450 --> 00:21:45,520
Kio estas [inaudible]?

440
00:21:45,520 --> 00:21:48,210
Vi povas presi iun ekstere,
sed jen ĉio povas fari.

441
00:21:48,210 --> 00:21:51,550
>> Do ni revenu al la
malnovan demandon ĝuste nun.

442
00:21:51,550 --> 00:21:54,405
Bone, do nun estas tiuj komponantoj
estas enuigaj ĉar ĉiuj ili fari,

443
00:21:54,405 --> 00:21:55,030
ili ricevas enigo.

444
00:21:55,030 --> 00:21:56,100
Ili faras eligo, dekstra?

445
00:21:56,100 --> 00:21:57,049
Tio estas speco de enuiga.

446
00:21:57,049 --> 00:21:59,090
Ni volas havi nian
komponantoj por povi havi

447
00:21:59,090 --> 00:22:02,150
ia interna stato,
kiel memori ion.

448
00:22:02,150 --> 00:22:05,320
>> Por flashcard, por
ekzemple, kia stato

449
00:22:05,320 --> 00:22:07,550
eble vi volas
memoras por flashcard?

450
00:22:07,550 --> 00:22:09,740
Kio provizora statuso
eble vi volas memori

451
00:22:09,740 --> 00:22:12,491
por flashcard en flashcard app?

452
00:22:12,491 --> 00:22:13,990
Spektantaro: Ĉu ĝi estas spegulita?

453
00:22:13,990 --> 00:22:14,990
Neel Mehta: Yeah, dekstre.

454
00:22:14,990 --> 00:22:17,665
Do eble vi volas teni
aŭtoveturejo de vi alfrontas supren aŭ estas

455
00:22:17,665 --> 00:22:19,100
vi surventre sur la karto.

456
00:22:19,100 --> 00:22:23,420
En Facebook, ekzemple, vi farus
volas memori kie en la datumstrion

457
00:22:23,420 --> 00:22:25,870
ĉu vi aŭ ŝatus kiuj PROFILO
vi faras nun.

458
00:22:25,870 --> 00:22:30,127
>> Sur Messenger, kiel kion tekston vin
tajpu en la enigo skatolo, dekstra?

459
00:22:30,127 --> 00:22:31,710
Se vi refreŝigi la paĝon, ĝi iras.

460
00:22:31,710 --> 00:22:32,793
Sed vi ne vere gravas.

461
00:22:32,793 --> 00:22:33,770
Estas nur provizora.

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

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

464
00:22:36,152 --> 00:22:38,360
Neel Mehta: Fulme
karto, kiel vi povas vidi

465
00:22:38,360 --> 00:22:40,290
la demando flanko aŭ la respondo flanko?

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

467
00:22:41,070 --> 00:22:43,270
>> Neel Mehta: Kiel
duflanka flashcard, dekstra?

468
00:22:43,270 --> 00:22:46,370
Jes, do vi volas
havas tiun ideon de nun

469
00:22:46,370 --> 00:22:50,370
Mi havas proprietojn, kiu estas kiel enigoj,
sed staton, kiu estas portempa, uh,

470
00:22:50,370 --> 00:22:51,839
kie vi estas sur la paĝo, ĉu ne?

471
00:22:51,839 --> 00:22:54,380
Denove, mi diris en Facebook
Mesaĝisto, mi havas kiel kiu persono

472
00:22:54,380 --> 00:22:56,550
vi visualizar Facebook
aŭ kiu PROFILO, dekstra?

473
00:22:56,550 --> 00:22:58,030
>> Tiu estas nur portempa.

474
00:22:58,030 --> 00:23:01,200
Ĝi estas grava por montri al la uzanto
kio okazas, sed refreŝigi la paĝon.

475
00:23:01,200 --> 00:23:02,250
Fakte ne gravas.

476
00:23:02,250 --> 00:23:04,530
Do estas provizora stato,
do ni ĉiuj ĝi stato.

477
00:23:04,530 --> 00:23:06,250
>> Do, denove, estas stato kaj apogiloj.

478
00:23:06,250 --> 00:23:09,084
Props estas enigo donita
de via datumfonto.

479
00:23:09,084 --> 00:23:10,250
Ŝtato estas ĝuste kiel defaŭltoj.

480
00:23:10,250 --> 00:23:13,700
Estas nur kiel aĵon ke
faras tion interagaj.

481
00:23:13,700 --> 00:23:17,720
>> Do en nia CardView-- ni havas
nia CardView-- tiel estis bela.

482
00:23:17,720 --> 00:23:21,420
Kion ni faros ĉi tie, ni tuj
tuŝi CardView kaj nur CardView.

483
00:23:21,420 --> 00:23:25,105
Kaj tial mia amiko kiu ricevis tion,
ne rimarkas ajnan diferencon.

484
00:23:25,105 --> 00:23:27,230
Ili ne devus ŝanĝi
ajna samnacia kodo,

485
00:23:27,230 --> 00:23:29,410
sed ili deziras vidi iliajn
CardView got souped supren.

486
00:23:29,410 --> 00:23:31,270
Jen bela parto pri komponantoj.

487
00:23:31,270 --> 00:23:35,290
>> Bone, do en nia CardView, ni provu kaj
sekvigi ĉu ni face up

488
00:23:35,290 --> 00:23:36,560
aŭ surventre.

489
00:23:36,560 --> 00:23:40,480
En React ni faras tion per la unua
preciziganta la komenca stato.

490
00:23:40,480 --> 00:23:42,070
Kien la karto komenci?

491
00:23:42,070 --> 00:23:48,480
>> Do esti funkcio nomita getInitialState
funkcii, kaj ni revenu objekto.

492
00:23:48,480 --> 00:23:53,310
Tiu objekto enhavas iun staton, kaj
stato estas nur ŝlosila valoro paro.

493
00:23:53,310 --> 00:23:56,950
Kiel en instrui, vi havas klavon kaj
valoron, Vi havas kiel nomo estas ĉeno.

494
00:23:56,950 --> 00:24:01,410
>> En tiu kazo, ni diru antaŭ veras.

495
00:24:01,410 --> 00:24:03,760
Tiu diras, ke ni havas staton.

496
00:24:03,760 --> 00:24:06,570
Unu komponanto de la stato
estas atributo nomata fronto.

497
00:24:06,570 --> 00:24:09,649
[Inaudible], tiel defaŭlte,
ni estas en la fronto de la karto,

498
00:24:09,649 --> 00:24:11,440
kaj ni povas ŝanĝi ĉi
kiel ni klaki la karto.

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

500
00:24:13,380 --> 00:24:18,190
>> Bone, do en redonu, nun, ni estas
montrante la demando kaj la respondo.

501
00:24:18,190 --> 00:24:20,860
Nun kion ni faru
estas montri la demando

502
00:24:20,860 --> 00:24:24,370
se ni estos en la fronto de la karto tiel
la respondo apartenas al la dorso de la karto.

503
00:24:24,370 --> 00:24:26,850
Tial vi ĉiuj faras
la karto interagaj.

504
00:24:26,850 --> 00:24:28,100
Do ni provu kaj ĉi tie.

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

506
00:24:31,600 --> 00:24:33,620
Nu, unue simple fari variablo.

507
00:24:33,620 --> 00:24:37,790
Ni povas demandi nun this.state.front.

508
00:24:37,790 --> 00:24:42,010
Ni aliri konstati la samajn ni
aliro props, do this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Se ni estas antauxe, teksto
estas this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Se ni estas sur la fronto de la
karto, ni tuj provos kaj kroĉi

512
00:24:51,360 --> 00:24:52,485
la demando de la karto.

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

514
00:24:54,782 --> 00:24:57,240
Alie, se ni estos sur la dorso
de la karto, kion ni faru?

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

516
00:25:01,830 --> 00:25:02,750
>> Publiko: La respondo?

517
00:25:02,750 --> 00:25:05,041
>> Neel Mehta: Yep, do tekston
egalas this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Sed se vi rimarkos, ni uzas
la ŝtata fari decidon

520
00:25:10,930 --> 00:25:14,420
ĉar nun la komponanto
aspektos malsamaj

521
00:25:14,420 --> 00:25:16,710
bazita sur kiom tiuj interagas kun ĝi.

522
00:25:16,710 --> 00:25:20,355
Do anstataŭ presi el tiu,
ni simple printi la tekston.

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

524
00:25:25,270 --> 00:25:28,650
Cool, do nun, kiel vi vidas,
ni vidas nur la demandon.

525
00:25:28,650 --> 00:25:37,720
Kaj se mi ŝanĝos la staton tie permane
al fronto estas falsaj ni atingos 42 reen.

526
00:25:37,720 --> 00:25:39,720
>> Do, denove, ĉi komponanto
havas sian propran ŝtaton.

527
00:25:39,720 --> 00:25:43,440
Kiel butono scias ĉu
ĝi estas premita aŭ ne,

528
00:25:43,440 --> 00:25:46,080
tion scias, kio estas sur
la fronto aŭ sur la dorso.

529
00:25:46,080 --> 00:25:48,320
Defaŭlte, ĝi estas sur la fronto.

530
00:25:48,320 --> 00:25:50,840
Kaj tiam se ĝi estas sur la fronto,
ni presi la demando.

531
00:25:50,840 --> 00:25:53,106
Se ĝi estas sur la dorson, ni
presi la respondo.

532
00:25:53,106 --> 00:25:54,980
Do, denove, la informo
donita estas la sama.

533
00:25:54,980 --> 00:25:59,090
Ĝi simple aspektas malsamaj
bazita sur kiel vi planas ĝin.

534
00:25:59,090 --> 00:26:02,670
Do, ekzemple, Facebook Messenger,
eĉ se vi akiras la samajn datumojn fonto,

535
00:26:02,670 --> 00:26:05,170
ĝi povus aspekti malsamaj
ĉar la stato estas malsamaj.

536
00:26:05,170 --> 00:26:08,421
Vi rigardas
malsama persono mesaĝo.

537
00:26:08,421 --> 00:26:10,930
>> Bone, do ĉi estas ĉiuj puto kaj
bona, sed nun kio efektive

538
00:26:10,930 --> 00:26:15,940
faru al ni povos ŝanĝi, ĉu
nia karto estas antaŭe aŭ malantaŭe.

539
00:26:15,940 --> 00:26:19,010
Ni povas fari ĉi aldonante flip
Butono, butono por la karton kiu

540
00:26:19,010 --> 00:26:22,950
estos flip la karton se ĝi estas [inaudible].

541
00:26:22,950 --> 00:26:31,770
Do ni aldonas butonon tie, ĉi
butonon, kaj la butono diri klaki.

542
00:26:31,770 --> 00:26:35,650
>> Kaj tial nun, ĝi
ne fari ion.

543
00:26:35,650 --> 00:26:37,075
Ĝi nur aspektas bela.

544
00:26:37,075 --> 00:26:43,650
Kion ni povas fari estas ni povas aldoni klako
traktilo, onClick egalas this.flip,

545
00:26:43,650 --> 00:26:44,820
kaj ni difini flip poste.

546
00:26:44,820 --> 00:26:47,120
Sed esence, onClick
estas funkcio kiu

547
00:26:47,120 --> 00:26:48,675
gets vokis, kiam la uzanto alklakas ĝin.

548
00:26:48,675 --> 00:26:52,330
>> Do la butono scios
kiam ĝi estas klakita.

549
00:26:52,330 --> 00:26:54,750
Iris ĝi estas klakita,
ĝi flip la karto.

550
00:26:54,750 --> 00:26:58,382
Estas ia kiel via
pico transdono ulo.

551
00:26:58,382 --> 00:27:01,590
Vi estas kiel, bone, kiam ajn iu
vokas min, mi transdonos picon, ĉu ne?

552
00:27:01,590 --> 00:27:03,420
>> Vi registriĝi ĉi aŭskultanto.

553
00:27:03,420 --> 00:27:04,530
Vi aŭskultos por evento.

554
00:27:04,530 --> 00:27:07,657
Vi get nomita, kaj kiam la
okazaĵo okazas, Vi faru ion.

555
00:27:07,657 --> 00:27:08,240
Vi ricevas picon.

556
00:27:08,240 --> 00:27:11,480
En tiu kazo, kiam vi estas
klakis, vi flip la karto.

557
00:27:11,480 --> 00:27:14,560
>> Kaj tial ni devas difini
funkcio kiu flip la karto,

558
00:27:14,560 --> 00:27:17,930
do ni skribos ke rajto
tie, klaki funkcio.

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

560
00:27:20,850 --> 00:27:23,680
Kaj tiel kion vi opinias flip faros?

561
00:27:23,680 --> 00:27:27,180
Denove ĉi gets nomis kiam
Ni alklaku la flip butonon.

562
00:27:27,180 --> 00:27:29,406
Kion la funkcio flip fari?

563
00:27:29,406 --> 00:27:34,136
>> Publiko: Ŝanĝo this.state.front
el vera falsa, malvera al vera.

564
00:27:34,136 --> 00:27:38,420
>> Neel Mehta: Yep, do prenu ajn
this.front is-- la fronto stato estas.

565
00:27:38,420 --> 00:27:40,930
Prenu la fronto stato, se
ĝi estas vera, fari ĝin malvera.

566
00:27:40,930 --> 00:27:42,530
Se ĝi estas falsa, igi ĝin vera, ĉu ne?

567
00:27:42,530 --> 00:27:45,330
Do ni provu tion.

568
00:27:45,330 --> 00:27:48,240
>> Vi ne povas ŝanĝi stato
nur tajpante this.state.

569
00:27:48,240 --> 00:27:50,380
Vi ne povas fari tion.

570
00:27:50,380 --> 00:27:52,030
Vi ne povas fari tion.

571
00:27:52,030 --> 00:27:55,810
Vi devas uzi funkcio
nomata this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Do vi povas diri this.setState antaŭa
dupunkto ĉi kie, denove, la ekkrion

573
00:28:03,230 --> 00:28:04,330
punkto signifas la malon.

574
00:28:04,330 --> 00:28:07,420
Mi supozas se ĉi. state.front
estas vera, gxi devos turni falsaj.

575
00:28:07,420 --> 00:28:09,170
Do ni starigis la stato
el vera al malvera.

576
00:28:09,170 --> 00:28:11,430
Se ĝi estas falsa, ni
starigis ĝin perfidos vera.

577
00:28:11,430 --> 00:28:17,210
>> Nur atentu ke ni starigis kaj akiri iomete
malsame, kaj tiel ni provu tion.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, rigardu tiun.

579
00:28:18,675 --> 00:28:21,810
La flip butono nun
ŝanĝi la malantaŭ al stato.

580
00:28:21,810 --> 00:28:24,990
>> Kaj do tie estas kie vi vidas
iomete de la magio de React.

581
00:28:24,990 --> 00:28:28,420
Kiel ni neniam rakontis ĝin al re-repagi.

582
00:28:28,420 --> 00:28:30,910
Ni neniam rakontis ĝin redesegni nenion.

583
00:28:30,910 --> 00:28:32,630
Se vi faras tiun
sen React, oni kredus

584
00:28:32,630 --> 00:28:34,588
esti to-- ŝatas kiam la
flip butono estas klakita,

585
00:28:34,588 --> 00:28:37,290
vi devus sciigi al
permane re-redonu, dekstra?

586
00:28:37,290 --> 00:28:43,050
>> React vere malvarmigi en ke se vi
doni iu stato kaj propraĵoj,

587
00:28:43,050 --> 00:28:45,760
ĝi ĉiam redonu
la ĝusta sama afero.

588
00:28:45,760 --> 00:28:48,690
Kaj tial kiam ni iam ni ŝanĝi
la ŝtata kaj la bienojn,

589
00:28:48,690 --> 00:28:50,819
reagi nur re-laude la tuta afero.

590
00:28:50,819 --> 00:28:52,860
Ĝi scias, ke tie estas
unu-al-unu korespondadon

591
00:28:52,860 --> 00:28:57,270
inter stato kaj parametro kaj HTML.

592
00:28:57,270 --> 00:29:00,110
Do kiam ajn iu el tiuj
ŝanĝoj de tra aro stato,

593
00:29:00,110 --> 00:29:03,750
ĝi ŝanĝos kiel la
salajro estas re-pruntitaj.

594
00:29:03,750 --> 00:29:06,650
Kaj tial esence React similas
atendas vin ŝanĝi.

595
00:29:06,650 --> 00:29:09,870
>> Krom se ĝi ŝanĝas ion,
gxi devos re-repagi la tutan paĝon.

596
00:29:09,870 --> 00:29:12,480
Kaj se sonas ineficiente,
ĝi estas ĉar ĝi estus,

597
00:29:12,480 --> 00:29:15,050
sed reagi uzas afero
nomita Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
Anstataŭ desegnante la paĝo rekte, ĝi
tenas la virtuala HTML arbon en memoro.

599
00:29:19,950 --> 00:29:23,620
>> Vi scias, HTML estas kiel arbo,
kiel hierarkia datumstrukturo.

600
00:29:23,620 --> 00:29:28,990
Gardas falsa arbon en memoro,
kaj kiam vi ĝisdatigas la paĝo,

601
00:29:28,990 --> 00:29:31,940
gxi devos desegni alia falsa
arbo, kaj gxi devos kalkuli

602
00:29:31,940 --> 00:29:35,120
kion ŝanĝi ĝin bezonas por fari la
paĝo por fari la du arboj egalaj.

603
00:29:35,120 --> 00:29:38,540
Do esence, ĝi praktike
re-laude multe.

604
00:29:38,540 --> 00:29:41,540
Kaj tiam ĝi nur ŝatas ŝanĝas la
paĝo en malgranda tweaks drajvo,

605
00:29:41,540 --> 00:29:44,240
Do ĝi estas tre, tre, tre efika.

606
00:29:44,240 --> 00:29:46,970
>> Do esence React volo
kiam ajn vi ŝanĝas ion,

607
00:29:46,970 --> 00:29:49,010
gxi devos re-repagi la paĝo virtuale.

608
00:29:49,010 --> 00:29:52,830
Ĝi devos diveni kion mi bezonas
ŝanĝi fari la realan paĝon reflekti

609
00:29:52,830 --> 00:29:55,602
la virtuala paĝo, kaj ĝi faros tion.

610
00:29:55,602 --> 00:29:56,560
Tio estas la virtuala DOM.

611
00:29:56,560 --> 00:29:59,350
Ĝi estas unu el la plej grandaj
trajtoj de React.

612
00:29:59,350 --> 00:30:00,880
>> Ĉu tio havas sencon?

613
00:30:00,880 --> 00:30:01,540
Demandojn?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Publiko: Kiel funkcias
kompari ankoraŭ al la MVC

617
00:30:08,969 --> 00:30:10,760
ke ni parolis pri
antaŭe kiel rimedojn.

618
00:30:10,760 --> 00:30:13,527
>> Neel Mehta: Jes, la demando
estas kiel ĝi komparas al MVC?

619
00:30:13,527 --> 00:30:14,610
Vi demandis pri resursoj.

620
00:30:14,610 --> 00:30:16,445
Nu, ni parolu pri kiel ĝi funkcias.

621
00:30:16,445 --> 00:30:18,190
>> En MVC, oni kredus ĝisdatigi la modelo.

622
00:30:18,190 --> 00:30:20,560
Tiukaze ni havus karton modelo.

623
00:30:20,560 --> 00:30:24,540
La vido havus la
flip-butonon, kaj la kontrolo

624
00:30:24,540 --> 00:30:26,310
havus la flip funkcio.

625
00:30:26,310 --> 00:30:28,450
Do la vido dirus al la
regilo por klaki klaki.

626
00:30:28,450 --> 00:30:30,370
Flip rakontus la
modelo ŝanĝi, ĉu ne?

627
00:30:30,370 --> 00:30:33,915
>> Kaj do kiam vi faras MVC, vi
aŭskulti por la modelo ŝanĝi,

628
00:30:33,915 --> 00:30:37,150
kaj vi re-repagi la vido laŭe.

629
00:30:37,150 --> 00:30:39,210
Aŭ vi nur devas ŝati
havas la regilo.

630
00:30:39,210 --> 00:30:42,418
Atendu la modelo ŝanĝi, kaj tiam
elekti kaj elekti parton de kiel aĵo

631
00:30:42,418 --> 00:30:44,032
ŝanĝi.

632
00:30:44,032 --> 00:30:45,740
Ĉi tie ni havas unu aferon,
sed en granda app,

633
00:30:45,740 --> 00:30:48,510
vi devas ŝati memori kion
la ŝanĝi en ĉiu ununura loko,

634
00:30:48,510 --> 00:30:50,290
tiel ĝi estas iom ĝena.

635
00:30:50,290 --> 00:30:53,670
Kaj tiel React belas
ĉar ĝi havas Shadow Dom.

636
00:30:53,670 --> 00:30:56,040
Ĝi povas havigi nur
reverki la tutan aferon.

637
00:30:56,040 --> 00:30:58,680
Vi ne devas selekteme
kiel diveni kion ĝisdatigi.

638
00:30:58,680 --> 00:31:02,186
>> En Facebook se vi ŝatas
ricevas novan mesaĝon, en MVC,

639
00:31:02,186 --> 00:31:04,060
vi devus memori,
OK, ŝanĝu la aferojn

640
00:31:04,060 --> 00:31:06,260
ĉe la supro de la
paĝon, la mesaĝo ikono.

641
00:31:06,260 --> 00:31:08,290
Ankaŭ pop nova fenestro en la fundo.

642
00:31:08,290 --> 00:31:10,070
Ankaŭ fari ion novan en tiu fenestro.

643
00:31:10,070 --> 00:31:11,060
Ankaŭ ludi sonon.

644
00:31:11,060 --> 00:31:13,150
>> Tio estas multe da taskoj
elirante en la sama tempo.

645
00:31:13,150 --> 00:31:15,320
Kaj do se vi faras ne
havas Shadow Dom, oni kredus

646
00:31:15,320 --> 00:31:18,740
devas fari tion permane ĉar
Vi ne povas forigi la tutan paĝon.

647
00:31:18,740 --> 00:31:21,430
Vi ne povas havigi, do vi havas
ŝanĝi ĉiun aferon permane,

648
00:31:21,430 --> 00:31:23,990
kiu estas vere ĝena en MVC.

649
00:31:23,990 --> 00:31:27,640
>> Do, por esti
Thrifty, ili selekte

650
00:31:27,640 --> 00:31:30,750
ĝisdatigi la paĝon, kiu estas
efika, sed ankaŭ ĝena.

651
00:31:30,750 --> 00:31:34,002
En React, pro la Ombro
Dom, vi ricevas ambaŭ aĵoj senpage.

652
00:31:34,002 --> 00:31:35,710
Ĝi estas efika ĉar
de la Ombro Dom.

653
00:31:35,710 --> 00:31:37,210
La botelkolo estas ĝisdatigi la paĝon.

654
00:31:37,210 --> 00:31:40,292
Oni ne faras la arbo manipulado.

655
00:31:40,292 --> 00:31:41,250
Vi ricevas la efikeco.

656
00:31:41,250 --> 00:31:45,420
Vi ankaŭ preni la facilan uzadon ĉar
se vi nur reverki la tutan paĝon,

657
00:31:45,420 --> 00:31:48,970
sed vi ĝuste scias, bone, tion
tuj estos sur la paĝo ie.

658
00:31:48,970 --> 00:31:51,180
Povus esti en malsama loko, sed
ĝi estas iranta esti sur la paĝo, ĉu ne?

659
00:31:51,180 --> 00:31:52,860
Do vi simple re-pruntitaj
la tuta afero virtuale,

660
00:31:52,860 --> 00:31:55,540
kaj vi povus fari paron
ŝanĝoj al la paĝo mem.

661
00:31:55,540 --> 00:31:57,850
>> Do, denove, en MVC vi
devus elekti

662
00:31:57,850 --> 00:32:01,840
inter facileco de uzo kaj efikeco,
kaj reagi, vi ricevas ambaŭ.

663
00:32:01,840 --> 00:32:04,020
Do estas pli bone.

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

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

666
00:32:06,676 --> 00:32:12,080
>> Bone, do ni vidu ni parolu
iomete pri paŝo 4,

667
00:32:12,080 --> 00:32:14,740
kiamaniere ni povas enigi komponantoj.

668
00:32:14,740 --> 00:32:16,260
Do ni havas tiun rajton nun.

669
00:32:16,260 --> 00:32:19,420
Ni havas niajn malvarmeta malmulte butonon.

670
00:32:19,420 --> 00:32:23,157
Ni povas klaki ĝin reen kaj
eliru, kaj jen ĉio faras.

671
00:32:23,157 --> 00:32:24,990
Supozu ke ni volas
havas alian komponanton.

672
00:32:24,990 --> 00:32:28,730
Diru nia flashcard app devus
enhavas liston de ĉiuj kartoj

673
00:32:28,730 --> 00:32:31,520
kiun vi havas, por ke signifas nin
devus havi alian komponanton.

674
00:32:31,520 --> 00:32:32,970
Nu, eble nomas ĝin lerta vido.

675
00:32:32,970 --> 00:32:36,200
Ni faras lerta vido ke
kunvivas kun la CardView,

676
00:32:36,200 --> 00:32:39,680
kaj tiu lerta vido kaj CardView
ŝatos laboron kune.

677
00:32:39,680 --> 00:32:43,190
Kaj vi povas kombini ilin
fari nian app por vi.

678
00:32:43,190 --> 00:32:45,160
>> Do unue, ni faru
Paro pli kartojn dekstre.

679
00:32:45,160 --> 00:32:46,370
Diru, kion kartoj?

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

681
00:32:49,619 --> 00:32:51,910
Kaj ĝuste tial mi ne devas
naskis vin per tajpado en,

682
00:32:51,910 --> 00:32:53,410
Mi simple tuj kopii ĝin de tie.

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

684
00:33:01,664 --> 00:33:03,580
Kaj tiel mi tuj ne
donu ĝin nur unu karto.

685
00:33:03,580 --> 00:33:06,910
Mi tuj donos ĝin tabelo de kartoj.

686
00:33:06,910 --> 00:33:10,240
Do unue la apps
tuj rompos nun.

687
00:33:10,240 --> 00:33:14,717
Bone, do ni tuj faros
tiu povis manipuli plurajn kartojn.

688
00:33:14,717 --> 00:33:17,800
Do unue, ni tuj doni ĝin, ne
nur unu karto sed tabelo de kartoj,

689
00:33:17,800 --> 00:33:18,700
kiel listo de kartoj.

690
00:33:18,700 --> 00:33:20,980
Kaj en ĉi tiu kazo, ni havas tri el ili.

691
00:33:20,980 --> 00:33:27,280
>> Bone, do tial app estas
tuj ricevi liston kartojn,

692
00:33:27,280 --> 00:33:29,870
kaj ĝi tuj decidi kion
unu montri al la CardView.

693
00:33:29,870 --> 00:33:33,740
La CardView povas nur
repagi unu karto, sed la app

694
00:33:33,740 --> 00:33:37,610
ricevas liston de ĉiuj la kartoj, dekstra?

695
00:33:37,610 --> 00:33:40,820
>> Do kiam vi diveni unu
karton doni al CardView,

696
00:33:40,820 --> 00:33:44,660
Kiel volus vin konjektas vin povus esti kapabla
fari decidon pri kiu karto

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

698
00:33:47,064 --> 00:33:49,980
Doni al vi aludo: ĝi estas provizore
Vi estos vidanta certa karto.

699
00:33:49,980 --> 00:33:53,260
Se vi refreŝigi la paĝon, vi
nur iri reen al la unua karto.

700
00:33:53,260 --> 00:33:55,464
Tio estas bone ĉar ĝi estas portempa.

701
00:33:55,464 --> 00:33:56,630
Kio tekniko povus ni uzu?

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

703
00:34:02,534 --> 00:34:08,760
>> Spektantaro: Vi povus fari variablon
tiel kiel vi havis fronto.

704
00:34:08,760 --> 00:34:11,989
Ĉu vere, vi povis
havas aktualan karto egalas 1?

705
00:34:11,989 --> 00:34:14,150
>> Neel Mehta: Jes, do ni
volas havi stato, ĉu ne?

706
00:34:14,150 --> 00:34:16,080
Vi uzus stato en la
komponanto elkompreni

707
00:34:16,080 --> 00:34:17,288
kiun karton ĉu ni volas akiri.

708
00:34:17,288 --> 00:34:19,290
Kiel ni havas liston de
ĉiuj kartoj, Ni

709
00:34:19,290 --> 00:34:21,630
uzi stato elkompreni
unu el la unua karto,

710
00:34:21,630 --> 00:34:23,710
dua karto, tria karto, kaj tiel plu.

711
00:34:23,710 --> 00:34:28,760
>> Do app tiel app ricevos
havas la getInitialState funkcio,

712
00:34:28,760 --> 00:34:35,020
getInitialState funkcio reveno.

713
00:34:35,020 --> 00:34:39,929
Kaj ni nur diros activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Do nun nia app havas ĝia propra stato.

715
00:34:42,889 --> 00:34:47,179
>> Kaj tial nun redonu, elŝeligi
karton, ni nur iras al la tabelo

716
00:34:47,179 --> 00:34:49,969
kaj ekpreni la aferon en tiu indekso.

717
00:34:49,969 --> 00:34:53,580
Elektu karton egalaj this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Do kiel vi vidas tie, la teatrorekvizitoj kaj
la stato reale labori kune.

720
00:35:00,162 --> 00:35:08,990
Do nun ni havas niajn activeCard,
ni nomas ĝin activeCard,

721
00:35:08,990 --> 00:35:10,470
kaj vidu se tio funkcias.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Ho, tio estis eraro tekston.

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, do nun ni estis reen
kie ni estis antaŭe, ĉu ne?

729
00:35:54,840 --> 00:35:57,100
Sama malnova programo krom
nun ni povas elporti

730
00:35:57,100 --> 00:35:59,390
listo de kartoj, ne nur unu karto.

731
00:35:59,390 --> 00:36:04,130
Kaj nun, denove, se ni ŝanĝas la
activeIndex, ni povas iri de 0 al 1,

732
00:36:04,130 --> 00:36:07,330
kaj nun ke dua karto,
kaj poste ni iris al 0.

733
00:36:07,330 --> 00:36:10,390
Do jen nova
souped-supren versio de nia.

734
00:36:10,390 --> 00:36:16,000
>> Bone, do nun ni havas liston vidon ke
montras ĉiujn kartojn en via programo,

735
00:36:16,000 --> 00:36:19,980
do ni faru novan
komponanto nomita listview.

736
00:36:19,980 --> 00:36:22,155
Lasu listview egalas react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Do ni volas repagi neordigitan
listo kun listeron por ĉiu karto.

739
00:36:38,800 --> 00:36:41,490
Kaj do ni havas faskon da kartoj.

740
00:36:41,490 --> 00:36:44,990
Ni deziras unu listeron
por ĉiu karto, dekstra?

741
00:36:44,990 --> 00:36:47,490
Ni povus fari por buklo aŭ
ion fari novan listeron.

742
00:36:47,490 --> 00:36:50,522
Sed kiel vi faros en
React, uzu afero nomata mapo.

743
00:36:50,522 --> 00:36:57,150
Mapo estas ilo aŭ funkcio vi uzas
ke por ĉiu elemento, kuras iu funkcio,

744
00:36:57,150 --> 00:36:59,510
prenas reveno valoro, kaj
donas tiun dorso.

745
00:36:59,510 --> 00:37:06,310
>> Do kiel ekzemplo, ni havas la tabelo
1, 2, 3.map function-- kaj ĉi

746
00:37:06,310 --> 00:37:12,120
estas stenografio por
function-- x sago x foje x.

747
00:37:12,120 --> 00:37:16,110
Ĉi tio diras, ĉar ĉiu nombro
en 1, 2, 3, prenu ĝin.

748
00:37:16,110 --> 00:37:17,800
Akordas ĝin, kaj doni ĝin reen.

749
00:37:17,800 --> 00:37:22,090
Do kion vi pensas 1,
2, 3.map x iras al x fojojn

750
00:37:22,090 --> 00:37:25,480
x donas vin reen donita
ke tiu funkcio estas

751
00:37:25,480 --> 00:37:27,680
kuri sur ĉiu ero de tiu tabelo.

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

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

754
00:37:32,190 --> 00:37:35,709
>> Neel Mehta: Yep, 1, 4, 9
ĉar vi faras 1 fojojn 1.

755
00:37:35,709 --> 00:37:36,500
Kiu donas al vi unu.

756
00:37:36,500 --> 00:37:37,690
Jen la unua ero.

757
00:37:37,690 --> 00:37:38,530
>> 2 fojoj 2 estas 4.

758
00:37:38,530 --> 00:37:39,570
Jen dua elemento.

759
00:37:39,570 --> 00:37:40,310
3 foje 3 estas 9.

760
00:37:40,310 --> 00:37:41,540
Jen tria elemento.

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

762
00:37:42,640 --> 00:37:45,015
Do mapo havas teknikon vin
uzi en funkcia programistoj

763
00:37:45,015 --> 00:37:48,090
la nova stilo de
Programado fari ion

764
00:37:48,090 --> 00:37:50,500
por ĉiu ero en via listo.

765
00:37:50,500 --> 00:37:51,970
Kaj tiel tio sonas familiara.

766
00:37:51,970 --> 00:37:53,370
Ni havas liston de kartoj.

767
00:37:53,370 --> 00:37:56,860
Ni volas ricevi listeron por ĉiu
unu, do ni simple uzu mapo ĉi tie.

768
00:37:56,860 --> 00:38:00,250
Ni diru, lasu listo egaluloj
this.props, kartoj, mapo.

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

770
00:38:10,580 --> 00:38:15,070
>> Kaj tiel donita karton, ni estas
tuj generos listeron

771
00:38:15,070 --> 00:38:17,580
kun tiu karto enhavon flanko.

772
00:38:17,580 --> 00:38:20,660
Ni nur diras ni volas sonigas
la kartoj pridubi tiel card.question.

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

774
00:38:24,990 --> 00:38:30,649
Do tiu listo enhavas
tabelo de LI La aŭ Listo Items

775
00:38:30,649 --> 00:38:32,440
kie ekzistas unu listo
eron por ĉiu karto,

776
00:38:32,440 --> 00:38:35,150
kaj kiu enhavas la kartojn demando.

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

778
00:38:37,640 --> 00:38:39,450
>> Cool, do nun ni
reale presi ke eksteren.

779
00:38:39,450 --> 00:38:46,521
Do ni revenos ul.

780
00:38:46,521 --> 00:38:49,020
Ene ol ordigita listo,
ni simple algluita la tutan liston

781
00:38:49,020 --> 00:38:49,890
ke ili donis nin.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Ĉiuj Bone, do nun ĉi
lerta vido funkcias ĝuste trovi.

785
00:38:56,060 --> 00:38:59,842
Demandojn pri la lerta vido?

786
00:38:59,842 --> 00:39:01,270
Vi havas faskon da kartoj.

787
00:39:01,270 --> 00:39:02,800
Vi faru listeron por ĉiu karto.

788
00:39:02,800 --> 00:39:05,466
Kaj vi metos ilin en neordigitan
listo, kaj vi redonu ĝin.

789
00:39:05,466 --> 00:39:09,410
Do nun ni agu ni enkorpigi
ĉi ene de nia app,

790
00:39:09,410 --> 00:39:14,310
do ni povas fari tion, listo vido.

791
00:39:14,310 --> 00:39:17,070
Kio argumento ni pasas al listo vido?

792
00:39:17,070 --> 00:39:18,320
Kio propraĵoj ni donu gxin?

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

794
00:39:25,111 --> 00:39:26,860
Memoru, se vi donas
ĝi faskon de kartoj,

795
00:39:26,860 --> 00:39:29,590
ĝi faros la lerta
rigardi por tiuj kartoj.

796
00:39:29,590 --> 00:39:32,267
Do kion ni pasas
tie kiel la argumento?

797
00:39:32,267 --> 00:39:33,350
Publiko: Listo de kartoj?

798
00:39:33,350 --> 00:39:37,130
Neel Mehta: Jes, do kartoj
egalas this.props.cards, dekstra?

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

800
00:39:39,850 --> 00:39:44,370
Kaj do la sola problemo
estas ke vi povas nur

801
00:39:44,370 --> 00:39:48,600
turnis unu pinta nivelo elemento en redonu,
tiel vi devas volvi ŝin en div.

802
00:39:48,600 --> 00:39:49,100
Ĝi estas stranga.

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

804
00:39:56,190 --> 00:39:57,530
Do ni vidu se tiu.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Ĉu tio funkcias?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Yep, tie vi iras.

809
00:40:31,030 --> 00:40:33,700
Do nun ni havas liston
de kartoj ĉe la fundo,

810
00:40:33,700 --> 00:40:36,180
kaj tiam ni havas niajn
CardView mem sur,

811
00:40:36,180 --> 00:40:40,486
kaj tio flip inter
la du flankoj de la karto.

812
00:40:40,486 --> 00:40:42,610
Nun tio faras sencon, kiel mi faris tion?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Jes, do denove, ni havas du komponantojn.

815
00:40:46,790 --> 00:40:49,666
La unua komponento presaĵoj
ĉiun karton en la listo.

816
00:40:49,666 --> 00:40:50,540
Jen la listo vido.

817
00:40:50,540 --> 00:40:54,770
Kaj la dua komponanto
presas nur tiun karton.

818
00:40:54,770 --> 00:40:58,840
Se vi donas lin certa karto, ĝi devos
elprinti informo pri tiu slipo

819
00:40:58,840 --> 00:41:01,870
kaj lasos vin flip-reen.

820
00:41:01,870 --> 00:41:05,850
>> Do se ni volas, ni povas provi kaj diskuto
pri aldonante iuj novaj karakterizaĵoj por tiu.

821
00:41:05,850 --> 00:41:09,482
Alie ni povas paroli iom pli
pri la rapido de reaktoro,

822
00:41:09,482 --> 00:41:11,190
aŭ ni povas respondi
demandojn vi povus havi

823
00:41:11,190 --> 00:41:15,050
ĉar tiuj estas ĉiuj de la kerno partoj
de reagi ke mi volas paroli.

824
00:41:15,050 --> 00:41:16,540
Ni povas iri antaŭen.

825
00:41:16,540 --> 00:41:17,590
Ni povas respondi demandojn.

826
00:41:17,590 --> 00:41:18,560
Kion ajn vi volas.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Publiko: Cxu vi povas uzi
JSX en normala JavaScript?

829
00:41:24,205 --> 00:41:27,150
Aŭ estas kiu iu kiu
venis kun la [inaudible]?

830
00:41:27,150 --> 00:41:30,760
>> Neel Mehta: La demando estas tedaĵo
vi uzas JSX kun normala JavaScript?

831
00:41:30,760 --> 00:41:32,620
La respondo estas jes.

832
00:41:32,620 --> 00:41:41,070
JSX estas nur maniero de ĝi prenas vian
JavaScript kiu havas HTML ene de ĝi,

833
00:41:41,070 --> 00:41:44,215
kaj kompilas en JavaScript kiu
Ne havas HTML ene de ĝi.

834
00:41:44,215 --> 00:41:47,880
Do rimarki that-- tiel rimarki tie.

835
00:41:47,880 --> 00:41:50,820
Tiu similas vin havas kiel div
kaj vi havas materialon ene de ĝi.

836
00:41:50,820 --> 00:41:54,970
>> Kiu kompilas al JavaScript kiu
kiel generas la sama afero.

837
00:41:54,970 --> 00:41:59,590
Mi konjektas kion mi estas diranta estas ke
JSX estas nur sintaksa, kiel ĝi estas

838
00:41:59,590 --> 00:42:03,530
antaŭtraktilo por JavaScript multe
kiel PHP estas antaŭtraktilo por HTML.

839
00:42:03,530 --> 00:42:05,490
JSC estas antaŭtraktilo
por JavaScript kiu permesas

840
00:42:05,490 --> 00:42:12,970
vi metis HTML ene de via Javascript.

841
00:42:12,970 --> 00:42:16,425
Kaj do se vi havas la rajton transformilo
kiu estas aĵo nomita [inaudible],

842
00:42:16,425 --> 00:42:17,300
kiu transformos.

843
00:42:17,300 --> 00:42:19,360
La dekstra antaŭtraktilo,
ĝi lasos vin fari tion.

844
00:42:19,360 --> 00:42:20,235
>> Spektantaro: [inaudible]

845
00:42:20,235 --> 00:42:23,026
Neel Mehta: Kutime vi ne bezonas
meti HTML ene de JavaScript

846
00:42:23,026 --> 00:42:24,110
se via kulpo React.

847
00:42:24,110 --> 00:42:27,146
Sed vi povas fari ĝin ĉiuokaze.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Publiko: mi kredas ke vi
estis priskribita React

850
00:42:29,353 --> 00:42:31,970
kiel funkcia programado lingvo.

851
00:42:31,970 --> 00:42:35,646
Ni lernis C en CS50.

852
00:42:35,646 --> 00:42:38,032
Estas C ankaŭ funkcia lingvo?

853
00:42:38,032 --> 00:42:39,990
Neel Mehta: Do la demando
estas pri funkcia

854
00:42:39,990 --> 00:42:43,010
kontre alia afero nomata
imperativo aŭ proceduraj programado.

855
00:42:43,010 --> 00:42:44,820
Ekzistas du specoj de programoj populara.

856
00:42:44,820 --> 00:42:48,550
Unu nomiĝas proceduraj, kiu
estas ĉiuj pri kiel fari ordonojn,

857
00:42:48,550 --> 00:42:51,510
kaj unu estas funkcia, kiu tute
pri havantaj funkcioj kaj havante

858
00:42:51,510 --> 00:42:52,930
enigo kaj eligo de tiuj.

859
00:42:52,930 --> 00:42:55,930
React estas funkcia paradigmo.

860
00:42:55,930 --> 00:42:58,010
C estas tre proceduraj paradigmo.

861
00:42:58,010 --> 00:43:02,360
>> Kaj kiel ekzemplo, C ekzemple,
vi ne faras ĉi enunciativo vojo

862
00:43:02,360 --> 00:43:04,390
de farante la programo, ĉu ne?

863
00:43:04,390 --> 00:43:06,826
Vi devas diri, presi tiun.

864
00:43:06,826 --> 00:43:07,950
Ŝanĝi ĉi datumstrukturo.

865
00:43:07,950 --> 00:43:08,530
Printu tiun.

866
00:43:08,530 --> 00:43:10,160
Temas pri ordonoj.

867
00:43:10,160 --> 00:43:12,640
>> En React, tie ne
ke multaj komandoj.

868
00:43:12,640 --> 00:43:15,145
Temas pri havanta
komponantoj vi kunmetis.

869
00:43:15,145 --> 00:43:16,300
Ili estas kiel funkcioj.

870
00:43:16,300 --> 00:43:26,360
Vi havas kiel funkcio
nomata CardView,

871
00:43:26,360 --> 00:43:28,680
kiu estas funkcio
kiu havas enigo, eligo,

872
00:43:28,680 --> 00:43:30,660
kaj tiel React estas ĉiuj
pri tiu filozofio

873
00:43:30,660 --> 00:43:32,700
nin el having-- vi havas datumojn.

874
00:43:32,700 --> 00:43:34,910
Vi pasas ĝin tra ĉi
algoritmo, kaj ĝi malebligos

875
00:43:34,910 --> 00:43:36,800
eligo HTML kiu vi
nur presita la paĝo,

876
00:43:36,800 --> 00:43:39,180
kaj tial vi devas
konstrui ĝin pecon post peco.

877
00:43:39,180 --> 00:43:42,800
>> Do desegni metaforo al kio
Mi diris antaŭe, vi scias kiel

878
00:43:42,800 --> 00:43:47,050
en Facebook se vi ricevas mesaĝon,
kaj vi elekti kion partoj ĝisdatigi,

879
00:43:47,050 --> 00:43:47,882
jen proceduraj.

880
00:43:47,882 --> 00:43:48,840
Ĝi estas imperativa, dekstra?

881
00:43:48,840 --> 00:43:49,806
OK, Mi ricevis mesaĝon.

882
00:43:49,806 --> 00:43:50,930
Ni ŝanĝu konton tie.

883
00:43:50,930 --> 00:43:52,110
>> Ni pop fenestro tie.

884
00:43:52,110 --> 00:43:52,780
Ni ŝanĝu konton tie.

885
00:43:52,780 --> 00:43:53,700
Ni desegni ĉi tie.

886
00:43:53,700 --> 00:43:55,220
Tio estas proceduraj alproksimiĝo.

887
00:43:55,220 --> 00:44:00,240
>> Tion aĵojn kiel Angula,
Boost, Backbone, aliaj kadroj uzi.

888
00:44:00,240 --> 00:44:01,200
React estas funkcia.

889
00:44:01,200 --> 00:44:03,324
Ĝi estas tre malsama maniero
pensi pri aferoj.

890
00:44:03,324 --> 00:44:07,950
Ĝi prenas tiun ideon ni havas
funkcioj aŭ algoritmoj kiuj volas vin

891
00:44:07,950 --> 00:44:08,800
donu ĝin datumoj.

892
00:44:08,800 --> 00:44:11,820
Ĝi devos kraĉi kio
devus esti, kaj la komputilo

893
00:44:11,820 --> 00:44:13,490
prizorgos pezas el.

894
00:44:13,490 --> 00:44:15,890
Vi ne manipuli ĝin mem.

895
00:44:15,890 --> 00:44:18,470
Ĉu tio fari iom de senso?

896
00:44:18,470 --> 00:44:18,970
Yeah?

897
00:44:18,970 --> 00:44:24,180
>> Publiko: En funkcia lingvo,
ĉiu okazas samtempe?

898
00:44:24,180 --> 00:44:26,800
>> Neel Mehta: Ne, okazas en ordo.

899
00:44:26,800 --> 00:44:29,320
Kiel ĉi tie estas ankoraŭ
ordigi, sed ne

900
00:44:29,320 --> 00:44:32,390
okazi en ordo de kiel
rekomendantaj, komando, komando.

901
00:44:32,390 --> 00:44:36,459
Okazas en ordo de
funkcio donas eligo.

902
00:44:36,459 --> 00:44:37,750
Metu tion en alia funkcio.

903
00:44:37,750 --> 00:44:39,550
Enkalkulu en alian
funkcio, alia funkcio.

904
00:44:39,550 --> 00:44:41,470
>> Se vi fari CS51, vi havos
lernu funkciaj programoj

905
00:44:41,470 --> 00:44:42,886
iom el la medio de ĉi tiu.

906
00:44:42,886 --> 00:44:45,090
Sed esence, kio faras
React malvarmeta estas ne nur

907
00:44:45,090 --> 00:44:46,840
la unudirektaj datumoj fluo
kaj la virtuala Dom,

908
00:44:46,840 --> 00:44:48,700
sed ankaŭ ĉi tiu ideo de
funkcia programado.

909
00:44:48,700 --> 00:44:51,720
Kaj funkcia programado estas tre facila
formi kaj fari cool stuff ekster,

910
00:44:51,720 --> 00:44:53,844
kaj ĝi estas tre facile pensi
pri kaj racio pri.

911
00:44:53,844 --> 00:44:55,450
Do estas alia bona remizo de React.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Demandon?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Yeah?

916
00:45:03,150 --> 00:45:06,840
>> Publiko: Um, kial vi
uzi lasu kontraste al var?

917
00:45:06,840 --> 00:45:10,450
>> Neel Mehta: Do la demando estas
kial vi uzas lasu anstataŭ var?

918
00:45:10,450 --> 00:45:13,220
Jen afero nomata
ES6 aŭ ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Ĝi estas la nova versio de Ĝavoskripto.

920
00:45:15,820 --> 00:45:19,050
Tie estas aro da teknikaj kialoj,
Sed lasu estas bona versio de var.

921
00:45:19,050 --> 00:45:20,724
>> Estas kiel vi rakontos variabloj.

922
00:45:20,724 --> 00:45:21,390
Vi povas uzi lasu.

923
00:45:21,390 --> 00:45:22,140
Vi povas uzi var.

924
00:45:22,140 --> 00:45:23,825
Let havas faskon de teknika
reasons-- vi povas rigardi ilin

925
00:45:23,825 --> 00:45:25,610
supren later-- por kial ĝi estas pli bona.

926
00:45:25,610 --> 00:45:28,780
Esence, ES6 havas kelkajn belajn
nova sintakso, iuj novaj karakterizaĵoj

927
00:45:28,780 --> 00:45:30,720
pinte de la malnova Javascript.

928
00:45:30,720 --> 00:45:32,782
>> Do ni havas kiel kvin minutoj.

929
00:45:32,782 --> 00:45:34,990
Mi nur volis paroli pri
unu alia aĵo reala rapida.

930
00:45:34,990 --> 00:45:36,450
Se vi havis demandojn,
ni parolu pri tio poste.

931
00:45:36,450 --> 00:45:38,366
Sed ĝuste tial tiu akiras
kaptita sur fotilo, mi ĵus

932
00:45:38,366 --> 00:45:41,550
deziras paroli iom pri kiel vi
fakte uzi React en via apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Se vi iros tien,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
tiu estas la hejmpaĝo por reagi, kaj
ĝi montros al vi kiom vi vere uzas

936
00:46:03,320 --> 00:46:05,320
Reagi en viaj paĝoj.

937
00:46:05,320 --> 00:46:08,845
Esence, ĝi estas iom
komplika provas instali React.

938
00:46:08,845 --> 00:46:12,300
Ĝi ne estas tiel facila kiel vi nur treni
kaj faligi JavaScript en tie.

939
00:46:12,300 --> 00:46:15,890
>> Vi devas havi vian transformilo
starigita, kiu estos, kiel ĝi faris antaŭe,

940
00:46:15,890 --> 00:46:18,120
turni vian JSX en
la normala Javascript.

941
00:46:18,120 --> 00:46:21,030
Vi devas afero tio certigos
kompili vi ES6 al normalaj.

942
00:46:21,030 --> 00:46:24,720
Ĝavoskripto ekzistas multe de movanta
partoj vi devas fari, do estas io

943
00:46:24,720 --> 00:46:27,200
nomata Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Kaj tiu estas komandlinio ilo tio certigos
helpi vin Eŝafodo vian React

945
00:46:31,110 --> 00:46:32,380
projektoj facile.

946
00:46:32,380 --> 00:46:38,660
>> Do vi povas legi pri tio
poste, sed estas iuj iloj

947
00:46:38,660 --> 00:46:40,160
ke Yeoman proponas.

948
00:46:40,160 --> 00:46:43,280
Ili sciigos vin krei React
app kun ĉio enkonstruita.

949
00:46:43,280 --> 00:46:46,030
Kiel gxi devos esti konstruita
en, komponantoj enkonstruita.

950
00:46:46,030 --> 00:46:47,880
Ĝi havos vian transformilo konstruita.

951
00:46:47,880 --> 00:46:50,699
Ili havas multan malvarmeta
havajxoj enkonstruita aŭtomate

952
00:46:50,699 --> 00:46:52,240
uzante tion nomis generatoroj.

953
00:46:52,240 --> 00:46:54,620
>> Do legu pri tio se vi ŝatas.

954
00:46:54,620 --> 00:46:59,110
Nur iru sur Yeoman, Y-Kaj-Aŭ-M-A-N, kaj
vi povas trovi generatoroj kiel tiuj.

955
00:46:59,110 --> 00:47:01,263
Kaj kun generatoroj kiel
tiuj, vi simple ŝatas unu

956
00:47:01,263 --> 00:47:03,010
Estas paro komandlinio ordonas.

957
00:47:03,010 --> 00:47:05,530
Ĝi devos Eŝafodo ekstere
tuta React app por vi.

958
00:47:05,530 --> 00:47:10,470
Ĝi ricevos la tutan manlibron muzikis,
kaj Grunt laboro farita por vi,

959
00:47:10,470 --> 00:47:13,010
jen, kial vi simple enfokusigi
sur simple skribi en reagi.

960
00:47:13,010 --> 00:47:16,739
>> Do esence konstrui
React app estas netriviala.

961
00:47:16,739 --> 00:47:19,530
Ĝi estas telegramis ĉiuj kune, sed
Estas iloj ke tion faros por vi.

962
00:47:19,530 --> 00:47:23,070
Do se vi volas fari React
app, provu fari ĝin ke vojo.

963
00:47:23,070 --> 00:47:26,360
Se vi nur volas sperti,
vi povas provi uzi tiun CodePen

964
00:47:26,360 --> 00:47:28,550
ĉar ĉi CodePen havas
ĉiuj reagas cableado.

965
00:47:28,550 --> 00:47:30,240
Mi jam faris la tutan aferon por vin jam.

966
00:47:30,240 --> 00:47:34,610
>> Do se vi volas fari kiel
produktado liberigi React app,

967
00:47:34,610 --> 00:47:37,220
provu unu el tiuj generatoroj.

968
00:47:37,220 --> 00:47:40,240
Se vi nur volas ludi
ĉirkaŭe, ĝi estas ofte valoras nur

969
00:47:40,240 --> 00:47:44,490
kiel provi ludi proksimume sur CodePen tie.

970
00:47:44,490 --> 00:47:45,470
Sonas bone?

971
00:47:45,470 --> 00:47:45,970
Malvarmeta.

972
00:47:45,970 --> 00:47:47,890
>> Do jen kion mi havas.

973
00:47:47,890 --> 00:47:52,470
Denove, la tuta kodo kaj ekzemploj
tuj estos sur ĉi tiu retejo ĉi tie.

974
00:47:52,470 --> 00:47:55,509
Do, denove, ni ne parolu
pri multe sintakso de React,

975
00:47:55,509 --> 00:47:57,550
sed trovi ciujn tiujn
iom sintaksaj detaloj,

976
00:47:57,550 --> 00:48:00,320
ĝi estas ĉiuj iranta esti havebla
sur ĉi tiu retejo ĉi tie.

977
00:48:00,320 --> 00:48:02,660
>> Do mi rekomendas kiel
preni la unuan paŝon.

978
00:48:02,660 --> 00:48:06,277
Metu ĝin en vian CodePen.

979
00:48:06,277 --> 00:48:08,110
Provu laboras sur farante
ĝin al la dua paŝo.

980
00:48:08,110 --> 00:48:11,310
Ekzistas kvara paŝo, kaj nur
vidi kie vi ricevas el tio.

981
00:48:11,310 --> 00:48:14,840
>> Demandon, kontroli
ke paĝo aŭ retpoŝtu min.

982
00:48:14,840 --> 00:48:16,490
Jen mia retpoŝto.

983
00:48:16,490 --> 00:48:19,885
Sed mi ŝatus helpi vin kun ajna
demandojn vi povus havi pri React.

984
00:48:19,885 --> 00:48:21,010
Do, Yep, jen ĉio mi havas.

985
00:48:21,010 --> 00:48:23,410
Dankon ĉiuj tre multe por
rigardante aŭ por ĉeesti.

986
00:48:23,410 --> 00:48:26,820
Kaj Mi prenos demandojn
vi povus havi post tio nun.

987
00:48:26,820 --> 00:48:29,140
Do dankon pro rigardante.

988
00:48:29,140 --> 00:48:31,270