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

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL Mehta: Tässä se menee.

4
00:00:07,275 --> 00:00:11,070
>> No, jokainen, tervetuloa web
apps tulevaisuudessa reagoida.

5
00:00:11,070 --> 00:00:11,870
Tämä on CS50.

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

7
00:00:12,930 --> 00:00:17,689
Olen TA CS50 ja toisen vuoden opiskelija
Harvardin College ja hyvin, hyvin

8
00:00:17,689 --> 00:00:18,730
intohimoinen web-kehittäjä.

9
00:00:18,730 --> 00:00:20,730
Joten olen erittäin jännittävää
puhumaan teille tänään,

10
00:00:20,730 --> 00:00:24,550
onko olet täällä tai kotona
katsomassa, noin React, joka on, jälleen

11
00:00:24,550 --> 00:00:27,270
kuten sanoin, tulevaisuuden verkkosovelluksia.

12
00:00:27,270 --> 00:00:29,055
>> Joten React on web puitteet.

13
00:00:29,055 --> 00:00:30,930
Ja kuten olen kertonut
joillekin ihmisille täällä,

14
00:00:30,930 --> 00:00:33,400
kehys on vain
joukko työkaluja, joiden avulla

15
00:00:33,400 --> 00:00:35,770
jäsentää ja rakentaa web-sovellus.

16
00:00:35,770 --> 00:00:39,010
Ja web-sovellukset ovat, jälleen, sivustot
jotka ovat vuorovaikutteisia, kuten Facebook,

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

18
00:00:42,330 --> 00:00:45,590
>> Joten Facebook on web puitteet
joka on kehitetty Facebook

19
00:00:45,590 --> 00:00:48,060
pari vuotta back-- React on.

20
00:00:48,060 --> 00:00:50,830
Sitä sittemmin käytetty
Facebook heidän mobiilisovellukset

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

22
00:00:52,460 --> 00:00:56,350
Khan Academy on toinen
näkyvä varhaisten omaksujien ja reagoida.

23
00:00:56,350 --> 00:00:58,630
>> Se on todella ollut saada
erittäin suosittu.

24
00:00:58,630 --> 00:01:03,420
Jos joskus käyttää asioita, kuten Kulmikas tai
Selkäranka, tämä on saman perheen,

25
00:01:03,420 --> 00:01:05,830
mutta se on sittemmin pitkälle
ylittää niiden suosio.

26
00:01:05,830 --> 00:01:06,890
Se on kuuma uusi asia.

27
00:01:06,890 --> 00:01:09,590
Se on todella, todella valtava.

28
00:01:09,590 --> 00:01:13,470
>> Ja niin React on hyvä ole yhtä
Web puitteet rakentaa rajapintoja.

29
00:01:13,470 --> 00:01:16,020
Se on hyvä rakentaa web-käyttöliittymiä.

30
00:01:16,020 --> 00:01:18,350
Mukana on myös asia
nimeltään React Native joka

31
00:01:18,350 --> 00:01:22,200
voit rakentaa rajapinnat
Android ja iOS

32
00:01:22,200 --> 00:01:26,390
ja ehkä muiden alustojen tulevaisuudessa
käyttäen vain samaa JavaScript-koodia.

33
00:01:26,390 --> 00:01:31,130
Voisit käyttää täsmälleen samaa
JavaScript-koodin tehdä sivustot,

34
00:01:31,130 --> 00:01:33,040
tehdä Android-sovelluksia ja iOS sovelluksia.

35
00:01:33,040 --> 00:01:35,000
>> Se on erittäin, erittäin jännittävä aika.

36
00:01:35,000 --> 00:01:37,070
Se on todella, todella cool tilaisuus.

37
00:01:37,070 --> 00:01:42,020
Se on todella yleinen web
käyttöliittymän kehittämiseen työkalu,

38
00:01:42,020 --> 00:01:44,420
joten se on hyvin, hyvin
tärkeintä on tietää.

39
00:01:44,420 --> 00:01:46,949
Ja kun olin kertoa ihmisille
ennen, tämä, luulen,

40
00:01:46,949 --> 00:01:48,990
tulee muuttumaan, miten me
rakentaa verkkosovelluksia ikuisesti.

41
00:01:48,990 --> 00:01:55,820
Joten se on ehkä vähän liioittelua, mutta minä
mielestäni se on ihan hyvä tietää.

42
00:01:55,820 --> 00:01:57,580
>> OK, niin mikä on reagoi?

43
00:01:57,580 --> 00:02:01,020
Reagoida on puitteet voit
käyttää rakentaa rajapintoja.

44
00:02:01,020 --> 00:02:03,240
Käyttöliittymä on, jälleen,
web-sivun, eikö?

45
00:02:03,240 --> 00:02:06,340
Joten tässä on Instagram.com, käyttötarkoitukset reagoida.

46
00:02:06,340 --> 00:02:08,740
>> Reagoivat on rakennettu
Ajatus komponentteja.

47
00:02:08,740 --> 00:02:11,900
Komponentti on HTML
elementti steroideja,

48
00:02:11,900 --> 00:02:14,470
joten HTML-elementti on kuin painiketta.

49
00:02:14,470 --> 00:02:15,250
Se on kohta.

50
00:02:15,250 --> 00:02:17,500
Se on otsikko, eikö?

51
00:02:17,500 --> 00:02:22,740
Ja Instagram käyttää näitä, mutta se
käyttää myös komponenttien reagoida.

52
00:02:22,740 --> 00:02:25,740
>> React komponentit ovat
souped-up HTML-elementtien

53
00:02:25,740 --> 00:02:28,100
että on oma käyttäytyminen
joihin ne sisältyvät.

54
00:02:28,100 --> 00:02:31,800
Joten, kuten esimerkiksi meillä voisi olla
aika elementti, aika komponentti,

55
00:02:31,800 --> 00:02:34,095
joka sisältää kuten
aikaleima, tiedät,

56
00:02:34,095 --> 00:02:37,170
profiili komponentti, joka
sisältää profiilikuva

57
00:02:37,170 --> 00:02:38,820
ja henkilön nimi.

58
00:02:38,820 --> 00:02:42,930
Se voi olla kuin laskuri, joka
voi laskea kuten määrä tykkää,

59
00:02:42,930 --> 00:02:45,610
ja jos klikkaat sitä, se tulee
lisätä määrää tykkää.

60
00:02:45,610 --> 00:02:48,200
Komponentti on vain
nippu HTML-koodi että

61
00:02:48,200 --> 00:02:50,520
on joitakin toimintoja
kääritty sen sisälle.

62
00:02:50,520 --> 00:02:53,770
Joten se on kuin HTML-elementti
steroideja, kuten aiemmin sanoin.

63
00:02:53,770 --> 00:02:56,270
Voit ottaa näitä komponentteja,
ja voit laittaa ne yhteen

64
00:02:56,270 --> 00:02:59,060
tehdä uusia komponentteja, vuonna
Tässä tapauksessa viesti komponentti,

65
00:02:59,060 --> 00:03:00,505
joka sisältää kaikki tätä kamaa.

66
00:03:00,505 --> 00:03:04,050
Se sisältäisi aika, Profile,
LikeCounter, ehkä kommentti

67
00:03:04,050 --> 00:03:06,100
ja ehkä itse kuvaa.

68
00:03:06,100 --> 00:03:10,810
Ja niin verkkosovellukset ovat juuri rakennettu ottamalla
komponentit ja laittamalla ne yhteen.

69
00:03:10,810 --> 00:03:15,620
Instagram syöte ei ole mitään muuta kuin
nippu virkoja yksi toisensa jälkeen,

70
00:03:15,620 --> 00:03:19,032
jokainen viesti sisältää kuten aika,
Profiili, LikeCounter, ja niin edelleen.

71
00:03:19,032 --> 00:03:20,490
Se on tavallaan kuin talon rakentaminen.

72
00:03:20,490 --> 00:03:22,660
Et rakentaa
talo ylhäältä alas.

73
00:03:22,660 --> 00:03:24,960
Otat components-- sinua
ottaa kuten kylpyhuone.

74
00:03:24,960 --> 00:03:28,320
Otat bedroom-- olet kiinni niitä
yhdessä, ja sinulla on uusi komponentti.

75
00:03:28,320 --> 00:03:29,760
Sinulla on uusi osa talon.

76
00:03:29,760 --> 00:03:32,860
>> Joten React on kaikki rakennettu
tämä ajatus komponenttien

77
00:03:32,860 --> 00:03:36,600
ovat vuorovaikutteisia, jotka ovat declarative.

78
00:03:36,600 --> 00:03:39,650
Kuten sanoit mitä
profiili on, ja se tekee sen.

79
00:03:39,650 --> 00:03:40,600
Ne ovat koottavat.

80
00:03:40,600 --> 00:03:43,880
Voit ottaa aikaa ja profiilin, laita
ne yhdessä tekevät jotain parempaa.

81
00:03:43,880 --> 00:03:47,770
Ja ne ovat uudelleenkäytettäviä, joten jos
on lähdekoodi virkaan,

82
00:03:47,770 --> 00:03:49,440
voit upottaa että missä tahansa.

83
00:03:49,440 --> 00:03:53,160
>> Voit upottaa Instagram
asia omalla sivustolla.

84
00:03:53,160 --> 00:03:56,830
Voit upottaa Facebook, esimerkiksi,
niin kauan kuin se käyttää React samoin.

85
00:03:56,830 --> 00:04:00,360
Joten osat ovat todella, todella, todella
voimakas rakennuspalikoita web

86
00:04:00,360 --> 00:04:04,180
jota voidaan käyttää missä tahansa ja laittaa
yhdessä tehdä uusia rakennuspalikoita.

87
00:04:04,180 --> 00:04:07,159
Se on hyvin, hyvin
korkean tason yleiskatsaus.

88
00:04:07,159 --> 00:04:09,200
Joten, jälleen, jos sinulla on
kysyttävää milloin tahansa

89
00:04:09,200 --> 00:04:14,470
filosofiasta reaktorin,
koodaus, estää minua, ja haluaisin tietää.

90
00:04:14,470 --> 00:04:18,420
>> OK, joten reagoivat on siistiä, koska se
on erilainen tapa nähdä

91
00:04:18,420 --> 00:04:19,870
miten rakentaa web-sovelluksia.

92
00:04:19,870 --> 00:04:23,620
Olet varmaan kuullut MVC,
malli ohjaat sisään CS50 tai mitä tahansa

93
00:04:23,620 --> 00:04:25,940
muut hyvää luokat käytät.

94
00:04:25,940 --> 00:04:29,000
Ja useimmat kehykset ovat
rakennettu ajatus MVC.

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

96
00:04:30,410 --> 00:04:32,980
Reagoivat rakentuu ajatus
yksisuuntaisia ​​tietovirta

97
00:04:32,980 --> 00:04:36,510
kuten nähdään tämän kaavion tai graafisen täällä.

98
00:04:36,510 --> 00:04:38,260
>> Pohjimmiltaan, sinulla tietolähde.

99
00:04:38,260 --> 00:04:42,380
Ja tietolähteen päättää
miten antaa ulos tiettyjä osia.

100
00:04:42,380 --> 00:04:45,452
Ja komponentit
silloin, kun ne muuttuvat,

101
00:04:45,452 --> 00:04:47,160
he kertovat
tietolähde muuttaa.

102
00:04:47,160 --> 00:04:49,350
>> Käyttää Instagram
Esimerkiksi, saatat olla

103
00:04:49,350 --> 00:04:52,050
Luettelo post esineitä, kuten
tietokantaan tai jotain.

104
00:04:52,050 --> 00:04:53,310
Että tiedot.

105
00:04:53,310 --> 00:04:57,600
Ja sitten meidän post komponentit
ottaa että tiedot,

106
00:04:57,600 --> 00:05:01,830
ja käyttää näitä tietoja tehdä
asia ruudulla.

107
00:05:01,830 --> 00:05:04,300
Sitähän nuoli
Datasta komponentti on,

108
00:05:04,300 --> 00:05:07,930
ja sitten, että samoja tietoja käytetään
tehdä joukko komponentteja.

109
00:05:07,930 --> 00:05:10,290
>> Facebook Messenger, sillä
Esimerkiksi, joka on React,

110
00:05:10,290 --> 00:05:13,410
saatat olla lista
viestit tietolähteeseen.

111
00:05:13,410 --> 00:05:15,927
Ja jotka tekisivät ei
vain viestiluettelo

112
00:05:15,927 --> 00:05:17,510
mutta myös lista ystäviä sinulla on.

113
00:05:17,510 --> 00:05:19,200
Sinulla on lukematon määrä.

114
00:05:19,200 --> 00:05:23,330
Ehkä myös tehdä Facebook asia
se alareunassa Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Samat tiedot on
yhdestä lähteestä totuuden

116
00:05:25,610 --> 00:05:28,290
ja joka aiheuttaa paljon
komponenttien suoritettu.

117
00:05:28,290 --> 00:05:30,290
Ja kun yksi niistä
komponentteja muutetaan,

118
00:05:30,290 --> 00:05:32,320
se menee takaisin ja
muuttaa tietolähde.

119
00:05:32,320 --> 00:05:33,460
>> Voit lähettää viestin, eikö?

