1
00:00:00,000 --> 00:00:02,910
>> [Speel van musiek]

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

3
00:00:04,850 --> 00:00:07,275
>> Neel Mehta: Hier gaan dit.

4
00:00:07,275 --> 00:00:11,070
>> Wel, almal, welkom om web
programme van die toekoms met reageer.

5
00:00:11,070 --> 00:00:11,870
Dit is CS50.

6
00:00:11,870 --> 00:00:12,930
My naam is Neel.

7
00:00:12,930 --> 00:00:17,689
Ek is 'n TA vir CS50 en 'n stage
by Harvard Kollege en 'n baie, baie

8
00:00:17,689 --> 00:00:18,730
passievolle web-ontwikkelaar.

9
00:00:18,730 --> 00:00:20,730
So ek is baie opwindend om
vandag met jou praat,

10
00:00:20,730 --> 00:00:24,550
of jy hier of by die huis is
kyk, ongeveer Reageer, wat weer

11
00:00:24,550 --> 00:00:27,270
soos ek gesê het, die toekoms van die web apps.

12
00:00:27,270 --> 00:00:29,055
>> So Reageer is 'n web raamwerk.

13
00:00:29,055 --> 00:00:30,930
En as ek het al vertel
sommige mense hier,

14
00:00:30,930 --> 00:00:33,400
'n raamwerk is net 'n
stel gereedskap wat jy kan gebruik

15
00:00:33,400 --> 00:00:35,770
om die struktuur en die bou van jou web app.

16
00:00:35,770 --> 00:00:39,010
En web programme is, weer, webwerwe
wat interaktiewe soos Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, wat ook al.

18
00:00:42,330 --> 00:00:45,590
>> So Facebook is 'n web raamwerk
wat ontwikkel is deur Facebook

19
00:00:45,590 --> 00:00:48,060
'n paar jaar back-- Reageer is.

20
00:00:48,060 --> 00:00:50,830
Dit is sedertdien in
Facebook op hul mobiele apps

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

22
00:00:52,460 --> 00:00:56,350
Khan Akademie is 'n ander
prominente vroeë adopter van reageer.

23
00:00:56,350 --> 00:00:58,630
>> Dit is regtig nie om
uiters gewild.

24
00:00:58,630 --> 00:01:03,420
As jy al ooit dinge soos Hoekige of gebruik
Ruggraat, dit is van dieselfde familie,

25
00:01:03,420 --> 00:01:05,830
maar dit het sedertdien ver
oorskry hul gewildheid.

26
00:01:05,830 --> 00:01:06,890
Dit is die warm nuwe ding.

27
00:01:06,890 --> 00:01:09,590
Dit is baie, baie groot.

28
00:01:09,590 --> 00:01:13,470
>> En so Reageer goed nie net as 'n
web raamwerk vir die bou van koppelvlakke.

29
00:01:13,470 --> 00:01:16,020
Dit is goed vir die bou van web koppelvlakke.

30
00:01:16,020 --> 00:01:18,350
Daar is ook 'n ding
genoem Reageer Native wat

31
00:01:18,350 --> 00:01:22,200
Kom jy koppelvlakke te bou
vir Android en IOS

32
00:01:22,200 --> 00:01:26,390
en miskien ander platforms in die toekoms
die gebruik van net dieselfde JavaScript-kode.

33
00:01:26,390 --> 00:01:31,130
Jy kan presies dieselfde gebruik
JavaScript-kode webtuistes lewer,

34
00:01:31,130 --> 00:01:33,040
om Android apps en IOS apps lewer.

35
00:01:33,040 --> 00:01:35,000
>> Dit is 'n baie, baie opwindende tyd.

36
00:01:35,000 --> 00:01:37,070
Dit is 'n baie, baie cool geleentheid.

37
00:01:37,070 --> 00:01:42,020
Dit is regtig 'n universele web
koppelvlak instrument vir ontwikkeling,

38
00:01:42,020 --> 00:01:44,420
so dit is 'n baie, baie
belangrikste ding om te weet.

39
00:01:44,420 --> 00:01:46,949
En, soos ek vertel mense
voor, dit, dink ek,

40
00:01:46,949 --> 00:01:48,990
gaan hoe ons verander
bou web programme vir ewig.

41
00:01:48,990 --> 00:01:55,820
So dit is dalk 'n bietjie oordrewe, maar ek
dink dit is 'n goeie ding om te weet.

42
00:01:55,820 --> 00:01:57,580
>> OK, so wat is reageer?

43
00:01:57,580 --> 00:02:01,020
Reageer is 'n raamwerk wat jy kan
gebruik vir die bou van koppelvlakke.

44
00:02:01,020 --> 00:02:03,240
'N koppelvlak is, weer,
'n webblad, reg?

45
00:02:03,240 --> 00:02:06,340
So hier is Instagram.com, gebruike reageer.

46
00:02:06,340 --> 00:02:08,740
>> Reageer is gebou op die
idee van komponente.

47
00:02:08,740 --> 00:02:11,900
A is 'n HTML komponent
element op steroïede,

48
00:02:11,900 --> 00:02:14,470
so 'n HTML element is soos 'n knoppie.

49
00:02:14,470 --> 00:02:15,250
Dit is 'n paragraaf.

50
00:02:15,250 --> 00:02:17,500
Dit is 'n kop, reg?

51
00:02:17,500 --> 00:02:22,740
En Instagram sal hierdie, maar dit
sal ook komponente van Reageer gebruik.

52
00:02:22,740 --> 00:02:25,740
>> Reageer komponente is
opgewarmde HTML elemente

53
00:02:25,740 --> 00:02:28,100
wat hul eie gedrag
vervat in hulle.

54
00:02:28,100 --> 00:02:31,800
So, as 'n voorbeeld, kan ons '
'n tyd element, 'n tyd komponent,

55
00:02:31,800 --> 00:02:34,095
wat sal soos bevat
die tyd stempel, jy weet,

56
00:02:34,095 --> 00:02:37,170
'n komponent wat profile
sal die beeld van die profiel bevat

57
00:02:37,170 --> 00:02:38,820
en die naam van die persoon.

58
00:02:38,820 --> 00:02:42,930
Dit kan 'n soortgelyke toonbank, het wat
kan tel soos die aantal likes,

59
00:02:42,930 --> 00:02:45,610
en as jy op dit, sal dit
verhoging van die aantal mense soos.

60
00:02:45,610 --> 00:02:48,200
A komponent is net 'n
n klomp van die HTML kode wat

61
00:02:48,200 --> 00:02:50,520
het 'n paar funksies
toegedraai binnekant van dit.

62
00:02:50,520 --> 00:02:53,770
So dit is soos 'n HTML element
op steroïede, soos ek gesê het.

63
00:02:53,770 --> 00:02:56,270
Jy kan hierdie komponente te neem,
en jy kan hulle saam

64
00:02:56,270 --> 00:02:59,060
om nuwe komponente te maak,
hierdie geval, 'n pos komponent,

65
00:02:59,060 --> 00:03:00,505
wat bevat al hierdie dinge.

66
00:03:00,505 --> 00:03:04,050
Dit sou Tyd bevat, profiel,
LikeCounter, miskien is die kommentaar

67
00:03:04,050 --> 00:03:06,100
en miskien die beeld self.

68
00:03:06,100 --> 00:03:10,810
En so web apps is net gebou deur
komponente en sit hulle saam.

69
00:03:10,810 --> 00:03:15,620
'N Instagram feed is niks meer as
'n klomp van poste een na die ander,

70
00:03:15,620 --> 00:03:19,032
elke pos bevat soos die Time,
Profiel, LikeCounter, en so aan.

71
00:03:19,032 --> 00:03:20,490
Dit is soort van soos die bou van 'n huis.

72
00:03:20,490 --> 00:03:22,660
Jy hoef nie die bou van die
huis van bo af.

73
00:03:22,660 --> 00:03:24,960
Jy neem components-- jy
neem soos die badkamer.

74
00:03:24,960 --> 00:03:28,320
Jy neem die bedroom-- jy hulle vashou
saam, en jy het 'n nuwe komponent.

75
00:03:28,320 --> 00:03:29,760
Jy het 'n nuwe deel van die huis.

76
00:03:29,760 --> 00:03:32,860
>> So reageer is rondom gebou
hierdie idee van komponente wat

77
00:03:32,860 --> 00:03:36,600
is interaktief, wat verklarende is.

78
00:03:36,600 --> 00:03:39,650
Soos jy nou net sê wat 'n
profiel is, en dit maak dit.

79
00:03:39,650 --> 00:03:40,600
Hulle is composable.

80
00:03:40,600 --> 00:03:43,880
Jy kan 'n tyd en 'n profiel te neem, sit
hulle saam, maak iets beter.

81
00:03:43,880 --> 00:03:47,770
En hulle is herbruikbare, so as jy
het die bron-kode vir 'n pos,

82
00:03:47,770 --> 00:03:49,440
jy kan wat oral insluit.

83
00:03:49,440 --> 00:03:53,160
>> Jy kan insluit 'n Instagram
ding op jou eie webwerf.

84
00:03:53,160 --> 00:03:56,830
Jy kan insluit in Facebook, byvoorbeeld,
so lank as wat dit gebruik Reageer as well.

85
00:03:56,830 --> 00:04:00,360
So komponente is regtig, regtig, regtig
kragtige boustene van die web

86
00:04:00,360 --> 00:04:04,180
wat kan enige plek gebruik word en sit
saam om nuwe boustene te maak.

87
00:04:04,180 --> 00:04:07,159
Dit is die baie, baie
hoë vlak oorsig.

88
00:04:07,159 --> 00:04:09,200
So, weer, as jy '
enige vrae by enige punt

89
00:04:09,200 --> 00:04:14,470
oor die filosofie van reaktor, die
kodering, om my te stop, en laat my weet.

90
00:04:14,470 --> 00:04:18,420
>> OK, so reageer is cool, want dit
het 'n ander manier van kyk

91
00:04:18,420 --> 00:04:19,870
hoe jy bou web apps.

92
00:04:19,870 --> 00:04:23,620
Jy het waarskynlik gehoor van MVC, 'n
model wat jy beheer in CS50 of wat ook al

93
00:04:23,620 --> 00:04:25,940
ander indringende klasse wat jy gebruik.

94
00:04:25,940 --> 00:04:29,000
En die meeste raamwerke
gebou rondom die idee van MVC.

95
00:04:29,000 --> 00:04:30,410
Reageer nie.

96
00:04:30,410 --> 00:04:32,980
Reageer is gebou rondom die idee
van eenrigting data vloei

97
00:04:32,980 --> 00:04:36,510
soos gesien deur hierdie grafiek of grafiese hier.

98
00:04:36,510 --> 00:04:38,260
>> Basies, jy het 'n data bron.

99
00:04:38,260 --> 00:04:42,380
En die data bron sal besluit
hoe om uit te lê sekere komponente.

100
00:04:42,380 --> 00:04:45,452
En die komponente sal
dan, wanneer dit verander,

101
00:04:45,452 --> 00:04:47,160
Hulle vertel die
databron om te verander.

102
00:04:47,160 --> 00:04:49,350
>> Om die Instagram gebruik
Byvoorbeeld, kan jy '

103
00:04:49,350 --> 00:04:52,050
'n lys van die post voorwerpe soos
in 'n databasis of iets.

104
00:04:52,050 --> 00:04:53,310
Dat die data.

105
00:04:53,310 --> 00:04:57,600
En dan is ons post komponente
sal daardie data te neem,

106
00:04:57,600 --> 00:05:01,830
en die gebruik dat data te lewer
'n ding op die skerm.

107
00:05:01,830 --> 00:05:04,300
Dit is wat die pyl
van data te komponent is,

108
00:05:04,300 --> 00:05:07,930
en dan dat dieselfde data gebruik
om 'n klomp van die komponente te lewer.

109
00:05:07,930 --> 00:05:10,290
>> In Facebook Messenger vir
Byvoorbeeld, wat is reageer

110
00:05:10,290 --> 00:05:13,410
jy dalk 'n lys van het
boodskappe as jou data bron.

111
00:05:13,410 --> 00:05:15,927
En dit sou nie lewer
slegs die lys van boodskappe

112
00:05:15,927 --> 00:05:17,510
maar ook die lys van vriende wat jy het.

113
00:05:17,510 --> 00:05:19,200
Jy het die ongelees telling.

114
00:05:19,200 --> 00:05:23,330
Miskien lewer ook die Facebook ding
dit is aan die onderkant van Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Dieselfde data is 'n
enkele bron van die waarheid

116
00:05:25,610 --> 00:05:28,290
en dat 'n baie veroorsaak
komponente gelewer moet word.

117
00:05:28,290 --> 00:05:30,290
En wanneer een van daardie
komponente verander word,

118
00:05:30,290 --> 00:05:32,320
dit gaan terug en
verander die data bron.

