1
00:00:00,000 --> 00:00:02,910
>> [Muziek]

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL MEHTA: Hier gaat.

4
00:00:07,275 --> 00:00:11,070
>> Nou, iedereen, welkom op het web
apps van de toekomst met React.

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

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

7
00:00:12,930 --> 00:00:17,689
Ik ben een TA voor CS50 en een tweedejaars
aan Harvard College en een zeer, zeer

8
00:00:17,689 --> 00:00:18,730
gepassioneerde webontwikkelaar.

9
00:00:18,730 --> 00:00:20,730
Dus ik ben erg spannend
vandaag met je te praten,

10
00:00:20,730 --> 00:00:24,550
Of je nu hier of thuis bent
kijken, ongeveer React, dat is, opnieuw

11
00:00:24,550 --> 00:00:27,270
zoals ik al zei, de toekomst van web-apps.

12
00:00:27,270 --> 00:00:29,055
>> Reageer dus is een web framework.

13
00:00:29,055 --> 00:00:30,930
En zoals ik heb verteld
sommige mensen hier,

14
00:00:30,930 --> 00:00:33,400
een kader is gewoon een
set van tools die u kunt gebruiken

15
00:00:33,400 --> 00:00:35,770
structureren en bouwen van uw web-app.

16
00:00:35,770 --> 00:00:39,010
En web apps zijn, nogmaals, websites
dat zijn interactief, zoals Facebook,

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

18
00:00:42,330 --> 00:00:45,590
>> Dus Facebook is een web framework
dat werd ontwikkeld door Facebook

19
00:00:45,590 --> 00:00:48,060
een paar jaar back-- React is.

20
00:00:48,060 --> 00:00:50,830
Het is sindsdien gebruikt in
Facebook op hun mobiele apps

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

22
00:00:52,460 --> 00:00:56,350
Khan Academy is een ander
prominent early adopter van React.

23
00:00:56,350 --> 00:00:58,630
>> Het is echt geweest krijgen
zeer populair.

24
00:00:58,630 --> 00:01:03,420
Als je ooit dingen zoals hoekig of gebruik
Backbone, dit is van dezelfde familie,

25
00:01:03,420 --> 00:01:05,830
maar het heeft sindsdien ver
overtreffen hun populariteit.

26
00:01:05,830 --> 00:01:06,890
Het is de hete nieuwe ding.

27
00:01:06,890 --> 00:01:09,590
Het is echt, echt enorm.

28
00:01:09,590 --> 00:01:13,470
>> En zo React is goed niet alleen als een
web framework voor het bouwen van interfaces.

29
00:01:13,470 --> 00:01:16,020
Het is goed voor het bouwen van web-interfaces.

30
00:01:16,020 --> 00:01:18,350
Er is ook een ding
genaamd Reageer Inheems die

31
00:01:18,350 --> 00:01:22,200
laat u interfaces te bouwen
voor Android en iOS

32
00:01:22,200 --> 00:01:26,390
en misschien andere platformen in de toekomst
met precies dezelfde JavaScript-code.

33
00:01:26,390 --> 00:01:31,130
Je zou exact dezelfde gebruiken
JavaScript-code om websites te maken,

34
00:01:31,130 --> 00:01:33,040
Android apps en iOS-apps te maken.

35
00:01:33,040 --> 00:01:35,000
>> Het is een zeer, zeer spannende tijd.

36
00:01:35,000 --> 00:01:37,070
Het is echt, echt cool kans.

37
00:01:37,070 --> 00:01:42,020
Het is echt een universele web
interface-instrument voor ontwikkeling,

38
00:01:42,020 --> 00:01:44,420
dus het is een zeer, zeer
het belangrijk om te weten.

39
00:01:44,420 --> 00:01:46,949
En, zoals ik vertelde mensen
voor, dit, denk ik,

40
00:01:46,949 --> 00:01:48,990
gaat hoe we veranderen
bouwen van webapplicaties altijd.

41
00:01:48,990 --> 00:01:55,820
Dus het is misschien een beetje overdrijving, maar ik
denk dat het een vrij goed om te weten.

42
00:01:55,820 --> 00:01:57,580
>> OK, dus wat is React?

43
00:01:57,580 --> 00:02:01,020
Reageer is een raamwerk kunt u
gebruikt voor het bouwen van interfaces.

44
00:02:01,020 --> 00:02:03,240
Een interface is, wederom,
een webpagina, toch?

45
00:02:03,240 --> 00:02:06,340
Dus hier is Instagram.com, toepassingen reageren.

46
00:02:06,340 --> 00:02:08,740
>> Reageer is gebouwd op de
idee van componenten.

47
00:02:08,740 --> 00:02:11,900
Een component is een HTML
element steroïden,

48
00:02:11,900 --> 00:02:14,470
dus een HTML-element is als een knop.

49
00:02:14,470 --> 00:02:15,250
Het is een paragraaf.

50
00:02:15,250 --> 00:02:17,500
Het is een header, toch?

51
00:02:17,500 --> 00:02:22,740
En Instagram zal gebruik maken van deze, maar het
Ook onderdelen van React gebruiken.

52
00:02:22,740 --> 00:02:25,740
>> React componenten
opgevoerde HTML-elementen

53
00:02:25,740 --> 00:02:28,100
dat hun eigen gedrag
vervat in hen.

54
00:02:28,100 --> 00:02:31,800
Dus, als voorbeeld, kunnen we
een tijdselement, een tijd component,

55
00:02:31,800 --> 00:02:34,095
die zal bevatten, zoals
tijdstempel, weet je,

56
00:02:34,095 --> 00:02:37,170
een component profiel dat
zal het profiel bevatten

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

58
00:02:38,820 --> 00:02:42,930
Het kan als teller, hebben die
kan rekenen als het aantal stemmen voor leuk,

59
00:02:42,930 --> 00:02:45,610
en als je er op klikt, zal het
toename van het aantal houdt.

60
00:02:45,610 --> 00:02:48,200
Een component is slechts een
bos van HTML-code die

61
00:02:48,200 --> 00:02:50,520
heeft een aantal functies
verpakt binnenkant van het.

62
00:02:50,520 --> 00:02:53,770
Dus het is als een HTML-element
op steroïden, zoals ik al zei.

63
00:02:53,770 --> 00:02:56,270
U kunt deze componenten te nemen,
en je kunt ze in elkaar gezet

64
00:02:56,270 --> 00:02:59,060
om nieuwe componenten te maken, in
dit geval, een post-component,

65
00:02:59,060 --> 00:03:00,505
die bevat al deze spullen.

66
00:03:00,505 --> 00:03:04,050
Het zou tijd bevatten, Profile,
LikeCounter, misschien is de reactie

67
00:03:04,050 --> 00:03:06,100
en misschien het beeld zelf.

68
00:03:06,100 --> 00:03:10,810
En dus web apps zijn gewoon gebouwd door het nemen van
componenten en zetten ze samen.

69
00:03:10,810 --> 00:03:15,620
Een Instagram-feed is niets meer dan
een bos van berichten een na de ander,

70
00:03:15,620 --> 00:03:19,032
elk bericht bevat, zoals de tijd,
Profileren, LikeCounter, enzovoort.

71
00:03:19,032 --> 00:03:20,490
Het is een beetje als het bouwen van een huis.

72
00:03:20,490 --> 00:03:22,660
Je hoeft niet bouwen
huis van boven naar beneden.

73
00:03:22,660 --> 00:03:24,960
Je neemt je components--
nemen, zoals de badkamer.

74
00:03:24,960 --> 00:03:28,320
U neemt de bedroom-- u ze plakken
samen, en je hebt een nieuwe component.

75
00:03:28,320 --> 00:03:29,760
U heeft een nieuwe gedeelte van het huis.

76
00:03:29,760 --> 00:03:32,860
>> Reageer dus is rondom gebouwd
Dit idee van componenten

77
00:03:32,860 --> 00:03:36,600
zijn interactief, dat declaratieve zijn.

78
00:03:36,600 --> 00:03:39,650
Als je gewoon zeggen wat een
profiel, en maakt het.

79
00:03:39,650 --> 00:03:40,600
Ze zijn composable.

80
00:03:40,600 --> 00:03:43,880
U kunt een tijd en een profiel te nemen, zet
ze samen, maak er iets beter.

81
00:03:43,880 --> 00:03:47,770
En ze zijn herbruikbaar, dus als je
de broncode voor een post,

82
00:03:47,770 --> 00:03:49,440
je kan die overal insluiten.

83
00:03:49,440 --> 00:03:53,160
>> U kunt insluiten een Instagram
ding op uw eigen website.

84
00:03:53,160 --> 00:03:56,830
U kunt insluiten in Facebook, bijvoorbeeld,
zolang het gebruik React ook.

85
00:03:56,830 --> 00:04:00,360
Dus componenten zijn echt, echt, echt
krachtige bouwstenen van het web

86
00:04:00,360 --> 00:04:04,180
dat kan overal worden gebruikt en zet
samen om nieuwe bouwstenen te maken.

87
00:04:04,180 --> 00:04:07,159
Dat is het zeer, zeer
hoog niveau overzicht.

88
00:04:07,159 --> 00:04:09,200
Dus nogmaals, als je
vragen op elk punt

89
00:04:09,200 --> 00:04:14,470
over de filosofie van de reactor, de
codering, om mij te stoppen, en laat me weten.

90
00:04:14,470 --> 00:04:18,420
>> OK, dus reageer is cool, omdat het
heeft een andere manier van kijken

91
00:04:18,420 --> 00:04:19,870
hoe bouw je web apps.

92
00:04:19,870 --> 00:04:23,620
U hebt waarschijnlijk gehoord van MVC, een
model dat u de controle in CS50 of wat dan ook

93
00:04:23,620 --> 00:04:25,940
andere indringende lessen die u gebruikt.

94
00:04:25,940 --> 00:04:29,000
En de meeste kaders
opgebouwd rond het idee van MVC.

95
00:04:29,000 --> 00:04:30,410
Reageren niet.

96
00:04:30,410 --> 00:04:32,980
Reageer is opgebouwd rond het idee
van één richting datastroom

97
00:04:32,980 --> 00:04:36,510
zoals gezien door deze grafiek of grafische hier.

98
00:04:36,510 --> 00:04:38,260
>> Kortom, je hebt een gegevensbron.

99
00:04:38,260 --> 00:04:42,380
En de gegevensbron zal beslissen
hoe je lay-out van bepaalde onderdelen.

100
00:04:42,380 --> 00:04:45,452
En de componenten zal
Vervolgens, wanneer zij veranderen,

101
00:04:45,452 --> 00:04:47,160
zullen ze vertellen het
gegevensbron veranderen.

102
00:04:47,160 --> 00:04:49,350
>> Om de Instagram gebruiken
Bijvoorbeeld, zou u

103
00:04:49,350 --> 00:04:52,050
een lijst van de post objecten zoals
in een database of zoiets.

104
00:04:52,050 --> 00:04:53,310
Dat de gegevens.

105
00:04:53,310 --> 00:04:57,600
En dan onze post componenten
zal die gegevens te nemen,

106
00:04:57,600 --> 00:05:01,830
en het gebruik van die gegevens te maken
een ding op het scherm.

107
00:05:01,830 --> 00:05:04,300
Dat is wat de pijl
van data component is,

108
00:05:04,300 --> 00:05:07,930
en diezelfde gegevens worden gebruikt
om een ​​bos van componenten maken.

109
00:05:07,930 --> 00:05:10,290
>> Facebook Messenger voor
Bijvoorbeeld, wat React,

110
00:05:10,290 --> 00:05:13,410
je zou een lijst hebben
berichten als uw gegevensbron.

111
00:05:13,410 --> 00:05:15,927
En dat zou niet maken
alleen de lijst met berichten

112
00:05:15,927 --> 00:05:17,510
maar ook de lijst van vrienden die je hebt.

113
00:05:17,510 --> 00:05:19,200
U hebt het aantal ongelezen.

114
00:05:19,200 --> 00:05:23,330
Misschien ook wel te maken van de Facebook-ding
dat onderaan Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Dezelfde gegevens is een
bron van de waarheid

116
00:05:25,610 --> 00:05:28,290
en dat veel oorzaken
componenten worden gemaakt.

117
00:05:28,290 --> 00:05:30,290
En als een van degenen
componenten wordt veranderd,

118
00:05:30,290 --> 00:05:32,320
het gaat terug en
wijzigt de gegevensbron.

119
00:05:32,320 --> 00:05:33,460
>> U een bericht verzendt, toch?