120
00:05:33,460 --> 00:05:34,780
Joka muuttaa tietolähde.

121
00:05:34,780 --> 00:05:39,490
Voit lukea viestejä,
niin asetat lukematta 0.

122
00:05:39,490 --> 00:05:41,136
Joka muuttaa tietolähde.

123
00:05:41,136 --> 00:05:44,010
Ja huomaa, että kaikki nämä yhden
nuoli menee takaisin samoihin tietoihin

124
00:05:44,010 --> 00:05:47,662
lähde, niin tiedät,
annetaan tietyt tiedot joukko,

125
00:05:47,662 --> 00:05:49,870
tiedät mitä
sivu on menossa näyttämään.

126
00:05:49,870 --> 00:05:50,700
Se on deterministinen.

127
00:05:50,700 --> 00:05:53,451
Tiedäthän, antanut tiettyjä tietoja, mitä
sivun tulee näyttämään.

128
00:05:53,451 --> 00:05:56,158
Voit ennustaa, miten se tulee
käyttäytyä ja miten asiat sujuvat

129
00:05:56,158 --> 00:05:57,650
töihin, kun he koonnut.

130
00:05:57,650 --> 00:06:00,410
>> Ja jos minulla olisi miljoona komponentit
täällä, se käyttäytyisi samalla, eikö?

131
00:06:00,410 --> 00:06:02,290
Sinun ei olisi
outo yhteyksiä.

132
00:06:02,290 --> 00:06:04,120
Yksi tietoihin, joiden miljoona komponentteja.

133
00:06:04,120 --> 00:06:06,879
Miljoonaa osat voivat
palata muokkaamaan tietoja.

134
00:06:06,879 --> 00:06:07,920
Ja niin tämä on erittäin mukavaa.

135
00:06:07,920 --> 00:06:10,870
Me rakennamme koottavat,
helposti skaalautuva verkkosovelluksia.

136
00:06:10,870 --> 00:06:13,150
>> Sinulla on yksi tietolähde,
totuuden lähteenä.

137
00:06:13,150 --> 00:06:15,790
Joka kertoo komponentit
miten antaa ulos sivun,

138
00:06:15,790 --> 00:06:18,190
ja komponentit
kahva vuorovaikutus.

139
00:06:18,190 --> 00:06:20,150
Ja jos he haluavat muuttaa
asiat, vain mennä takaisin

140
00:06:20,150 --> 00:06:21,750
ja kertoa tietolähteen muuttaa.

141
00:06:21,750 --> 00:06:22,850
Käydä järkeen?

142
00:06:22,850 --> 00:06:26,010
Joten React on kyse ymmärryksen
miten rakentaa komponentti

143
00:06:26,010 --> 00:06:29,540
ja miten voit tehdä komponentti
vuorovaikutuksessa ulkomaailmaan.

144
00:06:29,540 --> 00:06:31,850
>> Making komponentti vuorovaikutuksessa
ulkomaailmaan

145
00:06:31,850 --> 00:06:34,490
käyttää toista tekniikkaa
kutsutaan Flux, joka

146
00:06:34,490 --> 00:06:36,872
on kehys, joka on
lisätään päälle reagoida.

147
00:06:36,872 --> 00:06:38,330
Emme aio puhua siitä.

148
00:06:38,330 --> 00:06:42,990
Aiomme puhua enemmän, kun otetaan huomioon
tiedot, miten voit tehdä komponentti?

149
00:06:42,990 --> 00:06:47,010
>> Ja niin React on todella siistiä, koska et
voi käyttää sitä minkä tahansa loppupäätä haluat.

150
00:06:47,010 --> 00:06:50,480
Jos sinulla on kuin Python loppupäätä,
jos Python voi sylkäistä joitakin tietoja,

151
00:06:50,480 --> 00:06:51,610
Reagoida voi tehdä sitä.

152
00:06:51,610 --> 00:06:54,700
Jos et ole JS lähdöt
Tietojen, React tekee sen.

153
00:06:54,700 --> 00:06:56,890
Ruby kiskot kanssa
tiedot, React tekee sen.

154
00:06:56,890 --> 00:07:01,860
>> Joten React on periaatteessa web
view-- etuosa komponentit

155
00:07:01,860 --> 00:07:03,910
tahansa tietolähteen lainkaan.

156
00:07:03,910 --> 00:07:07,145
Ja niin menee tietolähteen
reagoivat komponentit on melko helppoa.

157
00:07:07,145 --> 00:07:08,770
Menossa toiseen suuntaan on hieman vaikeampaa.

158
00:07:08,770 --> 00:07:10,462
Joka käyttää Flux kuten aiemmin mainitsin.

159
00:07:10,462 --> 00:07:11,420
Emme päästä tuohon.

160
00:07:11,420 --> 00:07:13,740
Me keskittyä enemmän
data-to-komponentin puolella.

161
00:07:13,740 --> 00:07:15,880
Näin voit tehdä
viileä, hauska verkkosovelluksia.

162
00:07:15,880 --> 00:07:19,870
Se ei vaikuta ulkomaailmaan
nyt, mutta se on toinen juttu.

163
00:07:19,870 --> 00:07:22,210
>> OK, joten jos olit täällä
minun viimeinen seminaari

164
00:07:22,210 --> 00:07:26,610
tiedät, että kaikki koodi
Nykypäivän talk tulee olemaan tässä URL

165
00:07:26,610 --> 00:07:29,320
täällä, anteeksi, tämä URL-osoite tähän.

166
00:07:29,320 --> 00:07:32,730
Ja pohjimmiltaan aiomme mennä
läpi neljä vaihetta, ehkä viisi,

167
00:07:32,730 --> 00:07:33,510
luultavasti ei viisi.

168
00:07:33,510 --> 00:07:37,300
Me liikkua neljä vaihetta
rakentaa näyte React app.

169
00:07:37,300 --> 00:07:39,550
Ja niin kaikki lähdekoodi
joka askeleella

170
00:07:39,550 --> 00:07:42,216
tulee olemaan täällä, joten jos
olet seuraava pitkin kotona,

171
00:07:42,216 --> 00:07:43,991
vapaasti tutkia tätä koodia.

172
00:07:43,991 --> 00:07:46,740
Jos seuraat pitkin täällä,
me näytetään, sen näytölle,

173
00:07:46,740 --> 00:07:47,739
joten älä huoli siitä.

174
00:07:47,739 --> 00:07:50,930
Mutta jos olet kotona, tuntuu
vapaasti vierailla tällä sivustolla.

175
00:07:50,930 --> 00:07:56,400
Ja Joo, sinun pitäisi pystyä saamaan
kaikki koodi sinun koskaan tarvitse täällä.

176
00:07:56,400 --> 00:08:01,380
Joten se on hyvä lunttilappua sekä
tulevaa seikkailuja reagoida.

177
00:08:01,380 --> 00:08:04,490
Viileä, joten jos jokainen, joka on täällä,
ja vaikka olet kotona,

178
00:08:04,490 --> 00:08:11,580
vedä ylös tällä sivustolla, is.gd/cs50react,
ei pääoman, ei alaviiva, ei mitään.

179
00:08:11,580 --> 00:08:15,849
>> Näet sivun, joka näyttää
vähän kuin tämä.

180
00:08:15,849 --> 00:08:17,140
Tämä on asia, jota kutsutaan CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen on yhteisöllinen
koodaus ympäristö

182
00:08:20,030 --> 00:08:23,364
jolla voin kirjoittaa koodia täällä, ja
se tulee automaattisesti lähetetään sinulle.

183
00:08:23,364 --> 00:08:24,780
Ja tällä tavalla, en voi kirjoittaa koodia.

184
00:08:24,780 --> 00:08:26,920
Voin ajaa koodia tässä.

185
00:08:26,920 --> 00:08:33,470
>> Sillä example-- ja jos se reloads-- nähdä,
Olen käynnissä JavaScript koodia sivulla

186
00:08:33,470 --> 00:08:36,390
täällä, ja se tulee
automaattisesti tehdä web-sivun

187
00:08:36,390 --> 00:08:37,980
Tämän JavaScript-koodia.

188
00:08:37,980 --> 00:08:40,039
Ja niin tämä on tapa
meille kokeilla koodi

189
00:08:40,039 --> 00:08:43,089
todella nopeasti ilman käyttää
meidän tunnus tai käyttää paikallisen koneen

190
00:08:43,089 --> 00:08:44,290
tai mitä tahansa.

191
00:08:44,290 --> 00:08:47,670
Se on hyvin nopea tapa, jolla voit mockup
ja kokeilla erilaisia ​​koodin.

192
00:08:47,670 --> 00:08:50,560
>> Joten aion olla ottaen
Esimerkiksi koodi, laittoi pallon täällä.

193
00:08:50,560 --> 00:08:52,374
Aiomme työskennellä läpi.

194
00:08:52,374 --> 00:08:54,540
Ja jos olet kotona, te
voi vetää tämän jopa niin hyvin.

195
00:08:54,540 --> 00:08:57,530
Ja olen jo asentanut
Reagoida täällä, joten voit vain

196
00:08:57,530 --> 00:09:00,770
kirjoittaa oman koodin täällä, ja
kokeile sitä kuin oma leikkipaikka.

197
00:09:00,770 --> 00:09:04,940
>> Joo, jos kaikkien
avata linkki tänne.

198
00:09:04,940 --> 00:09:08,080
Antakaa minulle peukalot
ylös kun olet sen auki.

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

200
00:09:10,960 --> 00:09:13,770
Viileä, viileä viileä.

201
00:09:13,770 --> 00:09:16,914
Täällä ei ole mitään nyt, mutta
me korjaamme että hyvin pian.

202
00:09:16,914 --> 00:09:21,250
>> OK, joten React on JavaScript
kirjasto, ja siten,

203
00:09:21,250 --> 00:09:24,480
vaatii tietoa JavaScriptin,
joka on web ohjelmointikieli.

204
00:09:24,480 --> 00:09:27,660
Ja sitä käytetään muun muassa
nyt liian mutta pääasiassa web kehittää

205
00:09:27,660 --> 00:09:32,040
kieli, joten jos et tunne
että, lukea sivuston nimeltä JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Se on hienoa.

207
00:09:32,700 --> 00:09:34,240
Voit oppia JavaScriptin
puolessa tunnissa.

208
00:09:34,240 --> 00:09:34,990
Se on uskomatonta.

209
00:09:34,990 --> 00:09:36,420
>> Joten antaa sille lukea.

210
00:09:36,420 --> 00:09:39,960
Meillä on myös paljon HTML täällä, koska
olemme verkkosivujen suunnittelusta tietenkin.

211
00:09:39,960 --> 00:09:43,890
Joten jos et tunne
HTML, tutustu HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Mielestäni oppiminen React on
miljoonaa kertaa helpompaa, jos jo

213
00:09:46,520 --> 00:09:47,892
tietää rakennuspalikoita.

214
00:09:47,892 --> 00:09:50,600
Jos sinulla on osia, se on
helppo tehdä isompi osa.

215
00:09:50,600 --> 00:09:51,860
Se React kielen sinulle.

216
00:09:51,860 --> 00:09:54,270
>> Joten mene eteenpäin ja antaa
nämä asiat lukea.

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

218
00:09:55,070 --> 00:09:57,440
Anna sille lukea, jos olet
kotona, jos et ole

219
00:09:57,440 --> 00:10:00,794
perehtynyt HTML tai JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, joten mitä aiomme
do on aiomme tehdä

221
00:10:02,960 --> 00:10:06,470
hyvin yksinkertainen Kysymyskortin App käyttäen reagoida.

222
00:10:06,470 --> 00:10:08,210
Aiomme olla Kysymyskortin.

223
00:10:08,210 --> 00:10:09,880
Voit kääntää kortin edestakaisin.

224
00:10:09,880 --> 00:10:12,399
Ja me myös lista
kaikki kortit, jotka meillä on,

225
00:10:12,399 --> 00:10:14,190
ja jos me et tunne
kunnianhimoinen, saatamme olla

226
00:10:14,190 --> 00:10:17,060
pystyvät halutessaan vaihtamaan
autojen klikkaamalla niitä.

227
00:10:17,060 --> 00:10:20,360
>> Mutta tämä on, on paljain
luut, hyvin yksinkertainen React sovellus.

228
00:10:20,360 --> 00:10:22,560
Ja niin tämä on oikeastaan
ei triviaali toteuttaa,

229
00:10:22,560 --> 00:10:26,030
mutta aiomme osoittaa, että jos teet
Tämän, se on hyvin, hyvin helppo laajentaa sitä

230
00:10:26,030 --> 00:10:27,680
jos muut ihmiset auttavat sinua sen kanssa.

231
00:10:27,680 --> 00:10:33,750
Joten aiomme käydä läpi neljä vaihetta
aloittaa tyhjästä rakentaa tämän.

232
00:10:33,750 --> 00:10:36,740
>> OK, joten neljä vaihetta, käymme
alkajaisiksi ensimmäinen askel.

233
00:10:36,740 --> 00:10:39,790
Ensimmäinen askel tulee olemaan
rakentaa ensimmäinen komponentti.

234
00:10:39,790 --> 00:10:44,830
Kuten aiemmin sanoin, osa React
on vain HTML-elementti steroideja.