119
00:05:32,320 --> 00:05:33,460
>> Jy 'n boodskap te stuur, reg?

120
00:05:33,460 --> 00:05:34,780
Dit verander die data bron.

121
00:05:34,780 --> 00:05:39,490
Jy lees jou boodskappe,
sodat jy ongelees tot 0 te stel.

122
00:05:39,490 --> 00:05:41,136
Dit verander die data bron.

123
00:05:41,136 --> 00:05:44,010
En agterkom dat al hierdie een
arrow terug te gaan na dieselfde data

124
00:05:44,010 --> 00:05:47,662
bron, so jy weet,
kry 'n sekere stel data,

125
00:05:47,662 --> 00:05:49,870
jy weet presies wat die
page gaan lyk.

126
00:05:49,870 --> 00:05:50,700
Dit is deterministiese.

127
00:05:50,700 --> 00:05:53,451
Jy weet, gegewe sekere data, wat
die bladsy gaan lyk.

128
00:05:53,451 --> 00:05:56,158
Jy kan voorspel hoe dit gaan
gedra en hoe dinge gaan

129
00:05:56,158 --> 00:05:57,650
om te werk wanneer hulle saam is sit.

130
00:05:57,650 --> 00:06:00,410
>> En as ek 'n miljoen komponente
hier, sou dit dieselfde optree, reg?

131
00:06:00,410 --> 00:06:02,290
Jy sal nie enige het
weird verbindings.

132
00:06:02,290 --> 00:06:04,120
Een data gelewer miljoen komponente.

133
00:06:04,120 --> 00:06:06,879
'N miljoen komponente kon
terug te gaan en die data te wysig.

134
00:06:06,879 --> 00:06:07,920
En so is dit baie lekker.

135
00:06:07,920 --> 00:06:10,870
Ons bou composable,
maklik skaalbare web apps.

136
00:06:10,870 --> 00:06:13,150
>> Jy het een databron,
die bron van die waarheid.

137
00:06:13,150 --> 00:06:15,790
Dit vertel jou komponente
hoe om uit te lê die bladsy

138
00:06:15,790 --> 00:06:18,190
en die komponente sal
hanteer interaksie.

139
00:06:18,190 --> 00:06:20,150
En as hulle wil verander
dinge, net terug te gaan

140
00:06:20,150 --> 00:06:21,750
en vertel die data bron om te verander.

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

142
00:06:22,850 --> 00:06:26,010
So Reageer is al oor die begrip
hoe om 'n komponent bou

143
00:06:26,010 --> 00:06:29,540
en hoe om jou komponent maak
interaksie met die buitewêreld.

144
00:06:29,540 --> 00:06:31,850
>> Die maak van die komponent Interact
met die buitewêreld

145
00:06:31,850 --> 00:06:34,490
gebruik 'n ander tegnologie
genoem Flux, wat

146
00:06:34,490 --> 00:06:36,872
is 'n raamwerk wat
bygevoeg op die top van reageer.

147
00:06:36,872 --> 00:06:38,330
Ons gaan nie om te praat oor dit.

148
00:06:38,330 --> 00:06:42,990
Ons gaan meer oor praat, gegewe
data, hoe kan jy 'n komponent lewer?

149
00:06:42,990 --> 00:06:47,010
>> En so Reageer is regtig cool omdat jy
kan dit gebruik met enige agterkant wat jy wil.

150
00:06:47,010 --> 00:06:50,480
As jy soos 'n Python agterkant,
as jou Python kan spoeg uit sommige data,

151
00:06:50,480 --> 00:06:51,610
Reageer kan lewer.

152
00:06:51,610 --> 00:06:54,700
As jy nie JS uitsette
van data, Reageer maak dit.

153
00:06:54,700 --> 00:06:56,890
Ruby relings met
data, Reageer maak dit.

154
00:06:56,890 --> 00:07:01,860
>> So Reageer is basies 'n web
view-- n front-end met komponente

155
00:07:01,860 --> 00:07:03,910
vir enige data bron hoegenaamd nie.

156
00:07:03,910 --> 00:07:07,145
En so gaan van data bron
reageer komponente is redelik maklik.

157
00:07:07,145 --> 00:07:08,770
Gaan die ander kant is 'n bietjie harder.

158
00:07:08,770 --> 00:07:10,462
Wat gebruik maak van Flux soos ek voorheen genoem.

159
00:07:10,462 --> 00:07:11,420
Ons sal nie in daardie.

160
00:07:11,420 --> 00:07:13,740
Ons sal meer oor die fokus
data-tot-komponent kant.

161
00:07:13,740 --> 00:07:15,880
Hierdie manier waarop jy kan maak
koel, pret web apps.

162
00:07:15,880 --> 00:07:19,870
Dit sal geen invloed op die res van die wêreld
vir nou, maar dis 'n ander storie.

163
00:07:19,870 --> 00:07:22,210
>> OK, so as jy was hier
vir my laaste seminaar

164
00:07:22,210 --> 00:07:26,610
jy weet dat al die kode vir
talk vandag se gaan wees op hierdie URL

165
00:07:26,610 --> 00:07:29,320
hier, jammer, hierdie URL hier.

166
00:07:29,320 --> 00:07:32,730
En basies ons gaan om te gaan
deur vier stappe, miskien vyf,

167
00:07:32,730 --> 00:07:33,510
waarskynlik nie vyf.

168
00:07:33,510 --> 00:07:37,300
Ons sal deur vier stappe beweeg
van die bou van 'n monster Reageer app.

169
00:07:37,300 --> 00:07:39,550
En so al die bronkode
vir elke stap van die pad

170
00:07:39,550 --> 00:07:42,216
gaan hier wees, so as
jy die volgende saam by die huis,

171
00:07:42,216 --> 00:07:43,991
voel vry om hierdie kode kyk.

172
00:07:43,991 --> 00:07:46,740
As jy volgende hier saam,
ons sal wys dit op die skerm,

173
00:07:46,740 --> 00:07:47,739
so moenie bekommerd wees oor dit.

174
00:07:47,739 --> 00:07:50,930
Maar as jy by die huis, voel
vry om hierdie webwerf te besoek.

175
00:07:50,930 --> 00:07:56,400
En, Ja, moet jy in staat wees om te kry
al die kode wat jy ooit hier nodig.

176
00:07:56,400 --> 00:08:01,380
So dit is 'n goeie cheat sheet sowel
vir jou toekoms avonture met reageer.

177
00:08:01,380 --> 00:08:04,490
Cool, so as almal wat hier is,
en selfs al is jy by die huis,

178
00:08:04,490 --> 00:08:11,580
trek hierdie webwerf, is.gd/cs50react,
geen kapitaal, geen underscore, geen niks.

179
00:08:11,580 --> 00:08:15,849
>> Jy sal 'n bladsy wat lyk te sien
'n bietjie soos hierdie.

180
00:08:15,849 --> 00:08:17,140
Dit is 'n ding genaamd CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen is 'n gesamentlike
kodering omgewing

182
00:08:20,030 --> 00:08:23,364
waarmee kan ek code hier skryf, en
dit sal outomaties aan jou gestuur word.

183
00:08:23,364 --> 00:08:24,780
En op hierdie manier, kan ek die kode te skryf.

184
00:08:24,780 --> 00:08:26,920
Ek kan hier kode hardloop.

185
00:08:26,920 --> 00:08:33,470
>> Vir example-- en as dit reloads-- sien,
Ek hardloop JavaScript-kode op die bladsy

186
00:08:33,470 --> 00:08:36,390
reg hier, en dit sal
outomaties lewer 'n webblad

187
00:08:36,390 --> 00:08:37,980
met hierdie JavaScript-kode.

188
00:08:37,980 --> 00:08:40,039
En so is dit 'n manier
vir ons om te probeer kode

189
00:08:40,039 --> 00:08:43,089
regtig vinnig om te gebruik sonder om
ons ID of gebruik ons ​​plaaslike masjien

190
00:08:43,089 --> 00:08:44,290
of wat ook al.

191
00:08:44,290 --> 00:08:47,670
Dit is 'n baie vinnige manier vir jou om mockup
en uit te toets verskillende soorte van die kode.

192
00:08:47,670 --> 00:08:50,560
>> So ek gaan neem
Byvoorbeeld kode, om dit hier.

193
00:08:50,560 --> 00:08:52,374
Ons gaan om te werk deur dit.

194
00:08:52,374 --> 00:08:54,540
En as jy by die huis, jy
kan dit trek as well.

195
00:08:54,540 --> 00:08:57,530
En ek het reeds geïnstalleer
Reageer hier, so jy kan net

196
00:08:57,530 --> 00:09:00,770
skryf jou eie kode hier, en
probeer om dit as jou eie speelgrond.

197
00:09:00,770 --> 00:09:04,940
>> Ja, as almal om
oopmaak hierdie skakel hier.

198
00:09:04,940 --> 00:09:08,080
Gee asseblief vir my 'n duime
up wanneer jy dit oop te maak.

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

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

201
00:09:13,770 --> 00:09:16,914
Daar is niks hier vir nou, maar
ons sal verander dat baie binnekort.

202
00:09:16,914 --> 00:09:21,250
>> OK, so is 'n JavaScript Reageer
biblioteek, en as sodanig,

203
00:09:21,250 --> 00:09:24,480
vereis kennis van JavaScript,
wat is die web-programmeertaal.

204
00:09:24,480 --> 00:09:27,660
En dit is wat gebruik word vir ander dinge
nou ook, maar hoofsaaklik die web te ontwikkel

205
00:09:27,660 --> 00:09:32,040
taal, so as jy nie vertroud is nie
dat, lees 'n webwerf genaamd JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Dis wonderlik.

207
00:09:32,700 --> 00:09:34,240
Jy kan leer JavaScript
in 'n halfuur.

208
00:09:34,240 --> 00:09:34,990
Dit is ongelooflik.

209
00:09:34,990 --> 00:09:36,420
>> So gee dit 'n lees.

210
00:09:36,420 --> 00:09:39,960
Ons is ook 'n baie HTML hier omdat
ons ontwerp web bladsye van die kursus.

211
00:09:39,960 --> 00:09:43,890
So as jy nie vertroud met is
HTML, check HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Ek dink leer Reageer is 'n
miljoen keer makliker as jy reeds

213
00:09:46,520 --> 00:09:47,892
weet wat die boustene.

214
00:09:47,892 --> 00:09:50,600
As jy die komponente, dit is
maklik om 'n groter komponent maak.

215
00:09:50,600 --> 00:09:51,860
Dit is Reageer taal vir jou.

216
00:09:51,860 --> 00:09:54,270
>> So gaan voort en gee
hierdie dinge 'n lees.

217
00:09:54,270 --> 00:09:55,070
Stop hierdie video.

218
00:09:55,070 --> 00:09:57,440
Gee dit 'n lees as jy
by die huis as jy nie

219
00:09:57,440 --> 00:10:00,794
vertroud is met HTML of JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, so wat ons gaan
doen is ons gaan maak

221
00:10:02,960 --> 00:10:06,470
'n baie basiese flitskaart app met behulp reageer.

222
00:10:06,470 --> 00:10:08,210
Ons gaan 'n flitskaart het.

223
00:10:08,210 --> 00:10:09,880
Jy kan die kaart heen en weer draai.

224
00:10:09,880 --> 00:10:12,399
En ons sal ook 'n lys van
al die kaarte wat ons het,

225
00:10:12,399 --> 00:10:14,190
en as ons voel
ambisieuse, kan ons wees

226
00:10:14,190 --> 00:10:17,060
staat om te wissel tussen
motors deur te kliek op hulle.

227
00:10:17,060 --> 00:10:20,360
>> Maar dit is van jou kaal
bene, 'n baie eenvoudige Reageer app.

228
00:10:20,360 --> 00:10:22,560
En so dit is eintlik
nie triviaal om te implementeer,

229
00:10:22,560 --> 00:10:26,030
maar ons gaan om te wys dat, as jy nie
hierdie, is dit baie, baie maklik om dit te verleng

230
00:10:26,030 --> 00:10:27,680
As ander mense jou help met dit.

231
00:10:27,680 --> 00:10:33,750
So ons gaan om te gaan deur vier stappe
begin van nuuts af om hierdie te bou.

232
00:10:33,750 --> 00:10:36,740
>> OK, so die vier stappe, sal ons
begin met die eerste stap.

233
00:10:36,740 --> 00:10:39,790
Die eerste stap gaan wees
die bou van jou eerste komponent.

234
00:10:39,790 --> 00:10:44,830
Soos ek gesê het, 'n komponent in Reageer
is net 'n HTML element op steroïede.

235
00:10:44,830 --> 00:10:49,660
Dit spesifiseer die HTML
en 'n paar gedrag, en dit

236
00:10:49,660 --> 00:10:52,600
sal hoe mense spesifiseer
kan kommunikeer met dit hoe