120
00:05:33,460 --> 00:05:34,780
Dat verandert de gegevensbron.

121
00:05:34,780 --> 00:05:39,490
U leest uw berichten,
dus je ongelezen op 0 zetten.

122
00:05:39,490 --> 00:05:41,136
Dat verandert de gegevensbron.

123
00:05:41,136 --> 00:05:44,010
En merk op dat al deze van een
arrow terug te gaan naar dezelfde gegevens

124
00:05:44,010 --> 00:05:47,662
bron, zodat u weet,
gegeven een bepaalde data set,

125
00:05:47,662 --> 00:05:49,870
je precies wat het weet
pagina gaat uitzien.

126
00:05:49,870 --> 00:05:50,700
Het deterministische.

127
00:05:50,700 --> 00:05:53,451
Je weet wel, aangezien bepaalde gegevens, wat
de pagina gaat uitzien.

128
00:05:53,451 --> 00:05:56,158
U kunt voorspellen hoe het gaat
gedragen en hoe het gaat

129
00:05:56,158 --> 00:05:57,650
te werken wanneer ze samen zijn gebracht.

130
00:05:57,650 --> 00:06:00,410
>> En als ik een miljoen onderdelen
Hier zou het hetzelfde gedragen, toch?

131
00:06:00,410 --> 00:06:02,290
Je zou niet hebben
raar interconnecties.

132
00:06:02,290 --> 00:06:04,120
Een data gerenderd miljoen componenten.

133
00:06:04,120 --> 00:06:06,879
Een miljoen componenten kon
ga terug en de gegevens bewerken.

134
00:06:06,879 --> 00:06:07,920
En dus dit is erg leuk.

135
00:06:07,920 --> 00:06:10,870
We bouwen composable,
eenvoudig schaalbaar web apps.

136
00:06:10,870 --> 00:06:13,150
>> U heeft één gegevensbron,
de bron van de waarheid.

137
00:06:13,150 --> 00:06:15,790
Dat vertelt uw componenten
hoe de lay-out van de pagina,

138
00:06:15,790 --> 00:06:18,190
en de componenten zullen
handvat interactie.

139
00:06:18,190 --> 00:06:20,150
En als ze willen veranderen
dingen, gewoon terug

140
00:06:20,150 --> 00:06:21,750
en vertel de gegevensbron veranderen.

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

142
00:06:22,850 --> 00:06:26,010
Reageer dus is alles over het begrijpen
hoe u een component op te bouwen

143
00:06:26,010 --> 00:06:29,540
en hoe u uw component maken
interactie met de buitenwereld.

144
00:06:29,540 --> 00:06:31,850
>> Het maken van de component interacteren
met de buitenwereld

145
00:06:31,850 --> 00:06:34,490
maakt gebruik van een technologie
genaamd Flux, die

146
00:06:34,490 --> 00:06:36,872
is een raamwerk dat is
toegevoegd bovenop React.

147
00:06:36,872 --> 00:06:38,330
We gaan niet over praten.

148
00:06:38,330 --> 00:06:42,990
We gaan meer over praten, gezien
data, hoe kun je een component maken?

149
00:06:42,990 --> 00:06:47,010
>> En zo React is echt cool, want je
kan het gebruiken met elke back-end u wilt.

150
00:06:47,010 --> 00:06:50,480
Als je als een Python backend,
als je Python kan spugen een aantal gegevens,

151
00:06:50,480 --> 00:06:51,610
Reageren kan maken.

152
00:06:51,610 --> 00:06:54,700
Als u geen JS uitgangen
gegevens, maakt het React.

153
00:06:54,700 --> 00:06:56,890
Ruby rails met
data, React maakt het.

154
00:06:56,890 --> 00:07:01,860
>> Reageer dus is eigenlijk een web
view-- een front-end met componenten

155
00:07:01,860 --> 00:07:03,910
voor elke gegevensbron dan ook.

156
00:07:03,910 --> 00:07:07,145
En dus gaan van gegevensbron
reageren componenten is vrij eenvoudig.

157
00:07:07,145 --> 00:07:08,770
Gaat de andere kant op is een beetje moeilijker.

158
00:07:08,770 --> 00:07:10,462
Die gebruik maakt van Flux zoals ik al eerder noemde.

159
00:07:10,462 --> 00:07:11,420
Zullen we niet krijgen in dat.

160
00:07:11,420 --> 00:07:13,740
We zullen meer op de focus
data naar componentenzijde.

161
00:07:13,740 --> 00:07:15,880
Deze manier kunt u maken
koele, leuke web apps.

162
00:07:15,880 --> 00:07:19,870
Het zal geen invloed op de buitenwereld
voor nu, maar dat is een ander verhaal.

163
00:07:19,870 --> 00:07:22,210
>> OK, dus als je hier was
voor mijn laatste seminar

164
00:07:22,210 --> 00:07:26,610
weet je dat alle van de code voor
gesprek van vandaag gaat worden op deze URL

165
00:07:26,610 --> 00:07:29,320
hier, sorry, deze URL hier.

166
00:07:29,320 --> 00:07:32,730
En in principe gaan we om te gaan
door middel van vier stappen, misschien vijf,

167
00:07:32,730 --> 00:07:33,510
waarschijnlijk niet vijf.

168
00:07:33,510 --> 00:07:37,300
We zullen door middel van vier stappen verplaatsen
van het bouwen van een monster Reageer app.

169
00:07:37,300 --> 00:07:39,550
En zo al de broncode
voor elke stap van de weg

170
00:07:39,550 --> 00:07:42,216
gaat om hier te zijn, dus als
je volgt samen thuis,

171
00:07:42,216 --> 00:07:43,991
voel je vrij om deze code te lezen.

172
00:07:43,991 --> 00:07:46,740
Als je na hier langs,
we zullen laten zien op het scherm,

173
00:07:46,740 --> 00:07:47,739
dus maak je geen zorgen over te maken.

174
00:07:47,739 --> 00:07:50,930
Maar als je thuis bent, voel
vrij om deze website te bezoeken.

175
00:07:50,930 --> 00:07:56,400
En, ja, je moet kunnen krijgen
alle code zou je hier ooit nodig.

176
00:07:56,400 --> 00:08:01,380
Dus het is een goede cheat sheet en
voor uw toekomstige avonturen met React.

177
00:08:01,380 --> 00:08:04,490
Koele, dus als iedereen die hier is,
en zelfs als je thuis bent,

178
00:08:04,490 --> 00:08:11,580
trek deze website, is.gd/cs50react,
geen kapitaal, geen underscore, helemaal niets.

179
00:08:11,580 --> 00:08:15,849
>> Je zult een pagina die lijkt te zien
een beetje zoals dit.

180
00:08:15,849 --> 00:08:17,140
Dit is een ding heet CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen is een samenwerkingsverband
coderingsomgeving

182
00:08:20,030 --> 00:08:23,364
waarmee kan ik hier de code te schrijven, en
het zal automatisch naar u worden verzonden.

183
00:08:23,364 --> 00:08:24,780
En op deze manier, kan ik code te schrijven.

184
00:08:24,780 --> 00:08:26,920
Ik kan hier de code uit te voeren.

185
00:08:26,920 --> 00:08:33,470
>> Voor example-- en als het reloads-- zien,
Ik stel JavaScript-code op de pagina

186
00:08:33,470 --> 00:08:36,390
hier, en het zal
automatisch maken van een webpagina

187
00:08:36,390 --> 00:08:37,980
met deze JavaScript-code.

188
00:08:37,980 --> 00:08:40,039
En dus dit is een manier
voor ons om uit te proberen de code

189
00:08:40,039 --> 00:08:43,089
erg snel zonder te hoeven gebruiken
onze ID of gebruik maken van onze lokale machine

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

191
00:08:44,290 --> 00:08:47,670
Het is een zeer snelle manier voor u om mockup
en het testen van verschillende soorten code.

192
00:08:47,670 --> 00:08:50,560
>> Dus ik ga nemen
voorbeeldcode, waardoor het hier.

193
00:08:50,560 --> 00:08:52,374
We gaan werken doorheen.

194
00:08:52,374 --> 00:08:54,540
En als je thuis bent, je
kan deze omhoog te trekken ook.

195
00:08:54,540 --> 00:08:57,530
En ik heb al geïnstalleerd
Reageer hier, dus je kunt gewoon

196
00:08:57,530 --> 00:09:00,770
schrijf uw eigen code hier, en
probeer het als uw eigen speeltuin.

197
00:09:00,770 --> 00:09:04,940
>> Ja, als iedereen
openstellen van deze link hier.

198
00:09:04,940 --> 00:09:08,080
Geef me een duim
up als je eenmaal hebt hem open.

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
Er is hier niets voor nu, maar
we zullen veranderen dat zeer binnenkort.

202
00:09:16,914 --> 00:09:21,250
>> OK, dus React is een JavaScript-
library, en als zodanig,

203
00:09:21,250 --> 00:09:24,480
vereist kennis van JavaScript,
dat is de web-programmeertaal.

204
00:09:24,480 --> 00:09:27,660
En het wordt gebruikt voor andere
nu ook, maar vooral het web te ontwikkelen

205
00:09:27,660 --> 00:09:32,040
taal, dus als je niet bekend bent met
dat, las een site genaamd JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Het is fantastisch.

207
00:09:32,700 --> 00:09:34,240
U kunt leren JavaScript
binnen een halfuur.

208
00:09:34,240 --> 00:09:34,990
Het is ongeloofelijk.

209
00:09:34,990 --> 00:09:36,420
>> Dus geef het een te lezen.

210
00:09:36,420 --> 00:09:39,960
We is ook een stuk van HTML hier omdat
we ontwerpen van webpagina's natuurlijk.

211
00:09:39,960 --> 00:09:43,890
Dus als je niet bekend bent met
HTML, check out HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Ik denk dat het leren van React is een
miljoen keer makkelijker als je al

213
00:09:46,520 --> 00:09:47,892
weet de bouwstenen.

214
00:09:47,892 --> 00:09:50,600
Als u de onderdelen, het is
makkelijk om een ​​grotere component te maken.

215
00:09:50,600 --> 00:09:51,860
Dat is React taal voor jou.

216
00:09:51,860 --> 00:09:54,270
>> Dus ga je gang en geef
deze dingen een te lezen.

217
00:09:54,270 --> 00:09:55,070
Pauze deze video.

218
00:09:55,070 --> 00:09:57,440
Geef het een te lezen als je
thuis als je niet

219
00:09:57,440 --> 00:10:00,794
vertrouwd zijn met HTML en JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, dus wat we gaan
doen is we gaan maken

221
00:10:02,960 --> 00:10:06,470
een zeer fundamentele flashcard app met React.

222
00:10:06,470 --> 00:10:08,210
We gaan een flashcard hebben.

223
00:10:08,210 --> 00:10:09,880
U kunt de kaart heen en weer te spiegelen.

224
00:10:09,880 --> 00:10:12,399
En we hebben ook een lijst van
alle kaarten die we hebben,

225
00:10:12,399 --> 00:10:14,190
en als we voelen
ambitieus, kunnen we misschien

226
00:10:14,190 --> 00:10:17,060
in staat om te schakelen tussen
auto's door erop te klikken.

227
00:10:17,060 --> 00:10:20,360
>> Maar dit is, van je blote
botten, een eenvoudige React applicatie.

228
00:10:20,360 --> 00:10:22,560
En dus dit is eigenlijk
niet triviaal te implementeren,

229
00:10:22,560 --> 00:10:26,030
maar we gaan om te laten zien dat, als je
dit, het is heel, heel gemakkelijk om het uit te breiden

230
00:10:26,030 --> 00:10:27,680
als andere mensen je te helpen met het.

231
00:10:27,680 --> 00:10:33,750
Dus we gaan om te gaan door middel van vier stappen
vanaf nul te beginnen om dit te bouwen.

232
00:10:33,750 --> 00:10:36,740
>> OK, dus de vier stappen, zullen we
beginnen met de eerste stap.

233
00:10:36,740 --> 00:10:39,790
De eerste stap zal zijn
bouwen van uw eerste component.

234
00:10:39,790 --> 00:10:44,830
Zoals ik al eerder zei, een component in Reageer
is gewoon een HTML-element op steroïden.

235
00:10:44,830 --> 00:10:49,660
Het specificeert de HTML
en bepaald gedrag, en

236
00:10:49,660 --> 00:10:52,600
zal hoe mensen opgeven
kan communiceren met deze hoe