235
00:10:44,830 --> 00:10:49,660
Se määrittää HTML
ja jotkut käyttäytyminen, ja se

236
00:10:49,660 --> 00:10:52,600
määritellään, kuinka ihmiset
voi vuorovaikutuksessa sen kanssa, miten

237
00:10:52,600 --> 00:10:54,270
se olisi sisäinen tila.

238
00:10:54,270 --> 00:10:57,630
Kuten painike tietää, kuten kuinka monta
kertaa se on ollut napsautti esimerkiksi,

239
00:10:57,630 --> 00:11:01,010
ja se osaa asettaa itsensä ulos.

240
00:11:01,010 --> 00:11:04,430
>> Joten mene eteenpäin ja rakentaa
Ensimmäinen komponentti JavaScriptin avulla.

241
00:11:04,430 --> 00:11:09,711
Joten jos syntaksi näyttää oudolta,
se johtuu se sellainen on.

242
00:11:09,711 --> 00:11:11,710
Joten, jälleen, me menemme
tehdä muuttuja nimeltä

243
00:11:11,710 --> 00:11:14,580
app käyttämällä avainsanaa anna,
mikä tekee muuttuja,

244
00:11:14,580 --> 00:11:18,210
anna App yhtä suuri React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Reagoida on kirjasto ja on
luoda luokan toiminto.

246
00:11:22,609 --> 00:11:24,400
Ja tämä toiminto on
vähän koodi, joka

247
00:11:24,400 --> 00:11:29,090
voit luoda uuden
tyyppi React komponenttia.

248
00:11:29,090 --> 00:11:32,780
Ja niin React.createClass
tekee komponentti,

249
00:11:32,780 --> 00:11:35,270
ja tämä komponentti
pystyä tekemään juttuja.

250
00:11:35,270 --> 00:11:40,460
Tärkeintä se voi tehdä, on tehdä
jotain, tehdä funktiona.

251
00:11:40,460 --> 00:11:44,500
>> Jälleen, jos tämä indeksi ei ole ilmeinen
te, minä suosittelen sinua mennä JS kissoille

252
00:11:44,500 --> 00:11:45,682
ja tarkistaa sitä.

253
00:11:45,682 --> 00:11:47,710
Onko se zoomataan tarpeeksi hyvin?

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

255
00:11:48,490 --> 00:11:50,670
>> Joten jokainen komponentti tarpeisiin
on tehdä funktio.

256
00:11:50,670 --> 00:11:53,010
Render toiminto sanoo,
mitä voin tulostaa ruudulla?

257
00:11:53,010 --> 00:11:54,760
Mutta osa on
hyödytön, jos se ei

258
00:11:54,760 --> 00:11:58,060
Tiedä mitä tulostaa ruudulla, joten
sinun täytyy olla tehdä funktio.

259
00:11:58,060 --> 00:12:01,904
>> Joten tehdä asia, te
tarvitsee vain palata joitakin HTML.

260
00:12:01,904 --> 00:12:03,820
Ja mitä siistiä se on
siellä on asia nimeltä

261
00:12:03,820 --> 00:12:08,660
JSX, joka on laajennus
JavaScript, jota käytetään reagoimaan.

262
00:12:08,660 --> 00:12:11,845
Se nyt kirjoitat HTML sisällä
on JavaScript, joka

263
00:12:11,845 --> 00:12:13,970
kuulostaa outo kun
ensin ajatella sitä,

264
00:12:13,970 --> 00:12:15,553
mutta se tekee paljon järkeä jälkeenpäin.

265
00:12:15,553 --> 00:12:17,430
Joten voimme tehdä tämän.

266
00:12:17,430 --> 00:12:21,360
Jos olet perehtynyt HTML, tiedän
meillä div yleiskäyttöisellä

267
00:12:21,360 --> 00:12:22,790
säiliö kamaa.

268
00:12:22,790 --> 00:12:26,380
Voimme palata div, ja sisälle
Tämän div, voimme laittaa juttuja.

269
00:12:26,380 --> 00:12:32,390
>> Joten sanoa haluamme tehdä vain
straight-up Kysymyskortti nyt.

270
00:12:32,390 --> 00:12:34,890
Kysymyskortti, sanoisin,
on kysymys ja vastaus.

271
00:12:34,890 --> 00:12:37,530
Joten sisälle div, katsotaanpa
tulostaa kohta

272
00:12:37,530 --> 00:12:42,155
joka sanoo question-- Mikä on
lopullinen vastaus elämään, maailmankaikkeus?

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

274
00:12:47,640 --> 00:12:50,345
Ja niin vastaus on
tulee tietenkin, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Tämä ei tullut lainkaan hyvin.

277
00:12:59,730 --> 00:13:04,164
Joo, joten periaatteessa voit todella
kirjoittaa HTML sisällä JavaScript.

278
00:13:04,164 --> 00:13:06,330
Ja tämä tulee olemaan
tulostaa osaksi näytön.

279
00:13:06,330 --> 00:13:08,250
Joten kokeilla sitä.

280
00:13:08,250 --> 00:13:09,520
>> Joten meillä on komponentti.

281
00:13:09,520 --> 00:13:12,210
Meidän on kerrottava Reagoi laittaa
komponentti ruudulla

282
00:13:12,210 --> 00:13:18,990
niin React.render, niin huomaa, että me
kohdella app kuten minkään muun aineen.

283
00:13:18,990 --> 00:13:21,010
Me kirjoittaa, koska se oli HTML-elementti.

284
00:13:21,010 --> 00:13:25,100
Kuten sijasta sanomalla kuten img
kuvien tai p kohdassa,

285
00:13:25,100 --> 00:13:28,120
kirjoitat App, joten sovellus on
kohdellaan kuin HTML-elementti.

286
00:13:28,120 --> 00:13:30,380
Kuten aiemmin sanoin, se on
elementti steroideja.

287
00:13:30,380 --> 00:13:32,870
>> Joten voit tehdä App, ja sinä
antoivat paikka laittaa se.

288
00:13:32,870 --> 00:13:37,170
Ja näin voit
kerro se, mihin sitä.

289
00:13:37,170 --> 00:13:46,200
Olen luonut yksinkertaisen div
sivu maksoi ID sivun,

290
00:13:46,200 --> 00:13:48,300
ja siitähän
elementti tulee mennä.

291
00:13:48,300 --> 00:13:49,841
>> Ja emme aio juosta HTML.

292
00:13:49,841 --> 00:13:53,145
Pohjimmiltaan tämä on menossa
laittaa sisälle Tämän sivun elementin

293
00:13:53,145 --> 00:13:54,270
että meillä on ruudulla.

294
00:13:54,270 --> 00:13:59,210
Joten se toimii tämän koodin, ja se tekee tämän
asia ruudulla, joten tässä ollaan.

295
00:13:59,210 --> 00:14:01,770
Olemme tehneet ensimmäinen React komponentti.

296
00:14:01,770 --> 00:14:08,000
>> Aivan kuten kertaus, me varovasti tehty
uudentyyppinen komponentti, eikö?

297
00:14:08,000 --> 00:14:10,145
Sitähän React.createClass.

298
00:14:10,145 --> 00:14:12,680
Ja että komponentti, me
kertoi sen mitä sen pitäisi tehdä.

299
00:14:12,680 --> 00:14:15,590
Aina tämä komponentti on
tulostetaan näytölle,

300
00:14:15,590 --> 00:14:19,300
se tulostaa div kanssa
kaksi kohtaa sen sisälle.

301
00:14:19,300 --> 00:14:24,460
>> Ja mitä teimme, teimme uuden sovelluksen
käyttämällä kulmaraudan App merkintää.

302
00:14:24,460 --> 00:14:27,160
Kerroimme se laittaa sen
sisällä sivuelementin.

303
00:14:27,160 --> 00:14:29,867
Ja niin mitä tein, se loi
Uusi sovellus kyseisestä mallista.

304
00:14:29,867 --> 00:14:31,200
Ja sitten sanoin sen tekemiseksi.

305
00:14:31,200 --> 00:14:33,680
Niin se sanoi, OK, sovellus,
mitä minun pitäisi tulostaa?

306
00:14:33,680 --> 00:14:36,970
App sanoo, mennä tulostaa div
jossa kaksi kohtaa sen sisälle.

307
00:14:36,970 --> 00:14:40,420
Ja voila, siellä on meidän div kanssa
kaksi kohtaa sen sisälle.

308
00:14:40,420 --> 00:14:43,180
Järkeä tähän mennessä?

309
00:14:43,180 --> 00:14:46,690
>> Joten, jälleen, koko haaste React
on vain osata valmistaa komponentteja.

310
00:14:46,690 --> 00:14:48,500
Miten tehdä
komponentit toimivat yhdessä.

311
00:14:48,500 --> 00:14:51,780
Nyt kun olemme tehneet ensimmäinen
komponentti, mennään takaisin

312
00:14:51,780 --> 00:14:54,284
ja valmistaa komponentteja muokattavissa.

313
00:14:54,284 --> 00:14:56,700
Joten tiedät miten HTML sinua
voi antaa painikkeet luokat?

314
00:14:56,700 --> 00:14:59,146
Voit antaa ankkurit href.

315
00:14:59,146 --> 00:15:00,770
Voit antaa panoksia tyyppi, eikö?

316
00:15:00,770 --> 00:15:04,740
Voit antaa enemmän mukautetun
ominaisuudet kaikki elementit

317
00:15:04,740 --> 00:15:06,490
jotta se olisi mielenkiintoinen.

318
00:15:06,490 --> 00:15:09,030
Ja me oikeastaan ​​voi tehdä
täsmälleen sama asia.

319
00:15:09,030 --> 00:15:17,500
>> Joten sanoa haluamme
app mennä johtuen jokin kortti.

320
00:15:17,500 --> 00:15:19,630
Juuri nyt me vain
sulatettu kovakoodatun kortti.

321
00:15:19,630 --> 00:15:22,530
Tiedämme, että vain yksi
kortti se voi tehdä, joten olemme

322
00:15:22,530 --> 00:15:25,960
menossa yrittää muuttaa tätä nyt niin
että voimme vain antaa sille kortti.

323
00:15:25,960 --> 00:15:27,410
Se tulee tulostaa kortti.

324
00:15:27,410 --> 00:15:29,380
>> Sinun pitäisi yrittää ja tehdä
komponentit hyvin yleiskäyttöinen.

325
00:15:29,380 --> 00:15:31,654
Joten tällä tavalla voisin sähköpostiin
tämä ystäväni ja olla,

326
00:15:31,654 --> 00:15:33,820
mitä Kysymyskortti sinulla on,
vain syöttää se täällä,

327
00:15:33,820 --> 00:15:35,290
ja se tekee sen itse.

328
00:15:35,290 --> 00:15:37,650
Voit laittaa muut
asioita omassa App.

329
00:15:37,650 --> 00:15:40,600
>> Mutta ensin tauko tämä
ylös kahteen komponenttiin,

330
00:15:40,600 --> 00:15:44,500
mutta haluamme erottaa kortti
tulostus osittain todellinen App osa.

331
00:15:44,500 --> 00:15:46,660
Joten mitä voimme tehdä on meidän
vaihtaa tämän App

332
00:15:46,660 --> 00:15:51,300
ja CardView, vain
uusi nimi app,

333
00:15:51,300 --> 00:15:54,450
ja voimme tehdä uusia
osatekijä nimeltä App,

334
00:15:54,450 --> 00:15:56,336
ei pidä sekoittaa vanha App.

335
00:15:56,336 --> 00:16:00,730
Meillä createClass,
ja kuten HTML,

336
00:16:00,730 --> 00:16:03,590
voit pesä React komponentit
sisällä toisistaan.

337
00:16:03,590 --> 00:16:16,430
>> Joten tässä tehdä toiminnon,
toiminto paluu CardView,

338
00:16:16,430 --> 00:16:18,234
ja tämä on täsmälleen sama asia.

339
00:16:18,234 --> 00:16:19,400
Katso miksi se on sama asia?

340
00:16:19,400 --> 00:16:22,590
Sen sijaan, että tekee vain sovellus, joka
on div ja pariksi sen sisällä,

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

342
00:16:26,194 --> 00:16:29,110
Joten tämä on meidän ensimmäinen esimerkki
pesintä Sisällä toisistaan.

343
00:16:29,110 --> 00:16:32,177
Onko siinä järkeä?

344
00:16:32,177 --> 00:16:33,760
Niin, jälleen, meillä on CardView elementti.

345
00:16:33,760 --> 00:16:37,250
Meillä on sovellus elementtejä
että se on isompi kuin.

346
00:16:37,250 --> 00:16:40,990
>> OK, joten haluamme CardView-- jos
antaa hyvän CardView tietty kortti,

347
00:16:40,990 --> 00:16:43,370
se tulee tulostaa sinulle, eikö?

348
00:16:43,370 --> 00:16:48,050
Joten ensimmäinen, meidän täytyy tehdä kortti,
joten tehkäämme kortti esine.

349
00:16:48,050 --> 00:17:02,930
Joten anna minun kortti equal--
jos olet kaikki tuttuja,

350
00:17:02,930 --> 00:17:05,260
tämä on vain merkintätapa päätöksentekoon
esine JavaScript.