237
00:10:52,600 --> 00:10:54,270
dit sou interne toestand het.

238
00:10:54,270 --> 00:10:57,630
Soos 'n knoppie sal weet soos hoeveel
keer dit is gebruik byvoorbeeld

239
00:10:57,630 --> 00:11:01,010
en dit sal weet hoe om homself uit te lê.

240
00:11:01,010 --> 00:11:04,430
>> So laat ons gaan voort en bou ons
eerste komponent met behulp van JavaScript.

241
00:11:04,430 --> 00:11:09,711
So as die sintaksis lyk vreemd,
dit is omdat dit soort is.

242
00:11:09,711 --> 00:11:11,710
So, weer, ons gaan
om 'n veranderlike genaamd maak

243
00:11:11,710 --> 00:11:14,580
app gebruik van die term laat,
wat maak 'n veranderlike,

244
00:11:14,580 --> 00:11:18,210
laat App gelyk React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Reageer is 'n biblioteek en het
die skep klas funksie.

246
00:11:22,609 --> 00:11:24,400
En dit funksie is
'n bietjie van die kode wat u

247
00:11:24,400 --> 00:11:29,090
kan gebruik om 'n nuwe te skep
tipe Reageer komponent.

248
00:11:29,090 --> 00:11:32,780
En so React.createClass
maak 'n komponent,

249
00:11:32,780 --> 00:11:35,270
en sal hierdie komponent
in staat wees om goed te doen.

250
00:11:35,270 --> 00:11:40,460
Die belangrikste ding wat dit kan doen, is lewer
iets lewer as 'n funksie.

251
00:11:40,460 --> 00:11:44,500
>> Weereens, as hierdie indeks is nie voor die hand liggend te
julle, ek beveel aan jy gaan op JS vir katte

252
00:11:44,500 --> 00:11:45,682
en check dit uit.

253
00:11:45,682 --> 00:11:47,710
Is dit ingezoomd goed genoeg?

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

255
00:11:48,490 --> 00:11:50,670
>> So elke komponent behoeftes
om 'n lewer funksie.

256
00:11:50,670 --> 00:11:53,010
Die lewer funksie sê,
wat moet ek druk op die skerm?

257
00:11:53,010 --> 00:11:54,760
Maar die komponent is
nutteloos as dit nie

258
00:11:54,760 --> 00:11:58,060
weet wat om te druk op die skerm, so
wat jy nodig het om 'n lewer funksie.

259
00:11:58,060 --> 00:12:01,904
>> So in die lewer ding, jy
net nodig om 'n paar HTML terugkeer.

260
00:12:01,904 --> 00:12:03,820
En wat is cool is dit
daar is 'n ding genaamd

261
00:12:03,820 --> 00:12:08,660
JSX, wat is 'n uitbreiding van
JavaScript wat gebruik word deur te reageer.

262
00:12:08,660 --> 00:12:11,845
Dit laat jou skryf HTML binnekant
jou JavaScript, wat

263
00:12:11,845 --> 00:12:13,970
klink nogal vreemd wanneer
jy eers daaroor dink,

264
00:12:13,970 --> 00:12:15,553
maar dit maak 'n baie sin daarna.

265
00:12:15,553 --> 00:12:17,430
So kan ons dit doen.

266
00:12:17,430 --> 00:12:21,360
As jy vertroud is met HTML is, weet ek
ons het 'n div met 'n algemene doel

267
00:12:21,360 --> 00:12:22,790
houer vir dinge.

268
00:12:22,790 --> 00:12:26,380
Ons kan nie 'n div terugkeer, en binne-in
hierdie div, kan ons dinge sit.

269
00:12:26,380 --> 00:12:32,390
>> So kom ons sê ons wil net lewer
'n reguit-up kaarte vir nou.

270
00:12:32,390 --> 00:12:34,890
Die kaarte, sou ek sê,
sal 'n vraag-en-antwoord het.

271
00:12:34,890 --> 00:12:37,530
So binne hierdie div, laat
druk 'n paragraaf

272
00:12:37,530 --> 00:12:42,155
wat sê question-- Wat is die
uiteindelike antwoord op die lewe, die heelal?

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

274
00:12:47,640 --> 00:12:50,345
En dan is die antwoord is
gaan wees, natuurlik, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Dit het nie goed kom nie.

277
00:12:59,730 --> 00:13:04,164
Ja, so basies kan jy regtig
skryf HTML in jou JavaScript.

278
00:13:04,164 --> 00:13:06,330
En dit gaan wees
uitgedruk in die skerm.

279
00:13:06,330 --> 00:13:08,250
So kom ons probeer dit uit.

280
00:13:08,250 --> 00:13:09,520
>> So het ons ons deel.

281
00:13:09,520 --> 00:13:12,210
Ons moet vertel Reageer op sit
die komponent op die skerm

282
00:13:12,210 --> 00:13:18,990
so React.render, so opmerk dat ons
behandel app soos enige ander element.

283
00:13:18,990 --> 00:13:21,010
Ons skryf dit soos dit was 'n HTML element.

284
00:13:21,010 --> 00:13:25,100
Soos in plaas van sê soos img
vir die beeld of p paragraaf,

285
00:13:25,100 --> 00:13:28,120
jy skryf App, so App is
behandel soos 'n HTML element.

286
00:13:28,120 --> 00:13:30,380
Soos ek gesê het, dit is
'n element op steroïede.

287
00:13:30,380 --> 00:13:32,870
>> So jy maak App, en jy
gee dit 'n plek om dit te sit.

288
00:13:32,870 --> 00:13:37,170
En dit is hoe jy kan
sê dit waar om dit te sit.

289
00:13:37,170 --> 00:13:46,200
Ek het 'n eenvoudige div op die geskape
bladsy genoem met 'n ID van bladsy

290
00:13:46,200 --> 00:13:48,300
en dit is waar die
element gaan om te gaan.

291
00:13:48,300 --> 00:13:49,841
>> En ons gaan nie om te hardloop met HTML.

292
00:13:49,841 --> 00:13:53,145
In beginsel is dit die gang te kry
sit binnekant van hierdie bladsy element

293
00:13:53,145 --> 00:13:54,270
dat ons op die skerm.

294
00:13:54,270 --> 00:13:59,210
So dit loop hierdie kode, en dit trek hierdie
ding op die skerm, so hier is ons.

295
00:13:59,210 --> 00:14:01,770
Ons het ons eerste Reageer komponent gemaak.

296
00:14:01,770 --> 00:14:08,000
>> So, net soos 'n herhaling, ons liggies gemaak
'n nuwe soort komponent, reg?

297
00:14:08,000 --> 00:14:10,145
Dit is wat die React.createClass.

298
00:14:10,145 --> 00:14:12,680
En in dié komponent, ons
vertel dat dit wat dit moet doen.

299
00:14:12,680 --> 00:14:15,590
Wanneer hierdie komponent is om
op die skerm gedruk word,

300
00:14:15,590 --> 00:14:19,300
dit sal die div met druk
die twee paragrawe binnekant van dit.

301
00:14:19,300 --> 00:14:24,460
>> En wat ons gedoen het, ons het 'n nuwe app
die gebruik van die hoek bracket app notasie.

302
00:14:24,460 --> 00:14:27,160
Ons het om dit te sit
binne-in die bladsy element.

303
00:14:27,160 --> 00:14:29,867
En so wat ek gedoen het, is dit geskep
'n nuwe app uit daardie sjabloon.

304
00:14:29,867 --> 00:14:31,200
En dan het ek dit te lewer.

305
00:14:31,200 --> 00:14:33,680
So het dit gesê, OK, jeug,
wat moet ek druk?

306
00:14:33,680 --> 00:14:36,970
App sê, gaan druk 'n div
met twee paragrawe binnekant van dit.

307
00:14:36,970 --> 00:14:40,420
En voila, daar is ons div met
twee paragrawe binnekant van dit.

308
00:14:40,420 --> 00:14:43,180
Sin maak so ver?

309
00:14:43,180 --> 00:14:46,690
>> So, weer, die hele uitdaging Reageer
is net te weet hoe om komponente te maak.

310
00:14:46,690 --> 00:14:48,500
Hoe om die maak
komponente werk saam.

311
00:14:48,500 --> 00:14:51,780
Nou dat ons het ons eerste gemaak
komponent, laat ons gaan terug

312
00:14:51,780 --> 00:14:54,284
en maak komponente aanpas.

313
00:14:54,284 --> 00:14:56,700
Sodat jy weet hoe om in HTML jy
kan jou knoppies klasse te gee?

314
00:14:56,700 --> 00:14:59,146
Jy kan jou ankers gee die href.

315
00:14:59,146 --> 00:15:00,770
Jy kan jou insette 'n tipe, reg?

316
00:15:00,770 --> 00:15:04,740
Jy kan meer persoonlike gee
eienskappe om al jou elemente

317
00:15:04,740 --> 00:15:06,490
om dit meer interessant te maak.

318
00:15:06,490 --> 00:15:09,030
En ons eintlik kan doen
presies dieselfde ding.

319
00:15:09,030 --> 00:15:17,500
>> So kom ons sê ons wil ons
app om te gaan lewer enige kaart.

320
00:15:17,500 --> 00:15:19,630
Nou net ons
gelewer n hardcoded kaart.

321
00:15:19,630 --> 00:15:22,530
Ons weet daar is net een
card dit kan doen, so ons is

322
00:15:22,530 --> 00:15:25,960
gaan probeer verander dit nou so
dat ons net kan gee dit 'n kaart.

323
00:15:25,960 --> 00:15:27,410
Dit sal die druk van die kaart.

324
00:15:27,410 --> 00:15:29,380
>> Jy behoort te probeer en maak jou
komponente 'n baie algemene doel.

325
00:15:29,380 --> 00:15:31,654
So hierdie manier kon ek e-pos
dit is my vriend en wees soos,

326
00:15:31,654 --> 00:15:33,820
watter kaarte wat jy het,
net voer dit in hier,

327
00:15:33,820 --> 00:15:35,290
en dit sal dit doen deur die self.

328
00:15:35,290 --> 00:15:37,650
Jy kan ander sit
dinge in jou eie app.

329
00:15:37,650 --> 00:15:40,600
>> Maar eers, laat se breek hierdie
in twee komponente,

330
00:15:40,600 --> 00:15:44,500
maar ons wil die kaart te skei
druk deel van die werklike app deel.

331
00:15:44,500 --> 00:15:46,660
So, wat ons kan doen is ons
kan dit verander van App

332
00:15:46,660 --> 00:15:51,300
om CardView, net 'n
nuwe naam vir die jeug,

333
00:15:51,300 --> 00:15:54,450
en ons kan 'n nuwe maak
komponent genoem App,

334
00:15:54,450 --> 00:15:56,336
nie verwar word met die ou App.

335
00:15:56,336 --> 00:16:00,730
Ons het die createClass,
en soos in HTML,

336
00:16:00,730 --> 00:16:03,590
jy kan nes Reageer komponente
binnekant van mekaar.

337
00:16:03,590 --> 00:16:16,430
>> So in hierdie lewer funksie,
funksie terugkeer CardView,

338
00:16:16,430 --> 00:16:18,234
en dit is presies dieselfde ding.

339
00:16:18,234 --> 00:16:19,400
Sien waarom dit is dieselfde ding?

340
00:16:19,400 --> 00:16:22,590
In plaas van die lewering van net die artikels wat
het die div en paring binnekant van dit,

341
00:16:22,590 --> 00:16:26,194
die app lewer die CardView en die
CardView maak die div en paragraaf.

342
00:16:26,194 --> 00:16:29,110
So dit is ons eerste voorbeeld van
nes elemente binnekant van mekaar.

343
00:16:29,110 --> 00:16:32,177
Maak wat sin maak?

344
00:16:32,177 --> 00:16:33,760
So, weer, het ons 'n CardView element.

345
00:16:33,760 --> 00:16:37,250
Ons het inligting elemente
dat dit groter as.

346
00:16:37,250 --> 00:16:40,990
>> OK, so ons wil ons CardView-- as jy
gee 'n goeie CardView 'n sekere kaart,

347
00:16:40,990 --> 00:16:43,370
dit sal uit te druk vir jou, reg?

348
00:16:43,370 --> 00:16:48,050
So die eerste, moet ons 'n kaart te maak,
so laat ons 'n kaart voorwerp.

349
00:16:48,050 --> 00:17:02,930
So laat my kaart equal--
as jy al bekend is,

350
00:17:02,930 --> 00:17:05,260
dit is net die notasie-up
beswaar in JavaScript.

351
00:17:05,260 --> 00:17:09,280
Dit is soort van soos 'n struct
in C, so ons het 'n kaart,

352
00:17:09,280 --> 00:17:15,920
en so nou kan ons hierdie kaart as slaag
'n eiendom of as 'n kenmerk in HTML