237
00:10:52,600 --> 00:10:54,270
zou het interne toestand te hebben.

238
00:10:54,270 --> 00:10:57,630
Als een knop zal weten zoals hoeveel
soms is geklikt bijvoorbeeld,

239
00:10:57,630 --> 00:11:01,010
en het zal weten hoe om zichzelf uit te leggen.

240
00:11:01,010 --> 00:11:04,430
>> Dus laten we gaan vooruit en bouwen ons
eerste component met behulp van JavaScript.

241
00:11:04,430 --> 00:11:09,711
Dus als de syntax ziet er raar,
dat is omdat het soort is.

242
00:11:09,711 --> 00:11:11,710
Dus nogmaals, we gaan
een variabele genaamd maken

243
00:11:11,710 --> 00:11:14,580
app met behulp van het trefwoord te laten,
waardoor een variabele

244
00:11:14,580 --> 00:11:18,210
Laat App gelijke React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Reageer is een bibliotheek en heeft
het creëren klasse functie.

246
00:11:22,609 --> 00:11:24,400
En deze functie
een stukje code dat je

247
00:11:24,400 --> 00:11:29,090
kunt gebruiken om een ​​nieuwe te creëren
type React component.

248
00:11:29,090 --> 00:11:32,780
En zo React.createClass
maakt een component,

249
00:11:32,780 --> 00:11:35,270
en deze component zal
in staat zijn om dingen te doen.

250
00:11:35,270 --> 00:11:40,460
Het belangrijkste wat het kan doen is de render
iets te maken als functie.

251
00:11:40,460 --> 00:11:44,500
>> Ook indien index niet duidelijk
u, adviseer ik je op JS voor katten

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

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

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

255
00:11:48,490 --> 00:11:50,670
>> Dus elke component behoeften
een renderen functie.

256
00:11:50,670 --> 00:11:53,010
Het maken functie zegt:
wat moet ik af te drukken op het scherm?

257
00:11:53,010 --> 00:11:54,760
Maar de component
nutteloos als het niet

258
00:11:54,760 --> 00:11:58,060
Weet wat te drukken op het scherm, zodat
je nodig hebt om een ​​te maken functie.

259
00:11:58,060 --> 00:12:01,904
>> Dus in het maken ding, je
hoeft alleen maar een aantal HTML terugkeren.

260
00:12:01,904 --> 00:12:03,820
En wat cool is dat
er is een ding genaamd

261
00:12:03,820 --> 00:12:08,660
JSX, die een uitbreiding van
JavaScript die wordt gebruikt reageren.

262
00:12:08,660 --> 00:12:11,845
Het laat je schrijft HTML binnen
van uw JavaScript, die

263
00:12:11,845 --> 00:12:13,970
klinkt een beetje raar als
u voor het eerst over nadenken,

264
00:12:13,970 --> 00:12:15,553
maar het maakt een veel zin daarna.

265
00:12:15,553 --> 00:12:17,430
Dus we kunnen dit doen.

266
00:12:17,430 --> 00:12:21,360
Als u bekend bent met HTML, ik weet
we hebben een div met een algemeen doel

267
00:12:21,360 --> 00:12:22,790
container voor spullen.

268
00:12:22,790 --> 00:12:26,380
We kunnen een div terugkeren, en de binnenkant
Dit div, kunnen we spullen.

269
00:12:26,380 --> 00:12:32,390
>> Dus laten we zeggen dat we willen gewoon te maken
een straight-up flashkaart voor nu.

270
00:12:32,390 --> 00:12:34,890
De flashcard, zou ik zeggen,
zal een vraag en antwoord.

271
00:12:34,890 --> 00:12:37,530
Dus in dit div, laten we
afdrukken van een paragraaf

272
00:12:37,530 --> 00:12:42,155
dat zegt question-- Wat is het
ultieme antwoord op het leven, het universum?

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

274
00:12:47,640 --> 00:12:50,345
En dan is het antwoord
zal, natuurlijk, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Dat ging niet goed komen op alle.

277
00:12:59,730 --> 00:13:04,164
Ja, dus in principe kan je echt
schrijf HTML in je JavaScript.

278
00:13:04,164 --> 00:13:06,330
En dit gaat worden
afgedrukt in het scherm.

279
00:13:06,330 --> 00:13:08,250
Dus laten we het proberen.

280
00:13:08,250 --> 00:13:09,520
>> Dus hebben we onze component.

281
00:13:09,520 --> 00:13:12,210
We moeten vertellen Reageer op te zetten
het onderdeel op het scherm

282
00:13:12,210 --> 00:13:18,990
zo React.render, zo merken dat we
behandel app zoals elk ander element.

283
00:13:18,990 --> 00:13:21,010
We schrijven het zoals het was een HTML-element.

284
00:13:21,010 --> 00:13:25,100
Net als in plaats van te zeggen als img
voor het of p voor paragraaf,

285
00:13:25,100 --> 00:13:28,120
je schrijft App, dus App is
behandeld als een HTML-element.

286
00:13:28,120 --> 00:13:30,380
Zoals ik al eerder zei, het is
een element op steroïden.

287
00:13:30,380 --> 00:13:32,870
>> Dus je maken App, en je
geef het een plek om het te zetten.

288
00:13:32,870 --> 00:13:37,170
En dit is hoe je kunt
vertellen waar deze te plaatsen.

289
00:13:37,170 --> 00:13:46,200
Ik heb een eenvoudig div op de gecreëerde
pagina met de naam met een ID van de pagina,

290
00:13:46,200 --> 00:13:48,300
en dat is waar het
element gaat om te gaan.

291
00:13:48,300 --> 00:13:49,841
>> En we gaan niet om te draaien met HTML.

292
00:13:49,841 --> 00:13:53,145
In principe is dit gaat krijgen
zet binnenkant van deze pagina-element

293
00:13:53,145 --> 00:13:54,270
dat we op het scherm.

294
00:13:54,270 --> 00:13:59,210
Dus het loopt deze code, en het trekt dit
ding op het scherm, dus hier zijn we.

295
00:13:59,210 --> 00:14:01,770
We hebben onze eerste Reageer component gemaakt.

296
00:14:01,770 --> 00:14:08,000
>> Dus net zoals een samenvatting, we voorzichtig gemaakt
een nieuw type van componenten, toch?

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

298
00:14:10,145 --> 00:14:12,680
En in die component, we
vertelde hij wat het moet doen.

299
00:14:12,680 --> 00:14:15,590
Wanneer deze component is
op het scherm worden afgedrukt

300
00:14:15,590 --> 00:14:19,300
het zal de div met afdrukken
de twee alinea's erin.

301
00:14:19,300 --> 00:14:24,460
>> En wat we deden, hebben we een nieuwe app
met behulp van de hoek beugel app notatie.

302
00:14:24,460 --> 00:14:27,160
We vertelden het aan het te zetten
in de pagina-element.

303
00:14:27,160 --> 00:14:29,867
En dus wat ik deed, het creëerde
een nieuwe app van die sjabloon.

304
00:14:29,867 --> 00:14:31,200
En toen vertelde ik het om het te maken.

305
00:14:31,200 --> 00:14:33,680
Dus het zei, OK, app,
wat moet ik afdrukken?

306
00:14:33,680 --> 00:14:36,970
App zegt, gaan afdrukken van een div
twee alinea's erin.

307
00:14:36,970 --> 00:14:40,420
En voila, daar is onze div met
twee leden binnen van het.

308
00:14:40,420 --> 00:14:43,180
Zinvol nu toe?

309
00:14:43,180 --> 00:14:46,690
>> Dus nogmaals, het hele uitdaging React
is gewoon weten hoe om componenten te maken.

310
00:14:46,690 --> 00:14:48,500
Hoe het te maken
componenten werken samen.

311
00:14:48,500 --> 00:14:51,780
Nu dat we onze eerste gemaakt
component, laten we terug gaan

312
00:14:51,780 --> 00:14:54,284
en maak componenten aanpasbaar.

313
00:14:54,284 --> 00:14:56,700
Zodat u weet hoe u in HTML
kan je knoppen les te geven?

314
00:14:56,700 --> 00:14:59,146
U kunt uw ankers geven href.

315
00:14:59,146 --> 00:15:00,770
U kunt uw input geven een soort, nietwaar?

316
00:15:00,770 --> 00:15:04,740
U kunt meer op maat te geven
eigenschappen om al uw elementen

317
00:15:04,740 --> 00:15:06,490
om het interessanter te maken.

318
00:15:06,490 --> 00:15:09,030
En we eigenlijk kunnen doen
precies hetzelfde.

319
00:15:09,030 --> 00:15:17,500
>> Dus laten we zeggen dat we willen dat onze
app te gaan maken elke kaart.

320
00:15:17,500 --> 00:15:19,630
Op dit moment dat we
gerenderd een hardcoded kaart.

321
00:15:19,630 --> 00:15:22,530
We weten dat er maar één
kaart het kan doen, dus we zijn

322
00:15:22,530 --> 00:15:25,960
gaan proberen en veranderen dit nu zo
dat we gewoon kunnen geven enkele kaart.

323
00:15:25,960 --> 00:15:27,410
Het zal een afdruk van de kaart.

324
00:15:27,410 --> 00:15:29,380
>> Je moet proberen en maak uw
componenten een zeer algemene doeleinden.

325
00:15:29,380 --> 00:15:31,654
Dus deze manier kon ik een e-mail
dit is mijn vriend en zijn als,

326
00:15:31,654 --> 00:15:33,820
flashcard wat je hebt,
gewoon voer het in hier,

327
00:15:33,820 --> 00:15:35,290
en het zal het doen door zelf.

328
00:15:35,290 --> 00:15:37,650
U kunt andere zetten
dingen in je eigen app.

329
00:15:37,650 --> 00:15:40,600
>> Maar eerst, laten we breken dit
in twee componenten,

330
00:15:40,600 --> 00:15:44,500
maar we willen de kaart te scheiden
afdrukken deel van de werkelijke app deel.

331
00:15:44,500 --> 00:15:46,660
Dus wat we kunnen doen is dat we
kan dit veranderen van App

332
00:15:46,660 --> 00:15:51,300
om CardView, maar een
nieuwe naam voor de app,

333
00:15:51,300 --> 00:15:54,450
en kunnen we een nieuwe te maken
component genaamd App,

334
00:15:54,450 --> 00:15:56,336
niet te verwarren met de oude App.

335
00:15:56,336 --> 00:16:00,730
We hebben de createClass,
en net als in HTML,

336
00:16:00,730 --> 00:16:03,590
U kunt nest Reageer componenten
binnenin elkaar.

337
00:16:03,590 --> 00:16:16,430
>> Dus in deze functie te maken,
functie return CardView,

338
00:16:16,430 --> 00:16:18,234
en dit is precies hetzelfde.

339
00:16:18,234 --> 00:16:19,400
Zien waarom het is het zelfde ding?

340
00:16:19,400 --> 00:16:22,590
In plaats van destructie alleen de app
heeft de div en koppelen binnenkant van het,

341
00:16:22,590 --> 00:16:26,194
de app maakt de CardView, en de
CardView maakt de div en paragraaf.

342
00:16:26,194 --> 00:16:29,110
Dus dit is ons eerste voorbeeld van
nesten elementen binnen elkaar.

343
00:16:29,110 --> 00:16:32,177
Slaat dat ergens op?

344
00:16:32,177 --> 00:16:33,760
Dus nogmaals, we hebben een CardView element.

345
00:16:33,760 --> 00:16:37,250
We hebben app elementen
dat is groter dan.

346
00:16:37,250 --> 00:16:40,990
>> OK, dus we willen dat onze CardView-- als je
geven een goede CardView een bepaalde kaart,

347
00:16:40,990 --> 00:16:43,370
het zal uit te printen voor u, nietwaar?

348
00:16:43,370 --> 00:16:48,050
Dus eerst moeten we een kaart te maken,
dus laten we een kaart object.

349
00:16:48,050 --> 00:17:02,930
Dus laat mijn kaart equal--
als je allemaal bekend,

350
00:17:02,930 --> 00:17:05,260
dit is gewoon de notatie-making
object in JavaScript.

351
00:17:05,260 --> 00:17:09,280
Het is als een soort van structuur
in C, zodat we een kaart,

352
00:17:09,280 --> 00:17:15,920
en dus nu kunnen we deze kaart als voorbij
een eigenschap of als een attribuut in HTML

353
00:17:15,920 --> 00:17:17,290
terminologie van onze app.