351
00:17:05,260 --> 00:17:09,280
Se on ikään kuin struct
C, joten teimme kortti,

352
00:17:09,280 --> 00:17:15,920
joten nyt voimme välittää tämän kortin
omaisuutta tai määrite HTML

353
00:17:15,920 --> 00:17:17,290
terminologia meidän App.

354
00:17:17,290 --> 00:17:20,210
Joten voimme tehdä tämän, App
kortti vastaa myCard.

355
00:17:20,210 --> 00:17:23,200
>> Te tiedätte, miten tuotantopanosten, et
input type vastaa tekstiä tai -painiketta

356
00:17:23,200 --> 00:17:25,240
luokan equals BTN varten bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Sama ajatus, App kortti equals--
sinun täytyy laittaa olkaimet here--

358
00:17:29,500 --> 00:17:33,830
App kortti vastaa myCard, joten tämä
sanoo meillä on tämä kortti esine.

359
00:17:33,830 --> 00:17:39,149
Aion välittää sitä
kohde sovelluksen komponentti.

360
00:17:39,149 --> 00:17:41,440
Ja tämä sovellus komponentti
voi käyttää sitä ja tehdä

361
00:17:41,440 --> 00:17:43,580
mielenkiintoisia juttuja sen kanssa.

362
00:17:43,580 --> 00:17:47,650
>> Joten meidän App tulee olemaan
annettu kortti, joten nyt,

363
00:17:47,650 --> 00:17:49,980
nyt on App vain antaa
kortin CardView

364
00:17:49,980 --> 00:17:53,110
itse koska kuten sovellus ei ole
menossa tiedä mitä tehdä sen kanssa,

365
00:17:53,110 --> 00:17:54,850
joten me vain antaa sen CardView.

366
00:17:54,850 --> 00:18:00,050
Niin me sitä tule
Samalla tavalla, kortti vastaa,

367
00:18:00,050 --> 00:18:05,426
ja niin jokainen komponentti voi käyttää
asioita, jotka on annettu sille.

368
00:18:05,426 --> 00:18:07,800
He voivat käyttää ominaisuuksia
jotka on annettu sille

369
00:18:07,800 --> 00:18:09,470
käyttämällä tätä syntaksia, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Joten mitä tapahtuu täällä on
sinulla myCard objekti.

372
00:18:14,920 --> 00:18:18,250
Ohitat sen app
käyttämällä App kortti vastaa myCard.

373
00:18:18,250 --> 00:18:21,420
Tämä kortti esine annetaan sovelluksen.

374
00:18:21,420 --> 00:18:24,400
App voi käyttää sitä
kuten this.props.card.

375
00:18:24,400 --> 00:18:28,780
Se on tavallaan kuin kuva
tietää, mitä se on lähde on.

376
00:18:28,780 --> 00:18:31,972
>> Tämä sovellus tietää, mitä se on kortti
on, ja se voi tehdä juttuja sen kanssa.

377
00:18:31,972 --> 00:18:32,930
Se voi tehdä laskelmat.

378
00:18:32,930 --> 00:18:35,290
Se voi tehdä päätöksiä, jotka perustuvat pois siitä.

379
00:18:35,290 --> 00:18:39,950
>> Nyt olin menossa ohi
this.props.card päälle CardView.

380
00:18:39,950 --> 00:18:43,420
Järkeä tähän mennessä?

381
00:18:43,420 --> 00:18:45,210
Se tulee järkevämpää nyt.

382
00:18:45,210 --> 00:18:46,990
>> OK, joten nyt me olemme CardView.

383
00:18:46,990 --> 00:18:51,719
Meidän CardView, koska kortti, olisi
tulostaa sen kysymys ja vastaus.

384
00:18:51,719 --> 00:18:54,510
Juuri nyt me vain tulostaa joitakin
kovakoodattuihin kysymyksiä ja vastauksia.

385
00:18:54,510 --> 00:18:57,720
Meidän täytyy selvittää out-- tarvitsemme
kysyä kortin että he antoivat meille

386
00:18:57,720 --> 00:19:01,360
mikä on kysymys ja vastaus, ja
tulosta sitten tämä ulos näytön.

387
00:19:01,360 --> 00:19:02,470
>> Joten voimme tehdä täällä.

388
00:19:02,470 --> 00:19:06,135
Vuonna tehdä begin-- ensin tehdä tasavertaisina.

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

390
00:19:08,710 --> 00:19:13,050
Joten mitä teemme tässä me tiedämme, että
kortit antanut meille omaisuutta,

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

392
00:19:13,580 --> 00:19:15,930
Se annetaan meille tulona.

393
00:19:15,930 --> 00:19:19,440
Kuten se on melkein kuin
argumentteja toiminto.

394
00:19:19,440 --> 00:19:22,810
Kortti on argumentti
melkein tämän CardView.

395
00:19:22,810 --> 00:19:25,239
>> Me ote että, ja laita
se muuttujaan kysymys.

396
00:19:25,239 --> 00:19:27,280
Varmista vastaus meni
muuttujan vastaus.

397
00:19:27,280 --> 00:19:31,130
Kysyy että kortti vastata.

398
00:19:31,130 --> 00:19:35,072
Ja nyt, että meillä on nämä,
sijasta tulostaa tekstin,

399
00:19:35,072 --> 00:19:37,030
aiomme tulostaa
mitä he antoivat meille.

400
00:19:37,030 --> 00:19:43,580
>> Joten tämä stuff-- joten aiomme
sammuttamaan Kysymys Vastaus.

401
00:19:43,580 --> 00:19:46,380
Katsotaanpa, jos tämä toimii.

402
00:19:46,380 --> 00:19:52,800
Viileä, joten katsotaanpa selata sen
vielä kerran vain olla varma.

403
00:19:52,800 --> 00:20:00,470
>> Joten minun kortti on kortti esine, ja me
antavat että kortin sovelluksen.

404
00:20:00,470 --> 00:20:04,790
Ja sovellus vie
kortti ja anna se CardView.

405
00:20:04,790 --> 00:20:09,190
Ja tämä CardView sanoo, jos
anna minulle mitään Kysymyskortin esine,

406
00:20:09,190 --> 00:20:11,920
Minä tulostaa sen kysymyksen
ja sen vastaus, eikö?

407
00:20:11,920 --> 00:20:14,590
>> Joten mitä voisin tehdä on voin
Lähetä tämä koodi, ensimmäinen

408
00:20:14,590 --> 00:20:16,580
kuten 10 riviä minun koodi, ystäväni.

409
00:20:16,580 --> 00:20:18,820
Hän voisi upottaa sen
oman hakemuksen.

410
00:20:18,820 --> 00:20:27,200
Ja niin kauan kuin hän teki saman,
kuten CardView kortti vastaa tätä,

411
00:20:27,200 --> 00:20:30,580
niin kauan kuin hän loi CardView
ja antoi sille oikeuden tiedot,

412
00:20:30,580 --> 00:20:31,987
hän voisi tehdä oman kortin.

413
00:20:31,987 --> 00:20:34,320
Ja niin tällä tavalla, se on todella
viileä tapa, jolla voit rakentaa

414
00:20:34,320 --> 00:20:35,906
komponentteja, jotka käyttävät toisiaan, eikö?

415
00:20:35,906 --> 00:20:38,280
Tämä kortti, voisin julkaista
tämä CardView internetissä,

416
00:20:38,280 --> 00:20:39,790
ja ihmiset voisivat käyttää sitä.

417
00:20:39,790 --> 00:20:45,070
Joten periaatteessa, se on kuin yksi
vakiotoimintoja C-kirjasto.

418
00:20:45,070 --> 00:20:47,280
>> Se on toiminto, jossa
joku on kirjoittanut sen.

419
00:20:47,280 --> 00:20:48,419
Annat tietty tulo.

420
00:20:48,419 --> 00:20:49,710
Se tulee tuottaa tietty tuotos.

421
00:20:49,710 --> 00:20:50,890
Et välitä miten se toimii sisäisesti.

422
00:20:50,890 --> 00:20:53,790
Niin kauan kuin annat sille oikea
tulo, se tulee tekemään oikean lähdön.

423
00:20:53,790 --> 00:20:57,850
>> Ja komponentti voi olla
ajatellut samalla tavalla.

424
00:20:57,850 --> 00:21:00,280
Tämä CardView on kuin
kirjaston funktion.

425
00:21:00,280 --> 00:21:03,400
Jos annat sille kortti
kuten omaisuutta, se tulee

426
00:21:03,400 --> 00:21:05,095
tulostaa sisällön että kortti.

427
00:21:05,095 --> 00:21:16,820
Kuten jos muutan kortti
sen sijaan olla kuin mikä on 5 plus 37,

428
00:21:16,820 --> 00:21:19,210
se päivittää vastaavasti.

429
00:21:19,210 --> 00:21:21,955
Joten vain muuttamalla tulo,
se saa tietyn tuotantomäärän.

430
00:21:21,955 --> 00:21:24,830
Joten voit ajatella komponentteja lähes
kuten toimii tällä tavalla, joka

431
00:21:24,830 --> 00:21:25,920
voit koota.

432
00:21:25,920 --> 00:21:29,440
Saat tulo, kuten tämä CardView
kuten syöttö, saat tuotos.

433
00:21:29,440 --> 00:21:31,900
Tässä tapauksessa lähtö on HTML.

434
00:21:31,900 --> 00:21:34,404
Järkeä tähän mennessä?

435
00:21:34,404 --> 00:21:36,890
Viileä, joten taas, ominaisuudet ovat
miten voit välittää tiedot

436
00:21:36,890 --> 00:21:40,900
ja sieltä pois osia.

437
00:21:40,900 --> 00:21:42,740
>> OK, joten tehkäämme tästä
asia vuorovaikutteinen.

438
00:21:42,740 --> 00:21:44,450
Juuri nyt se on eräänlainen tylsää.

439
00:21:44,450 --> 00:21:45,520
Mikä on [äänetön]?

440
00:21:45,520 --> 00:21:48,210
Voit tulostaa joitakin pois,
mutta siinä kaikki se voi tehdä.

441
00:21:48,210 --> 00:21:51,550
>> Joten mennään takaisin
vanha kysymys juuri nyt.

442
00:21:51,550 --> 00:21:54,405
OK, joten nyt näiden komponenttien
ovat tylsiä koska kaikki ne,

443
00:21:54,405 --> 00:21:55,030
he saavat tulo.

444
00:21:55,030 --> 00:21:56,100
He tekevät tuotos, eikö?

445
00:21:56,100 --> 00:21:57,049
Sellainen tylsää.

446
00:21:57,049 --> 00:21:59,090
Haluamme olla meidän
komponentteja voi olla

447
00:21:59,090 --> 00:22:02,150
jonkinlainen sisäinen tila,
kuten muistaa jotain.

448
00:22:02,150 --> 00:22:05,320
>> Saat Kysymyskortti varten
Esimerkiksi millaisia ​​valtion

449
00:22:05,320 --> 00:22:07,550
ehkä haluat
muistaa Kysymyskortin?

450
00:22:07,550 --> 00:22:09,740
Mitä väliaikainen tila
ehkä haluat muistaa

451
00:22:09,740 --> 00:22:12,491
varten Kysymyskortti kaupungissa Kysymyskortin App?

452
00:22:12,491 --> 00:22:13,990
Yleisö: Olipa on selattava?

453
00:22:13,990 --> 00:22:14,990
NEEL Mehta: Niin varmaan.

454
00:22:14,990 --> 00:22:17,665
Joten kannattaa pitää
kirjaa olet ylöspäin tai ovat

455
00:22:17,665 --> 00:22:19,100
kohtaat alas kortin.

456
00:22:19,100 --> 00:22:23,420
Facebookissa, esimerkiksi, sinulla olisi
haluat muistaa missä uutissyöte

457
00:22:23,420 --> 00:22:25,870
olet tai haluat kuka profiili
teet juuri nyt.

458
00:22:25,870 --> 00:22:30,127
>> Messenger, kuten mitä tekstin
kirjoita syöttöruutuun, eikö?

459
00:22:30,127 --> 00:22:31,710
Jos päivitä sivu, se menee pois.

460
00:22:31,710 --> 00:22:32,793
Mutta et välitä.

461
00:22:32,793 --> 00:22:33,770
Se on vain väliaikainen.

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

463
00:22:34,548 --> 00:22:36,152
>> Yleisö: [äänetön]

464
00:22:36,152 --> 00:22:38,360
NEEL Mehta: Kuin salama
kortti, kuten voit näkemään

465
00:22:38,360 --> 00:22:40,290
kysymys puolelta tai vastauksen puolella?

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

467
00:22:41,070 --> 00:22:43,270
>> NEEL Mehta: Like
kaksipuolinen Kysymyskortti, eikö?

468
00:22:43,270 --> 00:22:46,370
Joo, niin haluat
on tämä ajatus nyt

469
00:22:46,370 --> 00:22:50,370
Minulla on ominaisuuksia, joka on kuin tulot,
mutta valtio, joka on väliaikainen, öh,

470
00:22:50,370 --> 00:22:51,839
missä olet sivulla, eikö?

471
00:22:51,839 --> 00:22:54,380
Jälleen sanoin Facebookissa
Messenger, minulla on kuten mikä henkilö