353
00:17:15,920 --> 00:17:17,290
terminologie om ons app.

354
00:17:17,290 --> 00:17:20,210
So kan ons dit doen, App
card gelyk MyCard.

355
00:17:20,210 --> 00:17:23,200
>> Jy weet hoe om in insette, jy doen
tipe insette gelyk teks of knoppie

356
00:17:23,200 --> 00:17:25,240
klas gelyk BTN vir bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Dieselfde idee, App card equals--
jy het om te sit draadjies here--

358
00:17:29,500 --> 00:17:33,830
App card gelyk MyCard, so dit
sê ons het hierdie kaart voorwerp.

359
00:17:33,830 --> 00:17:39,149
Ek is van plan om dit te slaag as 'n
eiendom aan die jeug komponent.

360
00:17:39,149 --> 00:17:41,440
En hierdie inligting komponent
in staat wees om dit te doen en toegang

361
00:17:41,440 --> 00:17:43,580
interessante dinge met dit.

362
00:17:43,580 --> 00:17:47,650
>> So ons jeug gaan wees
kry 'n kaart, so vir nou,

363
00:17:47,650 --> 00:17:49,980
laat ons die app net gee
die kaart aan die CardView

364
00:17:49,980 --> 00:17:53,110
self want soos die jeug is nie
gaan om te weet wat om te doen met dit,

365
00:17:53,110 --> 00:17:54,850
so ons sal net gee dit aan die CardView.

366
00:17:54,850 --> 00:18:00,050
So sal ons dit die slaag
dieselfde manier, kaart gelykes,

367
00:18:00,050 --> 00:18:05,426
en so elke komponent kan toegang tot die
dinge wat gegee is om dit te.

368
00:18:05,426 --> 00:18:07,800
Hulle kan toegang tot die eienskappe
wat gegee is om dit te

369
00:18:07,800 --> 00:18:09,470
die gebruik van hierdie sintaksis, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> So wat hier gebeur is
jy het die MyCard voorwerp.

372
00:18:14,920 --> 00:18:18,250
Jy slaag dit in die app
met behulp van App card gelyk MyCard.

373
00:18:18,250 --> 00:18:21,420
Dat die kaart voorwerp gegee om jou app.

374
00:18:21,420 --> 00:18:24,400
Die app kan toegang
as this.props.card.

375
00:18:24,400 --> 00:18:28,780
Dit is soort van soos 'n beeld
weet wat dit se bron is.

376
00:18:28,780 --> 00:18:31,972
>> Hierdie app weet wat dit is card
is, en dit kan dinge doen met dit.

377
00:18:31,972 --> 00:18:32,930
Dit kan berekeninge te doen.

378
00:18:32,930 --> 00:18:35,290
Dit kan besluite wat gebaseer is af van dit te maak.

379
00:18:35,290 --> 00:18:39,950
>> Vir nou, het ek gaan om te slaag
this.props.card op die CardView.

380
00:18:39,950 --> 00:18:43,420
Sin maak so ver?

381
00:18:43,420 --> 00:18:45,210
Dit sal meer sin maak nou.

382
00:18:45,210 --> 00:18:46,990
>> OK, so nou is ons op CardView.

383
00:18:46,990 --> 00:18:51,719
Ons CardView, gegewe die kaart, indien
druk sy vraag en antwoord.

384
00:18:51,719 --> 00:18:54,510
Nou het ons net 'n paar gedrukte
hardcoded vrae en antwoorde.

385
00:18:54,510 --> 00:18:57,720
Ons moet uitvind out-- ons nodig
om die kaart dat hulle ons gegee het vra

386
00:18:57,720 --> 00:19:01,360
wat is die vraag en antwoord, en
dan druk dit uit in die skerm.

387
00:19:01,360 --> 00:19:02,470
>> So kan ons dit hier doen.

388
00:19:02,470 --> 00:19:06,135
In lewer begin-- eers gelyk.

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

390
00:19:08,710 --> 00:19:13,050
So wat ons hier doen, is ons weet dat
die kaarte aan ons gegee tot 'n eiendom,

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

392
00:19:13,580 --> 00:19:15,930
Dit is aan ons gegee as 'n inset.

393
00:19:15,930 --> 00:19:19,440
Soos dit is amper soos
argumente om 'n funksie.

394
00:19:19,440 --> 00:19:22,810
Die kaart is 'n argument
byna om hierdie CardView.

395
00:19:22,810 --> 00:19:25,239
>> Ons sal onttrek nie, en sit
dit in die veranderlike vraag.

396
00:19:25,239 --> 00:19:27,280
Maak seker die antwoord het
die veranderlike antwoord.

397
00:19:27,280 --> 00:19:31,130
Vra dat die kaart om te beantwoord.

398
00:19:31,130 --> 00:19:35,072
En nou dat ons hierdie,
in plaas van die druk daarop dat die teks,

399
00:19:35,072 --> 00:19:37,030
ons gaan uit te druk
wat hulle aan ons gegee het.

400
00:19:37,030 --> 00:19:43,580
>> So hierdie spul so ons gaan
Vraag Antwoord te blus.

401
00:19:43,580 --> 00:19:46,380
Kom ons kyk of dit werk.

402
00:19:46,380 --> 00:19:52,800
Cool, so laat ons stap vir stap deur dit
een keer net om seker te wees.

403
00:19:52,800 --> 00:20:00,470
>> So my kaart is card voorwerp, en ons
gee dat die kaart om die jeug.

404
00:20:00,470 --> 00:20:04,790
En die app gaan na die neem
kaart en gee dit aan die CardView.

405
00:20:04,790 --> 00:20:09,190
En dit CardView sê, as jy
gee my enige flitskaart voorwerp,

406
00:20:09,190 --> 00:20:11,920
Ek sal sy vraag uit te druk
en sy antwoord, reg?

407
00:20:11,920 --> 00:20:14,590
>> So, wat ek kan doen is wat ek kan
stuur hierdie kode, die eerste

408
00:20:14,590 --> 00:20:16,580
soos 10 lyne van my kode, my vriend.

409
00:20:16,580 --> 00:20:18,820
Hy kon dit insluit in
sy eie aansoek.

410
00:20:18,820 --> 00:20:27,200
En so lank as wat hy het dieselfde ding,
soos CardView card gelyk hiervan,

411
00:20:27,200 --> 00:20:30,580
so lank as wat hy geskep het die CardView
en gee dit die regte inligting,

412
00:20:30,580 --> 00:20:31,987
hy kon lewer sy eie kaart.

413
00:20:31,987 --> 00:20:34,320
En so hierdie manier, dit is 'n baie
koel manier vir jou om te bou

414
00:20:34,320 --> 00:20:35,906
komponente wat mekaar gebruik, reg?

415
00:20:35,906 --> 00:20:38,280
Hierdie kaart, kon ek publiseer
hierdie CardView op die internet,

416
00:20:38,280 --> 00:20:39,790
en die mense sal in staat wees om dit te gebruik.

417
00:20:39,790 --> 00:20:45,070
So basies, dit is soos een van die
standaard funksies in die C-biblioteek.

418
00:20:45,070 --> 00:20:47,280
>> Dit is 'n funksie waar
iemand dit geskryf is.

419
00:20:47,280 --> 00:20:48,419
Jy gee 'n sekere insette.

420
00:20:48,419 --> 00:20:49,710
Dit sal 'n sekere uitset te produseer.

421
00:20:49,710 --> 00:20:50,890
Jy hoef nie om hoe dit werk intern.

422
00:20:50,890 --> 00:20:53,790
Solank as wat jy gee dit die regte
insette, sal dit op die regte uitset te maak.

423
00:20:53,790 --> 00:20:57,850
>> En 'n komponent kan wees
gedink het van die dieselfde manier.

424
00:20:57,850 --> 00:21:00,280
Dit is soos 'CardView
'n biblioteek funksie.

425
00:21:00,280 --> 00:21:03,400
As jy dit gee 'n paar card
as 'n eiendom, sal dit

426
00:21:03,400 --> 00:21:05,095
druk die inhoud van die kaart.

427
00:21:05,095 --> 00:21:16,820
Soos as ek my kaart te verander na
plaas soos wat 5 plus 37,

428
00:21:16,820 --> 00:21:19,210
dit sal dienooreenkomstig te werk.

429
00:21:19,210 --> 00:21:21,955
Dus net deur die verandering van die insette,
dit raak 'n sekere uitset.

430
00:21:21,955 --> 00:21:24,830
So jy kan amper dink komponente
as funksies op hierdie manier, wat

431
00:21:24,830 --> 00:21:25,920
jy kan saam te stel.

432
00:21:25,920 --> 00:21:29,440
Jy kry insette, soos hierdie CardView
as die insette, kry jy uitset.

433
00:21:29,440 --> 00:21:31,900
In hierdie geval, is die uitset HTML.

434
00:21:31,900 --> 00:21:34,404
Sin maak so ver?

435
00:21:34,404 --> 00:21:36,890
Cool, dit weer, eienskappe is
hoe jy kan slaag inligting

436
00:21:36,890 --> 00:21:40,900
in en uit komponente.

437
00:21:40,900 --> 00:21:42,740
>> OK, so laat ons hierdie
ding interaktief.

438
00:21:42,740 --> 00:21:44,450
Nou dit is soort van saai.

439
00:21:44,450 --> 00:21:45,520
Wat is [onhoorbaar]?

440
00:21:45,520 --> 00:21:48,210
Jy kan 'n paar uit te druk,
maar dit is al wat dit kan doen.

441
00:21:48,210 --> 00:21:51,550
>> So laat ons gaan terug na die
oue vraag net vir nou.

442
00:21:51,550 --> 00:21:54,405
OK, so nou hierdie komponente
is vervelig, want alles wat hulle doen,

443
00:21:54,405 --> 00:21:55,030
hulle kry insette.

444
00:21:55,030 --> 00:21:56,100
Hulle maak uitset, reg?

445
00:21:56,100 --> 00:21:57,049
Dit is soort van saai.

446
00:21:57,049 --> 00:21:59,090
Ons wil ons hê
komponente in staat wees om

447
00:21:59,090 --> 00:22:02,150
'n soort van interne staat,
soos onthou iets.

448
00:22:02,150 --> 00:22:05,320
>> Vir 'n flitskaart, vir
Byvoorbeeld, watter soort van die staat

449
00:22:05,320 --> 00:22:07,550
wil jy dalk
onthou vir 'n flitskaart?

450
00:22:07,550 --> 00:22:09,740
Wat tydelike status
wil jy dalk om te onthou

451
00:22:09,740 --> 00:22:12,491
vir 'n flitskaart in 'n flitskaart app?

452
00:22:12,491 --> 00:22:13,990
GEHOOR: Of dit nou is omgekeer?

453
00:22:13,990 --> 00:22:14,990
Neel Mehta: Ja, reg.

454
00:22:14,990 --> 00:22:17,665
So kan jy dalk te hou
spoor van jou gesig is up of

455
00:22:17,665 --> 00:22:19,100
jou gesig op die kaart.

456
00:22:19,100 --> 00:22:23,420
Op Facebook, byvoorbeeld, sou jy
wil om te onthou waar in die nuus voer

457
00:22:23,420 --> 00:22:25,870
is jy of hou wie se profiel
is jy nou doen.

458
00:22:25,870 --> 00:22:30,127
>> Op boodskapper soos wat teks wat jy
tik in die boks insette, reg?

459
00:22:30,127 --> 00:22:31,710
As jy die bladsy te verfris, dit gaan weg.

460
00:22:31,710 --> 00:22:32,793
Maar jy het nie regtig omgee.

461
00:22:32,793 --> 00:22:33,770
Dis net tydelik.

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

463
00:22:34,548 --> 00:22:36,152
>> GEHOOR: [onhoorbaar]

464
00:22:36,152 --> 00:22:38,360
Neel Mehta: Soos 'n flits
kaart, soos jy kan sien

465
00:22:38,360 --> 00:22:40,290
Die vraag kant of die antwoord kant?

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

467
00:22:41,070 --> 00:22:43,270
>> Neel Mehta: Soos 'n
twee kante flitskaart, reg?

468
00:22:43,270 --> 00:22:46,370
Ja, so jy wil
het hierdie idee van nou

469
00:22:46,370 --> 00:22:50,370
Ek het eienskappe, wat soos insette,
maar staat, wat is 'n tydelike, uh,

470
00:22:50,370 --> 00:22:51,839
waar jy is op die bladsy, reg?

471
00:22:51,839 --> 00:22:54,380
Weereens, ek het in Facebook
Boodskapper, ek het soos wat mens

472
00:22:54,380 --> 00:22:56,550
jy lees Facebook
of wie se profiel, reg?

473
00:22:56,550 --> 00:22:58,030
>> Dit is net tydelik.