354
00:17:17,290 --> 00:17:20,210
Dus we kunnen dit doen, App
card gelijk Mycard.

355
00:17:20,210 --> 00:17:23,200
>> U weet hoe in input, je doet
input type gelijk tekst of knop

356
00:17:23,200 --> 00:17:25,240
klasse evenaart btn voor bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Hetzelfde idee, App kaart equals--
je hebt om beugel zetten hier--

358
00:17:29,500 --> 00:17:33,830
App kaart evenaart Mycard, dus dit
zegt dat we deze kaart object.

359
00:17:33,830 --> 00:17:39,149
Ik ga het doorgeven als een
woning aan de app component.

360
00:17:39,149 --> 00:17:41,440
En deze app component zal
in staat zijn om toegang te krijgen en te doen

361
00:17:41,440 --> 00:17:43,580
interessante dingen mee.

362
00:17:43,580 --> 00:17:47,650
>> Dus onze app gaat worden
krijgt een kaart, dus voor nu,

363
00:17:47,650 --> 00:17:49,980
laten we de app geef
de kaart aan de CardView

364
00:17:49,980 --> 00:17:53,110
zelf, omdat als de app is niet
gaan om te weten wat te doen met het,

365
00:17:53,110 --> 00:17:54,850
dus we zullen alleen maar geef het aan de CardView.

366
00:17:54,850 --> 00:18:00,050
Dus zullen we het de pas
dezelfde manier, kaart evenaart,

367
00:18:00,050 --> 00:18:05,426
en zo elke component kunnen toegang krijgen tot de
dingen die is verstrekt.

368
00:18:05,426 --> 00:18:07,800
Ze kunnen toegang krijgen tot de eigenschappen
die zijn gegeven om het

369
00:18:07,800 --> 00:18:09,470
het gebruik van deze syntaxis, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Dus wat hier gebeurt is
je hebt de Mycard object.

372
00:18:14,920 --> 00:18:18,250
U passeert het in de app
met behulp van App-kaart gelijk Mycard.

373
00:18:18,250 --> 00:18:21,420
Die kaart object wordt gegeven aan uw app.

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

375
00:18:24,400 --> 00:18:28,780
Het is net zoiets als een afbeelding
weet wat het is bron.

376
00:18:28,780 --> 00:18:31,972
>> Deze app weet wat het is kaart
is, en het kan dingen doen.

377
00:18:31,972 --> 00:18:32,930
Het kan berekeningen doen.

378
00:18:32,930 --> 00:18:35,290
Het kan beslissingen nemen op basis van het weg te maken.

379
00:18:35,290 --> 00:18:39,950
>> Voor nu, ik ging voorbij
this.props.card op de CardView.

380
00:18:39,950 --> 00:18:43,420
Zinvol nu toe?

381
00:18:43,420 --> 00:18:45,210
Het zal meer zin nu te maken.

382
00:18:45,210 --> 00:18:46,990
>> OK, dus nu zijn we bij CardView.

383
00:18:46,990 --> 00:18:51,719
Onze CardView, gezien de kaart, moet
uitprinten zijn vraag en antwoord.

384
00:18:51,719 --> 00:18:54,510
Nu zijn we gewoon uitgeprint sommige
hardcoded vragen en antwoorden.

385
00:18:54,510 --> 00:18:57,720
We moeten uitzoeken out-- we nodig hebben
aan de kaart die ze ons gaven vragen

386
00:18:57,720 --> 00:19:01,360
wat is de vraag en antwoord, en
dan print deze uit in het scherm.

387
00:19:01,360 --> 00:19:02,470
>> Dus we kunnen dit doen hier.

388
00:19:02,470 --> 00:19:06,135
In maken begin-- eerst doen gelijken.

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

390
00:19:08,710 --> 00:19:13,050
Dus wat we hier doen is dat we weten dat
de kaarten worden ons gegeven aan een woning,

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

392
00:19:13,580 --> 00:19:15,930
Het is aan ons gegeven als input.

393
00:19:15,930 --> 00:19:19,440
Zoals het is bijna alsof
argumenten aan een functie.

394
00:19:19,440 --> 00:19:22,810
De kaart is een argument
bijna dit CardView.

395
00:19:22,810 --> 00:19:25,239
>> We zullen halen dat, en zet
het in de variabele vraag.

396
00:19:25,239 --> 00:19:27,280
Zorg ervoor dat het antwoord ging
de variabele antwoord.

397
00:19:27,280 --> 00:19:31,130
Vraagt ​​die kaart te beantwoorden.

398
00:19:31,130 --> 00:19:35,072
En nu dat we deze,
in plaats van het afdrukken van die tekst,

399
00:19:35,072 --> 00:19:37,030
we gaan uit te printen
wat ze gaven ons.

400
00:19:37,030 --> 00:19:43,580
>> Dus dit stuff-- dus we gaan
Vraag Antwoord te blussen.

401
00:19:43,580 --> 00:19:46,380
Laten we eens zien of dit werkt.

402
00:19:46,380 --> 00:19:52,800
Koele, dus laten we stap doorheen
nog een keer voor de zekerheid.

403
00:19:52,800 --> 00:20:00,470
>> Dus mijn kaart is kaart object, en we
geven dat de kaart aan de app.

404
00:20:00,470 --> 00:20:04,790
En de app gaat naar de te nemen
kaart en geef het aan de CardView.

405
00:20:04,790 --> 00:20:09,190
En dit CardView zegt, als je
geef me elke flashcard voorwerp,

406
00:20:09,190 --> 00:20:11,920
Ik zal zijn vraag uitprinten
en haar antwoord, toch?

407
00:20:11,920 --> 00:20:14,590
>> Dus wat ik kon doen is dat ik kan
stuur deze code, de eerste

408
00:20:14,590 --> 00:20:16,580
als 10 regels van mijn code, mijn vriend.

409
00:20:16,580 --> 00:20:18,820
Hij kon het insluiten in
zijn eigen applicatie.

410
00:20:18,820 --> 00:20:27,200
En zolang hij deed hetzelfde,
zoals CardView kaart evenaart dit,

411
00:20:27,200 --> 00:20:30,580
zolang hij schiep de CardView
en gaf het de juiste informatie,

412
00:20:30,580 --> 00:20:31,987
hij kon maken van zijn eigen kaart.

413
00:20:31,987 --> 00:20:34,320
En dus is deze manier, het is een echt
koele manier voor u op te bouwen

414
00:20:34,320 --> 00:20:35,906
componenten die elkaar gebruiken, toch?

415
00:20:35,906 --> 00:20:38,280
Deze kaart kon ik publiceer
dit CardView op het internet,

416
00:20:38,280 --> 00:20:39,790
en mensen zouden kunnen gebruiken.

417
00:20:39,790 --> 00:20:45,070
Dus eigenlijk, het is als een van de
standaardfuncties in de C library.

418
00:20:45,070 --> 00:20:47,280
>> Het is een functie waarbij
iemand heeft geschreven.

419
00:20:47,280 --> 00:20:48,419
Je geeft een bepaalde ingang.

420
00:20:48,419 --> 00:20:49,710
Het zal een bepaalde output te produceren.

421
00:20:49,710 --> 00:20:50,890
Je niet schelen hoe het werkt intern.

422
00:20:50,890 --> 00:20:53,790
Zolang je geef het de juiste
input, zal het de juiste uitgang te maken.

423
00:20:53,790 --> 00:20:57,850
>> En een component kan zijn
bedacht dezelfde manier.

424
00:20:57,850 --> 00:21:00,280
Dit CardView is als
een functie uit de bibliotheek.

425
00:21:00,280 --> 00:21:03,400
Als je het wat kaart
als een eigenschap, het zal

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

427
00:21:05,095 --> 00:21:16,820
Net als ik mijn kaart veranderen
in plaats daarvan als wat is 5 plus 37,

428
00:21:16,820 --> 00:21:19,210
het zal dienovereenkomstig aan te passen.

429
00:21:19,210 --> 00:21:21,955
Dus gewoon door het veranderen van de input,
krijgt het een bepaalde output.

430
00:21:21,955 --> 00:21:24,830
Dus je kunt bijna denken van de componenten
als functie op deze manier, waarop

431
00:21:24,830 --> 00:21:25,920
kunt u samen te stellen.

432
00:21:25,920 --> 00:21:29,440
U krijgt input, zoals dit CardView
als de input, krijg je output.

433
00:21:29,440 --> 00:21:31,900
In dit geval is de uitgang HTML.

434
00:21:31,900 --> 00:21:34,404
Zinvol nu toe?

435
00:21:34,404 --> 00:21:36,890
Koele, dus nogmaals, eigenschappen
hoe je informatie kunt doorgeven

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

437
00:21:40,900 --> 00:21:42,740
>> OK, dus laten we dit
ding interactief.

438
00:21:42,740 --> 00:21:44,450
Nu is het een beetje saai.

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

440
00:21:45,520 --> 00:21:48,210
U kunt een aantal afdrukken,
maar dat is alles wat het kan doen.

441
00:21:48,210 --> 00:21:51,550
>> Dus laten we gaan terug naar de
oude vraag alleen voor nu.

442
00:21:51,550 --> 00:21:54,405
OK, dus nu deze onderdelen
zijn saai, omdat alles wat ze doen,

443
00:21:54,405 --> 00:21:55,030
ze krijgen ingang.

444
00:21:55,030 --> 00:21:56,100
Ze maken uitgang, toch?

445
00:21:56,100 --> 00:21:57,049
Dat is een beetje saai.

446
00:21:57,049 --> 00:21:59,090
We willen onze hebben
componenten kunnen hebben

447
00:21:59,090 --> 00:22:02,150
een soort van interne toestand,
als herinner me iets.

448
00:22:02,150 --> 00:22:05,320
>> Voor een flashcard voor
Bijvoorbeeld, wat voor soort staat

449
00:22:05,320 --> 00:22:07,550
wilt u misschien
onthouden voor een flashkaart?

450
00:22:07,550 --> 00:22:09,740
Wat tijdelijk statuut
zou je wilt onthouden

451
00:22:09,740 --> 00:22:12,491
voor een flashcard in een flashkaart app?

452
00:22:12,491 --> 00:22:13,990
Publiek: Of het is omgedraaid?

453
00:22:13,990 --> 00:22:14,990
NEEL MEHTA: Yeah, rechts.

454
00:22:14,990 --> 00:22:17,665
Dus je zou willen houden
spoor van bent u naar boven of

455
00:22:17,665 --> 00:22:19,100
je gezicht naar beneden op de kaart.

456
00:22:19,100 --> 00:22:23,420
Op Facebook, bijvoorbeeld, zou je
wilt onthouden waar in de nieuwsfeed

457
00:22:23,420 --> 00:22:25,870
bent u of wilt wie profiel
ben je nu aan het doen.

458
00:22:25,870 --> 00:22:30,127
>> Op Messenger, als wat tekst die u
Typ in het invoerveld, toch?

459
00:22:30,127 --> 00:22:31,710
Als u de pagina te verversen, gaat het weg.

460
00:22:31,710 --> 00:22:32,793
Maar je hoeft niet echt schelen.

461
00:22:32,793 --> 00:22:33,770
Het is maar tijdelijk.

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

463
00:22:34,548 --> 00:22:36,152
>> PUBLIEK: [onverstaanbaar]

464
00:22:36,152 --> 00:22:38,360
NEEL MEHTA: Als een flits
card, zoals je kunt zien

465
00:22:38,360 --> 00:22:40,290
de vraag of zij het antwoord kant?

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

467
00:22:41,070 --> 00:22:43,270
>> NEEL MEHTA: Like a
tweezijdig flashcard, toch?

468
00:22:43,270 --> 00:22:46,370
Ja, dus je wilt
dit idee nu

469
00:22:46,370 --> 00:22:50,370
Ik heb eigenschappen, die als input,
maar staat, die tijdelijk is, uh,

470
00:22:50,370 --> 00:22:51,839
waar je bent op de pagina, toch?

471
00:22:51,839 --> 00:22:54,380
Nogmaals, ik zei in Facebook
Boodschapper, ik heb net als die persoon

472
00:22:54,380 --> 00:22:56,550
u bekijkt Facebook
of wie het profiel, toch?

473
00:22:56,550 --> 00:22:58,030
>> Dit is slechts tijdelijk.

474
00:22:58,030 --> 00:23:01,200
Het is belangrijk om de gebruiker te laten zien
wat er gaande is, maar Vernieuw de pagina.