472
00:22:54,380 --> 00:22:56,550
katselet Facebook
tai kuka profiilin, eikö?

473
00:22:56,550 --> 00:22:58,030
>> Tämä on vain väliaikaista.

474
00:22:58,030 --> 00:23:01,200
On tärkeää näyttää käyttäjälle
mitä on tekeillä, mutta päivitä sivu.

475
00:23:01,200 --> 00:23:02,250
Se ei ole oikeastaan ​​väliä.

476
00:23:02,250 --> 00:23:04,530
Joten se on väliaikainen tila,
joten me kaikki se valtio.

477
00:23:04,530 --> 00:23:06,250
>> Joten, jälleen, siellä on valtion ja tarpeistoa.

478
00:23:06,250 --> 00:23:09,084
Rekvisiitta on panoksesta
teidän tietolähteen.

479
00:23:09,084 --> 00:23:10,250
Valtion on aivan kuin oletusarvot.

480
00:23:10,250 --> 00:23:13,700
Se on aivan kuin kamaa, että
tekee asia vuorovaikutteinen.

481
00:23:13,700 --> 00:23:17,720
>> Joten meidän CardView-- katsotaanpa
meidän CardView-- joten se oli mukavaa.

482
00:23:17,720 --> 00:23:21,420
Mitä aiomme tehdä täällä, me aiomme
kosketa CardView ja vain CardView.

483
00:23:21,420 --> 00:23:25,105
Ja niin ystäväni, joka sai tämän, he
huomaisi mitään eroa.

484
00:23:25,105 --> 00:23:27,230
He eivät tarvitse muuttaa
tahansa niiden oman koodin,

485
00:23:27,230 --> 00:23:29,410
mutta he näkevät
CardView sai souped.

486
00:23:29,410 --> 00:23:31,270
Se on mukava osa noin komponentteja.

487
00:23:31,270 --> 00:23:35,290
>> OK, joten meidän CardView, yritetään ja
seurata, onko olemme vähitellen ylös

488
00:23:35,290 --> 00:23:36,560
tai alaspäin.

489
00:23:36,560 --> 00:23:40,480
Vuonna React teemme tämän ensin
täsmennetään alkuperäiseen tilaan.

490
00:23:40,480 --> 00:23:42,070
Mistä kortti alkaa?

491
00:23:42,070 --> 00:23:48,480
>> Joten toiminto nimeltään getInitialState
toimivat, ja palaamme objekti.

492
00:23:48,480 --> 00:23:53,310
Tämä tavoite sisältää joitakin valtion, ja
tila on vain avainarvoparin.

493
00:23:53,310 --> 00:23:56,950
Kuten instruct, sinulla on avain ja
arvo, olet kuin nimi on merkkijono.

494
00:23:56,950 --> 00:24:01,410
>> Tässä tapauksessa, sanokaamme edessä on totta.

495
00:24:01,410 --> 00:24:03,760
Tämä kertoo, että meillä on valtio.

496
00:24:03,760 --> 00:24:06,570
Yksi osa valtion
on ominaisuus nimeltään edessä.

497
00:24:06,570 --> 00:24:09,649
[Äänetön], joten oletusarvoisesti,
olemme edessä kortin,

498
00:24:09,649 --> 00:24:11,440
ja voimme muuttaa tätä
kun me flip kortti.

499
00:24:11,440 --> 00:24:13,380
Käydä järkeen?

500
00:24:13,380 --> 00:24:18,190
>> OK, joten tehdä juuri nyt, olemme
näytetään kysymys ja vastaus.

501
00:24:18,190 --> 00:24:20,860
Nyt, mitä meidän pitäisi tehdä
on näyttää kysymys

502
00:24:20,860 --> 00:24:24,370
jos me olemme kortin etupuolella niin
vastaus on kortin takapuolella.

503
00:24:24,370 --> 00:24:26,850
Siksi te kaikki tehdä
kortti interaktiivinen.

504
00:24:26,850 --> 00:24:28,100
Joten yrittää tätä täällä.

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

506
00:24:31,600 --> 00:24:33,620
No, ensin vain tehdä muuttuja.

507
00:24:33,620 --> 00:24:37,790
Voimme kysyä nyt this.state.front.

508
00:24:37,790 --> 00:24:42,010
Me käyttö -tilasta samaa me
pääsy rekvisiitta, niin this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Jos olemme edessä, niin teksti
on this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Jos olemme edessä
kortti, aiomme yrittää napata

512
00:24:51,360 --> 00:24:52,485
kysymykseen kortti.

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

514
00:24:54,782 --> 00:24:57,240
Muuten, jos olemme takana
Kortin, mitä me teemme?

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

516
00:25:01,830 --> 00:25:02,750
>> Yleisö: Vastaus?

517
00:25:02,750 --> 00:25:05,041
>> NEEL Mehta: Jep, niin teksti
vastaa this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Mutta jos huomaat, käytämme
valtion tehdä päätös

520
00:25:10,930 --> 00:25:14,420
koska nyt komponentti
näyttää erilaiselta

521
00:25:14,420 --> 00:25:16,710
perustuu pois miten nämä vuorovaikutuksessa sen kanssa.

522
00:25:16,710 --> 00:25:20,355
Joten sen sijaan tulostamisen tämän,
me vain tulostaa tekstin.

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

524
00:25:25,270 --> 00:25:28,650
Viileä, joten nyt, kuten näette,
näemme vain kysymys.

525
00:25:28,650 --> 00:25:37,720
Ja jos muutan valtio tässä manuaalisesti
Edessä on väärä saamme 42 takaisin.

526
00:25:37,720 --> 00:25:39,720
>> Joten, jälleen, tämä komponentti
on oma valtio.

527
00:25:39,720 --> 00:25:43,440
Kuten painike tiedä,
se on ollut painetaan tai ei,

528
00:25:43,440 --> 00:25:46,080
tämä asia tietää, mitä on
etu- tai takana.

529
00:25:46,080 --> 00:25:48,320
Oletuksena se on päällä edessä.

530
00:25:48,320 --> 00:25:50,840
Ja sitten jos se on edessä,
me tulostaa kysymys.

531
00:25:50,840 --> 00:25:53,106
Jos se on takana, käymme
tulostaa vastaus.

532
00:25:53,106 --> 00:25:54,980
Niin, jälleen, tiedot
annettu, on sama.

533
00:25:54,980 --> 00:25:59,090
Se vain näyttää erilaiselta
perusteella, miten ohjelma se.

534
00:25:59,090 --> 00:26:02,670
Niinpä esimerkiksi, Facebook Messenger,
vaikka saat saman tietolähteen,

535
00:26:02,670 --> 00:26:05,170
se saattaa näyttää erilaiselta
koska valtio on erilainen.

536
00:26:05,170 --> 00:26:08,421
Etsit
eri henkilö viesti.

537
00:26:08,421 --> 00:26:10,930
>> OK, joten tämä on kaikki hyvin ja
hyvä, mutta nyt mitä oikeastaan

538
00:26:10,930 --> 00:26:15,940
tekee meistä voi muuttaa, onko
meidän kortti on edessä tai takana.

539
00:26:15,940 --> 00:26:19,010
Voimme tehdä tämän lisäämällä läppä
painiketta, painiketta kortti,

540
00:26:19,010 --> 00:26:22,950
läppä korttia, jos se on [kuultavissa].

541
00:26:22,950 --> 00:26:31,770
Joten lisätä painikkeen täällä, tämä
painiketta, ja tämä painike sanoo läppä.

542
00:26:31,770 --> 00:26:35,650
>> Ja niin juuri nyt, se
ei tee mitään.

543
00:26:35,650 --> 00:26:37,075
Se vain näyttää hienolta.

544
00:26:37,075 --> 00:26:43,650
Mitä voimme tehdä, on voimme lisätä klikkauksella
käsittelijä, onClick vastaa this.flip,

545
00:26:43,650 --> 00:26:44,820
ja me määritellä flip myöhemmin.

546
00:26:44,820 --> 00:26:47,120
Mutta pohjimmiltaan, onClick
on toiminto, joka

547
00:26:47,120 --> 00:26:48,675
saa kutsutaan, kun käyttäjä napsauttaa sitä.

548
00:26:48,675 --> 00:26:52,330
>> Joten painike tietää
kun se on ollut napsautetaan.

549
00:26:52,330 --> 00:26:54,750
Meni se on ollut napsautetaan,
se kääntää kortti.

550
00:26:54,750 --> 00:26:58,382
Se on ikään kuin oman
pizzalähetti.

551
00:26:58,382 --> 00:27:01,590
Olet kuin, okei, kun joku
kutsuu minua, minä toimittaa pizzaa, eikö?

552
00:27:01,590 --> 00:27:03,420
>> Voit rekisteröidä kuuntelija.

553
00:27:03,420 --> 00:27:04,530
Voit kuunnella tapahtuman.

554
00:27:04,530 --> 00:27:07,657
Saat kutsutaan, ja kun
tapahtuma tapahtuu, teet jotain.

555
00:27:07,657 --> 00:27:08,240
Saat pizzaa.

556
00:27:08,240 --> 00:27:11,480
Tässä tapauksessa, kun olet
napsautetaan, voit kääntää kortin.

557
00:27:11,480 --> 00:27:14,560
>> Ja niin meidän on määriteltävä
toiminto, joka kääntää kortti,

558
00:27:14,560 --> 00:27:17,930
niin me kirjoittaa, että oikeus
täällä, käännä toiminto.

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

560
00:27:20,850 --> 00:27:23,680
Ja niin mitä luulet flip tekee?

561
00:27:23,680 --> 00:27:27,180
Tämäkään saa kutsutaan, kun
me sitten läppä painiketta.

562
00:27:27,180 --> 00:27:29,406
Mitä toiminto läppä tehdä?

563
00:27:29,406 --> 00:27:34,136
>> Yleisö: Muuta this.state.front
todesta epätodeksi, false true.

564
00:27:34,136 --> 00:27:38,420
>> NEEL Mehta: Jep, niin toteutettava kaikki
this.front is-- edessä valtio on.

565
00:27:38,420 --> 00:27:40,930
Ota edessä valtio, jos
se on totta, tehdä siitä vääriä.

566
00:27:40,930 --> 00:27:42,530
Jos se on väärä, tee se totta, eikö?

567
00:27:42,530 --> 00:27:45,330
Joten kokeilla.

568
00:27:45,330 --> 00:27:48,240
>> Et voi muuttaa valtion
vain tekemällä this.state.

569
00:27:48,240 --> 00:27:50,380
Et voi tehdä tätä.

570
00:27:50,380 --> 00:27:52,030
Et voi tehdä sitä.

571
00:27:52,030 --> 00:27:55,810
Sinun täytyy käyttää toimintoa
nimeltään this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Joten voit sanoa this.setState edessä
paksusuolen tämä jos taas huutomerkki

573
00:28:03,230 --> 00:28:04,330
kohta tarkoittaa päinvastaista.

574
00:28:04,330 --> 00:28:07,420
Oletan, jos tämä. state.front
on totta, se tulee osoittautua vääriä.

575
00:28:07,420 --> 00:28:09,170
Joten me asettaa valtio
todesta epätodeksi.

576
00:28:09,170 --> 00:28:11,430
Jos se on väärä, käymme
aseta se false totta.

577
00:28:11,430 --> 00:28:17,210
>> Juuri huomaa että asetamme ja saada hieman
eri tavalla, ja niin yritetään tätä.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, katso tätä.

579
00:28:18,675 --> 00:28:21,810
Flip painike nyt
vaihtaa edestä taakse tilaan.

580
00:28:21,810 --> 00:28:24,990
>> Ja niin täällä on, jos näet
hieman taika reagoida.

581
00:28:24,990 --> 00:28:28,420
Kuten emme koskaan kertonut sitä se uudelleen tehdä.

582
00:28:28,420 --> 00:28:30,910
Emme koskaan kertonut sitä piirtää mitään.

583
00:28:30,910 --> 00:28:32,630
Jos teet tämän
ilman React, olisit

584
00:28:32,630 --> 00:28:34,588
ovat to-- kuten silloin
läppä painiketta napsautetaan,

585
00:28:34,588 --> 00:28:37,290
sinun täytyy kertoa se
manuaalisesti uudelleen tehdä, eikö?

586
00:28:37,290 --> 00:28:43,050
>> Reagoida on todella siistiä, että jos
antaa sille tietty tila ja ominaisuudet,

587
00:28:43,050 --> 00:28:45,760
se tulee aina tehdä
täsmälleen sama asia.

588
00:28:45,760 --> 00:28:48,690
Ja niin kun me koskaan muutamme
valtion ja ominaisuudet,

589
00:28:48,690 --> 00:28:50,819
reagoida juuri uudelleen tekee koko juttu.

590
00:28:50,819 --> 00:28:52,860
Se tietää, että on olemassa
yksi-yhteen vastaavuus

591
00:28:52,860 --> 00:28:57,270
välillä valtion ja parametrien ja HTML.

592
00:28:57,270 --> 00:29:00,110
Joten jos jompikumpi näistä
muutokset joukolla valtion,

593
00:29:00,110 --> 00:29:03,750
se muuttaa
palkka on uudelleen sulatettu.

594
00:29:03,750 --> 00:29:06,650
Ja niin pohjimmiltaan React on kuin
odottaa voit muuttaa.