474
00:22:58,030 --> 00:23:01,200
Dit is belangrik om die gebruiker te wys
wat gaan aan, maar die bladsy te verfris.

475
00:23:01,200 --> 00:23:02,250
Dit maak nie regtig saak nie.

476
00:23:02,250 --> 00:23:04,530
So dit is tydelike staat,
sodat ons almal dit staat.

477
00:23:04,530 --> 00:23:06,250
>> So, weer, daar is die staat en rekwisiete.

478
00:23:06,250 --> 00:23:09,084
Stutte is insette gegee
van jou data bron.

479
00:23:09,084 --> 00:23:10,250
Staat is net soos standaard.

480
00:23:10,250 --> 00:23:13,700
Dit is net soos die dinge wat
maak die ding interaktief.

481
00:23:13,700 --> 00:23:17,720
>> So in ons CardView-- laat ons
ons CardView-- so dit was lekker.

482
00:23:17,720 --> 00:23:21,420
Wat ons gaan doen, gaan ons
om CardView en slegs CardView raak.

483
00:23:21,420 --> 00:23:25,105
En so my vriend wat hierdie, het hulle
sou geen verskil.

484
00:23:25,105 --> 00:23:27,230
Hulle wil nie hê om te verander
enige van hul eie kode,

485
00:23:27,230 --> 00:23:29,410
maar hulle wil sien hul
CardView het opgevoerde.

486
00:23:29,410 --> 00:23:31,270
Dit is 'n mooi deel oor komponente.

487
00:23:31,270 --> 00:23:35,290
>> OK, so in ons CardView, laat ons probeer
hou van of ons faseer up

488
00:23:35,290 --> 00:23:36,560
of gesig af.

489
00:23:36,560 --> 00:23:40,480
In Reageer ons dit doen deur die eerste
spesifiseer die aanvanklike toestand.

490
00:23:40,480 --> 00:23:42,070
Waar kom die kaart begin?

491
00:23:42,070 --> 00:23:48,480
>> 'N funksie genoem getInitialState so wees
funksioneer, en ons 'n voorwerp terugkeer.

492
00:23:48,480 --> 00:23:53,310
Dit bevat 'n paar voorwerp staat, en
'n toestand is net 'n sleutel-waarde paar.

493
00:23:53,310 --> 00:23:56,950
Soos in onderrig, het jy 'n sleutel en 'n
waarde, jy het soos naam is 'n string.

494
00:23:56,950 --> 00:24:01,410
>> In hierdie geval, kom ons sê front is waar.

495
00:24:01,410 --> 00:24:03,760
Dit sê dat ons 'n staat.

496
00:24:03,760 --> 00:24:06,570
Een komponent van die staat
is 'n kenmerk genaamd front.

497
00:24:06,570 --> 00:24:09,649
[Onhoorbaar], so by verstek,
ons is in die voorkant van die kaart,

498
00:24:09,649 --> 00:24:11,440
en ons kan dit verander
soos ons draai die kaart.

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

500
00:24:13,380 --> 00:24:18,190
>> OK, so in te lewer, nou, ons is
wat die vraag en die antwoord.

501
00:24:18,190 --> 00:24:20,860
Nou wat ons moet doen
is wys op die vraag

502
00:24:20,860 --> 00:24:24,370
As ons op die voorkant van die kaart so
die antwoord is vir die rug van die kaart.

503
00:24:24,370 --> 00:24:26,850
Dit is hoekom jy maak almal
die kaart interaktief.

504
00:24:26,850 --> 00:24:28,100
So kom ons probeer en om dit hier.

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

506
00:24:31,600 --> 00:24:33,620
Wel, die eerste net 'n veranderlike.

507
00:24:33,620 --> 00:24:37,790
Ons kan nou vra this.state.front.

508
00:24:37,790 --> 00:24:42,010
Ons toegang meld dieselfde ons
toegang stutte, so this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> As ons voor, dan text
is this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
As ons op die voorblad van die
card, ons gaan om te probeer en gryp

512
00:24:51,360 --> 00:24:52,485
Die vraag van die kaart.

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

514
00:24:54,782 --> 00:24:57,240
Andersins, as ons op die rug
van die kaart, wat doen ons?

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

516
00:25:01,830 --> 00:25:02,750
>> GEHOOR: Die antwoord?

517
00:25:02,750 --> 00:25:05,041
>> Neel Mehta: Yep, so teks
gelyk this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Maar as jy sien, ons gebruik
die staat om 'n besluit te neem

520
00:25:10,930 --> 00:25:14,420
want nou die komponent
sal anders lyk

521
00:25:14,420 --> 00:25:16,710
gebaseer af hoe hierdie interaksie met dit.

522
00:25:16,710 --> 00:25:20,355
So in plaas van die druk van hierdie,
ons sal net die druk van die teks.

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

524
00:25:25,270 --> 00:25:28,650
Cool, so nou, soos jy sien,
sien ons net die vraag.

525
00:25:28,650 --> 00:25:37,720
En as ek die hand te verander die staat hier
om voor vals kry ons 42 terug.

526
00:25:37,720 --> 00:25:39,720
>> So, weer, hierdie komponent
het sy eie staat.

527
00:25:39,720 --> 00:25:43,440
Soos 'n knoppie weet of
dit is of gedruk nie,

528
00:25:43,440 --> 00:25:46,080
hierdie ding weet wat is op
die voorkant of op die rug.

529
00:25:46,080 --> 00:25:48,320
By verstek, is dit op die voorblad.

530
00:25:48,320 --> 00:25:50,840
En dan is dit op die voorblad,
ons sal druk op die vraag.

531
00:25:50,840 --> 00:25:53,106
As dit op die rug, sal ons
druk die antwoord.

532
00:25:53,106 --> 00:25:54,980
So, weer, die inligting
gegee is dieselfde.

533
00:25:54,980 --> 00:25:59,090
Dit lyk net anders
gebaseer op hoe jy dit programmeer.

534
00:25:59,090 --> 00:26:02,670
So, byvoorbeeld, Facebook Messenger,
selfs as jy dieselfde data bron te kry,

535
00:26:02,670 --> 00:26:05,170
dit anders kan lyk
omdat die staat is anders.

536
00:26:05,170 --> 00:26:08,421
Jy is op soek na 'n
boodskap ander persoon se.

537
00:26:08,421 --> 00:26:10,930
>> OK, so dit is alles goed en
goed, maar nou wat is eintlik

538
00:26:10,930 --> 00:26:15,940
maak ons ​​in staat is om te verander, of
ons kaart is voor of agter.

539
00:26:15,940 --> 00:26:19,010
Ons kan dit doen deur die toevoeging van 'n flip
knoppie, 'n knoppie om die kaart wat

540
00:26:19,010 --> 00:26:22,950
sal die kaart te draai as dit [onhoorbaar].

541
00:26:22,950 --> 00:26:31,770
So laat hier by te voeg 'n knoppie, hierdie
knoppie, en hierdie knoppie sal flip sê.

542
00:26:31,770 --> 00:26:35,650
>> En so nou is, is dit
nie iets te doen.

543
00:26:35,650 --> 00:26:37,075
Dit lyk net mooi.

544
00:26:37,075 --> 00:26:43,650
Wat ons kan doen, is ons 'n kliek te voeg
hanteerder, onClick gelyk this.flip,

545
00:26:43,650 --> 00:26:44,820
en ons sal flip later definieer.

546
00:26:44,820 --> 00:26:47,120
Maar basies, onClick
is 'n funksie wat

547
00:26:47,120 --> 00:26:48,675
kry genoem word wanneer die gebruiker nie.

548
00:26:48,675 --> 00:26:52,330
>> So op die knoppie sal weet
wanneer dit is gebruik.

549
00:26:52,330 --> 00:26:54,750
Het dit is gebruik,
dit sal die kaart te draai.

550
00:26:54,750 --> 00:26:58,382
Dit is soort van soos jou
pizza lewering man.

551
00:26:58,382 --> 00:27:01,590
Jy is soos, alles reg, wanneer iemand
roep my, ek sal lewer pizza, reg?

552
00:27:01,590 --> 00:27:03,420
>> Jy registreer hierdie luisteraar.

553
00:27:03,420 --> 00:27:04,530
Jy luister na 'n gebeurtenis.

554
00:27:04,530 --> 00:27:07,657
Jy genoem word, en wanneer die
gebeurtenis, jy iets doen.

555
00:27:07,657 --> 00:27:08,240
Jy kry pizza.

556
00:27:08,240 --> 00:27:11,480
In hierdie geval, wanneer jy
gekliek, jy die kaart te draai.

557
00:27:11,480 --> 00:27:14,560
>> En so het ons nodig het om 'definieer
funksie wat die kaart sal flip,

558
00:27:14,560 --> 00:27:17,930
so ons sal dit reg skryf
hier, flip funksie.

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

560
00:27:20,850 --> 00:27:23,680
En so wat dink jy flip sal doen?

561
00:27:23,680 --> 00:27:27,180
Weereens is dit kry genoem wanneer
ons op die flip knoppie.

562
00:27:27,180 --> 00:27:29,406
Wat moet die funksie flip doen?

563
00:27:29,406 --> 00:27:34,136
>> GEHOOR: Verandering this.state.front
van ware vals, vals waar.

564
00:27:34,136 --> 00:27:38,420
>> Neel Mehta: Yep, so doen wat
this.front is-- die voorkant staat is.

565
00:27:38,420 --> 00:27:40,930
Neem die voorkant staat, as
dit is waar, maak dit vals is.

566
00:27:40,930 --> 00:27:42,530
As dit is vals, maak dit waar is, reg?

567
00:27:42,530 --> 00:27:45,330
So kom ons probeer dit.

568
00:27:45,330 --> 00:27:48,240
>> Jy kan nie verander die staat
net deur te doen this.state.

569
00:27:48,240 --> 00:27:50,380
Jy kan dit nie doen nie.

570
00:27:50,380 --> 00:27:52,030
Jy kan dit nie doen nie.

571
00:27:52,030 --> 00:27:55,810
Jy moet 'n funksie te gebruik
genoem this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Sodat jy kan sê this.setState front
kolon hierdie waar, weer, die uitroep

573
00:28:03,230 --> 00:28:04,330
punt beteken die teenoorgestelde.

574
00:28:04,330 --> 00:28:07,420
Ek dink as dit. state.front
waar is, sal dit draai onwaar.

575
00:28:07,420 --> 00:28:09,170
So sal ons die staat stel
van ware vals.

576
00:28:09,170 --> 00:28:11,430
As dit is onwaar, sal ons
stel dit vals waar.

577
00:28:11,430 --> 00:28:17,210
>> Net sien dat ons 'n bietjie en kry
anders, en so kom ons probeer hierdie.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, kyk na hierdie.

579
00:28:18,675 --> 00:28:21,810
Die flip knoppie sal nou
skakel die voorkant staat om terug te.

580
00:28:21,810 --> 00:28:24,990
>> En so hier is waar jy sien 'n
bietjie van die magie van reageer.

581
00:28:24,990 --> 00:28:28,420
Soos ons nooit vertel hy dit weer te lewer.

582
00:28:28,420 --> 00:28:30,910
Ons het nooit gesê dat dit niks te teken.

583
00:28:30,910 --> 00:28:32,630
As jy hierdie doen
sonder Reageer, sou jy

584
00:28:32,630 --> 00:28:34,588
het aan- hou wanneer die
flip knoppie is gekliek het,

585
00:28:34,588 --> 00:28:37,290
jy wil hê om dit te vertel
hand weer lewer, reg?

586
00:28:37,290 --> 00:28:43,050
>> Reageer is regtig cool in dat as jy
gee dit 'n sekere status en eienskappe,

587
00:28:43,050 --> 00:28:45,760
dit sal altyd lewer
presies dieselfde ding.

588
00:28:45,760 --> 00:28:48,690
En so wanneer ons ooit verander ons
die staat en die eienskappe,

589
00:28:48,690 --> 00:28:50,819
reageer net weer maak die hele ding.

590
00:28:50,819 --> 00:28:52,860
Dit weet dat daar is 'n
een-tot-een korrespondensie

591
00:28:52,860 --> 00:28:57,270
tussen die staat en parameter en HTML.

592
00:28:57,270 --> 00:29:00,110
So wanneer een van dié
veranderinge deur middel van 'n stel staat,

593
00:29:00,110 --> 00:29:03,750
dit sal verander hoe die
pay is weer terug.

594
00:29:03,750 --> 00:29:06,650
En so basies Reageer is soos
wag vir jou om te verander.

595
00:29:06,650 --> 00:29:09,870
>> Wanneer dit iets verander,
dit sal weer lewer die hele bladsy.

596
00:29:09,870 --> 00:29:12,480
En as dit klink ondoeltreffende,
dit is omdat dit sou wees,