475
00:23:01,200 --> 00:23:02,250
Het maakt eigenlijk niet uit.

476
00:23:02,250 --> 00:23:04,530
Dus het is een tijdelijke toestand,
dus we al staat.

477
00:23:04,530 --> 00:23:06,250
>> Dus nogmaals, er staat en rekwisieten.

478
00:23:06,250 --> 00:23:09,084
Props wordt ingang gegeven
van uw gegevensbron.

479
00:23:09,084 --> 00:23:10,250
Staat is net als defaults.

480
00:23:10,250 --> 00:23:13,700
Het is net als dingen die
maakt het ding interactief.

481
00:23:13,700 --> 00:23:17,720
>> Dus in onze CardView-- laten we
onze CardView-- dus het was leuk.

482
00:23:17,720 --> 00:23:21,420
Wat we gaan doen hier, we gaan
om CardView en slechts CardView raken.

483
00:23:21,420 --> 00:23:25,105
En dus mijn vriend die dit, ze kregen
zou geen verschil merken.

484
00:23:25,105 --> 00:23:27,230
Ze zouden niet moeten veranderen
een van hun eigen code,

485
00:23:27,230 --> 00:23:29,410
maar ze zouden zien hun
CardView raakte opgevoerde.

486
00:23:29,410 --> 00:23:31,270
Dat is een mooi deel over componenten.

487
00:23:31,270 --> 00:23:35,290
>> OK, dus in onze CardView, laten we proberen en
bijhouden van of we geleidelijk omhoog

488
00:23:35,290 --> 00:23:36,560
of naar beneden.

489
00:23:36,560 --> 00:23:40,480
In Reageer we dit doen door eerst
met vermelding van de oorspronkelijke staat.

490
00:23:40,480 --> 00:23:42,070
Waar komt de kaart beginnen?

491
00:23:42,070 --> 00:23:48,480
>> Een functie genaamd getInitialState dus
functioneren, en we een object terug.

492
00:23:48,480 --> 00:23:53,310
Dit object bevat enkele staat, en
een staat is slechts een sleutel-waarde paar.

493
00:23:53,310 --> 00:23:56,950
Net als in instrueren, heb je een sleutel en een
waarde, je hebt zoals naam is een string.

494
00:23:56,950 --> 00:24:01,410
>> In dit geval, laten we zeggen dat de voorkant is waar.

495
00:24:01,410 --> 00:24:03,760
Dit zegt dat we een staat.

496
00:24:03,760 --> 00:24:06,570
Een onderdeel van de staat
is een attribuut genaamd front.

497
00:24:06,570 --> 00:24:09,649
[Onhoorbaar], dus standaard,
we zijn in de voorkant van de kaart,

498
00:24:09,649 --> 00:24:11,440
en we kunnen veranderen
zoals we flip de kaart.

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

500
00:24:13,380 --> 00:24:18,190
>> OK, dus in het maken, op dit moment, we zijn
met de vraag en het antwoord.

501
00:24:18,190 --> 00:24:20,860
Nu wat we moeten doen
is te laten zien de vraag

502
00:24:20,860 --> 00:24:24,370
als we aan de voorzijde van de kaart, zodat
het antwoord is voor de achterkant van de kaart.

503
00:24:24,370 --> 00:24:26,850
Dat is de reden waarom jullie allemaal te maken
de interactieve kaart.

504
00:24:26,850 --> 00:24:28,100
Dus laten we proberen om dit hier.

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

506
00:24:31,600 --> 00:24:33,620
Nou, ten eerste gewoon een variabele.

507
00:24:33,620 --> 00:24:37,790
We kunnen nu vragen this.state.front.

508
00:24:37,790 --> 00:24:42,010
We toegang geven hetzelfde we
toegang rekwisieten, zo this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Als we de voorzijde, dan tekst
is this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Als we op de voorzijde van de
kaart, gaan we proberen en pak

512
00:24:51,360 --> 00:24:52,485
De vraag van de kaart.

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

514
00:24:54,782 --> 00:24:57,240
Anders, als we op de rug
van de kaart, wat doen we?

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

516
00:25:01,830 --> 00:25:02,750
>> Doelgroep: Het antwoord?

517
00:25:02,750 --> 00:25:05,041
>> NEEL MEHTA: Yep, zodat tekst
evenaart this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Maar als je merkt, we gebruiken
de staat om een ​​beslissing te nemen

520
00:25:10,930 --> 00:25:14,420
omdat nu de component
zal er anders uitzien

521
00:25:14,420 --> 00:25:16,710
gebaseerde af hoe deze interageren met het.

522
00:25:16,710 --> 00:25:20,355
Dus in plaats van het afdrukken van dit,
we zullen gewoon uitprinten de tekst.

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

524
00:25:25,270 --> 00:25:28,650
Cool, dus nu, zoals je ziet,
zien we alleen de vraag.

525
00:25:28,650 --> 00:25:37,720
En als ik handmatig de toestand hier
aan de voorkant is vals krijgen we 42 terug.

526
00:25:37,720 --> 00:25:39,720
>> Dus nogmaals, deze component
heeft zijn eigen staat.

527
00:25:39,720 --> 00:25:43,440
Zoals een knop weet of
het is of niet gedrukt,

528
00:25:43,440 --> 00:25:46,080
dit ding weet wat er op
de voorzijde of aan de achterzijde.

529
00:25:46,080 --> 00:25:48,320
Standaard, het is aan de voorzijde.

530
00:25:48,320 --> 00:25:50,840
En dan als het op de voorzijde,
we printen de vraag.

531
00:25:50,840 --> 00:25:53,106
Als het op de rug, we
print het antwoord.

532
00:25:53,106 --> 00:25:54,980
Dus nogmaals de informatie
gegeven hetzelfde.

533
00:25:54,980 --> 00:25:59,090
Het ziet er gewoon anders
gebaseerd op hoe je het programmeren.

534
00:25:59,090 --> 00:26:02,670
Dus, bijvoorbeeld, Facebook Messenger,
zelfs als u dezelfde gegevens bron te krijgen,

535
00:26:02,670 --> 00:26:05,170
het anders zou kunnen kijken
omdat de toestand anders.

536
00:26:05,170 --> 00:26:08,421
Je kijkt naar een
bericht verschillende persoon.

537
00:26:08,421 --> 00:26:10,930
>> OK, dus dit is allemaal goed en
goed, maar wat nu eigenlijk

538
00:26:10,930 --> 00:26:15,940
maken ons in staat om te veranderen, of
onze kaart is voor- of achterkant.

539
00:26:15,940 --> 00:26:19,010
We kunnen dit doen door het toevoegen van een flip
knop, een knop om de kaart die

540
00:26:19,010 --> 00:26:22,950
zal de kaart spiegelen als het [onverstaanbaar].

541
00:26:22,950 --> 00:26:31,770
Dus laten we hier toevoegen een knop, dit
knop, en deze knop flip zeggen.

542
00:26:31,770 --> 00:26:35,650
>> En zo goed nu, het
doet niets.

543
00:26:35,650 --> 00:26:37,075
Het ziet er gewoon leuk.

544
00:26:37,075 --> 00:26:43,650
Wat we wel kunnen doen is dat we een klik toe te voegen
handler, onClick gelijk this.flip,

545
00:26:43,650 --> 00:26:44,820
en we zullen flip later te definiëren.

546
00:26:44,820 --> 00:26:47,120
Maar in principe, onClick
is een functie die

547
00:26:47,120 --> 00:26:48,675
wordt aangeroepen wanneer de gebruiker erop klikt.

548
00:26:48,675 --> 00:26:52,330
>> Dus de knop zal weten
wanneer het is geklikt.

549
00:26:52,330 --> 00:26:54,750
Ging het is geklikt,
het zal de kaart te draaien.

550
00:26:54,750 --> 00:26:58,382
Het is een beetje alsof je
pizza bezorger.

551
00:26:58,382 --> 00:27:01,590
Je bent als, goed, wanneer iemand
roept me, ik zal leveren pizza, toch?

552
00:27:01,590 --> 00:27:03,420
>> U registreert deze luisteraar.

553
00:27:03,420 --> 00:27:04,530
Je luistert voor een evenement.

554
00:27:04,530 --> 00:27:07,657
Je krijgt de naam, en wanneer de
gebeurtenis gebeurt, moet je iets doen.

555
00:27:07,657 --> 00:27:08,240
U krijgt pizza.

556
00:27:08,240 --> 00:27:11,480
In dit geval, als je
geklikt, je de kaart omdraaien.

557
00:27:11,480 --> 00:27:14,560
>> En dus moeten we een te definiëren
functie die de kaart zal omdraaien,

558
00:27:14,560 --> 00:27:17,930
dus we zullen dat recht te schrijven
hier, flip-functie.

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

560
00:27:20,850 --> 00:27:23,680
En wat denk je flip zal doen?

561
00:27:23,680 --> 00:27:27,180
Ook dit wordt genoemd als
we klikt u op de flip-knop.

562
00:27:27,180 --> 00:27:29,406
Wat moet de functie flip doen?

563
00:27:29,406 --> 00:27:34,136
>> PUBLIEK: Change this.state.front
van true in false, false in true.

564
00:27:34,136 --> 00:27:38,420
>> NEEL MEHTA: Yep, dus neem wat
this.front is-- de voorkant staat is.

565
00:27:38,420 --> 00:27:40,930
Neem de voorkant staat, indien
het is waar, maken het vals.

566
00:27:40,930 --> 00:27:42,530
Als het vals is, maakt het waar, toch?

567
00:27:42,530 --> 00:27:45,330
Dus laten we dat proberen.

568
00:27:45,330 --> 00:27:48,240
>> Je kunt niet toestand veranderen
gewoon door te doen this.state.

569
00:27:48,240 --> 00:27:50,380
U kunt dit niet doen.

570
00:27:50,380 --> 00:27:52,030
Je kan dat niet doen.

571
00:27:52,030 --> 00:27:55,810
Je moet een functie te gebruiken
genaamd this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Dus je kunt zeggen this.setState voorzijde
colon dit, waar, nogmaals, de uitroep

573
00:28:03,230 --> 00:28:04,330
punt betekent het tegenovergestelde.

574
00:28:04,330 --> 00:28:07,420
Ik denk dat als dit. state.front
waar is, zal het blijken vals.

575
00:28:07,420 --> 00:28:09,170
Dus we de staat ingesteld
van true in false.

576
00:28:09,170 --> 00:28:11,430
Als het onwaar is, zullen we
instellen false in true.

577
00:28:11,430 --> 00:28:17,210
>> Gewoon merken dat we op en krijg iets
anders, en dus laten we proberen dit.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, kijk naar dit.

579
00:28:18,675 --> 00:28:21,810
De flip-knop zal nu
Schakel de voorkant aan de staat terug.

580
00:28:21,810 --> 00:28:24,990
>> En dus hier is waar zie je een
beetje van de magie van React.

581
00:28:24,990 --> 00:28:28,420
Zoals we nooit verteld dat hij opnieuw te maken.

582
00:28:28,420 --> 00:28:30,910
We hebben nooit verteld dat het iets te herschrijven.

583
00:28:30,910 --> 00:28:32,630
Als je dit doet
zonder React, zou je

584
00:28:32,630 --> 00:28:34,588
to-- hebben als wanneer de
flip-knop wordt geklikt,

585
00:28:34,588 --> 00:28:37,290
je zou hebben om het te vertellen aan
handmatig opnieuw te maken, toch?

586
00:28:37,290 --> 00:28:43,050
>> Reageer is echt cool in dat als je
geef het een bepaalde staat en eigenschappen,

587
00:28:43,050 --> 00:28:45,760
het zal altijd te maken
precies hetzelfde.

588
00:28:45,760 --> 00:28:48,690
En dus toen we ooit veranderen we
de staat en de eigenschappen,

589
00:28:48,690 --> 00:28:50,819
reageer gewoon opnieuw maakt de hele zaak.

590
00:28:50,819 --> 00:28:52,860
Het weet dat er een
één-op-één relatie

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

592
00:28:57,270 --> 00:29:00,110
Dus wanneer een van deze
veranderingen door via een set staat,

593
00:29:00,110 --> 00:29:03,750
het zal veranderen de manier waarop de
pay opnieuw wordt gerenderd.

594
00:29:03,750 --> 00:29:06,650
En dus in principe React is als
voor u klaar om te veranderen.

595
00:29:06,650 --> 00:29:09,870
>> Wanneer het iets verandert,
het zal opnieuw maken van de hele pagina.