595
00:29:06,650 --> 00:29:09,870
>> Aina se muuttuu jotain,
se tulee uudelleen tehdä koko sivun.

596
00:29:09,870 --> 00:29:12,480
Ja jos se kuulostaa tehoton,
se on koska se olisi,

597
00:29:12,480 --> 00:29:15,050
mutta reagoivat käyttää asia
nimeltään Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
Sen sijaan piirustus sivun suoraan, se
pitää virtuaalinen HTML puu muistissa.

599
00:29:19,950 --> 00:29:23,620
>> Tiedäthän, HTML on kuin puu,
kuten hierarkkinen tietorakenne.

600
00:29:23,620 --> 00:29:28,990
Se pitää väärennös puu muistissa,
ja kun päivittää sivu,

601
00:29:28,990 --> 00:29:31,940
se tulee tehdä toinen väärennös
puu, ja se tulee laskea

602
00:29:31,940 --> 00:29:35,120
mitä muuta se tarvitsee tehdä
sivu, jotta kaksi puuta yhtä suuri.

603
00:29:35,120 --> 00:29:38,540
Joten periaatteessa, se käytännössä
uudelleen tekee paljon.

604
00:29:38,540 --> 00:29:41,540
Ja sitten se vain kaltaisia ​​muutoksia
sivu pikku hienosäädön tarpeen,

605
00:29:41,540 --> 00:29:44,240
joten se on hyvin, hyvin, hyvin tehokas.

606
00:29:44,240 --> 00:29:46,970
>> Joten periaatteessa reagoi mitenkään
kun muutat jotain,

607
00:29:46,970 --> 00:29:49,010
se tulee uudelleen tehdä sivun käytännössä.

608
00:29:49,010 --> 00:29:52,830
Se tulee selvittää, mitä minun tarvitsee
muuttaa, jotta todellinen sivu heijastavat

609
00:29:52,830 --> 00:29:55,602
virtuaalinen sivu, ja se tulee tehdä.

610
00:29:55,602 --> 00:29:56,560
Se virtuaalinen DOM.

611
00:29:56,560 --> 00:29:59,350
Se on yksi suurimmista
piirteitä reagoida.

612
00:29:59,350 --> 00:30:00,880
>> Onko siinä järkeä?

613
00:30:00,880 --> 00:30:01,540
Kysymyksiä?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Yleisö: Miten
verrata vielä MVC

617
00:30:08,969 --> 00:30:10,760
että puhuimme
ennen kuin resurssit.

618
00:30:10,760 --> 00:30:13,527
>> NEEL Mehta: Joo, kysymys
on miten se verrata MVC?

619
00:30:13,527 --> 00:30:14,610
Voit kysyi resursseja.

620
00:30:14,610 --> 00:30:16,445
No, puhutaanpa miten se toimii.

621
00:30:16,445 --> 00:30:18,190
>> Vuonna MVC, sinun Mallin päivittämiseksi.

622
00:30:18,190 --> 00:30:20,560
Tässä tapauksessa meillä olisi korttimalli.

623
00:30:20,560 --> 00:30:24,540
Näkymä olisi
flip-painike, ja valvonta

624
00:30:24,540 --> 00:30:26,310
olisi läppä toiminto.

625
00:30:26,310 --> 00:30:28,450
Niin näkymä kertoisi
ohjain kääntää läppä.

626
00:30:28,450 --> 00:30:30,370
Flip kertoisi
malli muuttaa, eikö?

627
00:30:30,370 --> 00:30:33,915
>> Ja niin kun teet MVC, sinun
kuuntele malli muuttaa,

628
00:30:33,915 --> 00:30:37,150
ja te uudelleen tehdä näkymä vastaavasti.

629
00:30:37,150 --> 00:30:39,210
Tai et vain tarvitse kuin
on ohjain.

630
00:30:39,210 --> 00:30:42,418
Odota malli muuttaa, ja sitten
valita osan kuin asia

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

632
00:30:44,032 --> 00:30:45,740
Täällä meillä on yksi asia,
mutta iso app,

633
00:30:45,740 --> 00:30:48,510
sinun tarvitse kuin muistaa, mitä
muutos jokaisessa paikassa,

634
00:30:48,510 --> 00:30:50,290
joten se on vähän ärsyttävää.

635
00:30:50,290 --> 00:30:53,670
Ja niin React on mukavaa
koska sillä on varjo Dom.

636
00:30:53,670 --> 00:30:56,040
Se on varaa vain
kirjoittaa koko juttu.

637
00:30:56,040 --> 00:30:58,680
Sinun ei tarvitse valikoivasti
kuten arvata mitä päivittää.

638
00:30:58,680 --> 00:31:02,186
>> Facebookissa, jos haluat
saat uuden viestin, vuonna MVC,

639
00:31:02,186 --> 00:31:04,060
sinun täytyy muistaa,
OK, muuttaa asiat

640
00:31:04,060 --> 00:31:06,260
yläreunassa
sivu, viesti -kuvaketta.

641
00:31:06,260 --> 00:31:08,290
Myös pop uuden ikkunan alareunassa.

642
00:31:08,290 --> 00:31:10,070
Myös uusi asia samassa ikkunassa.

643
00:31:10,070 --> 00:31:11,060
Myös toistaa äänen.

644
00:31:11,060 --> 00:31:13,150
>> Se on paljon tavaraa
menossa ulos samaan aikaan.

645
00:31:13,150 --> 00:31:15,320
Joten jos et
on Shadow Dom, olisit

646
00:31:15,320 --> 00:31:18,740
täytyy tehdä, että käsin koska
et voi päästä eroon koko sivun.

647
00:31:18,740 --> 00:31:21,430
Voit ei ole varaa, niin sinulla on
muuttaa kunkin asia manuaalisesti,

648
00:31:21,430 --> 00:31:23,990
joka on todella ärsyttävää MVC.

649
00:31:23,990 --> 00:31:27,640
>> Joten ollakseen
säästäväinen, he valikoivasti

650
00:31:27,640 --> 00:31:30,750
päivittää sivu, joka on
tehokas, mutta myös ärsyttävää.

651
00:31:30,750 --> 00:31:34,002
Vuonna React, koska Shadow
Dom, saat molemmat asioita ilmaiseksi.

652
00:31:34,002 --> 00:31:35,710
Se on tehokas, koska
Shadow Dom.

653
00:31:35,710 --> 00:31:37,210
Pullonkaula päivittää sivu.

654
00:31:37,210 --> 00:31:40,292
Se ei tee puu manipulointia.

655
00:31:40,292 --> 00:31:41,250
Saat tehokkuutta.

656
00:31:41,250 --> 00:31:45,420
Saat myös helppokäyttöisyys, koska
jos vain kirjoittaa koko sivun,

657
00:31:45,420 --> 00:31:48,970
mutta vain tietää, okei, asiat
tulevat olemaan sivulla jonnekin.

658
00:31:48,970 --> 00:31:51,180
Se voi olla eri paikassa, mutta
se tulee olemaan sivulla, eikö?

659
00:31:51,180 --> 00:31:52,860
Joten sinun tarvitsee vain uudelleen sulatettu
koko asia käytännössä,

660
00:31:52,860 --> 00:31:55,540
ja saatat tehdä pari
muutoksia sivuun itse.

661
00:31:55,540 --> 00:31:57,850
>> Joten, jälleen, vuonna MVC sinua
olisi valittava

662
00:31:57,850 --> 00:32:01,840
välillä helppokäyttöisyys ja tehokkuus,
ja reagoida, saat molemmat.

663
00:32:01,840 --> 00:32:04,020
Joten on parempi.

664
00:32:04,020 --> 00:32:05,220
Käydä järkeen?

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

666
00:32:06,676 --> 00:32:12,080
>> OK, joten katsotaanpa Puhutaan
hieman noin vaihe 4,

667
00:32:12,080 --> 00:32:14,740
miten voimme upottaa komponentteja.

668
00:32:14,740 --> 00:32:16,260
Joten meillä on tämä oikeus nyt.

669
00:32:16,260 --> 00:32:19,420
Meillä on viileä pientä painiketta.

670
00:32:19,420 --> 00:32:23,157
Voimme kääntää sen takaisin ja
esiin, ja siinä kaikki se.

671
00:32:23,157 --> 00:32:24,990
Sanotaan haluamme
on toinen komponentti.

672
00:32:24,990 --> 00:32:28,730
Sanotaan meidän Kysymyskortin App pitäisi
sisältää luettelon kaikki kortit

673
00:32:28,730 --> 00:32:31,520
että sinulla on, niin se tarkoittaa, että
pitäisi olla toinen komponentti.

674
00:32:31,520 --> 00:32:32,970
No, ehkä kutsua sitä luettelonäkymässä.

675
00:32:32,970 --> 00:32:36,200
Tehdään lista mielestä
rinnalla CardView,

676
00:32:36,200 --> 00:32:39,680
ja tämä lista katsella ja CardView
toivomaa yhdessä.

677
00:32:39,680 --> 00:32:43,190
Ja voit yhdistellä niitä
jotta meidän sovellus sinulle.

678
00:32:43,190 --> 00:32:45,160
>> Joten ensimmäinen, tehkäämme
pari korttinsa oikein.

679
00:32:45,160 --> 00:32:46,370
Sanotaan, mitä kortteja?

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

681
00:32:49,619 --> 00:32:51,910
Ja juuri niin minulla ei tarvitse
pitkästyttää teitä kirjoittamalla sen,

682
00:32:51,910 --> 00:32:53,410
Olen juuri menossa kopioida täältä.

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

684
00:33:01,664 --> 00:33:03,580
Ja niin aion ei
antaa se vain yksi kortti.

685
00:33:03,580 --> 00:33:06,910
Aion antaa sille erilaisia ​​kortteja.

686
00:33:06,910 --> 00:33:10,240
Joten ensimmäinen apps
menossa tauko nyt.

687
00:33:10,240 --> 00:33:14,717
Selvä, joten aiomme tehdä
tämä pystyy käsittelemään useita kortteja.

688
00:33:14,717 --> 00:33:17,800
Joten ensimmäinen, me aiomme antaa sille, ei
vain yksi kortti, vaan joukko kortteja,

689
00:33:17,800 --> 00:33:18,700
kuten luettelo kortteja.

690
00:33:18,700 --> 00:33:20,980
Ja tässä tapauksessa, meillä on kolme.

691
00:33:20,980 --> 00:33:27,280
>> Selvä, joten joten sovellus on
menossa listan kortteja,

692
00:33:27,280 --> 00:33:29,870
ja se tulee päättää, mitkä
yksi osoittaa, että CardView.

693
00:33:29,870 --> 00:33:33,740
CardView voi vain
tehdä yhden kortin, mutta sovellus

694
00:33:33,740 --> 00:33:37,610
saa luettelon kaikki kortit, eikö?

695
00:33:37,610 --> 00:33:40,820
>> Joten kun selvittää yksi
kortti antaa CardView,

696
00:33:40,820 --> 00:33:44,660
miten arvata saatat pystyä
tehdä päätös, jolla kortti

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

698
00:33:47,064 --> 00:33:49,980
Antaa sinulle vihjeen, se on tilapäisesti
Sinulta katselu tietty kortti.

699
00:33:49,980 --> 00:33:53,260
Jos päivitä sivu, luultavasti
vain mennä takaisin ensimmäiseen kortti.

700
00:33:53,260 --> 00:33:55,464
Se on OK, koska se on väliaikaista.

701
00:33:55,464 --> 00:33:56,630
Mikä tekniikka voisi käytämme?

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

703
00:34:02,534 --> 00:34:08,760
>> Yleisö: Voisit tehdä muuttuja
joten aivan kuten sinulla oli edessä.

704
00:34:08,760 --> 00:34:11,989
Onko tämä totta, voisit
on nykyinen kortti on 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL Mehta: Joo, niin me
haluavat valtion, eikö?

706
00:34:14,150 --> 00:34:16,080
Voit käyttää valtion
komponentti selvittää

707
00:34:16,080 --> 00:34:17,288
joka kortti haluamme saada.

708
00:34:17,288 --> 00:34:19,290
Kuin meillä on lista
kaikki kortit, käymme

709
00:34:19,290 --> 00:34:21,630
käyttää valtion selvittää
yksi ensimmäinen kortti,

710
00:34:21,630 --> 00:34:23,710
toinen kortti, kolmas kortti, ja niin edelleen.

711
00:34:23,710 --> 00:34:28,760
>> Joten sovellus joten sovellus saa
on getInitialState toiminto,

712
00:34:28,760 --> 00:34:35,020
getInitialState toiminto paluu.

713
00:34:35,020 --> 00:34:39,929
Ja me vain sanoa activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Joten nyt meidän app on oma valtio.

715
00:34:42,889 --> 00:34:47,179
>> Ja niin nyt tehdä, selvittää
kortti, mennään vain array

716
00:34:47,179 --> 00:34:49,969
ja napata asia tuohon indeksi.

717
00:34:49,969 --> 00:34:53,580
Valitse kortti yhtä suuri this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Joten kuten näette täällä, rekvisiitta ja
valtio todella toimivat yhdessä.