597
00:29:12,480 --> 00:29:15,050
maar reageer gebruik 'n ding
bekend as 'n Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
In plaas van die bladsy direk teken, is dit
hou die virtuele HTML boom in die geheue.

599
00:29:19,950 --> 00:29:23,620
>> Jy weet, HTML is soos 'n boom,
soos 'n hiërargiese struktuur data.

600
00:29:23,620 --> 00:29:28,990
Dit hou 'n valse boom in die geheue,
en wanneer jy die bladsy te werk,

601
00:29:28,990 --> 00:29:31,940
dit sal nog 'n valse teken
boom, en dit sal bereken

602
00:29:31,940 --> 00:29:35,120
wat verander moet dit na die maak
bladsy om die twee bome gelyk te maak.

603
00:29:35,120 --> 00:29:38,540
So basies, is dit feitlik
re-lewer 'n baie.

604
00:29:38,540 --> 00:29:41,540
En dan is dit soos net verander die
bladsy in klein tweaked as dit nodig is,

605
00:29:41,540 --> 00:29:44,240
so dit is baie, baie, baie doeltreffend nie.

606
00:29:44,240 --> 00:29:46,970
>> So basies Reageer sal
wanneer jy iets te verander,

607
00:29:46,970 --> 00:29:49,010
dit sal weer lewer die bladsy feitlik.

608
00:29:49,010 --> 00:29:52,830
Dit sal uit te vind wat ek nodig het om te
verander om die werklike bladsy weerspieël

609
00:29:52,830 --> 00:29:55,602
die virtuele bladsy en dit sal doen nie.

610
00:29:55,602 --> 00:29:56,560
Dit is die virtuele DOM.

611
00:29:56,560 --> 00:29:59,350
Dit is een van die grootste
kenmerke van reageer.

612
00:29:59,350 --> 00:30:00,880
>> Maak wat sin maak?

613
00:30:00,880 --> 00:30:01,540
Enige vrae?

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

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

616
00:30:05,568 --> 00:30:08,969
>> GEHOOR: Hoe
steeds te vergelyk met die MVC

617
00:30:08,969 --> 00:30:10,760
dat ons gepraat oor
voor soos hulpbronne.

618
00:30:10,760 --> 00:30:13,527
>> Neel Mehta: Ja, is die vraag
is hoe vergelyk dit met MVC?

619
00:30:13,527 --> 00:30:14,610
Jy het gevra oor die hulpbronne.

620
00:30:14,610 --> 00:30:16,445
Wel, laat ons praat oor hoe dit funksioneer.

621
00:30:16,445 --> 00:30:18,190
>> In MVC, sou jy die model te werk.

622
00:30:18,190 --> 00:30:20,560
In hierdie geval wil ons 'n kaart model het.

623
00:30:20,560 --> 00:30:24,540
Die uitsig sou die het
flip knoppie en die beheer

624
00:30:24,540 --> 00:30:26,310
sou die flip funksie.

625
00:30:26,310 --> 00:30:28,450
So die oog sal vertel die
kontroleerder flip flip.

626
00:30:28,450 --> 00:30:30,370
Flip sal vertel die
model te verander, reg?

627
00:30:30,370 --> 00:30:33,915
>> En so wanneer jy dit doen 'n MVC, jy
luister vir die model te verander,

628
00:30:33,915 --> 00:30:37,150
en jy weer lewer die oog dienooreenkomstig.

629
00:30:37,150 --> 00:30:39,210
Of jy moet net graag
het die beheerder.

630
00:30:39,210 --> 00:30:42,418
Wag vir die model te verander, en dan
kies en 'n deel van 'n ding soos '

631
00:30:42,418 --> 00:30:44,032
om te verander.

632
00:30:44,032 --> 00:30:45,740
Hier het ons een ding,
maar in 'n groot app,

633
00:30:45,740 --> 00:30:48,510
jy het om te hou onthou wat
die verandering in elke enkele plek,

634
00:30:48,510 --> 00:30:50,290
so dit is 'n bietjie irriterend.

635
00:30:50,290 --> 00:30:53,670
En so is lekker Reageer
omdat dit 'n Shadow Dom.

636
00:30:53,670 --> 00:30:56,040
Dit kan bekostig om net
herskryf die hele ding.

637
00:30:56,040 --> 00:30:58,680
Jy hoef nie selektief te
soos raai wat om te werk.

638
00:30:58,680 --> 00:31:02,186
>> Op Facebook as jy wil
kry 'n nuwe boodskap in MVC,

639
00:31:02,186 --> 00:31:04,060
jy wil hê om te onthou,
OK, verander die dinge

640
00:31:04,060 --> 00:31:06,260
aan die bokant van die
bladsy, die ikoon boodskap.

641
00:31:06,260 --> 00:31:08,290
Pop ook 'n nuwe venster aan die onderkant.

642
00:31:08,290 --> 00:31:10,070
Maak ook 'n nuwe ding in die venster.

643
00:31:10,070 --> 00:31:11,060
Speel ook 'n geluid.

644
00:31:11,060 --> 00:31:13,150
>> Dit is 'n baie dinge
gaan uit op dieselfde tyd.

645
00:31:13,150 --> 00:31:15,320
En so as jy dit nie doen nie
'n Shadow Dom, sou jy

646
00:31:15,320 --> 00:31:18,740
het dat die hand, omdat doen
jy kan nie ontslae raak van die hele bladsy.

647
00:31:18,740 --> 00:31:21,430
Jy kan nie bekostig om, sodat jy
aan elke ding die hand te verander,

648
00:31:21,430 --> 00:31:23,990
Dit is regtig irriterende in MVC.

649
00:31:23,990 --> 00:31:27,640
>> So in staat te wees
voorspoedig, hulle selektief

650
00:31:27,640 --> 00:31:30,750
werk die bladsy, wat
doeltreffende, maar ook irriterende.

651
00:31:30,750 --> 00:31:34,002
In reageer as gevolg van die Shadow
Dom, beide dinge wat jy gratis.

652
00:31:34,002 --> 00:31:35,710
Dit is omdat doeltreffende
van die Shadow Dom.

653
00:31:35,710 --> 00:31:37,210
Die bottelnek is die opdatering van die bladsy.

654
00:31:37,210 --> 00:31:40,292
Dit is nie te doen die boom manipulasie.

655
00:31:40,292 --> 00:31:41,250
Jy kry die doeltreffendheid.

656
00:31:41,250 --> 00:31:45,420
Jy kry ook die gemak van gebruik, omdat
as jy net die hele bladsy te herskryf,

657
00:31:45,420 --> 00:31:48,970
maar jy weet net, alles reg, die dinge
gaan wees op die bladsy iewers.

658
00:31:48,970 --> 00:31:51,180
Dit kan wees in 'n ander plek, maar
dit gaan wees op die bladsy, reg?

659
00:31:51,180 --> 00:31:52,860
Sodat jy net weer gelewer
die hele ding feitlik,

660
00:31:52,860 --> 00:31:55,540
en jy kan 'n paar te maak
veranderinge aan die bladsy self.

661
00:31:55,540 --> 00:31:57,850
>> So, weer, in MVC jy
sal moet kies

662
00:31:57,850 --> 00:32:01,840
tussen die gemak van gebruik en doeltreffendheid,
en te reageer, julle albei kry.

663
00:32:01,840 --> 00:32:04,020
So dit is beter.

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

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

666
00:32:06,676 --> 00:32:12,080
>> OK, so laat ons sien laat ons praat
'n bietjie oor stap 4,

667
00:32:12,080 --> 00:32:14,740
hoe ons kan komponente insluit.

668
00:32:14,740 --> 00:32:16,260
So het ons nou hierdie reg.

669
00:32:16,260 --> 00:32:19,420
Ons het ons koel bietjie knoppie.

670
00:32:19,420 --> 00:32:23,157
Ons kan dit flip terug en
uit, en dit is al wat dit doen.

671
00:32:23,157 --> 00:32:24,990
Kom ons sê ons wil
het 'n ander komponent.

672
00:32:24,990 --> 00:32:28,730
Kom ons sê die flitskaart app moet
bevat 'n lys van al die kaarte

673
00:32:28,730 --> 00:32:31,520
dat jy, so dit beteken dat ons
moet 'n ander komponent het.

674
00:32:31,520 --> 00:32:32,970
Wel, miskien is dit 'n lys te bel view.

675
00:32:32,970 --> 00:32:36,200
Kom ons maak 'n lys siening dat
coexists met die CardView,

676
00:32:36,200 --> 00:32:39,680
en die lys oog en CardView
saam wil werk.

677
00:32:39,680 --> 00:32:43,190
En jy kan kombineer hulle
om ons app vir jou.

678
00:32:43,190 --> 00:32:45,160
>> So die eerste, laat ons 'n
paar meer kaarte reg.

679
00:32:45,160 --> 00:32:46,370
Kom ons sê, wat kaarte?

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

681
00:32:49,619 --> 00:32:51,910
En net so het ek nie om
gebaar jy met tik in,

682
00:32:51,910 --> 00:32:53,410
Ek is net gaan om dit te kopieer van hier.

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

684
00:33:01,664 --> 00:33:03,580
En so gaan ek nie
gee dit net 'n kaart.

685
00:33:03,580 --> 00:33:06,910
Ek gaan om te gee dit 'n verskeidenheid van kaarte.

686
00:33:06,910 --> 00:33:10,240
So die eerste keer die apps
gaan om te breek vir nou.

687
00:33:10,240 --> 00:33:14,717
Alle reg, so ons gaan maak
hierdie staat wees om verskeie kaarte te hanteer.

688
00:33:14,717 --> 00:33:17,800
So die eerste, ons gaan om dit te gee, nie
net een kaart, maar 'n verskeidenheid van kaarte,

689
00:33:17,800 --> 00:33:18,700
soos 'n lys van kaarte.

690
00:33:18,700 --> 00:33:20,980
En in hierdie geval, ons het drie van hulle.

691
00:33:20,980 --> 00:33:27,280
>> Alle reg, so so inligting is
gaan om 'n lys kaarte,

692
00:33:27,280 --> 00:33:29,870
en dit gaan om te besluit watter
een om te wys na die CardView.

693
00:33:29,870 --> 00:33:33,740
Die CardView kan slegs
lewer 'n kaart, maar die app

694
00:33:33,740 --> 00:33:37,610
kry 'n lys van al die kaarte, reg?

695
00:33:37,610 --> 00:33:40,820
>> So wanneer jy uitvind een
kaart te gee aan CardView,

696
00:33:40,820 --> 00:33:44,660
hoe sou jy dink jy dalk in staat wees
om 'n besluit te neem oor watter kaart

697
00:33:44,660 --> 00:33:47,064
om te wys?

698
00:33:47,064 --> 00:33:49,980
Om jou 'n wenk te gee, is dit tydelik
Jy sal lees van 'n sekere kaart.

699
00:33:49,980 --> 00:33:53,260
As jy die bladsy te verfris, sal jy
net terug na die eerste kaart gaan.

700
00:33:53,260 --> 00:33:55,464
Dit is OK, want dit is tydelik.

701
00:33:55,464 --> 00:33:56,630
Watter tegniek kan ons gebruik?

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

703
00:34:02,534 --> 00:34:08,760
>> GEHOOR: Jy kan 'n veranderlike
sodat net soos jy het voor.

704
00:34:08,760 --> 00:34:11,989
Is dit waar is, kan jy
het die huidige kaart gelyk 1?

705
00:34:11,989 --> 00:34:14,150
>> Neel Mehta: Ja, so ons
wil staat het, reg?

706
00:34:14,150 --> 00:34:16,080
Jy sal die staat te gebruik in die
komponent om uit te vind

707
00:34:16,080 --> 00:34:17,288
wat card wil ons kry.

708
00:34:17,288 --> 00:34:19,290
Soos ons het 'n lys van
al die kaarte, sal ons

709
00:34:19,290 --> 00:34:21,630
gebruik die staat om uit te vind
een van die eerste kaart,

710
00:34:21,630 --> 00:34:23,710
tweede kaart, derde kaart, en so aan.

711
00:34:23,710 --> 00:34:28,760
>> So 'n app so 'n app sal 'n te kry
het die getInitialState funksie,

712
00:34:28,760 --> 00:34:35,020
getInitialState funksie terugkeer.

713
00:34:35,020 --> 00:34:39,929
En ons sal net sê activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
So nou is ons jeug het sy eie staat.

715
00:34:42,889 --> 00:34:47,179
>> En so nou lewer, om uit te vind
'n kaart, laat ons gaan net na die skikking

716
00:34:47,179 --> 00:34:49,969
en gryp die ding op die indeks.

717
00:34:49,969 --> 00:34:53,580
Kies card gelyk this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
So as jy hier sien, die stutte en
die staat werklik saam te werk.

720
00:35:00,162 --> 00:35:08,990
So nou dat ons het ons activeCard,
ons sal dit noem activeCard,