596
00:29:09,870 --> 00:29:12,480
En als het klinkt inefficiënt,
het is omdat het zou zijn,

597
00:29:12,480 --> 00:29:15,050
maar reageren maakt gebruik van een zaak
een zogenaamde Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
In plaats van de pagina direct tekenen, is
houdt de virtuele HTML boom in het geheugen.

599
00:29:19,950 --> 00:29:23,620
>> Je weet wel, HTML is als een boom,
als een hiërarchische gegevensstructuur.

600
00:29:23,620 --> 00:29:28,990
Het houdt een nep-boom in het geheugen,
en wanneer u de pagina bij te werken,

601
00:29:28,990 --> 00:29:31,940
het zal nog een nep te trekken
boom, en het zal berekenen

602
00:29:31,940 --> 00:29:35,120
Wat verandert het nodig heeft om het te maken
pagina om de twee bomen gelijk te maken.

603
00:29:35,120 --> 00:29:38,540
Dus eigenlijk, het vrijwel
opnieuw maakt veel.

604
00:29:38,540 --> 00:29:41,540
En dan graag alleen verandert het
pagina in kleine tweaks als nodig is,

605
00:29:41,540 --> 00:29:44,240
dus het is zeer, zeer, zeer efficiënt.

606
00:29:44,240 --> 00:29:46,970
>> Dus eigenlijk Reageer zal
wanneer je iets te veranderen,

607
00:29:46,970 --> 00:29:49,010
het zal opnieuw maken de pagina virtueel.

608
00:29:49,010 --> 00:29:52,830
Het zal uitzoeken wat heb ik nodig om
veranderen om de echte pagina te reflecteren

609
00:29:52,830 --> 00:29:55,602
de virtuele pagina, en het zal dat doen.

610
00:29:55,602 --> 00:29:56,560
Dat is de virtuele DOM.

611
00:29:56,560 --> 00:29:59,350
Het is een van de grootste
gebruik van React.

612
00:29:59,350 --> 00:30:00,880
>> Slaat dat ergens op?

613
00:30:00,880 --> 00:30:01,540
Nog vragen?

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
>> PUBLIEK: Hoe werkt
nog steeds te vergelijken met de MVC

617
00:30:08,969 --> 00:30:10,760
dat hebben we gesproken over
voordat zoals middelen.

618
00:30:10,760 --> 00:30:13,527
>> NEEL MEHTA: Ja, de vraag
is hoe werkt het te vergelijken met MVC?

619
00:30:13,527 --> 00:30:14,610
Je vroeg over bronnen.

620
00:30:14,610 --> 00:30:16,445
Nou, laten we praten over hoe het functioneert.

621
00:30:16,445 --> 00:30:18,190
>> In MVC, zou je het model te werken.

622
00:30:18,190 --> 00:30:20,560
In dit geval zouden we een kaart model hebben.

623
00:30:20,560 --> 00:30:24,540
Het uitzicht zou hebben
flip-knop, en de besturing

624
00:30:24,540 --> 00:30:26,310
zou flip functie.

625
00:30:26,310 --> 00:30:28,450
Dus het uitzicht zou vertellen
controller flip flip.

626
00:30:28,450 --> 00:30:30,370
Flip zouden vertellen de
model te veranderen, toch?

627
00:30:30,370 --> 00:30:33,915
>> En dus wanneer u een MVC, u
luisteren naar het model te veranderen,

628
00:30:33,915 --> 00:30:37,150
en je re-maken het uitzicht dienovereenkomstig.

629
00:30:37,150 --> 00:30:39,210
Of je hoeft alleen te willen
de controller.

630
00:30:39,210 --> 00:30:42,418
Wacht tot het model te veranderen, en dan
kiezen een deel van als een ding

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

632
00:30:44,032 --> 00:30:45,740
Hier hebben we een ding,
maar in een grote app,

633
00:30:45,740 --> 00:30:48,510
je moet willen herinneren wat
de wijziging in elke plaats,

634
00:30:48,510 --> 00:30:50,290
dus het is een beetje vervelend.

635
00:30:50,290 --> 00:30:53,670
En zo React is mooi
omdat het een Shadow Dom.

636
00:30:53,670 --> 00:30:56,040
Het zich kan veroorloven om gewoon
herschrijven van de hele zaak.

637
00:30:56,040 --> 00:30:58,680
Je hoeft niet selectief te
zoals raden wat bij te werken.

638
00:30:58,680 --> 00:31:02,186
>> Op Facebook als je wilt
krijgt een nieuw bericht, in MVC,

639
00:31:02,186 --> 00:31:04,060
je zou moeten onthouden,
OK, veranderen de dingen

640
00:31:04,060 --> 00:31:06,260
aan de bovenkant van de
pagina, het pictogram bericht.

641
00:31:06,260 --> 00:31:08,290
Pop ook een nieuw venster aan de onderkant.

642
00:31:08,290 --> 00:31:10,070
Maken ook een nieuw ding in dat venster.

643
00:31:10,070 --> 00:31:11,060
Spelen ook een geluid.

644
00:31:11,060 --> 00:31:13,150
>> Dat is een heleboel dingen
uitgaan tegelijkertijd.

645
00:31:13,150 --> 00:31:15,320
En dus als je dat niet doet
hebben een Shadow Dom, zou je

646
00:31:15,320 --> 00:31:18,740
moet dat handmatig doen, omdat
je kunt niet te ontdoen van de hele pagina.

647
00:31:18,740 --> 00:31:21,430
U kunt zich niet veroorloven om, dus je hebt
elk ding handmatig te wijzigen,

648
00:31:21,430 --> 00:31:23,990
dat is echt vervelend in MVC.

649
00:31:23,990 --> 00:31:27,640
>> Dus om te
zuinig, zij selectief

650
00:31:27,640 --> 00:31:30,750
actualiseren van de pagina, die is
efficiënt, maar ook vervelend.

651
00:31:30,750 --> 00:31:34,002
In React, vanwege de schaduw
Dom, beide dingen krijg je gratis.

652
00:31:34,002 --> 00:31:35,710
Het is efficiënter omdat
van de Schaduw Dom.

653
00:31:35,710 --> 00:31:37,210
De bottleneck is het updaten van de pagina.

654
00:31:37,210 --> 00:31:40,292
Het is niet te doen de boom manipulatie.

655
00:31:40,292 --> 00:31:41,250
U krijgt van de efficiëntie.

656
00:31:41,250 --> 00:31:45,420
U krijgt ook het gebruiksgemak, omdat
als je gewoon de hele pagina te herschrijven,

657
00:31:45,420 --> 00:31:48,970
maar je weet gewoon, oke, de dingen
zullen worden op de pagina ergens.

658
00:31:48,970 --> 00:31:51,180
Het is misschien op een andere plaats, maar
het gaat om op de pagina, toch?

659
00:31:51,180 --> 00:31:52,860
Dus je gewoon opnieuw gerenderd
het hele ding vrijwel,

660
00:31:52,860 --> 00:31:55,540
en u misschien een paar te maken
veranderingen in de pagina zelf.

661
00:31:55,540 --> 00:31:57,850
>> Dus nogmaals, in MVC u
zou moeten kiezen

662
00:31:57,850 --> 00:32:01,840
tussen gebruiksgemak en efficiency,
en React, u beiden te krijgen.

663
00:32:01,840 --> 00:32:04,020
Dus het is beter.

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

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

666
00:32:06,676 --> 00:32:12,080
>> OK, dus laten we eens kijken laten we praten
een beetje over stap 4,

667
00:32:12,080 --> 00:32:14,740
hoe we kunnen componenten insluiten.

668
00:32:14,740 --> 00:32:16,260
Dus hebben we nu dit recht.

669
00:32:16,260 --> 00:32:19,420
We hebben onze koele kleine knop.

670
00:32:19,420 --> 00:32:23,157
We kunnen spiegelen heen en
uit, en dat is alles wat het doet.

671
00:32:23,157 --> 00:32:24,990
Laten we zeggen dat we willen
hebben een ander component.

672
00:32:24,990 --> 00:32:28,730
Laten we zeggen dat onze flashcard app moet
bevat een lijst van alle kaarten

673
00:32:28,730 --> 00:32:31,520
die je hebt, dus dat betekent dat we
moet een andere component.

674
00:32:31,520 --> 00:32:32,970
Nou, misschien noemen het een lijstweergave.

675
00:32:32,970 --> 00:32:36,200
Laten we een lijstweergave dat
bestaat naast de CardView,

676
00:32:36,200 --> 00:32:39,680
en deze lijst bekijken en CardView
samen willen werken.

677
00:32:39,680 --> 00:32:43,190
En je kunt ze combineren
om onze app voor u maken.

678
00:32:43,190 --> 00:32:45,160
>> Dus eerst, laten we een
paar kaarten rechts.

679
00:32:45,160 --> 00:32:46,370
Laten we zeggen, welke kaarten?

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

681
00:32:49,619 --> 00:32:51,910
En net zo hoef ik niet te
vervelen met het typen van het in,

682
00:32:51,910 --> 00:32:53,410
Ik ga gewoon om het te kopiëren vanaf hier.

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

684
00:33:01,664 --> 00:33:03,580
En dus ga ik niet
geef het slechts een kaart.

685
00:33:03,580 --> 00:33:06,910
Ik ga om het te geven een reeks van kaarten.

686
00:33:06,910 --> 00:33:10,240
Dus eerst de apps
gaat breken voor nu.

687
00:33:10,240 --> 00:33:14,717
Oké, dus we gaan maken
dit staat om meerdere kaarten te behandelen.

688
00:33:14,717 --> 00:33:17,800
Dus eerst, we gaan om het te geven, niet
slechts één kaart, maar een reeks van kaarten,

689
00:33:17,800 --> 00:33:18,700
zoals een lijst met kaarten.

690
00:33:18,700 --> 00:33:20,980
En in dit geval, hebben we drie van hen.

691
00:33:20,980 --> 00:33:27,280
>> Oké, dus zo app
gaat om een ​​lijst kaarten te krijgen,

692
00:33:27,280 --> 00:33:29,870
en het gaat om te beslissen welke
men zien aan de CardView.

693
00:33:29,870 --> 00:33:33,740
De CardView alleen kan
maken een kaart, maar de app

694
00:33:33,740 --> 00:33:37,610
krijgt een lijst van alle kaarten, toch?

695
00:33:37,610 --> 00:33:40,820
>> Dus als je erachter één
card te geven aan CardView,

696
00:33:40,820 --> 00:33:44,660
hoe zou je denk dat je zou kunnen
om een ​​beslissing te nemen over welke kaart

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

698
00:33:47,064 --> 00:33:49,980
Om je een hint te geven, het is tijdelijk
U zult het bekijken van een bepaalde kaart.

699
00:33:49,980 --> 00:33:53,260
Als u de pagina te verversen, kunt u
gewoon terug naar de eerste kaart te gaan.

700
00:33:53,260 --> 00:33:55,464
Dat is OK, want het is tijdelijk.

701
00:33:55,464 --> 00:33:56,630
Welke techniek kunnen we gebruiken?

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

703
00:34:02,534 --> 00:34:08,760
>> Publiek: Je kan een variabele maken
dus net zoals je had front.

704
00:34:08,760 --> 00:34:11,989
Is dit waar, je kon
hebben huidige kaart is gelijk aan 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL MEHTA: Ja, dus we
willen de staat, toch?

706
00:34:14,150 --> 00:34:16,080
Je zou de staat te gebruiken in de
component te achterhalen

707
00:34:16,080 --> 00:34:17,288
welke kaart willen we krijgen.

708
00:34:17,288 --> 00:34:19,290
Zoals we hebben een lijst van
alle kaarten, we

709
00:34:19,290 --> 00:34:21,630
Gebruik staat om erachter te komen
een van de eerste kaart,

710
00:34:21,630 --> 00:34:23,710
tweede kaart, derde kaart, enzovoort.

711
00:34:23,710 --> 00:34:28,760
>> Dus een app dus een app zal krijgen
hebben de getInitialState functie,

712
00:34:28,760 --> 00:34:35,020
getInitialState functie terug.

713
00:34:35,020 --> 00:34:39,929
En we zullen gewoon zeggen activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Dus nu onze app heeft een eigen staat.

715
00:34:42,889 --> 00:34:47,179
>> En dus nu op te maken, om erachter te komen
een kaart, laten we gewoon gaan naar de matrix

716
00:34:47,179 --> 00:34:49,969
en pak het ding in die index.