720
00:35:00,162 --> 00:35:08,990
Joten nyt meillä on activeCard,
me kutsumme sitä activeCard,

721
00:35:08,990 --> 00:35:10,470
ja katsotaan, jos tämä toimii.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Voi, että oli teksti virhe.

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
>> Viileä, juu, joten nyt olimme takaisin
missä olimme ennen, eikö?

729
00:35:54,840 --> 00:35:57,100
Sama vanha ohjelma paitsi
Nyt voimme tukea

730
00:35:57,100 --> 00:35:59,390
Luettelo kortteja, ei vain yksi kortti.

731
00:35:59,390 --> 00:36:04,130
Ja nyt, taas, jos muutamme
activeIndex, voimme mennä 0-1,

732
00:36:04,130 --> 00:36:07,330
ja nyt, että toinen kortti,
ja sitten menimme 0.

733
00:36:07,330 --> 00:36:10,390
Joten tässä on uusi
souped-up versio meidän.

734
00:36:10,390 --> 00:36:16,000
>> OK, joten Nyt on lista, että
näyttää kaikki kortit ohjelmaa,

735
00:36:16,000 --> 00:36:19,980
joten teemme uusi
osatekijä nimeltä ListView.

736
00:36:19,980 --> 00:36:22,155
Anna ListView vastaa react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Joten haluamme tehdä järjestämättömiä
lista luettelokohteen jokaisen kortin.

739
00:36:38,800 --> 00:36:41,490
Ja niin meillä on nippu kortteja.

740
00:36:41,490 --> 00:36:44,990
Haluamme yksi luettelokohde
jokaista kortti, eikö?

741
00:36:44,990 --> 00:36:47,490
Voisimme tehdä varten silmukka tai
jotain tehdä uusi lista kohta.

742
00:36:47,490 --> 00:36:50,522
Mutta miten teet sen
Reagoida käytä asia sanottu kartan.

743
00:36:50,522 --> 00:36:57,150
Kartta on työkalu tai toiminnon käytät
että jokaisen kohteen, kulkee jonkin toiminnon,

744
00:36:57,150 --> 00:36:59,510
ottaa paluu arvo, ja
antaa sinulle että takaisin.

745
00:36:59,510 --> 00:37:06,310
>> Jotta Meillä on esimerkiksi array
1, 2, 3.map function-- ja tämä

746
00:37:06,310 --> 00:37:12,120
on vain lyhenne
function-- x nuoli X kertaa X.

747
00:37:12,120 --> 00:37:16,110
Tämä kertoo, jokaiselle numero
1, 2, 3, ota se.

748
00:37:16,110 --> 00:37:17,800
Neliö se, ja anna se takaisin.

749
00:37:17,800 --> 00:37:22,090
Mitä mieltä olet 1,
2, 3.map X menee X kertaa

750
00:37:22,090 --> 00:37:25,480
X antaa sinulle takaisin antanut
että tämä toiminto on

751
00:37:25,480 --> 00:37:27,680
ajaa jokainen osa, joka array.

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

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

754
00:37:32,190 --> 00:37:35,709
>> NEEL Mehta: Jep, 1, 4, 9
koska teet 1 kertaa 1.

755
00:37:35,709 --> 00:37:36,500
Joka antaa sinulle yhden.

756
00:37:36,500 --> 00:37:37,690
Se on ensimmäinen elementti.

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

758
00:37:38,530 --> 00:37:39,570
Se toinen elementti.

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

760
00:37:40,310 --> 00:37:41,540
Se kolmas elementti.

761
00:37:41,540 --> 00:37:42,640
Käydä järkeen?

762
00:37:42,640 --> 00:37:45,015
Joten kartta on tekniikan avulla
käyttää toiminnallisia ohjelmoijat,

763
00:37:45,015 --> 00:37:48,090
uusi tyyli
ohjelmointi tehdä jotain

764
00:37:48,090 --> 00:37:50,500
jokaiseen elementti luetteloon.

765
00:37:50,500 --> 00:37:51,970
Ja niin tämä kuulostaa tutulta.

766
00:37:51,970 --> 00:37:53,370
Meillä on lista kortteja.

767
00:37:53,370 --> 00:37:56,860
Haluamme saada luettelokohteen jokaiselle
yksi, niin me vain käyttää karttaa täällä.

768
00:37:56,860 --> 00:38:00,250
Me sanoa, anna luettelo tasavertaisten
this.props, kortteja, kartta.

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

770
00:38:10,580 --> 00:38:15,070
>> Ja niin annetaan kortti, olemme
menossa tuottaa luettelokohteen

771
00:38:15,070 --> 00:38:17,580
kanssa, että kortin sisältö puoli.

772
00:38:17,580 --> 00:38:20,660
Sanotaan vain haluamme antaa ulos
kortit kysymys niin card.question.

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

774
00:38:24,990 --> 00:38:30,649
Joten tämä lista sisältää
joukko LI: n tai List kohteet

775
00:38:30,649 --> 00:38:32,440
missä on yksi lista
Tuote jokaiselle kortti,

776
00:38:32,440 --> 00:38:35,150
ja joka sisältää kortteja kysymys.

777
00:38:35,150 --> 00:38:37,640
Käydä järkeen?

778
00:38:37,640 --> 00:38:39,450
>> Viileä, joten nyt katsotaanpa
itse tulostaa että ulos.

779
00:38:39,450 --> 00:38:46,521
Joten palaamme ul.

780
00:38:46,521 --> 00:38:49,020
Inside että Järjestämätön lista,
me vain kiinni koko lista

781
00:38:49,020 --> 00:38:49,890
että he antoivat meille.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Selvä, joten nyt tämä
luettelonäkymä toimii vain löytää.

785
00:38:56,060 --> 00:38:59,842
Kysyttävää luettelonäkymästä?

786
00:38:59,842 --> 00:39:01,270
Sinulla on nippu kortteja.

787
00:39:01,270 --> 00:39:02,800
Teet luettelokohteen jokaisen kortin.

788
00:39:02,800 --> 00:39:05,466
Ja laitat ne sisällä järjestämättömiä
lista, ja annat sen takaisin.

789
00:39:05,466 --> 00:39:09,410
Joten Nyt toimia niin me upottaa
tämä sisällä app,

790
00:39:09,410 --> 00:39:14,310
jotta voimme tehdä tämän, luettelonäkymässä.

791
00:39:14,310 --> 00:39:17,070
Mitä väitettä me siirtää luettelonäkymään?

792
00:39:17,070 --> 00:39:18,320
Mitä ominaisuuksia annamme sen?

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

794
00:39:25,111 --> 00:39:26,860
Muista, jos annat
se nippu kortteja,

795
00:39:26,860 --> 00:39:29,590
se tulee tehdä lista
katsella niitä kortteja.

796
00:39:29,590 --> 00:39:32,267
Joten mitä jätämme
täällä argumentti?

797
00:39:32,267 --> 00:39:33,350
Yleisö: luettelo kortteja?

798
00:39:33,350 --> 00:39:37,130
NEEL Mehta: Joo, niin kortit
vastaa this.props.cards, eikö?

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

800
00:39:39,850 --> 00:39:44,370
Ja niin ainoa ongelma
on, että voit vain

801
00:39:44,370 --> 00:39:48,600
kääntyi yksi huipputason osa renderöinti,
joten sinun täytyy kääri se div.

802
00:39:48,600 --> 00:39:49,100
Se on outoa.

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

804
00:39:56,190 --> 00:39:57,530
Joten onko se.

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

806
00:40:09,790 --> 00:40:10,560
Se toimii?

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

808
00:40:29,774 --> 00:40:31,030
>> Jep, siellä voit mennä.

809
00:40:31,030 --> 00:40:33,700
Joten nyt meillä on lista
kortteja alareunassa,

810
00:40:33,700 --> 00:40:36,180
ja sitten meillä on
CardView itse päälle,

811
00:40:36,180 --> 00:40:40,486
ja että flip välillä
kaksi puolta kortin.

812
00:40:40,486 --> 00:40:42,610
Nyt ei järkeä miten tein sen?

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

814
00:40:45,165 --> 00:40:46,790
Joo, niin taas, meillä on kaksi komponenttia.

815
00:40:46,790 --> 00:40:49,666
Ensimmäinen komponentti tulostaa
välein kortti luettelosta.

816
00:40:49,666 --> 00:40:50,540
Se luettelonäkymässä.

817
00:40:50,540 --> 00:40:54,770
Ja toinen komponentti
tulostaa vain että kortti.

818
00:40:54,770 --> 00:40:58,840
Jos annat sille tietty kortti, se tulee
tulostaa tietoa että kortti

819
00:40:58,840 --> 00:41:01,870
ja voit kääntää edestakaisin.

820
00:41:01,870 --> 00:41:05,850
>> Joten jos haluamme, voimme yrittää ja puhua
noin lisäämällä joitakin uusia ominaisuuksia tämän.

821
00:41:05,850 --> 00:41:09,482
Muuten voimme puhua hieman
noin nopeuden reaktorin,

822
00:41:09,482 --> 00:41:11,190
tai voimme vastata
kysymyksiä saatat olla

823
00:41:11,190 --> 00:41:15,050
koska nämä ovat kaikki keskeiset osat
ja reagoivat, että haluan puhua.

824
00:41:15,050 --> 00:41:16,540
Voimme mennä eteenpäin.

825
00:41:16,540 --> 00:41:17,590
Voimme vastata kysymyksiin.

826
00:41:17,590 --> 00:41:18,560
Mitä ikinä haluatkaan.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Yleisö: Sopiiko
JSX normaalissa JavaScript?

829
00:41:24,205 --> 00:41:27,150
Vai onko se jotain, että
mukana [äänetön]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL Mehta: kysymys on CAN
käytät JSX normaali JavaScript?

831
00:41:30,760 --> 00:41:32,620
Vastaus on kyllä.

832
00:41:32,620 --> 00:41:41,070
JSX on vain tapa se vie
JavaScript että on HTML sen sisällä,

833
00:41:41,070 --> 00:41:44,215
ja se kokoaa osaksi JavaScriptiä
ei ole HTML sen sisälle.

834
00:41:44,215 --> 00:41:47,880
Niin huomaa that-- niin huomaa täällä.

835
00:41:47,880 --> 00:41:50,820
Tämä näyttää olet kuin div
ja sinulla on tavaraa sisällä siitä.

836
00:41:50,820 --> 00:41:54,970
>> Että se kerää JavaScriptiä
kuten tuottaa sama asia.

837
00:41:54,970 --> 00:41:59,590
Luulen, mitä minä sanon, että
JSX on vain syntaktinen, kuin se on

838
00:41:59,590 --> 00:42:03,530
esiprosessori JavaScript paljon
kuten PHP on esikääntäjä HTML.

839
00:42:03,530 --> 00:42:05,490
JSC on esiprosessori
JavaScript, jonka avulla

840
00:42:05,490 --> 00:42:12,970
laitat HTML sisällä JavaScript.

841
00:42:12,970 --> 00:42:16,425
Joten jos sinulla on oikeus muuntaja
joka on asia, jota kutsutaan [kuulumaton],

842
00:42:16,425 --> 00:42:17,300
joka tulee muuttamaan.

843
00:42:17,300 --> 00:42:19,360
Oikeus esikäsittelijään,
se tulee antaa sinun tehdä sitä.

844
00:42:19,360 --> 00:42:20,235
>> Yleisö: [äänetön]

845
00:42:20,235 --> 00:42:23,026
NEEL Mehta: Yleensä et tarvitse
laittaa HTML sisälle JavaScript

846
00:42:23,026 --> 00:42:24,110
ellei teette reagoida.

847
00:42:24,110 --> 00:42:27,146
Mutta voit tehdä sen joka tapauksessa.

848
00:42:27,146 --> 00:42:27,645
Jep?

849
00:42:27,645 --> 00:42:29,353
>> Yleisö: mielestäni sinun
oli kuvattu React

850
00:42:29,353 --> 00:42:31,970
funktionaalisena ohjelmointikielen.

851
00:42:31,970 --> 00:42:35,646
Olemme oppinut C CS50.

852
00:42:35,646 --> 00:42:38,032
On C myös funktionaalinen kieli?

853
00:42:38,032 --> 00:42:39,990
NEEL Mehta: Joten kysymys
on noin toiminnallinen

854
00:42:39,990 --> 00:42:43,010
vs. toinen asia sanottu
välttämätöntä tai menettelyyn ohjelmointi.

855
00:42:43,010 --> 00:42:44,820
On kahdenlaisia ​​ohjelmia suosittuja.

856
00:42:44,820 --> 00:42:48,550
Yksi kutsutaan menettelyyn, joka
on kyse haluaisit tehdä komentoja,

857
00:42:48,550 --> 00:42:51,510
ja yksi on funktionaalinen, joka on kaikki
noin ottaa tehtävät ja ottaa

858
00:42:51,510 --> 00:42:52,930
tulon ja lähdön näiden.

859
00:42:52,930 --> 00:42:55,930
Reagoida on toiminnallinen paradigma.

860
00:42:55,930 --> 00:42:58,010
C on hyvin menettelyyn paradigma.

861
00:42:58,010 --> 00:43:02,360
>> Ja kuten esimerkiksi C esimerkiksi,
et tee tätä julistava tavalla