721
00:35:08,990 --> 00:35:10,470
en laat ons sien of dit werk.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Ag, dit was 'n teks fout.

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

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

728
00:35:51,420 --> 00:35:54,840
>> Cool, yep, so nou terug was ons
waar ons voorheen was, reg?

729
00:35:54,840 --> 00:35:57,100
Dieselfde ou program, behalwe
nou kan ons ondersteun

730
00:35:57,100 --> 00:35:59,390
'n lys van kaarte, nie net een kaart.

731
00:35:59,390 --> 00:36:04,130
En nou, weer, as ons verander die
activeIndex, kan ons gaan 0-1,

732
00:36:04,130 --> 00:36:07,330
en nou dat die tweede kaart,
en dan het ons na 0.

733
00:36:07,330 --> 00:36:10,390
So hier is 'n nuwe
opgewarmde weergawe van ons.

734
00:36:10,390 --> 00:36:16,000
>> OK, so nou laat ons 'n lys siening dat
toon al die kaarte in jou program,

735
00:36:16,000 --> 00:36:19,980
so ons sal 'n nuwe maak
komponent genoem script lys.

736
00:36:19,980 --> 00:36:22,155
Laat script lys gelyk react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
So wil ons 'n geordende lewer
lys met 'n lys item vir elke kaart.

739
00:36:38,800 --> 00:36:41,490
En so het ons het 'n klomp van die kaarte.

740
00:36:41,490 --> 00:36:44,990
Ons wil 'n lys-item
vir elke kaart, reg?

741
00:36:44,990 --> 00:36:47,490
Ons kan 'n lus te doen vir of
iets om 'n nuwe lys item maak.

742
00:36:47,490 --> 00:36:50,522
Maar die manier waarop jy dit doen in
Reageer, gebruik 'n ding genaamd kaart.

743
00:36:50,522 --> 00:36:57,150
Kaart is 'n instrument of 'n funksie wat jy gebruik
dat vir elke item, loop 'n funksie,

744
00:36:57,150 --> 00:36:59,510
neem terugkeer waarde en
gee jou dit terug.

745
00:36:59,510 --> 00:37:06,310
>> So as 'n voorbeeld, ons het die skikking
1, 2, 3.map function-- en dit

746
00:37:06,310 --> 00:37:12,120
is snelskrif vir 'n
function-- x pyl x keer x.

747
00:37:12,120 --> 00:37:16,110
Dit sê vir elke nommer
in 1, 2, 3, neem dit.

748
00:37:16,110 --> 00:37:17,800
Vierkante, en gee dit terug.

749
00:37:17,800 --> 00:37:22,090
So wat dink jy 1,
2, 3.map x gaan x keer

750
00:37:22,090 --> 00:37:25,480
x gee jou terug gegee
dat hierdie funksie is

751
00:37:25,480 --> 00:37:27,680
loop op elke element van daardie skikking.

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

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

754
00:37:32,190 --> 00:37:35,709
>> Neel Mehta: Yep, 1, 4, 9
want jy doen 1 keer 1.

755
00:37:35,709 --> 00:37:36,500
Dit gee jou 'n.

756
00:37:36,500 --> 00:37:37,690
Dit is die eerste element.

757
00:37:37,690 --> 00:37:38,530
>> 2 keer 2 is 4.

758
00:37:38,530 --> 00:37:39,570
Dit is 'n tweede element.

759
00:37:39,570 --> 00:37:40,310
3 keer 3 is 9.

760
00:37:40,310 --> 00:37:41,540
Dit is 'n derde element.

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

762
00:37:42,640 --> 00:37:45,015
So het 'n tegniek kaart wat jy
gebruik in funksionele programmeerders,

763
00:37:45,015 --> 00:37:48,090
die nuwe styl van
programmering om iets te doen

764
00:37:48,090 --> 00:37:50,500
elke element in jou lys.

765
00:37:50,500 --> 00:37:51,970
En so dit bekend klink.

766
00:37:51,970 --> 00:37:53,370
Ons het 'n lys van kaarte.

767
00:37:53,370 --> 00:37:56,860
Ons wil 'n lys item vir elke te kry
een, so sal ons net gebruik kaart hier.

768
00:37:56,860 --> 00:38:00,250
Ons sal sê, laat lys gelykes
this.props, kaarte, kaart.

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

770
00:38:10,580 --> 00:38:15,070
>> En so kry 'n kaart, ons is
gaan om 'n lys item te genereer

771
00:38:15,070 --> 00:38:17,580
met daardie kaart inhoud kant is.

772
00:38:17,580 --> 00:38:20,660
Laat ons net sê ons wil uit te gee
die kaarte te bevraagteken so card.question.

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

774
00:38:24,990 --> 00:38:30,649
Hierdie lys bevat So 'n
verskeidenheid van LI of Lys Items

775
00:38:30,649 --> 00:38:32,440
waar daar is een lys
item vir elke kaart,

776
00:38:32,440 --> 00:38:35,150
en dat bevat die kaarte vraag.

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

778
00:38:37,640 --> 00:38:39,450
>> Cool, so nou kom ons
eintlik druk dat uit.

779
00:38:39,450 --> 00:38:46,521
So sal ons 'n ul terugkeer.

780
00:38:46,521 --> 00:38:49,020
Binne-in dat On-geordende lys,
ons sal net die hele lys vashou

781
00:38:49,020 --> 00:38:49,890
dat hulle aan ons gegee het.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Alle reg, sodat dit nou
list view werk net te vind.

785
00:38:56,060 --> 00:38:59,842
Enige vrae oor die lys vertoon?

786
00:38:59,842 --> 00:39:01,270
Jy het 'n klomp van die kaarte.

787
00:39:01,270 --> 00:39:02,800
Jy maak 'n lys item vir elke kaart.

788
00:39:02,800 --> 00:39:05,466
En jy sit dit in 'n geordende
lys, en jy gee dit terug.

789
00:39:05,466 --> 00:39:09,410
So nou, laat ons optree sodat ons embed
hierdie binnekant van ons jeug,

790
00:39:09,410 --> 00:39:14,310
sodat ons kan dit doen, die lys vertoon.

791
00:39:14,310 --> 00:39:17,070
Wat doen ons argument slaag om 'n lys oog?

792
00:39:17,070 --> 00:39:18,320
Watter eienskappe gee ons dit?

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

794
00:39:25,111 --> 00:39:26,860
Onthou, as jy gee
dit 'n klomp van kaarte,

795
00:39:26,860 --> 00:39:29,590
dit sal die lys te maak
sien vir diegene kaarte.

796
00:39:29,590 --> 00:39:32,267
So, wat sou ons slaag
hier as die argument?

797
00:39:32,267 --> 00:39:33,350
GEHOOR: 'n lys van kaarte?

798
00:39:33,350 --> 00:39:37,130
Neel Mehta: Ja, so kaarte
gelyk this.props.cards, reg?

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

800
00:39:39,850 --> 00:39:44,370
En so het die enigste probleem
is dat jy kan net

801
00:39:44,370 --> 00:39:48,600
draai 'n top vlak element in te lewer,
sodat jy het om dit te draai in 'n div.

802
00:39:48,600 --> 00:39:49,100
Dit is vreemd.

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

804
00:39:56,190 --> 00:39:57,530
So laat ons sien of nie.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Werk dit?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Yep, daar gaan jy.

809
00:40:31,030 --> 00:40:33,700
So nou het ons 'n lys
kaarte aan die onderkant,

810
00:40:33,700 --> 00:40:36,180
en dan het ons ons
CardView homself bo-op,

811
00:40:36,180 --> 00:40:40,486
en dit sal tussen flip
die twee kante van die kaart.

812
00:40:40,486 --> 00:40:42,610
Nou doen dit sin maak hoe ek dit gedoen het?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Ja, dit weer, het ons twee komponente.

815
00:40:46,790 --> 00:40:49,666
Die eerste komponent afdrukke
uit elke kaart in die lys.

816
00:40:49,666 --> 00:40:50,540
Dit is die lys vertoon.

817
00:40:50,540 --> 00:40:54,770
En die tweede komponent
druk uit net dat card.

818
00:40:54,770 --> 00:40:58,840
As jy dit gee 'n sekere kaart, sal dit
druk inligting oor die kaart

819
00:40:58,840 --> 00:41:01,870
en laat jy heen en weer draai.

820
00:41:01,870 --> 00:41:05,850
>> So as ons wil, kan ons probeer en praat
oor die byvoeging van 'n paar nuwe funksies om hierdie.

821
00:41:05,850 --> 00:41:09,482
Anders kan ons 'n bietjie meer praat
oor van die snelheid van reaktor,

822
00:41:09,482 --> 00:41:11,190
of ons kan antwoord
vrae wat jy mag hê

823
00:41:11,190 --> 00:41:15,050
want dit is al die kern dele
van reageer wat ek wil om te praat oor.

824
00:41:15,050 --> 00:41:16,540
Ons kan voortgaan.

825
00:41:16,540 --> 00:41:17,590
Ons kan vrae te beantwoord.

826
00:41:17,590 --> 00:41:18,560
Watookal jy wil hê.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> GEHOOR: Kan jy gebruik
JSX in normale JavaScript?

829
00:41:24,205 --> 00:41:27,150
Of is dit iets wat
het gekom met die [onhoorbaar]?

830
00:41:27,150 --> 00:41:30,760
>> Neel Mehta: Die vraag is kan
jy JSX gebruik met normale JavaScript?

831
00:41:30,760 --> 00:41:32,620
Die antwoord is ja.

832
00:41:32,620 --> 00:41:41,070
JSX is net 'n manier van dit neem jou
JavaScript dat HTML het binnekant van dit,

833
00:41:41,070 --> 00:41:44,215
en dit stel in JavaScript dat
nie HTML nie binnekant van dit.

834
00:41:44,215 --> 00:41:47,880
So sien that-- so sien hier.

835
00:41:47,880 --> 00:41:50,820
Dit lyk soos jy het soos div
en jy het dinge binnekant van dit.

836
00:41:50,820 --> 00:41:54,970
>> Dit stel om JavaScript dat
soos genereer dieselfde ding.

837
00:41:54,970 --> 00:41:59,590
Ek dink wat ek sê, is dat
JSX is net 'n sintaktiese, soos dit is

838
00:41:59,590 --> 00:42:03,530
'n voorverwerker vir JavaScript veel
soos PHP is 'n voorverwerker vir HTML.

839
00:42:03,530 --> 00:42:05,490
JSC is 'n voorverwerker
vir JavaScript waarmee

840
00:42:05,490 --> 00:42:12,970
jy HTML binnekant van jou JavaScript.

841
00:42:12,970 --> 00:42:16,425
En so as jy het die reg transformator
wat is 'n ding genaamd [onhoorbaar],

842
00:42:16,425 --> 00:42:17,300
wat sal transformeer.

843
00:42:17,300 --> 00:42:19,360
Die reg voorverwerker,
dit sal jou laat jy dit doen.

844
00:42:19,360 --> 00:42:20,235
>> GEHOOR: [onhoorbaar]

845
00:42:20,235 --> 00:42:23,026
Neel Mehta: Gewoonlik hoef jy nie
HTML binnekant van JavaScript sit

846
00:42:23,026 --> 00:42:24,110
tensy jou toedoen reageer.

847
00:42:24,110 --> 00:42:27,146
Maar jy kan dit in elk geval doen.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> GEHOOR: Ek dink jy
beskryf het Reageer

850
00:42:29,353 --> 00:42:31,970
as 'n funksionele programing taal.

851
00:42:31,970 --> 00:42:35,646
Ons het geleer C in CS50.

852
00:42:35,646 --> 00:42:38,032
Is ook 'n funksionele C taal?

853
00:42:38,032 --> 00:42:39,990
Neel Mehta: Dus die vraag
is oor die funksionele

854
00:42:39,990 --> 00:42:43,010
versus ander ding genoem
noodsaaklik of prosedurele programmering.

855
00:42:43,010 --> 00:42:44,820
Daar is twee soorte programme gewild.

856
00:42:44,820 --> 00:42:48,550
'N Mens se prosedurele genoem, wat
is al oor die wil doen bevele,

857
00:42:48,550 --> 00:42:51,510
en een is funksioneel, wat al
oor wat funksies en met

858
00:42:51,510 --> 00:42:52,930
toevoer en afvoer van daardie.

859
00:42:52,930 --> 00:42:55,930
Reageer is 'n funksionele paradigma.

860
00:42:55,930 --> 00:42:58,010
C is 'n baie prosedurele paradigma.

861
00:42:58,010 --> 00:43:02,360
>> En as 'n voorbeeld, C byvoorbeeld
jy nie hierdie verklarende manier te doen

862
00:43:02,360 --> 00:43:04,390
van die maak van die program, reg?