717
00:34:49,969 --> 00:34:53,580
Selecteer kaart gelijke this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Dus zoals je hier ziet, de rekwisieten en
de staat daadwerkelijk samenwerken.

720
00:35:00,162 --> 00:35:08,990
Dus nu hebben we onze ActiveCard,
we noemen het ActiveCard,

721
00:35:08,990 --> 00:35:10,470
en laten we zien of dit werkt.

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
>> Oh, dat was een tekst fout.

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
>> Koele, yep, dus nu terug waren we
naar waar we eerder waren, toch?

729
00:35:54,840 --> 00:35:57,100
Dezelfde oude programma, met uitzondering
nu kunnen we ondersteunen

730
00:35:57,100 --> 00:35:59,390
een lijst van kaarten, niet alleen één kaart.

731
00:35:59,390 --> 00:36:04,130
En nu, nogmaals, als we veranderen de
activeIndex, kunnen we 0-1,

732
00:36:04,130 --> 00:36:07,330
en nu die tweede kaart,
en dan gingen we naar 0.

733
00:36:07,330 --> 00:36:10,390
Dus hier is een nieuwe
opgevoerde versie van onze.

734
00:36:10,390 --> 00:36:16,000
>> OK, dus laten we nu hebben een lijstweergave dat
toont alle kaarten in je programma,

735
00:36:16,000 --> 00:36:19,980
dus we zullen een nieuwe te maken
component genaamd lijstweergave.

736
00:36:19,980 --> 00:36:22,155
Laat listview gelijk react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Dus we willen een ongeordende maken
een lijst met een lijst punt voor elke kaart.

739
00:36:38,800 --> 00:36:41,490
En dus hebben we een bos van kaarten.

740
00:36:41,490 --> 00:36:44,990
We willen een item in de lijst
voor elke kaart, toch?

741
00:36:44,990 --> 00:36:47,490
We konden doen een lus of
iets om een ​​nieuw item in de lijst te maken.

742
00:36:47,490 --> 00:36:50,522
Maar de manier waarop je het doet in
Reageert, gebruik dan een ding genaamd kaart.

743
00:36:50,522 --> 00:36:57,150
Kaart is een instrument of een functie die u gebruikt
dat voor elk item, loopt een functie,

744
00:36:57,150 --> 00:36:59,510
neemt return waarde, en
geeft je die terug.

745
00:36:59,510 --> 00:37:06,310
>> Dus als voorbeeld, hebben we de array
1, 2, 3.map function-- en dit

746
00:37:06,310 --> 00:37:12,120
is een afkorting voor
function-- x pijl x keer x.

747
00:37:12,120 --> 00:37:16,110
Dit zegt, voor elk nummer
in 1, 2, 3, neem het.

748
00:37:16,110 --> 00:37:17,800
Vierkant, en geef het terug.

749
00:37:17,800 --> 00:37:22,090
Dus wat denk je 1,
2, 3.map x gaat naar x keer

750
00:37:22,090 --> 00:37:25,480
x geeft je terug gegeven
dat deze functie

751
00:37:25,480 --> 00:37:27,680
uitgevoerd op elk element van de matrix.

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

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

754
00:37:32,190 --> 00:37:35,709
>> NEEL MEHTA: Yep, 1, 4, 9
omdat je 1 keer 1.

755
00:37:35,709 --> 00:37:36,500
Dat geeft je een.

756
00:37:36,500 --> 00:37:37,690
Dat is het 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
Dat is een 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
Dat is een derde element.

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

762
00:37:42,640 --> 00:37:45,015
Dus kaart heeft een techniek die u
Gebruik in functionele programmeurs,

763
00:37:45,015 --> 00:37:48,090
de nieuwe stijl van
programmeren om iets te doen

764
00:37:48,090 --> 00:37:50,500
om elk element in de lijst.

765
00:37:50,500 --> 00:37:51,970
En dus dit klinkt bekend.

766
00:37:51,970 --> 00:37:53,370
We hebben een lijst met kaarten.

767
00:37:53,370 --> 00:37:56,860
We willen een item in de lijst voor elke te krijgen
een, dus zullen we gewoon gebruik maken van de kaart hier.

768
00:37:56,860 --> 00:38:00,250
We zullen zeggen, laat de lijst gelijken
this.props, kaarten, kaart.

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

770
00:38:10,580 --> 00:38:15,070
>> En zo krijgt een kaart, we zijn
gaan naar een item in de lijst te genereren

771
00:38:15,070 --> 00:38:17,580
met dat card inhoud kant ervan.

772
00:38:17,580 --> 00:38:20,660
Laten we zeggen dat we willen om uit te geven
de kaarten vragen zo card.question.

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

774
00:38:24,990 --> 00:38:30,649
Deze lijst bevat dus een
reeks van LI of Lijst Artikelen

775
00:38:30,649 --> 00:38:32,440
waar er een lijst
punt voor elke kaart,

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

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

778
00:38:37,640 --> 00:38:39,450
>> Cool, dus laten we nu
eigenlijk afgedrukt dat uit.

779
00:38:39,450 --> 00:38:46,521
Dus we zullen een ul terugkeren.

780
00:38:46,521 --> 00:38:49,020
Binnen dat ongeordende lijst,
we zullen gewoon de hele lijst plakken

781
00:38:49,020 --> 00:38:49,890
dat ze ons gaven.

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
>> Oké, dus nu dit
lijstweergave werkt net te vinden.

785
00:38:56,060 --> 00:38:59,842
Heeft u vragen over de lijstweergave?

786
00:38:59,842 --> 00:39:01,270
Heb je een heleboel kaarten.

787
00:39:01,270 --> 00:39:02,800
Je maakt een item in de lijst voor elke kaart.

788
00:39:02,800 --> 00:39:05,466
En je zet ze in een ongeordende
lijst en je het terug te geven.

789
00:39:05,466 --> 00:39:09,410
Dus laten we nu handelen, zodat we insluiten
dit binnenkant van onze app,

790
00:39:09,410 --> 00:39:14,310
dus we kunnen dit doen, lijstweergave.

791
00:39:14,310 --> 00:39:17,070
Wat argument kunnen we overgaan naar de lijst bekijken?

792
00:39:17,070 --> 00:39:18,320
Welke eigenschappen geven we het?

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

794
00:39:25,111 --> 00:39:26,860
Vergeet niet, als u
het een bos van kaarten,

795
00:39:26,860 --> 00:39:29,590
het zal de lijst te maken
bekijken van die kaarten.

796
00:39:29,590 --> 00:39:32,267
Dus wat zouden we voorbij
hier als argument?

797
00:39:32,267 --> 00:39:33,350
PUBLIEK: Een lijst van de kaarten?

798
00:39:33,350 --> 00:39:37,130
NEEL MEHTA: Ja, dus kaarten
evenaart this.props.cards, toch?

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

800
00:39:39,850 --> 00:39:44,370
En dus is de enige probleem
is dat je kunt alleen

801
00:39:44,370 --> 00:39:48,600
draaide een top-level element in te maken,
dus je hebt om het te verpakken in een div.

802
00:39:48,600 --> 00:39:49,100
Het is raar.

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

804
00:39:56,190 --> 00:39:57,530
Dus laten we zien of dat.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Werkt dat?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Yep, daar ga je.

809
00:40:31,030 --> 00:40:33,700
Dus nu hebben we een lijst
kaarten onderaan,

810
00:40:33,700 --> 00:40:36,180
en dan hebben we onze
CardView zich op de top,

811
00:40:36,180 --> 00:40:40,486
en dat zal tussen flip
de twee kanten van de kaart.

812
00:40:40,486 --> 00:40:42,610
Nu doet dat zinvol hoe ik dat deed?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Ja, dus nogmaals, we hebben twee componenten.

815
00:40:46,790 --> 00:40:49,666
De eerste component prints
op elke kaart in de lijst.

816
00:40:49,666 --> 00:40:50,540
Dat is de lijstweergave.

817
00:40:50,540 --> 00:40:54,770
En de tweede component
drukt gewoon die kaart.

818
00:40:54,770 --> 00:40:58,840
Als je het een bepaalde kaart, het zal
afdrukken informatie over die kaart

819
00:40:58,840 --> 00:41:01,870
en laat u heen en weer te spiegelen.

820
00:41:01,870 --> 00:41:05,850
>> Dus als we willen, kunnen we proberen en praten
over het toevoegen van een aantal nieuwe functies bij.

821
00:41:05,850 --> 00:41:09,482
Anders kunnen we een beetje meer praten
over de snelheid van reactor,

822
00:41:09,482 --> 00:41:11,190
of we kunnen beantwoorden
vragen die u zou kunnen hebben

823
00:41:11,190 --> 00:41:15,050
omdat dit alle kerndelen
van reageren die ik over wil praten.

824
00:41:15,050 --> 00:41:16,540
We kunnen gaan.

825
00:41:16,540 --> 00:41:17,590
We kunnen vragen te beantwoorden.

826
00:41:17,590 --> 00:41:18,560
Wat je maar wil.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Publiek: Kunt u gebruik maken van
JSX in normale JavaScript?

829
00:41:24,205 --> 00:41:27,150
Of is dat iets dat
kwam met de [onhoorbaar]

830
00:41:27,150 --> 00:41:30,760
>> NEEL MEHTA: De vraag is kan
u JSX gebruiken met een normale JavaScript?

831
00:41:30,760 --> 00:41:32,620
Het antwoord is ja.

832
00:41:32,620 --> 00:41:41,070
JSX is gewoon een manier van het neemt je
JavaScript die HTML heeft binnenkant van het,

833
00:41:41,070 --> 00:41:44,215
en het stelt in dat JavaScript
HTML hoeft niet erin.

834
00:41:44,215 --> 00:41:47,880
Zo merkt dat-- zo merkt hier.

835
00:41:47,880 --> 00:41:50,820
Dit ziet eruit als je als div
en heb je spullen erin.

836
00:41:50,820 --> 00:41:54,970
>> Dat stelt dat JavaScript
zoals genereert hetzelfde.

837
00:41:54,970 --> 00:41:59,590
Ik denk dat wat ik zeg is dat
JSX is slechts een syntactische, zoals het is

838
00:41:59,590 --> 00:42:03,530
een preprocessor voor JavaScript veel
zoals PHP is een preprocessor voor HTML.

839
00:42:03,530 --> 00:42:05,490
JSC is een preprocessor
voor JavaScript waarmee

840
00:42:05,490 --> 00:42:12,970
je HTML binnenkant van uw JavaScript.

841
00:42:12,970 --> 00:42:16,425
En dus als je de juiste transformator
dat is een ding genaamd [onhoorbaar]

842
00:42:16,425 --> 00:42:17,300
die zal transformeren.

843
00:42:17,300 --> 00:42:19,360
De juiste preprocessor,
het zal u laten doen.

844
00:42:19,360 --> 00:42:20,235
>> PUBLIEK: [onverstaanbaar]

845
00:42:20,235 --> 00:42:23,026
NEEL MEHTA: Meestal heb je niet nodig
HTML binnenkant van JavaScript zetten

846
00:42:23,026 --> 00:42:24,110
tenzij je doet reageren.

847
00:42:24,110 --> 00:42:27,146
Maar je kunt het toch te doen.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Publiek: Ik denk dat je
had beschreven Reageer

850
00:42:29,353 --> 00:42:31,970
als een functionele programmeertaal.

851
00:42:31,970 --> 00:42:35,646
We hebben geleerd C in CS50.

852
00:42:35,646 --> 00:42:38,032
C is ook een functionele taal?

853
00:42:38,032 --> 00:42:39,990
NEEL MEHTA: Dus de vraag
gaat over functionele

854
00:42:39,990 --> 00:42:43,010
versus een ander ding heet
imperatief of procedurele programmering.

855
00:42:43,010 --> 00:42:44,820
Er zijn twee soorten programma's populair.

856
00:42:44,820 --> 00:42:48,550
Een procedurele genoemd, die
is alles over als het doen van opdrachten,

857
00:42:48,550 --> 00:42:51,510
en één functioneel, waarbij alles
over het hebben van functies en met

858
00:42:51,510 --> 00:42:52,930
input en output van deze.

859
00:42:52,930 --> 00:42:55,930
React is een functionele paradigma.

860
00:42:55,930 --> 00:42:58,010
C is een procedure paradigma.

861
00:42:58,010 --> 00:43:02,360
>> En als een voorbeeld, C bijvoorbeeld,
je dit niet declaratieve manier te doen

862
00:43:02,360 --> 00:43:04,390
van het maken van het programma, toch?