862
00:43:02,360 --> 00:43:04,390
tehdä ohjelman, eikö?

863
00:43:04,390 --> 00:43:06,826
Sinun on sanottava, tulosta tämä.

864
00:43:06,826 --> 00:43:07,950
Muuta tämä tietorakenne.

865
00:43:07,950 --> 00:43:08,530
Tulosta tämä.

866
00:43:08,530 --> 00:43:10,160
Kyse komennot.

867
00:43:10,160 --> 00:43:12,640
>> Vuonna React, siellä ei ole
että monet komentoja.

868
00:43:12,640 --> 00:43:15,145
Kyse ottaa
komponentit laitat yhteen.

869
00:43:15,145 --> 00:43:16,300
He ovat kuin toimintoja.

870
00:43:16,300 --> 00:43:26,360
Sinulla kuten toiminto
nimeltään CardView,

871
00:43:26,360 --> 00:43:28,680
joka on funktio
että on panos, tuotos,

872
00:43:28,680 --> 00:43:30,660
ja niin React on kaikki
tästä filosofiasta

873
00:43:30,660 --> 00:43:32,700
meitä having-- sinulla on tietoja.

874
00:43:32,700 --> 00:43:34,910
Ohitat sen kautta
algoritmi, ja se tulee

875
00:43:34,910 --> 00:43:36,800
lähtö HTML, että olet
vain painettu sivu,

876
00:43:36,800 --> 00:43:39,180
ja niin sinun täytyy
rakentaa sitä pala palalta.

877
00:43:39,180 --> 00:43:42,800
>> Joten tehdä metafora mitä
Sanoin aiemmin, osaat

878
00:43:42,800 --> 00:43:47,050
Facebook jos saat viestin,
ja voit valita, mitä osia päivittää,

879
00:43:47,050 --> 00:43:47,882
se menettelyyn.

880
00:43:47,882 --> 00:43:48,840
Se on välttämätöntä, eikö?

881
00:43:48,840 --> 00:43:49,806
OK, sain viestin.

882
00:43:49,806 --> 00:43:50,930
Vaihdetaan tili siellä.

883
00:43:50,930 --> 00:43:52,110
>> Katsotaanpa pop ikkuna täällä.

884
00:43:52,110 --> 00:43:52,780
Vaihdetaan tili siellä.

885
00:43:52,780 --> 00:43:53,700
Katsotaanpa piirtää täällä.

886
00:43:53,700 --> 00:43:55,220
Se menettelytapaa.

887
00:43:55,220 --> 00:44:00,240
>> Sitähän asioita, kuten Kulmikas,
Boost, selkäranka, muissa puitteissa käyttää.

888
00:44:00,240 --> 00:44:01,200
React on toimiva.

889
00:44:01,200 --> 00:44:03,324
Se on hyvin eri tavalla
ajatella asioita.

890
00:44:03,324 --> 00:44:07,950
Se ottaa tämän ajatuksen katsotaanpa
toimintoja tai algoritmeja, jooko

891
00:44:07,950 --> 00:44:08,800
antaa sille tietoja.

892
00:44:08,800 --> 00:44:11,820
Se tulee sylkemään mitä se
pitäisi olla, ja tietokone

893
00:44:11,820 --> 00:44:13,490
hoitaa punnitsemalla.

894
00:44:13,490 --> 00:44:15,890
Et käsitellä sitä itse.

895
00:44:15,890 --> 00:44:18,470
Joka tekee vähän järkeä?

896
00:44:18,470 --> 00:44:18,970
Joo?

897
00:44:18,970 --> 00:44:24,180
>> Yleisö: Toimivassa kieli,
kaikki tapahtuu kerralla?

898
00:44:24,180 --> 00:44:26,800
>> NEEL Mehta: Ei, asiat tapahtuvat järjestyksessä.

899
00:44:26,800 --> 00:44:29,320
Kuten tässä siellä on vielä
tilata, mutta se ei

900
00:44:29,320 --> 00:44:32,390
tapahtua järjestyksessä kuten
Suosittelen, komento, komento.

901
00:44:32,390 --> 00:44:36,459
Se tapahtuu järjestyksessä
toiminto antaa sinulle tuotos.

902
00:44:36,459 --> 00:44:37,750
Laita että toiseen toiminto.

903
00:44:37,750 --> 00:44:39,550
Laita että toiseen
funktio, toisen toiminnon.

904
00:44:39,550 --> 00:44:41,470
>> Jos et CS51, luultavasti
oppia toiminnallisia ohjelmia

905
00:44:41,470 --> 00:44:42,886
hieman ulos kuulu tämän.

906
00:44:42,886 --> 00:44:45,090
Mutta pohjimmiltaan, mitä tekee
Reagoi viileä ei ole vain

907
00:44:45,090 --> 00:44:46,840
yksisuuntainen tietovirta
ja virtuaalinen Dom,

908
00:44:46,840 --> 00:44:48,700
mutta myös tämä ajatus
Functional Programming.

909
00:44:48,700 --> 00:44:51,720
Ja funktionaalinen ohjelmointi on erittäin helppoa
säveltää ja tehdä cool stuff pois,

910
00:44:51,720 --> 00:44:53,844
ja se on erittäin helppo ajatella
noin ja syy noin.

911
00:44:53,844 --> 00:44:55,450
Joten se on toinen hyvä arvotaan reagoida.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Kysyttävää?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Joo?

916
00:45:03,150 --> 00:45:06,840
>> Yleisö: Tuota, miksi te
Käytä anna toisin kuin var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL Mehta: Joten kysymys on
Miksi käytät anna sijasta var?

918
00:45:10,450 --> 00:45:13,220
Tämä on asia, jota kutsutaan
ES6 tai ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Se on uusi versio JavaScript.

920
00:45:15,820 --> 00:45:19,050
On joukko teknisistä syistä,
mutta let on parempi versio var.

921
00:45:19,050 --> 00:45:20,724
>> Se miten julistaa muuttujia.

922
00:45:20,724 --> 00:45:21,390
Voit käyttää antaa.

923
00:45:21,390 --> 00:45:22,140
Voit käyttää var.

924
00:45:22,140 --> 00:45:23,825
Anna on joukko teknisiä
reasons-- voit katsoa niitä

925
00:45:23,825 --> 00:45:25,610
up later-- miksi se on parempi.

926
00:45:25,610 --> 00:45:28,780
Pohjimmiltaan, ES6 on muutamia kivoja
uusi syntaksi, joitakin uusia ominaisuuksia

927
00:45:28,780 --> 00:45:30,720
päälle vanhan JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Meillä on siis kuin viisi minuuttia.

929
00:45:32,782 --> 00:45:34,990
Halusin vain puhua
yksi asia todella nopeasti.

930
00:45:34,990 --> 00:45:36,450
Jos sinulla olisi kysyttävää,
Puhutaanpa siitä jälkeen.

931
00:45:36,450 --> 00:45:38,366
Mutta vain niin tämä saa
kiinni kamerassa, minä vain

932
00:45:38,366 --> 00:45:41,550
halua puhua vähän siitä, miten
todella käyttää reagoivat apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Jos menet täällä,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
tämä on kotisivu reagoida ja
se näytän sinulle, miten voit itse käyttää

936
00:46:03,320 --> 00:46:05,320
Reagoivat sivuillesi.

937
00:46:05,320 --> 00:46:08,845
Pohjimmiltaan se on vähän
monimutkainen yrittää asentaa reagoida.

938
00:46:08,845 --> 00:46:12,300
Se ei ole niin helppoa kuin vain vetää
ja pudota Javascriptin siellä.

939
00:46:12,300 --> 00:46:15,890
>> Sinulla on oltava oma muuntaja
perustaa, joka, kuin ennen,

940
00:46:15,890 --> 00:46:18,120
käännä JSX osaksi
normaali JavaScript.

941
00:46:18,120 --> 00:46:21,030
Sinun on asia, joka tulee
koota sinun ES6 normaaliksi.

942
00:46:21,030 --> 00:46:24,720
JavaScript siellä on paljon liikkuvia
osat sinun täytyy tehdä, joten ei asia

943
00:46:24,720 --> 00:46:27,200
nimeltään Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Ja tämä on komentorivi työkalu, joka tulee
auttaa rakennustelineet ulos React

945
00:46:31,110 --> 00:46:32,380
hankkeet helposti.

946
00:46:32,380 --> 00:46:38,660
>> Joten voit lukea tästä
myöhemmin, mutta on olemassa joitakin työkaluja

947
00:46:38,660 --> 00:46:40,160
että Yeoman tarjoaa.

948
00:46:40,160 --> 00:46:43,280
He avulla voit luoda React
App kaiken rakennettu.

949
00:46:43,280 --> 00:46:46,030
Kuten se täytyy rakennettu
vuonna, komponentteja rakennettu.

950
00:46:46,030 --> 00:46:47,880
Se täytyy sinun muuntaja rakennettu.

951
00:46:47,880 --> 00:46:50,699
Heillä on paljon hienoja
juttuja rakennettu automaattisesti

952
00:46:50,699 --> 00:46:52,240
käyttämällä näitä asioita kutsutaan generaattorit.

953
00:46:52,240 --> 00:46:54,620
>> Joten lukea tästä, jos haluat.

954
00:46:54,620 --> 00:46:59,110
Mene vain Yeoman, Y-E-O-M--N, ja
Löydät generaattorit kuten nämä.

955
00:46:59,110 --> 00:47:01,263
Ja generaattorit kuten
Näiden, haluat vain yksi

956
00:47:01,263 --> 00:47:03,010
on pari komentorivikomentoja.

957
00:47:03,010 --> 00:47:05,530
Se tulee rakennustelineet ulos
Koko React sovellus sinulle.

958
00:47:05,530 --> 00:47:10,470
Se tulee saada kaikki käsikirja putket,
ja murisija työstä puolestasi,

959
00:47:10,470 --> 00:47:13,010
ja siksi juuri keskittyä
juuri kirjallisesti reagoida.

960
00:47:13,010 --> 00:47:16,739
>> Joten periaatteessa rakentaa
Reagoida sovellus on triviaali.

961
00:47:16,739 --> 00:47:19,530
Se langallinen kaikki yhdessä, mutta siellä
ovat työkaluista, että saat tehdä sen sinulle.

962
00:47:19,530 --> 00:47:23,070
Joten jos haluat tehdä React
app, kokeile niin.

963
00:47:23,070 --> 00:47:26,360
Jos haluat vain kokeilla,
voit kokeilla tätä CodePen

964
00:47:26,360 --> 00:47:28,550
koska tämä CodePen on
kaikki reagoivat johdot.

965
00:47:28,550 --> 00:47:30,240
Olen tehnyt kaiken työn puolestasi jo.

966
00:47:30,240 --> 00:47:34,610
>> Joten jos haluat tehdä kuin
tuotanto vapauttamaan React app,

967
00:47:34,610 --> 00:47:37,220
kokeile yksi näistä generaattorit.

968
00:47:37,220 --> 00:47:40,240
Jos haluat vain pelata
ympärillä, se on usein kannattaa vain

969
00:47:40,240 --> 00:47:44,490
kuten kokeile pelata ympäriinsä CodePen täällä.

970
00:47:44,490 --> 00:47:45,470
Kuulostaa hyvältä?

971
00:47:45,470 --> 00:47:45,970
Viileä.

972
00:47:45,970 --> 00:47:47,890
>> Niin, että kaikki minulla on.

973
00:47:47,890 --> 00:47:52,470
Jälleen kaikki koodi ja esimerkit ovat
olemaan tällä sivustolla täällä.

974
00:47:52,470 --> 00:47:55,509
Joten, jälleen, emme puhu
noin paljon syntaksi React,

975
00:47:55,509 --> 00:47:57,550
mutta löytää kaikki
pikku syntaktisia tiedot,

976
00:47:57,550 --> 00:48:00,320
se kaikki tulee olemaan saatavilla
tällä sivustolla täällä.

977
00:48:00,320 --> 00:48:02,660
>> Joten Suosittelen kuten
ottaa ensimmäinen askel.

978
00:48:02,660 --> 00:48:06,277
Laita se omaan CodePen.

979
00:48:06,277 --> 00:48:08,110
Kokeile työskentelyä tehdäksemme
sen toisessa vaiheessa.

980
00:48:08,110 --> 00:48:11,310
On Neljännessä vaiheessa, ja vain
nähdä, missä saat siitä.

981
00:48:11,310 --> 00:48:14,840
>> Muuta kysyttävää, tarkista
että sivu tai sähköpostitse minulle.

982
00:48:14,840 --> 00:48:16,490
Se on minun email.

983
00:48:16,490 --> 00:48:19,885
Mutta Mielelläni auttaa sinua kaikissa
kysymyksiä sinulla voi olla noin reagoida.

984
00:48:19,885 --> 00:48:21,010
Niin juu, siinä kaikki mitä on.

985
00:48:21,010 --> 00:48:23,410
Kiitos kaikille erittäin paljon
katsellen tai osallistumisesta.

986
00:48:23,410 --> 00:48:26,820
Ja otan kysyttävää
saatat olla tämän jälkeen nyt.

987
00:48:26,820 --> 00:48:29,140
Joten kiitos kaikille katsomassa.

988
00:48:29,140 --> 00:48:31,270