863
00:43:04,390 --> 00:43:06,826
Jy het om te sê, druk hierdie.

864
00:43:06,826 --> 00:43:07,950
Verander hierdie data struktuur.

865
00:43:07,950 --> 00:43:08,530
Druk hierdie.

866
00:43:08,530 --> 00:43:10,160
Dit gaan alles oor opdragte.

867
00:43:10,160 --> 00:43:12,640
>> In Reageer, daar is nie
dat baie opdragte.

868
00:43:12,640 --> 00:43:15,145
Dit gaan alles oor wat
komponente saam te stel.

869
00:43:15,145 --> 00:43:16,300
Hulle is soos funksies.

870
00:43:16,300 --> 00:43:26,360
Jy het soos 'n funksie
genoem CardView,

871
00:43:26,360 --> 00:43:28,680
wat is 'n funksie
wat invoer, uitvoer,

872
00:43:28,680 --> 00:43:30,660
en so is al wat Reageer
oor hierdie filosofie

873
00:43:30,660 --> 00:43:32,700
ons van having-- jy data het.

874
00:43:32,700 --> 00:43:34,910
Jy gee dit deur middel van hierdie
algoritme, en dit sal

875
00:43:34,910 --> 00:43:36,800
uitset HTML dat jy
net gedruk die bladsy

876
00:43:36,800 --> 00:43:39,180
en so moet jy
bou stuk vir stuk.

877
00:43:39,180 --> 00:43:42,800
>> So 'n metafoor om te teken wat
Ek gesê het, jy weet hoe

878
00:43:42,800 --> 00:43:47,050
op Facebook as jy 'n boodskap kry,
en jy kies wat dele te werk,

879
00:43:47,050 --> 00:43:47,882
dit is die proses.

880
00:43:47,882 --> 00:43:48,840
Dit is noodsaaklik, reg?

881
00:43:48,840 --> 00:43:49,806
OK, ek het 'n boodskap.

882
00:43:49,806 --> 00:43:50,930
Kom ons verander daar rekening.

883
00:43:50,930 --> 00:43:52,110
>> Kom ons pop 'n venster hier.

884
00:43:52,110 --> 00:43:52,780
Kom ons verander daar rekening.

885
00:43:52,780 --> 00:43:53,700
Kom ons teken hierdie hier.

886
00:43:53,700 --> 00:43:55,220
Dit is 'n proses benadering.

887
00:43:55,220 --> 00:44:00,240
>> Dit is wat dinge soos Hoekige,
Hupstoot, Backbone, ander raamwerke te gebruik.

888
00:44:00,240 --> 00:44:01,200
Reageer is funksioneel.

889
00:44:01,200 --> 00:44:03,324
Dit is 'n heel ander manier
van dink oor dinge.

890
00:44:03,324 --> 00:44:07,950
Dit neem die idee van kom ons
funksies of algoritmes wat sal jy

891
00:44:07,950 --> 00:44:08,800
gee dit data.

892
00:44:08,800 --> 00:44:11,820
Dit sal spoeg uit wat dit
behoort te wees, en die rekenaar

893
00:44:11,820 --> 00:44:13,490
sal sorg uitweeg.

894
00:44:13,490 --> 00:44:15,890
Jy hoef nie te hanteer dit self.

895
00:44:15,890 --> 00:44:18,470
Maak dit 'n bietjie van sin?

896
00:44:18,470 --> 00:44:18,970
Ja?

897
00:44:18,970 --> 00:44:24,180
>> GEHOOR: In 'n funksionele taal,
alles gebeur in 'n keer?

898
00:44:24,180 --> 00:44:26,800
>> Neel Mehta: Nee, dinge gebeur in orde is.

899
00:44:26,800 --> 00:44:29,320
Soos hier daar is nog
bestel, maar dit beteken nie

900
00:44:29,320 --> 00:44:32,390
gebeur in volgorde van soos
beveel, opdrag, opdrag.

901
00:44:32,390 --> 00:44:36,459
Dit gebeur in volgorde van
funksie gee jou uitset.

902
00:44:36,459 --> 00:44:37,750
Sit dit in 'n ander funksie.

903
00:44:37,750 --> 00:44:39,550
Sit dit in 'n ander
funksie, 'n ander funksie.

904
00:44:39,550 --> 00:44:41,470
>> As jy dit doen CS51, sal jy
leer funksionele programme

905
00:44:41,470 --> 00:44:42,886
'n bietjie uit die bestek van hierdie.

906
00:44:42,886 --> 00:44:45,090
Maar basies, wat maak
Reageer cool is nie net

907
00:44:45,090 --> 00:44:46,840
die eenrigting-data vloei
en die virtuele Dom,

908
00:44:46,840 --> 00:44:48,700
maar ook die idee van
funksionele programmering.

909
00:44:48,700 --> 00:44:51,720
En funksionele programmering is baie maklik
om te komponeer en maak cool stuff uit,

910
00:44:51,720 --> 00:44:53,844
en dit is baie maklik om te dink
oor en oor rede.

911
00:44:53,844 --> 00:44:55,450
So dit is nog 'n goeie teken van reageer.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Meer vrae?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Ja?

916
00:45:03,150 --> 00:45:06,840
>> GEHOOR: Um, hoekom sou jy
gebruik laat eerder as om var?

917
00:45:06,840 --> 00:45:10,450
>> Neel Mehta: So die vraag is
Hoekom gebruik jy laat in plaas van var?

918
00:45:10,450 --> 00:45:13,220
Dit is 'n ding genaamd
ES6 of ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Dit is die nuwe weergawe van JavaScript.

920
00:45:15,820 --> 00:45:19,050
Daar is 'n klomp van die tegniese redes
Maar laat 'n beter weergawe van var.

921
00:45:19,050 --> 00:45:20,724
>> Dit is hoe jy verklaar veranderlikes.

922
00:45:20,724 --> 00:45:21,390
Jy kan gebruik laat.

923
00:45:21,390 --> 00:45:22,140
Jy kan gebruik var.

924
00:45:22,140 --> 00:45:23,825
Laat 'n klomp van die tegniese
reasons-- jy hulle kan kyk

925
00:45:23,825 --> 00:45:25,610
up later-- waarom dit beter is.

926
00:45:25,610 --> 00:45:28,780
Basies, ES6 het 'n paar mooi
nuwe sintaksis, 'n paar nuwe funksies

927
00:45:28,780 --> 00:45:30,720
op die top van die ou JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> So het ons soos vyf minute.

929
00:45:32,782 --> 00:45:34,990
Ek wou net om te praat oor
een ding baie vinnig.

930
00:45:34,990 --> 00:45:36,450
Indien u enige vrae het,
laat ons praat oor dit daarna.

931
00:45:36,450 --> 00:45:38,366
Maar net so hierdie kry
gevang op kamera, ek het net

932
00:45:38,366 --> 00:45:41,550
wil 'n bietjie oor hoe jy praat
eintlik gebruik Reageer in jou apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> As jy hier gaan,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
dit is die tuisblad vir reageer en
dit sal jou wys hoe jy eintlik gebruik

936
00:46:03,320 --> 00:46:05,320
Reageer in jou bladsye.

937
00:46:05,320 --> 00:46:08,845
Kortom, dit is 'n bietjie
ingewikkeld probeer om te installeer reageer.

938
00:46:08,845 --> 00:46:12,300
Dit is nie so maklik soos jy net sleep
en gooi 'n JavaScript daar.

939
00:46:12,300 --> 00:46:15,890
>> Jy moet jou transformator
opgestel, wat sal, soos dit voor gedoen het,

940
00:46:15,890 --> 00:46:18,120
draai jou JSX in
die normale JavaScript.

941
00:46:18,120 --> 00:46:21,030
Jy het om te ding wat sal
stel jy ES6 na normaal.

942
00:46:21,030 --> 00:46:24,720
JavaScript is daar is 'n baie van die beweging
dele wat jy hoef te doen, so daar is 'n ding

943
00:46:24,720 --> 00:46:27,200
genoem Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
En dit is 'n command line instrument wat sal
help te ondersteun jou Reageer

945
00:46:31,110 --> 00:46:32,380
projekte maklik.

946
00:46:32,380 --> 00:46:38,660
>> Sodat jy kan lees oor hierdie
later, maar daar is 'n paar tools

947
00:46:38,660 --> 00:46:40,160
dat Yeoman bied.

948
00:46:40,160 --> 00:46:43,280
Hulle sal laat jy skep 'n Reageer
app met alles gebou in.

949
00:46:43,280 --> 00:46:46,030
Soos dit sal gebou het
in, komponente gebou in.

950
00:46:46,030 --> 00:46:47,880
Dit sal jou transformator gebou in.

951
00:46:47,880 --> 00:46:50,699
Hulle het 'n baie koel
dinge gebou in outomaties

952
00:46:50,699 --> 00:46:52,240
die gebruik van hierdie dinge genoem kragopwekkers.

953
00:46:52,240 --> 00:46:54,620
>> So lees oor hierdie as jy wil.

954
00:46:54,620 --> 00:46:59,110
Net gaan op Yeoman, Y-E-O-M-A-N, en
jy kan kragopwekkers soos hierdie te vind.

955
00:46:59,110 --> 00:47:01,263
En met kragopwekkers soos
hierdie, jy moet net graag een

956
00:47:01,263 --> 00:47:03,010
is 'n paar command line beveel.

957
00:47:03,010 --> 00:47:05,530
Dit sal te ondersteun uit 'n
hele Reageer app vir jou.

958
00:47:05,530 --> 00:47:10,470
Dit sal al die handleiding pype te kry,
en harde werk vir jou gedoen,

959
00:47:10,470 --> 00:47:13,010
en dit is die rede waarom jy moet net fokus
op die net skryf in reageer.

960
00:47:13,010 --> 00:47:16,739
>> So basies bou van 'n
Reageer app is triviaal.

961
00:47:16,739 --> 00:47:19,530
Dit is almal saam bedraad, maar daar
is gereedskap wat dit vir jou sal doen.

962
00:47:19,530 --> 00:47:23,070
So as jy wil 'n Reageer
app, probeer om dit te doen op die manier.

963
00:47:23,070 --> 00:47:26,360
As jy net wil om te eksperimenteer,
kan jy probeer om met behulp van hierdie CodePen

964
00:47:26,360 --> 00:47:28,550
want dit het CodePen
al die reageer bedrading.

965
00:47:28,550 --> 00:47:30,240
Ek het al die werk gedoen vir jou reeds.

966
00:47:30,240 --> 00:47:34,610
>> So as jy wil om te maak soos 'n
produksie vry Reageer app,

967
00:47:34,610 --> 00:47:37,220
Probeer een van hierdie kragopwekkers.

968
00:47:37,220 --> 00:47:40,240
As jy net wil om te speel
rond, is dit dikwels die moeite werd net

969
00:47:40,240 --> 00:47:44,490
soos Probeer speel rond op CodePen hier.

970
00:47:44,490 --> 00:47:45,470
Klink goed?

971
00:47:45,470 --> 00:47:45,970
Koel.

972
00:47:45,970 --> 00:47:47,890
>> So dit is al wat ek het.

973
00:47:47,890 --> 00:47:52,470
Weereens, al die kode en voorbeelde is
gaan wees op hierdie webwerf hier.

974
00:47:52,470 --> 00:47:55,509
So, weer, het ons nie praat
oor veel sintaksis van reageer

975
00:47:55,509 --> 00:47:57,550
maar aan almal te vind
bietjie sintaktiese besonderhede,

976
00:47:57,550 --> 00:48:00,320
dit is alles beskikbaar gaan wees
op hierdie webwerf hier.

977
00:48:00,320 --> 00:48:02,660
>> So ek sou aanbeveel soos
neem die eerste stap.

978
00:48:02,660 --> 00:48:06,277
Sit dit in jou CodePen.

979
00:48:06,277 --> 00:48:08,110
Probeer werk op die maak
dit aan die tweede stap.

980
00:48:08,110 --> 00:48:11,310
Daar is 'n vierde stap, en net
sien waar jy kry van dit.

981
00:48:11,310 --> 00:48:14,840
>> Enige verdere vrae, kyk
dat page of e-pos my.

982
00:48:14,840 --> 00:48:16,490
Dit is my e-pos.

983
00:48:16,490 --> 00:48:19,885
Maar ek wil graag om jou te help met enige
vrae wat jy mag hê oor reageer.

984
00:48:19,885 --> 00:48:21,010
So, yep, dit is al wat ek het.

985
00:48:21,010 --> 00:48:23,410
Baie dankie aan almal baie dankie vir
kyk of vir die bywoning.

986
00:48:23,410 --> 00:48:26,820
En ek sal enige vrae te neem
jy dalk nou na hierdie te hê.

987
00:48:26,820 --> 00:48:29,140
So dankie almal vir jou kyk.

988
00:48:29,140 --> 00:48:31,270