863
00:43:04,390 --> 00:43:06,826
Je te zeggen hebt, afdrukken.

864
00:43:06,826 --> 00:43:07,950
Wijzig deze datastructuur.

865
00:43:07,950 --> 00:43:08,530
Print dit.

866
00:43:08,530 --> 00:43:10,160
Het draait allemaal om commando's.

867
00:43:10,160 --> 00:43:12,640
>> In React, is er niet
dat veel opdrachten.

868
00:43:12,640 --> 00:43:15,145
Het draait allemaal om het hebben
onderdelen die u samen te stellen.

869
00:43:15,145 --> 00:43:16,300
Ze zijn als functies.

870
00:43:16,300 --> 00:43:26,360
Je hebt als een functie
genaamd CardView,

871
00:43:26,360 --> 00:43:28,680
dat een functie
dat heeft input, output,

872
00:43:28,680 --> 00:43:30,660
en zo React is alles
over deze filosofie

873
00:43:30,660 --> 00:43:32,700
ons van having-- je gegevens.

874
00:43:32,700 --> 00:43:34,910
U passeert het door deze
algoritme, en het zal

875
00:43:34,910 --> 00:43:36,800
uitgang HTML dat u
gewoon gedrukte pagina,

876
00:43:36,800 --> 00:43:39,180
en dus je moet
bouwen stuk voor stuk.

877
00:43:39,180 --> 00:43:42,800
>> Dus om een ​​metafoor te tekenen wat
Ik al eerder zei, je weet hoe

878
00:43:42,800 --> 00:43:47,050
op Facebook als je een bericht krijgt,
en u kiezen welke onderdelen bij te werken,

879
00:43:47,050 --> 00:43:47,882
dat is de procedure.

880
00:43:47,882 --> 00:43:48,840
Het is noodzakelijk, toch?

881
00:43:48,840 --> 00:43:49,806
OK, ik heb een boodschap.

882
00:43:49,806 --> 00:43:50,930
Laten we veranderen daar rekening.

883
00:43:50,930 --> 00:43:52,110
>> Laten we pop een raam hier.

884
00:43:52,110 --> 00:43:52,780
Laten we veranderen daar rekening.

885
00:43:52,780 --> 00:43:53,700
Laten we trekken deze hier.

886
00:43:53,700 --> 00:43:55,220
Dat is een procedurele aanpak.

887
00:43:55,220 --> 00:44:00,240
>> Dat is wat dingen zoals hoekig,
Boost, Backbone, andere frameworks te gebruiken.

888
00:44:00,240 --> 00:44:01,200
React is functioneel.

889
00:44:01,200 --> 00:44:03,324
Het is een heel andere manier
van denken over dingen.

890
00:44:03,324 --> 00:44:07,950
Het duurt dit idee van laten we eens
functies of algoritmen die zal u

891
00:44:07,950 --> 00:44:08,800
geef het data.

892
00:44:08,800 --> 00:44:11,820
Het zal spugen wat het
moet zijn en de computer

893
00:44:11,820 --> 00:44:13,490
zal zorg dragen voor het wegen uit.

894
00:44:13,490 --> 00:44:15,890
Je hoeft het niet aan jezelf.

895
00:44:15,890 --> 00:44:18,470
Maakt dat een klein beetje verstand?

896
00:44:18,470 --> 00:44:18,970
Ja?

897
00:44:18,970 --> 00:44:24,180
>> PUBLIEK: In een functionele taal,
alles gebeurt in een keer?

898
00:44:24,180 --> 00:44:26,800
>> NEEL MEHTA: Nee, dingen gebeuren in orde.

899
00:44:26,800 --> 00:44:29,320
Zoals hier is er nog
bestellen, maar het doet niet

900
00:44:29,320 --> 00:44:32,390
gebeuren om van soortgelijke
beveel, commando, commando.

901
00:44:32,390 --> 00:44:36,459
Het gebeurt in de volgorde van
functie geeft je de uitgang.

902
00:44:36,459 --> 00:44:37,750
Zet dat in een andere functie.

903
00:44:37,750 --> 00:44:39,550
Zet dat in een andere
functie, andere functie.

904
00:44:39,550 --> 00:44:41,470
>> Als je dat doet CS51, zult u
leren functionele programma's

905
00:44:41,470 --> 00:44:42,886
een beetje buiten de werkingssfeer van deze.

906
00:44:42,886 --> 00:44:45,090
Maar in principe, wat maakt
Reageer cool is niet alleen

907
00:44:45,090 --> 00:44:46,840
de one-way datastroom
en de virtuele Dom,

908
00:44:46,840 --> 00:44:48,700
maar ook dit idee
functioneel programmeren.

909
00:44:48,700 --> 00:44:51,720
En functioneel programmeren is zeer eenvoudig
componeren en maak coole dingen uit,

910
00:44:51,720 --> 00:44:53,844
en het is heel gemakkelijk om te denken
over en reden over.

911
00:44:53,844 --> 00:44:55,450
Dus het is een goede loting van React.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Nog meer vragen?

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
>> PUBLIEK: Um, waarom zou je
gebruik laat in tegenstelling tot var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL MEHTA: Dus de vraag is
Waarom gebruiken jullie laten in plaats van var?

918
00:45:10,450 --> 00:45:13,220
Dit is een ding heet
ES6 of ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Het is de nieuwe versie van JavaScript.

920
00:45:15,820 --> 00:45:19,050
Er is een heleboel technische redenen,
maar let is een betere versie van var.

921
00:45:19,050 --> 00:45:20,724
>> Het is hoe verklaart u variabelen.

922
00:45:20,724 --> 00:45:21,390
U kunt laten.

923
00:45:21,390 --> 00:45:22,140
U kunt gebruik maken var.

924
00:45:22,140 --> 00:45:23,825
Laten heeft een heleboel technische
reasons-- je ze kunt kijken

925
00:45:23,825 --> 00:45:25,610
up later-- waarom het beter is.

926
00:45:25,610 --> 00:45:28,780
Kortom, ES6 heeft een aantal leuke
nieuwe syntaxis, een aantal nieuwe functies

927
00:45:28,780 --> 00:45:30,720
op de top van de oude JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Dus we hebben net vijf minuten.

929
00:45:32,782 --> 00:45:34,990
Ik wilde alleen maar om te praten over
één ding echt snel.

930
00:45:34,990 --> 00:45:36,450
Mocht u nog vragen hebben,
laten we praten over het na dit.

931
00:45:36,450 --> 00:45:38,366
Maar dus dit krijgt
gevangen op de camera, ik heb net

932
00:45:38,366 --> 00:45:41,550
wil een beetje over hoe je praat
daadwerkelijk gebruik maken van React in uw apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Als je hier te gaan,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
Dit is de startpagina voor React, en
het zal je laten zien hoe je daadwerkelijk gebruik

936
00:46:03,320 --> 00:46:05,320
Reageren op uw pagina's.

937
00:46:05,320 --> 00:46:08,845
Kortom, het is een beetje
ingewikkelde probeert te installeren React.

938
00:46:08,845 --> 00:46:12,300
Het is niet zo makkelijk als je gewoon slepen
en drop een JavaScript in.

939
00:46:12,300 --> 00:46:15,890
>> Je moet je transformator
opgericht, die zal, zoals voorheen,

940
00:46:15,890 --> 00:46:18,120
zet je JSX in
de normale JavaScript.

941
00:46:18,120 --> 00:46:21,030
Je moet wat zult
compileren u ES6 normaal.

942
00:46:21,030 --> 00:46:24,720
Javascript is er veel van het verplaatsen
onderdelen die u hoeft te doen, dus er is een ding

943
00:46:24,720 --> 00:46:27,200
riep Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
En dit is een command-line tool dat zal
u helpen steiger uw Reageer

945
00:46:31,110 --> 00:46:32,380
projecten gemakkelijk.

946
00:46:32,380 --> 00:46:38,660
>> Dus je kunt lezen over deze
later, maar er zijn enkele gereedschappen

947
00:46:38,660 --> 00:46:40,160
dat Yeoman biedt.

948
00:46:40,160 --> 00:46:43,280
Ze zullen u laten maken een Reageer
app met alles ingebouwd.

949
00:46:43,280 --> 00:46:46,030
Zoals het zal hebben gebouwd
in, componenten ingebouwd.

950
00:46:46,030 --> 00:46:47,880
Het zal uw transformator ingebouwd.

951
00:46:47,880 --> 00:46:50,699
Ze hebben veel coole
stuff ingebouwde automatisch

952
00:46:50,699 --> 00:46:52,240
met behulp van deze dingen genoemd generatoren.

953
00:46:52,240 --> 00:46:54,620
>> Dus lees over dit als je wilt.

954
00:46:54,620 --> 00:46:59,110
Ga gewoon op Yeoman, Y-E-O-M-A-N, en
u kunt generatoren als deze te vinden.

955
00:46:59,110 --> 00:47:01,263
En met generatoren als
deze, je net als een

956
00:47:01,263 --> 00:47:03,010
is een paar command line opdrachten.

957
00:47:03,010 --> 00:47:05,530
Het zal uit een steiger
Reageer gehele app voor je.

958
00:47:05,530 --> 00:47:10,470
Het zal allemaal de handleiding leidingen te krijgen,
en het zware werk voor u gedaan,

959
00:47:10,470 --> 00:47:13,010
en dit is waarom je alleen richten
op slechts schrijven in React.

960
00:47:13,010 --> 00:47:16,739
>> Dus in principe de bouw van een
Reageer app is triviaal.

961
00:47:16,739 --> 00:47:19,530
Het is allemaal samen bedraad, maar er
zijn tools die het voor je doen.

962
00:47:19,530 --> 00:47:23,070
Dus als je wilt om een ​​Reageer
app, probeer het zo te doen.

963
00:47:23,070 --> 00:47:26,360
Als je gewoon wilt om te experimenteren,
kunt u proberen met behulp van deze CodePen

964
00:47:26,360 --> 00:47:28,550
want dit heeft CodePen
alle reageren bedrading.

965
00:47:28,550 --> 00:47:30,240
Ik heb al het werk voor u al.

966
00:47:30,240 --> 00:47:34,610
>> Dus als je wilt maken als een
productie vrij te geven Reageer app,

967
00:47:34,610 --> 00:47:37,220
probeer dan een van deze generatoren.

968
00:47:37,220 --> 00:47:40,240
Als je gewoon wilt spelen
rond, het is vaak de moeite waard gewoon

969
00:47:40,240 --> 00:47:44,490
zoals proberen te spelen rond op CodePen hier.

970
00:47:44,490 --> 00:47:45,470
Klinkt goed?

971
00:47:45,470 --> 00:47:45,970
Koel.

972
00:47:45,970 --> 00:47:47,890
>> Dus dat is alles wat ik heb.

973
00:47:47,890 --> 00:47:52,470
Nogmaals, alle code en voorbeelden
gaat worden op deze website hier.

974
00:47:52,470 --> 00:47:55,509
Dus nogmaals, we niet praten
over veel syntax van React,

975
00:47:55,509 --> 00:47:57,550
maar om al die vinden
weinig syntactische details

976
00:47:57,550 --> 00:48:00,320
het is allemaal beschikbaar zijn
op deze website hier.

977
00:48:00,320 --> 00:48:02,660
>> Dus ik zou aanraden als
neem de eerste stap.

978
00:48:02,660 --> 00:48:06,277
Zet het in je CodePen.

979
00:48:06,277 --> 00:48:08,110
Probeer werken aan het maken
het aan de tweede stap.

980
00:48:08,110 --> 00:48:11,310
Er is een vierde stap, en net
zien waar je van dat.

981
00:48:11,310 --> 00:48:14,840
>> Nog meer vragen, check
dat pagina of e-mail me.

982
00:48:14,840 --> 00:48:16,490
Dat is mijn e-mail.

983
00:48:16,490 --> 00:48:19,885
Maar ik zou graag om u te helpen met eventuele
vragen die u zou kunnen hebben over reageren.

984
00:48:19,885 --> 00:48:21,010
Dus, yep, dat is alles wat ik heb.

985
00:48:21,010 --> 00:48:23,410
Ik dank u allen hartelijk voor
kijken of voor het bijwonen.

986
00:48:23,410 --> 00:48:26,820
En ik zal vragen te nemen
je zou nu na deze te hebben.

987
00:48:26,820 --> 00:48:29,140
Dus dank u allen voor het kijken.

988
00:48:29,140 --> 00:48:31,270