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

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL Mehta: Këtu ajo shkon.

4
00:00:07,275 --> 00:00:11,070
>> E pra, të gjithë, të mirëpritur për web
Apps të ardhmen me reagojnë.

5
00:00:11,070 --> 00:00:11,870
Kjo është CS50.

6
00:00:11,870 --> 00:00:12,930
Emri im është Neel.

7
00:00:12,930 --> 00:00:17,689
Unë jam një AT për CS50 dhe një i paedukuar mjaft
në Kolegjin dhe një shumë, shumë e Harvardit

8
00:00:17,689 --> 00:00:18,730
zhvilluesi i pasionuar web.

9
00:00:18,730 --> 00:00:20,730
Kështu që unë jam shumë emocionuese për të
të jetë duke folur me ju sot,

10
00:00:20,730 --> 00:00:24,550
nëse ju jeni këtu apo në shtëpi
shikuar, për të reaguar, që është, përsëri

11
00:00:24,550 --> 00:00:27,270
siç thashë, e ardhmja e aplikacioneve web.

12
00:00:27,270 --> 00:00:29,055
>> Pra Reago është një kornizë web.

13
00:00:29,055 --> 00:00:30,930
Dhe si unë kam qenë duke u thënë
për disa njerëz këtu,

14
00:00:30,930 --> 00:00:33,400
një kornizë është vetëm një
grup i mjeteve ju mund të përdorni

15
00:00:33,400 --> 00:00:35,770
për të strukturuar dhe për të ndërtuar app tuaj web.

16
00:00:35,770 --> 00:00:39,010
Dhe Apps web janë, përsëri, faqet e internetit
që janë interaktive si Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, çfarëdo.

18
00:00:42,330 --> 00:00:45,590
>> Pra Facebook është një kornizë web
që është zhvilluar nga Facebook

19
00:00:45,590 --> 00:00:48,060
nja dy vjet back-- reagojnë është.

20
00:00:48,060 --> 00:00:50,830
Ajo është që përdoren në
Facebook në aplikacionet e tyre celular

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

22
00:00:52,460 --> 00:00:56,350
Khan Academy është një tjetër
adoptues shquar në fillim të reagojnë.

23
00:00:56,350 --> 00:00:58,630
>> Ka qenë me të vërtetë duke u
jashtëzakonisht popullor.

24
00:00:58,630 --> 00:01:03,420
Në qoftë se ju përdorni ndonjëherë gjëra të tilla si këndor apo
Shtylla kurrizore, kjo është e të njëjtës familje,

25
00:01:03,420 --> 00:01:05,830
por ajo ka që nga larg
lë pas popullaritetin e tyre.

26
00:01:05,830 --> 00:01:06,890
Kjo është gjëja e nxehtë të ri.

27
00:01:06,890 --> 00:01:09,590
Është me të vërtetë, me të vërtetë i madh.

28
00:01:09,590 --> 00:01:13,470
>> Dhe kështu Reago është e mirë jo vetëm si një
Korniza web për ndërtimin interfaces.

29
00:01:13,470 --> 00:01:16,020
Është e mirë për ndërtimin e web interfaces.

30
00:01:16,020 --> 00:01:18,350
Ka edhe një gjë
quajtur Reago Native që

31
00:01:18,350 --> 00:01:22,200
ju lejon të ndërtuar ndërfaqet
për Android dhe iOS

32
00:01:22,200 --> 00:01:26,390
dhe platforma ndoshta të tjera në të ardhmen
duke përdorur vetëm njëjtin kod në JavaScript.

33
00:01:26,390 --> 00:01:31,130
Ju mund të përdorni të njëjtën gjë e saktë
Kodi JavaScript që të merr faqet e internetit,

34
00:01:31,130 --> 00:01:33,040
që të merr Apps Android dhe iOS Apps.

35
00:01:33,040 --> 00:01:35,000
>> Është një kohë shumë, shumë emocionuese.

36
00:01:35,000 --> 00:01:37,070
Kjo është një mundësi e vërtetë, me të vërtetë cool.

37
00:01:37,070 --> 00:01:42,020
Është me të vërtetë një web universale
mjet zhvillimi interface,

38
00:01:42,020 --> 00:01:44,420
kështu që është një shumë, shumë
Gjëja më e rëndësishme të dini.

39
00:01:44,420 --> 00:01:46,949
Dhe, ndërsa unë u thënë njerëzve
para, kjo, unë mendoj,

40
00:01:46,949 --> 00:01:48,990
do të ndryshojë mënyrën se si ne
të ndërtuar Apps web përgjithmonë.

41
00:01:48,990 --> 00:01:55,820
Pra, kjo është ndoshta një hiperbolë pak, por unë
mendoj se kjo është një gjë shumë e mirë për të dini.

42
00:01:55,820 --> 00:01:57,580
>> OK, kështu që çfarë është reagojnë?

43
00:01:57,580 --> 00:02:01,020
Reago është një kornizë që ju mund të
përdorin për ndërtimin ndërfaqe.

44
00:02:01,020 --> 00:02:03,240
Një interface është, përsëri,
një faqe interneti, e drejtë?

45
00:02:03,240 --> 00:02:06,340
Kështu që këtu është Instagram.com, përdor reagojnë.

46
00:02:06,340 --> 00:02:08,740
>> Reagojnë është ndërtuar mbi
Ideja e komponentëve.

47
00:02:08,740 --> 00:02:11,900
Një komponent është një HTML
element në steroid,

48
00:02:11,900 --> 00:02:14,470
kështu një element HTML është si një buton.

49
00:02:14,470 --> 00:02:15,250
Kjo është një paragraf.

50
00:02:15,250 --> 00:02:17,500
Kjo është një kokë, e drejtë?

51
00:02:17,500 --> 00:02:22,740
Dhe Instagram do të përdorë këto, por ajo
do të përdorë komponentët e reagojnë.

52
00:02:22,740 --> 00:02:25,740
>> Reago komponentët janë
souped-up elemente HTML

53
00:02:25,740 --> 00:02:28,100
që kanë sjelljen e tyre
përmbante brenda tyre.

54
00:02:28,100 --> 00:02:31,800
Pra, si një shembull, ne mund të kemi
një element kohë, një komponent kohë,

55
00:02:31,800 --> 00:02:34,095
e cila do të përmbajë si
vula kohë, ju e dini,

56
00:02:34,095 --> 00:02:37,170
një komponent Profili i cili
do të përmbajë imazhin profilin

57
00:02:37,170 --> 00:02:38,820
dhe emri i personit.

58
00:02:38,820 --> 00:02:42,930
Ajo mund të ketë një kundër si, e cila
mund të mbështeteni si numri i pëlqen,

59
00:02:42,930 --> 00:02:45,610
dhe në qoftë se ju klikoni mbi atë, ajo do të
rritur numrin e sërën.

60
00:02:45,610 --> 00:02:48,200
Një komponent është vetëm një
bandë e kodit HTML që

61
00:02:48,200 --> 00:02:50,520
ka disa funksionalitetin
përfundoi në brendësi të saj.

62
00:02:50,520 --> 00:02:53,770
Pra, kjo është si një element HTML
në steroid, siç kam thënë më parë.

63
00:02:53,770 --> 00:02:56,270
Ju mund të merrni këto komponente,
dhe ju mund të vënë ato së bashku

64
00:02:56,270 --> 00:02:59,060
për të bërë komponente të reja, në
ky rast, një komponent pas,

65
00:02:59,060 --> 00:03:00,505
e cila përmban të gjitha stuff këtë.

66
00:03:00,505 --> 00:03:04,050
Ajo do të përmbajë kohërave, Profile,
LikeCounter, ndoshta komenti

67
00:03:04,050 --> 00:03:06,100
dhe ndoshta imazhi vetë.

68
00:03:06,100 --> 00:03:10,810
Dhe kështu Web Apps janë ndërtuar vetëm duke marrë
komponentëve dhe vënien e tyre së bashku.

69
00:03:10,810 --> 00:03:15,620
Një ushqim Instagram është asgjë më shumë se
një bandë e postimeve njëri pas tjetrit,

70
00:03:15,620 --> 00:03:19,032
çdo post përmban si koha,
Profili, LikeCounter, dhe kështu me radhë.

71
00:03:19,032 --> 00:03:20,490
Kjo është lloj i si ndërtimin e një shtëpi.

72
00:03:20,490 --> 00:03:22,660
Ju nuk ndërtuar të
shtëpi nga lart poshtë.

73
00:03:22,660 --> 00:03:24,960
Ju merrni components-- ju
marrë si banjo.

74
00:03:24,960 --> 00:03:28,320
Ju merrni bedroom-- ju rrinë ato
së bashku, dhe ju keni një komponentë të re.

75
00:03:28,320 --> 00:03:29,760
Ju keni një pjesë të re të shtëpisë.

76
00:03:29,760 --> 00:03:32,860
>> Kështu reagojnë është ndërtuar rreth
kjo ide e komponentëve që

77
00:03:32,860 --> 00:03:36,600
janë interaktive, që janë deklarative.

78
00:03:36,600 --> 00:03:39,650
Ashtu si ju them vetëm atë që një
Profili është, dhe ai e bën atë.

79
00:03:39,650 --> 00:03:40,600
Ata janë composable.

80
00:03:40,600 --> 00:03:43,880
Ju mund të marrë një kohë dhe një profil, vënë
ata së bashku, të bëjë diçka më të mirë.

81
00:03:43,880 --> 00:03:47,770
Dhe ata janë reusable, kështu që nëse ju
kanë kodin burim për një post,

82
00:03:47,770 --> 00:03:49,440
ju mund të embed atë kudo.

83
00:03:49,440 --> 00:03:53,160
>> Ju mund të embed një Instagram
gjë në faqen tuaj.

84
00:03:53,160 --> 00:03:56,830
Ju mund të embed në Facebook, për shembull,
për aq kohë sa ai përdor Reago si.

85
00:03:56,830 --> 00:04:00,360
Pra, komponentët janë me të vërtetë, me të vërtetë, me të vërtetë
blloqe të fuqishme të ndërtimit të web

86
00:04:00,360 --> 00:04:04,180
që mund të përdoret kudo dhe vënë
së bashku për të bërë blloqe të reja të ndërtimit.

87
00:04:04,180 --> 00:04:07,159
Kjo është shumë, shumë
pasqyrë të nivelit të lartë.

88
00:04:07,159 --> 00:04:09,200
Pra, përsëri, në qoftë se ju keni
ndonjë pyetje në çdo pikë

89
00:04:09,200 --> 00:04:14,470
për filozofinë e reaktorit, të
coding, për të ndaluar mua, dhe më lejoni të dinë.

90
00:04:14,470 --> 00:04:18,420
>> OK, kështu që të reagojnë është e ftohtë për shkak të
ka një mënyrë të ndryshme të kërkim

91
00:04:18,420 --> 00:04:19,870
se si ju të ndërtuar Apps web.

92
00:04:19,870 --> 00:04:23,620
Ju ndoshta keni dëgjuar të MVC, a
Modeli ju kontroll në CS50 ose çfarëdo

93
00:04:23,620 --> 00:04:25,940
tjetër klasa probing që ju përdorni.

94
00:04:25,940 --> 00:04:29,000
Dhe kornizat shumica janë
ndërtuar rreth idesë së MVC.

95
00:04:29,000 --> 00:04:30,410
Reago nuk është.

96
00:04:30,410 --> 00:04:32,980
Të reagojnë është ndërtuar rreth idesë
e unidirectional rrjedhës së të dhënave

97
00:04:32,980 --> 00:04:36,510
siç shihet nga kjo tabelë ose grafik këtu.

98
00:04:36,510 --> 00:04:38,260
>> Në thelb, ju keni një burim të dhënave.

99
00:04:38,260 --> 00:04:42,380
Dhe burimi i të dhënave do të vendosë
si për të hedhur jashtë komponente të caktuara.

100
00:04:42,380 --> 00:04:45,452
Dhe komponentët do të
pastaj, kur ata të ndryshojnë,

101
00:04:45,452 --> 00:04:47,160
ata do të tregojë
burimi i të dhënave për të ndryshuar.

102
00:04:47,160 --> 00:04:49,350
>> Për të përdorur Instagram
shembull, ju mund të keni

103
00:04:49,350 --> 00:04:52,050
një listë të objekteve të postës si
në një bazë të dhënash apo diçka.

104
00:04:52,050 --> 00:04:53,310
Se të dhënat.

105
00:04:53,310 --> 00:04:57,600
Dhe pastaj komponentët tanë postare
do të marrë që të dhënat,

106
00:04:57,600 --> 00:05:01,830
dhe të përdorin që të dhënat që të merr
një gjë në ekran.

107
00:05:01,830 --> 00:05:04,300
Kjo është ajo që shigjeta
nga të dhënat në komponent është,

108
00:05:04,300 --> 00:05:07,930
dhe pastaj që të njëjtën të dhënave është përdorur
që të merr një bandë e komponentëve.

109
00:05:07,930 --> 00:05:10,290
>> Në Facebook Messenger, për
shembull, e cila është reaguar,

110
00:05:10,290 --> 00:05:13,410
ju mund të keni një listë të
Mesazhet si burim tuaj të të dhënave.

111
00:05:13,410 --> 00:05:15,927
Dhe kjo nuk do të bëjë
vetëm lista e mesazheve

112
00:05:15,927 --> 00:05:17,510
por edhe lista e miqve që ju keni.

113
00:05:17,510 --> 00:05:19,200
Ju keni numërimin palexuar.

114
00:05:19,200 --> 00:05:23,330
Ndoshta edhe bëjnë gjënë Facebook
që është në pjesën e poshtme Facebook.com.

115
00:05:23,330 --> 00:05:25,610
E njëjta dhënave është një
burim i vetëm i së vërtetës

116
00:05:25,610 --> 00:05:28,290
dhe kjo shkakton shumë
komponentët që duhet dhënë.

117
00:05:28,290 --> 00:05:30,290
Dhe kur një nga ato
Komponentët është ndryshuar,

118
00:05:30,290 --> 00:05:32,320
ajo shkon prapa dhe
ndryshon burimin e të dhënave.

119
00:05:32,320 --> 00:05:33,460
>> Ju të dërgoni një mesazh, apo jo?

120
00:05:33,460 --> 00:05:34,780
Që ndryshon burimin e të dhënave.

121
00:05:34,780 --> 00:05:39,490
Ju lexoni mesazhet,
kështu keni vendosur të palexuara në 0.

122
00:05:39,490 --> 00:05:41,136
Që ndryshon burimin e të dhënave.

123
00:05:41,136 --> 00:05:44,010
Dhe vini re se të gjitha këto e një
shigjetë duke shkuar prapa në të njëjtën dhënave

124
00:05:44,010 --> 00:05:47,662
burim, kështu që ju e dini,
jepet një grup të caktuar të dhënash,

125
00:05:47,662 --> 00:05:49,870
ju e dini saktësisht se çfarë
faqe do të duken si.

126
00:05:49,870 --> 00:05:50,700
Është determinist.

127
00:05:50,700 --> 00:05:53,451
Ju e dini, dhënë të dhëna të caktuara, çfarë
faqja do të duken si.

128
00:05:53,451 --> 00:05:56,158
Ju mund të parashikohet se si do të
sillen dhe se si gjërat janë duke shkuar

129
00:05:56,158 --> 00:05:57,650
për të punuar kur ata janë vënë së bashku.

130
00:05:57,650 --> 00:06:00,410
>> Dhe në qoftë se kam pasur një milion komponentë
këtu, kjo do të sillen njëjtë, e drejtë?

131
00:06:00,410 --> 00:06:02,290
Ju nuk do të ketë asnjë
ndërlidhjet pazakontë.

132
00:06:02,290 --> 00:06:04,120
Një dhëna dhënë një milion komponentë.

133
00:06:04,120 --> 00:06:06,879
Një milion komponentët mund të
ktheheni mbrapsh dhe të redaktoni të dhënat.

134
00:06:06,879 --> 00:06:07,920
Dhe kështu kjo është shumë e bukur.

135
00:06:07,920 --> 00:06:10,870
Ne jemi duke ndërtuar composable,
lehtësisht Apps shkallëzuar web.

136
00:06:10,870 --> 00:06:13,150
>> Ju keni një burim të dhënave,
burimi i së vërtetës.

137
00:06:13,150 --> 00:06:15,790
Që tregon komponentët tuaj
si për të hedhur jashtë faqe,

138
00:06:15,790 --> 00:06:18,190
dhe komponentët do të
trajtuar ndërveprim.

139
00:06:18,190 --> 00:06:20,150
Dhe në qoftë se ata duan të ndryshojnë
gjëra, thjesht shkoni mbrapa

140
00:06:20,150 --> 00:06:21,750
dhe tregoni Burimi i të dhënave për të ndryshuar.

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

142
00:06:22,850 --> 00:06:26,010
Pra, Reago është e gjitha për të kuptuar
si për të ndërtuar një komponent

143
00:06:26,010 --> 00:06:29,540
dhe si për të bërë komponent tuaj
ndërveprojnë me botën e jashtme.

144
00:06:29,540 --> 00:06:31,850
>> Marrja bashkëveprojnë komponent
me botën e jashtme

145
00:06:31,850 --> 00:06:34,490
përdor një tjetër teknologji
Flux quajtur, e cila

146
00:06:34,490 --> 00:06:36,872
është një kornizë që është
shtuar në krye të reagojnë.

147
00:06:36,872 --> 00:06:38,330
Ne nuk do të flasim për këtë.

148
00:06:38,330 --> 00:06:42,990
Ne jemi duke shkuar për të folur më shumë rreth, duke pasur parasysh
të dhënave, si mund të bëjnë një komponent?

149
00:06:42,990 --> 00:06:47,010
>> Dhe kështu Reago është me të vërtetë ftohtë, sepse ju
mund të përdorni atë me ndonjë fund mbrapa ju dëshironi.

150
00:06:47,010 --> 00:06:50,480
Nëse keni si një fund mbrapa Python,
nëse Python juaj mund të nxjerr nga goja disa të dhëna,

151
00:06:50,480 --> 00:06:51,610
Reago mund ta bëjnë atë.

152
00:06:51,610 --> 00:06:54,700
Nëse ka rezultate JS
e të dhënave, Reago bën atë.

153
00:06:54,700 --> 00:06:56,890
Ruby binarët me
të dhënave, Reago bën atë.

154
00:06:56,890 --> 00:07:01,860
>> Pra Reago është në thelb një web
view-- një fund para me komponentët

155
00:07:01,860 --> 00:07:03,910
për çdo burim të të dhënave whatsoever.

156
00:07:03,910 --> 00:07:07,145
Dhe kështu duke shkuar nga burim i të dhënave në
reagojnë komponentë është shumë e lehtë.

157
00:07:07,145 --> 00:07:08,770
Shkuarja në mënyrë tjetër është pak më e vështirë.

158
00:07:08,770 --> 00:07:10,462
Që përdor Flux siç përmenda më parë.

159
00:07:10,462 --> 00:07:11,420
Ne nuk do të marrë në atë.

160
00:07:11,420 --> 00:07:13,740
Ne do të përqëndrohet më shumë në
të dhënat e-to-komponent krah.

161
00:07:13,740 --> 00:07:15,880
Në këtë mënyrë ju mund të bëni
ftohtë, Apps web fun.

162
00:07:15,880 --> 00:07:19,870
Kjo nuk do të ndikojë në botën e jashtme
tani për tani, por kjo është një tjetër histori.

163
00:07:19,870 --> 00:07:22,210
>> OK, kështu që në qoftë se keni qenë këtu
për seminarin tim të fundit

164
00:07:22,210 --> 00:07:26,610
ju do të dini se të gjithë e kodit për
flasim e sotme do të jetë në këtë URL

165
00:07:26,610 --> 00:07:29,320
këtu, keq, kjo URL këtu.

166
00:07:29,320 --> 00:07:32,730
Dhe në thelb ne jemi duke shkuar për të shkuar
nëpër katër hapa, ndoshta pesë,

167
00:07:32,730 --> 00:07:33,510
ndoshta jo pesë.

168
00:07:33,510 --> 00:07:37,300
Ne do të lëvizin nëpër katër hapa
i ndërtimit të një mostër Reago app.

169
00:07:37,300 --> 00:07:39,550
Dhe kështu që të gjitha kod burim
për çdo hap të rrugës

170
00:07:39,550 --> 00:07:42,216
do të jetë e drejtë këtu, kështu që nëse
ju jeni pas së bashku në shtëpi,

171
00:07:42,216 --> 00:07:43,991
të ndjehen të lirë për të lexoj këtë kod.

172
00:07:43,991 --> 00:07:46,740
Nëse ju jeni në vijim së bashku këtu,
ne do të tregon atë në ekran,

173
00:07:46,740 --> 00:07:47,739
kështu që mos u bëni merak për këtë.

174
00:07:47,739 --> 00:07:50,930
Por nëse ju jeni në shtëpi, të ndjehen të
të lirë për të vizituar këtë faqe interneti.

175
00:07:50,930 --> 00:07:56,400
Dhe, Yeah, ju duhet të jetë në gjendje për të marrë
të gjithë kodin që ju do të duhet ndonjëherë këtu.

176
00:07:56,400 --> 00:08:01,380
Pra, kjo është një mashtrojnë fletë mirë, si edhe
për aventurat tuaja ardhshme me reagojnë.

177
00:08:01,380 --> 00:08:04,490
I ftohtë, kështu që në qoftë se kushdo që është këtu,
dhe madje edhe nëse ju jeni në shtëpi,

178
00:08:04,490 --> 00:08:11,580
tërheq lart këtë faqe interneti, is.gd/cs50react,
nuk ka kapital, nuk ka underscore, nuk ka asgjë.

179
00:08:11,580 --> 00:08:15,849
>> Ju do të shihni një faqe që duket
pak si kjo.

180
00:08:15,849 --> 00:08:17,140
Kjo është një gjë e quajtur CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen është një bashkëpunuese
Mjedisi kodim

182
00:08:20,030 --> 00:08:23,364
me të cilën unë mund të shkruani kodin këtu, dhe
ajo do të dërgohet automatikisht tek ju.

183
00:08:23,364 --> 00:08:24,780
Dhe në këtë mënyrë, unë mund të shkruani kodin.

184
00:08:24,780 --> 00:08:26,920
Unë mund të kandidojë kodin këtu.

185
00:08:26,920 --> 00:08:33,470
>> Për example-- dhe nëse ajo reloads-- shohin,
Unë jam duke kodin e Java skriptet në faqe

186
00:08:33,470 --> 00:08:36,390
të drejtë këtu, dhe kjo do të
automatikisht bëjnë një web faqe

187
00:08:36,390 --> 00:08:37,980
me këtë kod JavaScript.

188
00:08:37,980 --> 00:08:40,039
Dhe kështu kjo është një mënyrë
për ne që të provoni kodin

189
00:08:40,039 --> 00:08:43,089
me të vërtetë të shpejtë pa pasur nevojë të përdorin
ID tona ose përdorni makinën tonë lokale

190
00:08:43,089 --> 00:08:44,290
apo çfarëdo.

191
00:08:44,290 --> 00:08:47,670
Kjo është një mënyrë shumë të shpejtë për ju për mockup
dhe testuar nga lloje të ndryshme të kodit.

192
00:08:47,670 --> 00:08:50,560
>> Kështu që unë jam duke shkuar për të marrë
shembull kodi, duke e vënë atë këtu.

193
00:08:50,560 --> 00:08:52,374
Ne jemi duke shkuar për të punuar nëpërmjet saj.

194
00:08:52,374 --> 00:08:54,540
Dhe nëse ju jeni në shtëpi, ju
mund të tërheqë këtë deri si.

195
00:08:54,540 --> 00:08:57,530
Dhe unë e kam instaluar tashmë
Reago këtu, kështu që ju mund vetëm

196
00:08:57,530 --> 00:09:00,770
shkruani kodin tuaj këtu, dhe
provoni atë si vetë lojës tuaj.

197
00:09:00,770 --> 00:09:04,940
>> Po, nëse të gjithë të
të hapur këtë lidhje këtu.

198
00:09:04,940 --> 00:09:08,080
Ju lutem jepni një bravo
një herë ju keni atë të hapur.

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

200
00:09:10,960 --> 00:09:13,770
Ftohtë, të ftohtë të ftohtë.

201
00:09:13,770 --> 00:09:16,914
Nuk ka asgjë këtu tani për tani, por
ne do të ndryshojë se shumë shpejt.

202
00:09:16,914 --> 00:09:21,250
>> OK, kështu që Reago është një JavaScript
bibliotekë, dhe si i tillë,

203
00:09:21,250 --> 00:09:24,480
kërkon njohuri të JavaScript,
që është gjuha e programimit web.

204
00:09:24,480 --> 00:09:27,660
Dhe është duke u përdorur për gjëra të tjera
tani shumë, por në radhë të parë web zhvilluar

205
00:09:27,660 --> 00:09:32,040
gjuha, kështu që nëse ju jeni të panjohur me
që, të lexoni një vend të quajtur JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Është e mrekullueshme.

207
00:09:32,700 --> 00:09:34,240
Ju mund të mësoni JavaScript
në gjysmë ore.

208
00:09:34,240 --> 00:09:34,990
Është e pabesueshme.

209
00:09:34,990 --> 00:09:36,420
>> Pra, t'i jepte një të lexuar.

210
00:09:36,420 --> 00:09:39,960
Ne gjithashtu është shumë i HTML këtu sepse
ne jemi dizajnimin e web faqet e kursit.

211
00:09:39,960 --> 00:09:43,890
Pra, nëse ju jeni të panjohur me
HTML, shikoni HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Unë mendoj se të mësuarit është një Reago
milion herë më e lehtë në qoftë se ju tashmë

213
00:09:46,520 --> 00:09:47,892
di blloqe ndërtimi.

214
00:09:47,892 --> 00:09:50,600
Nëse keni komponentët, është
lehtë për të bërë një komponent të madh.

215
00:09:50,600 --> 00:09:51,860
Kjo është Reago gjuhën për ju.

216
00:09:51,860 --> 00:09:54,270
>> Pra shkoni përpara dhe të japin
këto gjëra një lexuar.

217
00:09:54,270 --> 00:09:55,070
Ndalo këtë video.

218
00:09:55,070 --> 00:09:57,440
T'i jepte një të lexuar nëse ju jeni
në shtëpi, në qoftë se ju nuk jeni

219
00:09:57,440 --> 00:10:00,794
njohur me HTML ose JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, kështu që ajo që ne jemi duke shkuar për
bëni është që ne jemi duke shkuar për të bërë

221
00:10:02,960 --> 00:10:06,470
një app shumë bazë Flashcard përdorur reagojnë.

222
00:10:06,470 --> 00:10:08,210
Ne do të kemi një Flashcard.

223
00:10:08,210 --> 00:10:09,880
Ju mund të shfletoj kartën mbrapa dhe me radhë.

224
00:10:09,880 --> 00:10:12,399
Dhe ne do të keni një listë të
të gjitha kartat që ne kemi,

225
00:10:12,399 --> 00:10:14,190
dhe në qoftë se ne jemi ndjenjë
ambicioz, ne mund të jetë

226
00:10:14,190 --> 00:10:17,060
në gjendje për të kaloni në mes të
makina duke klikuar mbi ta.

227
00:10:17,060 --> 00:10:20,360
>> Por kjo është, i zhveshur juaj
kockat, një shumë e thjeshtë Reago app.

228
00:10:20,360 --> 00:10:22,560
Dhe kështu kjo është në fakt
jo i parëndësishëm për të zbatuar,

229
00:10:22,560 --> 00:10:26,030
por ne jemi duke shkuar për të treguar se, në qoftë se ju bëni
kjo, është shumë, shumë e lehtë për të zgjeruar atë

230
00:10:26,030 --> 00:10:27,680
në qoftë se njerëzit e tjerë të ju ndihmojë me të.

231
00:10:27,680 --> 00:10:33,750
Pra, ne jemi duke shkuar për të shkuar nëpër katër hapa
duke filluar nga e para për të ndërtuar këtë.

232
00:10:33,750 --> 00:10:36,740
>> OK, kështu katër hapa, ne do të
nisem me hapin e parë.

233
00:10:36,740 --> 00:10:39,790
Hapi i parë do të jetë
ndërtimin komponent tuaj të parë.

234
00:10:39,790 --> 00:10:44,830
Siç kam thënë më parë, një komponent në Reago
është vetëm një element HTML në steroid.

235
00:10:44,830 --> 00:10:49,660
Ajo përcakton HTML
dhe disa sjellje, dhe kjo

236
00:10:49,660 --> 00:10:52,600
do të përcaktojë se si njerëzit
mund të ndërveprojnë me të se si

237
00:10:52,600 --> 00:10:54,270
ajo do të ketë gjendjen e brendshme.

238
00:10:54,270 --> 00:10:57,630
Si një buton do të dinë si sa
herë ajo është klikuar për shembull,

239
00:10:57,630 --> 00:11:01,010
dhe kjo do të dinë se si për të hedhur veten jashtë.

240
00:11:01,010 --> 00:11:04,430
>> Pra, le të shkojnë përpara dhe për të ndërtuar tonë
Komponenti i parë duke përdorur JavaScript.

241
00:11:04,430 --> 00:11:09,711
Pra, nëse sintaksa duket i çuditshëm,
kjo është për shkak se ajo lloj është.

242
00:11:09,711 --> 00:11:11,710
Pra, përsëri, ne jemi duke shkuar
për të bërë një ndryshore të quajtur

243
00:11:11,710 --> 00:11:14,580
app duke përdorur fjalen le,
që e bën një ndryshore,

244
00:11:14,580 --> 00:11:18,210
le App barabartë React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Reago është një bibliotekë dhe ka
Krijo funksion të klasës.

246
00:11:22,609 --> 00:11:24,400
Dhe ky funksion është
një grimë e kodit që ju

247
00:11:24,400 --> 00:11:29,090
mund të përdorni për të krijuar një të ri
lloji i Reago komponent.

248
00:11:29,090 --> 00:11:32,780
Dhe kështu React.createClass
bën një komponent,

249
00:11:32,780 --> 00:11:35,270
dhe ky komponent do të
të jetë në gjendje të bëjë gjëra.

250
00:11:35,270 --> 00:11:40,460
Gjëja kryesore që mund të bëjnë është të bëjnë
diçka, bëjnë si një funksion.

251
00:11:40,460 --> 00:11:44,500
>> Përsëri, në qoftë se ky indeks nuk është e qartë për
ju, unë ju rekomandojmë që të shkoni në JS për macet

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

253
00:11:45,682 --> 00:11:47,710
Është se zoomed në mjaft mirë?

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

255
00:11:48,490 --> 00:11:50,670
>> Pra, çdo nevojat përbërëse
që të ketë një funksion të merr.

256
00:11:50,670 --> 00:11:53,010
Render Funksioni thotë:
çfarë mund të shtypura në ekran?

257
00:11:53,010 --> 00:11:54,760
Por komponenti është
padobishme në qoftë se ajo nuk ka

258
00:11:54,760 --> 00:11:58,060
E di se çfarë për të shtypur në ekran, kështu që
ju duhet të keni një funksion të merr.

259
00:11:58,060 --> 00:12:01,904
>> Pra, në gjënë e bëjnë, ju
vetëm duhet të kthehen disa HTML.

260
00:12:01,904 --> 00:12:03,820
Dhe çfarë është e ftohtë është se
ka një gjë të quajtur

261
00:12:03,820 --> 00:12:08,660
JSX, e cila është një zgjerim i
JavaScript që është përdorur nga të reagojë.

262
00:12:08,660 --> 00:12:11,845
Kjo le të ju shkruani HTML brenda
i juaj JavaScript, e cila

263
00:12:11,845 --> 00:12:13,970
tingëllon lloj të çuditshëm kur
ju së pari mendoni rreth saj,

264
00:12:13,970 --> 00:12:15,553
por kjo e bën shumë kuptim më pas.

265
00:12:15,553 --> 00:12:17,430
Pra, ne mund të bëjmë këtë.

266
00:12:17,430 --> 00:12:21,360
Nëse ju jeni të njohur me HTML, unë e di
ne kemi një div me një qëllim të përgjithshëm

267
00:12:21,360 --> 00:12:22,790
enë për gjëra.

268
00:12:22,790 --> 00:12:26,380
Ne mund të kthehen një div, dhe brenda
kjo div, ne mund të vënë sende.

269
00:12:26,380 --> 00:12:32,390
>> Pra, le të thonë se ne duam që të merr vetëm
një Flashcard drejt-up për tani.

270
00:12:32,390 --> 00:12:34,890
Flashcard, do të thosha,
do të ketë një pyetje dhe përgjigje.

271
00:12:34,890 --> 00:12:37,530
Pra, brenda këtij div, le të
shtypura nga një paragraf

272
00:12:37,530 --> 00:12:42,155
që thotë se question-- Çfarë është
përgjigje përfundimtare për jetën, universi?

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

274
00:12:47,640 --> 00:12:50,345
Dhe atëherë përgjigja është
do të jetë, natyrisht, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Që nuk ka dalë mirë në të gjitha.

277
00:12:59,730 --> 00:13:04,164
Yeah, kështu që në thelb ju mund të vërtetë
të shkruani HTML brenda tuaj JavaScript.

278
00:13:04,164 --> 00:13:06,330
Dhe kjo do të jetë
shtypura jashtë në ekran.

279
00:13:06,330 --> 00:13:08,250
Pra, le të try it out.

280
00:13:08,250 --> 00:13:09,520
>> Pra, ne kemi komponent tonë.

281
00:13:09,520 --> 00:13:12,210
Ne kemi nevojë për të të treguar reagojnë për të vënë
komponenti në ekran

282
00:13:12,210 --> 00:13:18,990
kështu React.render, prandaj vini re se ne
trajtojnë app si çdo element tjetër.

283
00:13:18,990 --> 00:13:21,010
Ne shkruani atë si ajo ishte një element HTML.

284
00:13:21,010 --> 00:13:25,100
Ashtu si në vend të thënë si IMG
për imazhin apo p për paragraf,

285
00:13:25,100 --> 00:13:28,120
ju shkruani App, kështu App është
trajtohet si një element HTML.

286
00:13:28,120 --> 00:13:30,380
Siç kam thënë më parë, është
një element në steroid.

287
00:13:30,380 --> 00:13:32,870
>> Kështu që ju bëjnë App, dhe ju
t'i jepte një vend për të vënë atë.

288
00:13:32,870 --> 00:13:37,170
Dhe kjo është se si ju mund të
them se ku për të vënë atë.

289
00:13:37,170 --> 00:13:46,200
Unë kam krijuar një div të thjeshtë në
faqe thirri me një ID i faqes,

290
00:13:46,200 --> 00:13:48,300
dhe kjo është ajo ku
element do të shkojë.

291
00:13:48,300 --> 00:13:49,841
>> Dhe ne nuk jemi duke shkuar për të drejtuar me HTML.

292
00:13:49,841 --> 00:13:53,145
Në thelb kjo do të marrë
vënë brenda këtij elementi faqe

293
00:13:53,145 --> 00:13:54,270
që ne kemi në ekran.

294
00:13:54,270 --> 00:13:59,210
Pra, ajo shkon këtë kod, dhe ajo tërheq kjo
gjë në ekran, kështu që këtu ne jemi.

295
00:13:59,210 --> 00:14:01,770
Ne kemi bërë reagojmë komponentë tonë të parë.

296
00:14:01,770 --> 00:14:08,000
>> Pra, ashtu si një radhitje, kemi bërë të butë
një lloj i ri i komponentit, e drejtë?

297
00:14:08,000 --> 00:14:10,145
Kjo është ajo që React.createClass.

298
00:14:10,145 --> 00:14:12,680
Dhe në atë komponent, ne
tregoi atë se çfarë duhet të bëjë.

299
00:14:12,680 --> 00:14:15,590
Sa herë që ky komponent është që të
të shtypen në ekran,

300
00:14:15,590 --> 00:14:19,300
ajo do të shtypura nga div me
dy paragrafët brendësi të saj.

301
00:14:19,300 --> 00:14:24,460
>> Dhe çfarë kemi bërë, kemi bërë një app ri
duke përdorur kllapa kënd app shënim.

302
00:14:24,460 --> 00:14:27,160
Ne ia tregoi për ta vënë atë
brenda elementin faqe.

303
00:14:27,160 --> 00:14:29,867
Dhe kështu që ajo që kam bërë, ajo krijoi
një aplikacion i ri nga ajo template.

304
00:14:29,867 --> 00:14:31,200
Dhe atëherë unë thashë atë që të merr atë.

305
00:14:31,200 --> 00:14:33,680
Pra, ajo ka thënë, OK, app,
çfarë duhet të shtypura nga?

306
00:14:33,680 --> 00:14:36,970
App thotë, të shkojë të shtypura nga një div
me dy paragrafët brendësi të saj.

307
00:14:36,970 --> 00:14:40,420
Dhe voila, nuk ka div jonë me
dy paragrafë brendësi të saj.

308
00:14:40,420 --> 00:14:43,180
Kuptim deri tani?

309
00:14:43,180 --> 00:14:46,690
>> Pra, përsëri, e gjithë sfida të reagojnë
është vetëm të dish se si për të bërë komponente.

310
00:14:46,690 --> 00:14:48,500
Si për të bërë
komponente të punojnë së bashku.

311
00:14:48,500 --> 00:14:51,780
Tani që ne kemi bërë tonë të parë
komponent, le të kthehemi

312
00:14:51,780 --> 00:14:54,284
dhe të komponentëve të përshtatshëm.

313
00:14:54,284 --> 00:14:56,700
Pra, ju e dini se si në HTML ju
mund të japin butonat klasa tuaja?

314
00:14:56,700 --> 00:14:59,146
Ju mund të jepni anchors tuaj href.

315
00:14:59,146 --> 00:15:00,770
Ju mund të jepni inputet tuaja një lloj, e drejtë?

316
00:15:00,770 --> 00:15:04,740
Ju mund të jap më shumë porosi
pronat për të gjithë të elementeve tuaj

317
00:15:04,740 --> 00:15:06,490
për ta bërë atë më interesante.

318
00:15:06,490 --> 00:15:09,030
Dhe ne fakt mund të bëjmë
saktë të njëjtën gjë.

319
00:15:09,030 --> 00:15:17,500
>> Pra, le të thonë se ne duam tonë
app për të shkuar bëjnë ndonjë kartë.

320
00:15:17,500 --> 00:15:19,630
Tani për tani ne vetëm
dhënë një kartë hardcoded.

321
00:15:19,630 --> 00:15:22,530
Ne e dimë se ka vetëm një
kartë ajo mund të bëjë, kështu që ne jemi

322
00:15:22,530 --> 00:15:25,960
do të përpiqen dhe për të ndryshuar kjo tani kështu
që ne mund vetëm t'i jepte një kartë.

323
00:15:25,960 --> 00:15:27,410
Ajo do të shtypura nga kartën.

324
00:15:27,410 --> 00:15:29,380
>> Ju duhet të përpiqet dhe të bëjë tuaj
Komponentët një qëllim shumë të përgjithshme.

325
00:15:29,380 --> 00:15:31,654
Pra, në këtë mënyrë unë mund të email
ky është miku im dhe të jetë si,

326
00:15:31,654 --> 00:15:33,820
çfarëdo Flashcard ju keni,
vetëm ushqyer atë në këtu,

327
00:15:33,820 --> 00:15:35,290
dhe ajo do të bëjë atë vetë.

328
00:15:35,290 --> 00:15:37,650
Ju mund të vënë të tjera
gjërat në app tuaj.

329
00:15:37,650 --> 00:15:40,600
>> Por së pari, le të thyejnë këtë
deri në dy komponentë,

330
00:15:40,600 --> 00:15:44,500
por ne duam për të ndarë kartën
shtypjen pjesa nga ana aktual app.

331
00:15:44,500 --> 00:15:46,660
Pra, çfarë mund të bëjmë është që ne
mund të ndryshojë këtë nga App

332
00:15:46,660 --> 00:15:51,300
të CardView, vetëm një
emri i ri për app,

333
00:15:51,300 --> 00:15:54,450
dhe ne mund të bëjë një të ri
komponent i quajtur App,

334
00:15:54,450 --> 00:15:56,336
nuk duhet të ngatërrohet me App vjetër.

335
00:15:56,336 --> 00:16:00,730
Ne kemi marrë të createClass,
dhe si në HTML,

336
00:16:00,730 --> 00:16:03,590
ju mund fole Reago komponentët
brendësi të njëra-tjetrës.

337
00:16:03,590 --> 00:16:16,430
>> Pra, në këtë funksion kthen,
Funksioni CardView kthimi,

338
00:16:16,430 --> 00:16:18,234
dhe kjo është e saktë të njëjtën gjë.

339
00:16:18,234 --> 00:16:19,400
Shihni se pse kjo është e njëjta gjë?

340
00:16:19,400 --> 00:16:22,590
Në vend të bërë vetëm app që
ka div dhe pairing në brendësi të saj,

341
00:16:22,590 --> 00:16:26,194
app bën të CardView, dhe
CardView bën DIV dhe paragrafit.

342
00:16:26,194 --> 00:16:29,110
Pra, ky është shembulli ynë i parë i
Elementet fole brenda e njëri-tjetrit.

343
00:16:29,110 --> 00:16:32,177
A ka kjo kuptim?

344
00:16:32,177 --> 00:16:33,760
Pra, përsëri, ne kemi një element CardView.

345
00:16:33,760 --> 00:16:37,250
Ne kemi elemente app
se kjo është më e madhe se.

346
00:16:37,250 --> 00:16:40,990
>> OK, kështu që ne duam tonë CardView-- nëse ju
të japë një CardView mirë një kartë të caktuar,

347
00:16:40,990 --> 00:16:43,370
ajo do të shtypura nga për ju, e drejtë?

348
00:16:43,370 --> 00:16:48,050
Pra, së pari, ne kemi nevojë për të bërë një kartë,
kështu që le të bëjë një objekt kartë.

349
00:16:48,050 --> 00:17:02,930
Pra, le kartën time equal--
në qoftë se ju jeni të gjithë të njohur,

350
00:17:02,930 --> 00:17:05,260
kjo është vetëm simbol-marrës i
kundërshtojnë në JavaScript.

351
00:17:05,260 --> 00:17:09,280
Kjo është lloj i si një struct
në C, kështu që ne kemi bërë një kartë,

352
00:17:09,280 --> 00:17:15,920
dhe kështu që tani ne mund të kalojë këtë kartë si
një pronë apo si një atribut në HTML

353
00:17:15,920 --> 00:17:17,290
Terminologjia për app tonë.

354
00:17:17,290 --> 00:17:20,210
Pra, ne mund të bëjmë këtë, app
kartë barabartë myCard.

355
00:17:20,210 --> 00:17:23,200
>> Ti e di se si në të dhëna, ju bëni
lloj input është e barabartë me tekst ose butonin

356
00:17:23,200 --> 00:17:25,240
klasë është e barabartë btn për bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Njëjtën ide, kartë App equals--
ju keni marrë për të vënë formatimin e teksteve here--

358
00:17:29,500 --> 00:17:33,830
Kartë App barabartë myCard, kështu që kjo
thotë se ne e kemi këtë kartë objekt.

359
00:17:33,830 --> 00:17:39,149
Unë jam duke shkuar për të kaluar atë si një
Prona me komponentin app.

360
00:17:39,149 --> 00:17:41,440
Dhe ky komponent app do të
të jetë në gjendje për të hyrë në atë dhe të bëjë

361
00:17:41,440 --> 00:17:43,580
gjëra interesante me të.

362
00:17:43,580 --> 00:17:47,650
>> Pra, app tonë do të jetë
jepet një kartë, kështu që tani për tani,

363
00:17:47,650 --> 00:17:49,980
le të ketë app vetëm të japë
kartë të CardView

364
00:17:49,980 --> 00:17:53,110
vetë sepse si app nuk është e
do të dini se çfarë të bëjë me të,

365
00:17:53,110 --> 00:17:54,850
kështu që ne vetëm do t'i jepte për të CardView.

366
00:17:54,850 --> 00:18:00,050
Pra, ne do të kalojë atë të
të njëjtën mënyrë, është e barabartë me kartë,

367
00:18:00,050 --> 00:18:05,426
dhe kështu çdo komponent mund të hyni në
gjëra që i është dhënë asaj.

368
00:18:05,426 --> 00:18:07,800
Ata mund të kenë qasje në pronat
që janë dhënë në të

369
00:18:07,800 --> 00:18:09,470
duke përdorur këtë sintaksë, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Pra, çfarë ndodh këtu është
ju keni objektin myCard.

372
00:18:14,920 --> 00:18:18,250
Ju të kalojë atë në app
përdorur kartën App barabartë myCard.

373
00:18:18,250 --> 00:18:21,420
Se objekti kartë është dhënë për app tuaj.

374
00:18:21,420 --> 00:18:24,400
Aplikacioni mund të përdorni atë
si this.props.card.

375
00:18:24,400 --> 00:18:28,780
Kjo është lloj i si një imazh
e di se çfarë është burim është.

376
00:18:28,780 --> 00:18:31,972
>> Kjo app e di se çfarë është kartë
është, dhe ajo mund të bëjë gjëra me të.

377
00:18:31,972 --> 00:18:32,930
Ajo mund të bëjë llogaritje.

378
00:18:32,930 --> 00:18:35,290
Ajo mund të marrë vendime të bazuara off of it.

379
00:18:35,290 --> 00:18:39,950
>> Tani për tani, unë ishte duke shkuar për të kaluar
this.props.card mbi CardView.

380
00:18:39,950 --> 00:18:43,420
Kuptim deri tani?

381
00:18:43,420 --> 00:18:45,210
Ajo do të bëjë më shumë kuptim tani.

382
00:18:45,210 --> 00:18:46,990
>> OK, kështu që tani ne jemi në CardView.

383
00:18:46,990 --> 00:18:51,719
CardView tona, duke pasur parasysh kartën, duhet
shtypura nga pyetja e saj dhe përgjigje.

384
00:18:51,719 --> 00:18:54,510
Tani për tani ne vetëm të shtypura nga disa
Pyetjet hardcoded dhe përgjigje.

385
00:18:54,510 --> 00:18:57,720
Ne duhet të kuptoj out-- ne kemi nevojë
për të kërkuar kartën që na dhanë

386
00:18:57,720 --> 00:19:01,360
çfarë është pyetja dhe përgjigja, dhe
pastaj printoni këtë jashtë në ekran.

387
00:19:01,360 --> 00:19:02,470
>> Pra, ne mund të bëjmë këtë këtu.

388
00:19:02,470 --> 00:19:06,135
Në bëjnë begin-- së pari të bëjë barabartë.

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

390
00:19:08,710 --> 00:19:13,050
Pra, ajo që ne po bëjmë këtu është që ne e dimë se
kartat na janë dhënë neve për një pronë,

391
00:19:13,050 --> 00:19:13,580
e drejtë?

392
00:19:13,580 --> 00:19:15,930
Është dhënë neve si një input.

393
00:19:15,930 --> 00:19:19,440
Ashtu si kjo është pothuajse si
argumente te një funksion.

394
00:19:19,440 --> 00:19:22,810
Karta është një argument
gati për këtë CardView.

395
00:19:22,810 --> 00:19:25,239
>> Ne do të ekstrakt se, dhe të vënë
ajo në pyetjen ndryshueshme.

396
00:19:25,239 --> 00:19:27,280
Sigurohuni përgjigje shkoi
në përgjigje të ndryshueshme.

397
00:19:27,280 --> 00:19:31,130
Bën që kartë të përgjigjem.

398
00:19:31,130 --> 00:19:35,072
Dhe tani që ne kemi këto,
në vend të shtypjes në dukje se teksti,

399
00:19:35,072 --> 00:19:37,030
ne jemi duke shkuar për të shtypur jashtë
çdo gjë që ata na dhanë.

400
00:19:37,030 --> 00:19:43,580
>> Pra, kjo stuff-- kështu që ne jemi duke shkuar
për të vënë jashtë PYETJE PËRGJIGJE.

401
00:19:43,580 --> 00:19:46,380
Le të shohim nëse kjo funksionon.

402
00:19:46,380 --> 00:19:52,800
I ftohtë, kështu që le të hap nëpërmjet saj
një herë më shumë vetëm të jetë i sigurt.

403
00:19:52,800 --> 00:20:00,470
>> Pra, karta ime është kartë objekt, dhe ne
janë duke i dhënë atë kartë në app.

404
00:20:00,470 --> 00:20:04,790
Dhe app do të marrë më të
kartë dhe të japë atë në CardView.

405
00:20:04,790 --> 00:20:09,190
Dhe kjo CardView thotë, në qoftë se ju
më jepni ndonjë objekt Flashcard,

406
00:20:09,190 --> 00:20:11,920
Unë do të shtypura nga pyetja e saj
dhe përgjigja e saj, e drejtë?

407
00:20:11,920 --> 00:20:14,590
>> Pra, çfarë unë mund të bëj është që unë mund të
të dërgoni këtë kod, i pari

408
00:20:14,590 --> 00:20:16,580
si 10 rreshta të kodit tim, mikut tim.

409
00:20:16,580 --> 00:20:18,820
Ai mund të embed atë në
Aplikimi tij.

410
00:20:18,820 --> 00:20:27,200
Dhe për aq kohë sa ai e bëri të njëjtën gjë,
si kartë CardView barabartë me këtë,

411
00:20:27,200 --> 00:20:30,580
për aq kohë sa ai krijoi CardView
dhe ia dha informacionin e duhur,

412
00:20:30,580 --> 00:20:31,987
ai mund të bëjë kartën e tij.

413
00:20:31,987 --> 00:20:34,320
Dhe kështu në këtë mënyrë, kjo është një të vërtetë të
mënyrë të ftohtë për ju për të ndërtuar

414
00:20:34,320 --> 00:20:35,906
Komponentët që përdorin njëri-tjetrin, e drejtë?

415
00:20:35,906 --> 00:20:38,280
Kjo kartë, unë mund të publikoj
kjo CardView në internet,

416
00:20:38,280 --> 00:20:39,790
dhe njerëzit do të jenë në gjendje të përdorin atë.

417
00:20:39,790 --> 00:20:45,070
Pra, në thelb, është si një nga
funksionet standarde në bibliotekë C.

418
00:20:45,070 --> 00:20:47,280
>> Kjo është një funksion ku
dikush ka shkruar atë.

419
00:20:47,280 --> 00:20:48,419
Ju jepni një kontribut të caktuar.

420
00:20:48,419 --> 00:20:49,710
Ajo do të prodhojë një prodhim të caktuar.

421
00:20:49,710 --> 00:20:50,890
Ju nuk e kujdesit se si funksionon nga brenda.

422
00:20:50,890 --> 00:20:53,790
Për sa kohë që ju të jepni të drejtën
input, ajo do të bëjë të prodhimit të drejtë.

423
00:20:53,790 --> 00:20:57,850
>> Dhe një komponent mund të jetë
menduar të njëjtën mënyrë.

424
00:20:57,850 --> 00:21:00,280
Kjo CardView është si
një funksion bibliotekë.

425
00:21:00,280 --> 00:21:03,400
Në qoftë se ju t'i jepte disa kartë
si një pronë, ajo do të

426
00:21:03,400 --> 00:21:05,095
shtypura nga përmbajtjen e këtë kartë.

427
00:21:05,095 --> 00:21:16,820
Ashtu si në qoftë se unë të ndryshojë kartën time të
në vend që të jetë si ajo që është 5 plus 37,

428
00:21:16,820 --> 00:21:19,210
ajo do update në përputhje me rrethanat.

429
00:21:19,210 --> 00:21:21,955
Pra, vetëm duke ndryshuar të dhëna,
ajo merr një prodhim të caktuar.

430
00:21:21,955 --> 00:21:24,830
Kështu që ju mund të mendoni komponentëve gati
si funksionon në këtë mënyrë, e cila

431
00:21:24,830 --> 00:21:25,920
ju mund të vënë së bashku.

432
00:21:25,920 --> 00:21:29,440
Ju merrni të dhëna, si kjo CardView
si input, ju merrni prodhimit.

433
00:21:29,440 --> 00:21:31,900
Në këtë rast, prodhimi është HTML.

434
00:21:31,900 --> 00:21:34,404
Kuptim deri tani?

435
00:21:34,404 --> 00:21:36,890
I ftohtë, kështu që përsëri, pronat janë të
si ju mund të kalojë informacion

436
00:21:36,890 --> 00:21:40,900
në dhe jashtë e komponentëve.

437
00:21:40,900 --> 00:21:42,740
>> OK, kështu që le të bëjnë këtë
gjë interaktive.

438
00:21:42,740 --> 00:21:44,450
Tani për tani kjo është lloj i mërzitshëm.

439
00:21:44,450 --> 00:21:45,520
Çfarë është [e padëgjueshme]?

440
00:21:45,520 --> 00:21:48,210
Ju mund të shtypura disa jashtë,
por kjo është e gjitha ajo mund të bëjë.

441
00:21:48,210 --> 00:21:51,550
>> Pra, le të kthehemi të
Pyetja e vjetër vetëm tani për tani.

442
00:21:51,550 --> 00:21:54,405
OK, kështu që tani këto komponente
janë të mërzitshëm sepse të gjithë ata e bëjnë,

443
00:21:54,405 --> 00:21:55,030
ata marrin të dhëna.

444
00:21:55,030 --> 00:21:56,100
Ata bëjnë prodhimit, e drejtë?

445
00:21:56,100 --> 00:21:57,049
Kjo është lloj i mërzitshëm.

446
00:21:57,049 --> 00:21:59,090
Ne duam të kemi tonë
komponentë të jetë në gjendje të ketë

447
00:21:59,090 --> 00:22:02,150
një lloj i shtetit të brendshme,
si mbani mend diçka.

448
00:22:02,150 --> 00:22:05,320
>> Për një Flashcard, për
shembull, se çfarë lloj i shtetit

449
00:22:05,320 --> 00:22:07,550
mund të ju dëshironi të
kujtohet për një Flashcard?

450
00:22:07,550 --> 00:22:09,740
Çfarë statusi i përkohshëm
mund të ju doni të mbani mend

451
00:22:09,740 --> 00:22:12,491
për një Flashcard në një app Flashcard?

452
00:22:12,491 --> 00:22:13,990
Audienca: Nëse ajo është kthyer?

453
00:22:13,990 --> 00:22:14,990
NEEL Mehta: Po, e drejtë.

454
00:22:14,990 --> 00:22:17,665
Kështu që ju mund të dëshironi të mbani
udhë të jeni të përballet me lart, ose janë

455
00:22:17,665 --> 00:22:19,100
ju të përballet me poshtë në kartë.

456
00:22:19,100 --> 00:22:23,420
Në Facebook, për shembull, ju do të
doni të mbani mend se ku në ushqim lajmeve

457
00:22:23,420 --> 00:22:25,870
jeni ju ose si që është profili
janë duke bërë ju të drejtë tani.

458
00:22:25,870 --> 00:22:30,127
>> Më të Dërguarit, si ajo që teksti të
shkruani në kutinë e input, e drejtë?

459
00:22:30,127 --> 00:22:31,710
Nëse ju rifreskoni faqen, ajo shkon larg.

460
00:22:31,710 --> 00:22:32,793
Por ju nuk e kujdesit të vërtetë.

461
00:22:32,793 --> 00:22:33,770
Është vetëm e përkohshme.

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

463
00:22:34,548 --> 00:22:36,152
>> Audienca: [padëgjueshme]

464
00:22:36,152 --> 00:22:38,360
NEEL Mehta: Ashtu si një blic
kartë, si ju mund të jeni duke parë

465
00:22:38,360 --> 00:22:40,290
pala pyetje apo anën përgjigje?

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

467
00:22:41,070 --> 00:22:43,270
>> NEEL Mehta: Like a
dy anë Flashcard, e drejtë?

468
00:22:43,270 --> 00:22:46,370
Yeah, kështu që ju doni të
kanë këtë ide tani

469
00:22:46,370 --> 00:22:50,370
Unë kam pronave, e cila është si inputeve,
por shteti, e cila është e përkohshme, uh,

470
00:22:50,370 --> 00:22:51,839
ku ju jeni në faqe, e drejtë?

471
00:22:51,839 --> 00:22:54,380
Përsëri, kam thënë në Facebook
Messenger, unë kam si që personi

472
00:22:54,380 --> 00:22:56,550
ju jeni duke e parë Facebook
ose kush është profili, e drejtë?

473
00:22:56,550 --> 00:22:58,030
>> Kjo është vetëm e përkohshme.

474
00:22:58,030 --> 00:23:01,200
Është e rëndësishme për të treguar përdoruesit
çfarë po ndodh, por rifreskoni faqen.

475
00:23:01,200 --> 00:23:02,250
Kjo nuk ka rëndësi.

476
00:23:02,250 --> 00:23:04,530
Pra, kjo është shtet i përkohshëm,
kështu që ne të gjithë të shtetit atë.

477
00:23:04,530 --> 00:23:06,250
>> Pra, përsëri, nuk ka shtet dhe props.

478
00:23:06,250 --> 00:23:09,084
Props është input dhënë
nga burim tuaj të të dhënave.

479
00:23:09,084 --> 00:23:10,250
Shteti është vetëm si defaults.

480
00:23:10,250 --> 00:23:13,700
Është vetëm si sende që
bën gjë interaktive.

481
00:23:13,700 --> 00:23:17,720
>> Pra, në tonë CardView-- le të kemi
tonë CardView-- kështu që ishte e bukur.

482
00:23:17,720 --> 00:23:21,420
Ajo që ne jemi duke shkuar për të bërë këtu, ne jemi duke shkuar
për të prekur CardView dhe vetëm CardView.

483
00:23:21,420 --> 00:23:25,105
Dhe kështu shoku im i cili mori këtë, ata
nuk do të vini re ndonjë ndryshim.

484
00:23:25,105 --> 00:23:27,230
Ata nuk do të duhet të ndryshojë
ndonjë të kodit të tyre,

485
00:23:27,230 --> 00:23:29,410
por ata do të shohin e tyre
CardView u souped lart.

486
00:23:29,410 --> 00:23:31,270
Kjo është një pjesë e bukur për komponentët.

487
00:23:31,270 --> 00:23:35,290
>> OK, kështu që në CardView tonë, le të përpiqemi dhe
ndiek nëse ne jemi fazën deri

488
00:23:35,290 --> 00:23:36,560
ose të përballet me poshtë.

489
00:23:36,560 --> 00:23:40,480
Në Reago bëjmë këtë duke e parë
specifikuar gjendjen fillestare.

490
00:23:40,480 --> 00:23:42,070
Ku fillon kartë?

491
00:23:42,070 --> 00:23:48,480
>> Pra, të jetë një funksion të quajtur getInitialState
funksionojë, dhe të kthehemi një objekt.

492
00:23:48,480 --> 00:23:53,310
Ky objekt përmban disa shtet, dhe
një shtet është vetëm një palë kyç vlerë.

493
00:23:53,310 --> 00:23:56,950
Ashtu si në të udhëzojë, ju keni një çelës dhe një
Vlera, ju keni si emri është një varg.

494
00:23:56,950 --> 00:24:01,410
>> Në këtë rast, le të thonë se para është e vërtetë.

495
00:24:01,410 --> 00:24:03,760
Kjo thotë se kemi një shtet.

496
00:24:03,760 --> 00:24:06,570
Një komponent i shtetit
është një atribut i quajtur front.

497
00:24:06,570 --> 00:24:09,649
[Padëgjueshme], kështu by default,
ne jemi në pjesën e përparme të kartës,

498
00:24:09,649 --> 00:24:11,440
dhe ne mund të ndryshojmë këtë
si ne rrokullisje kartën.

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

500
00:24:13,380 --> 00:24:18,190
>> OK, kështu që në bëjnë, tani për tani, ne jemi
duke treguar pyetje dhe përgjigje.

501
00:24:18,190 --> 00:24:20,860
Tani çfarë duhet të bëjmë
po tregojnë pyetjen

502
00:24:20,860 --> 00:24:24,370
në qoftë se ne jemi në pjesën e përparme të kartës kështu
përgjigja është për pjesën e prapme të kartës.

503
00:24:24,370 --> 00:24:26,850
Kjo është arsyeja pse ju të gjithë bëni
kartë interaktive.

504
00:24:26,850 --> 00:24:28,100
Pra, le të përpiqen dhe për këtë këtu.

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

506
00:24:31,600 --> 00:24:33,620
E pra, së pari vetëm të bëjë një ndryshore.

507
00:24:33,620 --> 00:24:37,790
Ne mund të kërkoni tani this.state.front.

508
00:24:37,790 --> 00:24:42,010
Ne hyni deklarojnë të njëjtën gjë ne
props qasje, kështu this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Në qoftë se ne jemi para, atëherë teksti
është this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Në qoftë se ne jemi në frontin e
kartë, ne jemi duke shkuar për të provoni dhe kap

512
00:24:51,360 --> 00:24:52,485
pyetja nga karta.

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

514
00:24:54,782 --> 00:24:57,240
Përndryshe, në qoftë se ne jemi në anën e pasme
e kartës, çfarë bëjmë ne?

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

516
00:25:01,830 --> 00:25:02,750
>> Audienca: Përgjigja?

517
00:25:02,750 --> 00:25:05,041
>> NEEL Mehta: Po, kështu teksti
barabartë this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Por në qoftë se ju të vini re, ne jemi duke përdorur
që shteti të marrë një vendim

520
00:25:10,930 --> 00:25:14,420
sepse tani komponentin
do të duken të ndryshme

521
00:25:14,420 --> 00:25:16,710
bazuar jashtë si këto ndërveprojnë me të.

522
00:25:16,710 --> 00:25:20,355
Pra, në vend të shtypjes jashtë kësaj,
ne vetëm do të shtypura nga teksti.

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

524
00:25:25,270 --> 00:25:28,650
Ftohtë, kështu që tani, siç e shihni,
ne shohim vetëm pyetje.

525
00:25:28,650 --> 00:25:37,720
Dhe në qoftë se kam ndryshuar gjendjen këtu me dorë
në front është i rremë marrim 42 mbrapa.

526
00:25:37,720 --> 00:25:39,720
>> Pra, përsëri, ky komponent
ka shtetin e vet.

527
00:25:39,720 --> 00:25:43,440
Si një buton e di nëse
ajo është shtypur apo jo,

528
00:25:43,440 --> 00:25:46,080
kjo gjë e di se çfarë është në
front ose në anën e pasme.

529
00:25:46,080 --> 00:25:48,320
By default, kjo është në frontin.

530
00:25:48,320 --> 00:25:50,840
Dhe pastaj në qoftë se ajo është në pjesën e përparme,
ne do të shtypura nga pyetja.

531
00:25:50,840 --> 00:25:53,106
Në qoftë se kjo është në anën e pasme, ne do të
shtypura nga përgjigje.

532
00:25:53,106 --> 00:25:54,980
Pra, përsëri, informacioni
dhënë është e njëjtë.

533
00:25:54,980 --> 00:25:59,090
Ajo vetëm duket ndryshe
bazuar në atë se si ju programoni atë.

534
00:25:59,090 --> 00:26:02,670
Kështu, për shembull, Facebook Messenger,
edhe në qoftë se ju të merrni të njëjtën burimin e të dhënave,

535
00:26:02,670 --> 00:26:05,170
ajo mund të duken të ndryshme
sepse shteti është i ndryshëm.

536
00:26:05,170 --> 00:26:08,421
Ju jeni duke kërkuar në një
Mesazhi person tjetër së.

537
00:26:08,421 --> 00:26:10,930
>> OK, kështu që kjo është e gjitha mirë dhe
mirë, por tani ajo është në të vërtetë

538
00:26:10,930 --> 00:26:15,940
na bëjnë të aftë për të ndryshuar, nëse
kartë ynë është para apo prapa.

539
00:26:15,940 --> 00:26:19,010
Ne mund ta bëjmë këtë duke shtuar një rrokullisje
buton, një buton për kartë që

540
00:26:19,010 --> 00:26:22,950
do të rrokullisje kartën qoftë se kjo është [e padëgjueshme].

541
00:26:22,950 --> 00:26:31,770
Pra, le të shtoni një buton këtu, kjo
button, dhe ky buton do të thonë rrokullisje.

542
00:26:31,770 --> 00:26:35,650
>> Dhe kështu tani, atë
nuk bëjnë asgjë.

543
00:26:35,650 --> 00:26:37,075
Ajo vetëm duket bukur.

544
00:26:37,075 --> 00:26:43,650
Ajo që ne mund të bëjmë është që ne mund të shtoni një klik
mbajtës, onClick barabartë this.flip,

545
00:26:43,650 --> 00:26:44,820
dhe ne do të përcaktojë rrokullisje më vonë.

546
00:26:44,820 --> 00:26:47,120
Por në thelb, onClick
është një funksion që

547
00:26:47,120 --> 00:26:48,675
merr quhet kur përdoruesi klikimeve atë.

548
00:26:48,675 --> 00:26:52,330
>> Pra butonin do të dinë
kur ajo është klikuar.

549
00:26:52,330 --> 00:26:54,750
Shkoi ajo është klikuar,
ajo do të rrokullisje kartën.

550
00:26:54,750 --> 00:26:58,382
Kjo është lloj i si tuaj
djalë i dorëzimit pica.

551
00:26:58,382 --> 00:27:01,590
Ju jeni si, të gjithë të drejtë, sa herë që dikush
e quan mua, unë do të dorëzoj pica, e drejtë?

552
00:27:01,590 --> 00:27:03,420
>> Ju të regjistroheni në këtë dëgjues.

553
00:27:03,420 --> 00:27:04,530
Ju dëgjuar për një ngjarje.

554
00:27:04,530 --> 00:27:07,657
Ju merrni quajtur, dhe kur
Ngjarja ndodh, ju bëni diçka.

555
00:27:07,657 --> 00:27:08,240
Ju merrni pica.

556
00:27:08,240 --> 00:27:11,480
Në këtë rast, kur ju jeni
klikuar, ju rrokullisje kartën.

557
00:27:11,480 --> 00:27:14,560
>> Dhe kështu që ne kemi nevojë për të përcaktuar një
Funksioni që do të rrokullisje kartën,

558
00:27:14,560 --> 00:27:17,930
kështu që ne do të shkruaj atë të drejtë
këtu, rrokullisje funksion.

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

560
00:27:20,850 --> 00:27:23,680
Dhe kështu që çfarë mendoni rrokullisje do të bëni?

561
00:27:23,680 --> 00:27:27,180
Përsëri kjo merr quhet kur
ne kliko butonin rrokullisje.

562
00:27:27,180 --> 00:27:29,406
Çfarë duhet të bëjë funksion rrokullisje?

563
00:27:29,406 --> 00:27:34,136
>> Audienca: Ndryshimi this.state.front
nga të vërtetë të rreme, rreme të vërtetë.

564
00:27:34,136 --> 00:27:38,420
>> NEEL Mehta: Po, kështu që të marrë çfarëdo
this.front is-- shteti para është.

565
00:27:38,420 --> 00:27:40,930
Merrni shtetin para, në qoftë se
është e vërtetë, e bëjnë të rreme.

566
00:27:40,930 --> 00:27:42,530
Në qoftë se kjo është e rreme, e bëjnë atë të vërtetë, e drejtë?

567
00:27:42,530 --> 00:27:45,330
Pra, le të përpiqemi që.

568
00:27:45,330 --> 00:27:48,240
>> Ju nuk mund të ndryshoni gjendjen
vetëm duke bërë this.state.

569
00:27:48,240 --> 00:27:50,380
Ju nuk mund ta bëjë këtë.

570
00:27:50,380 --> 00:27:52,030
Ju nuk mund ta bëjë këtë.

571
00:27:52,030 --> 00:27:55,810
Ju duhet të përdorni një funksion
quajtur this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Kështu që ju mund të them this.setState front
zorrës së trashë kjo ku, përsëri, thirrje

573
00:28:03,230 --> 00:28:04,330
pikë do të thotë të kundërtën.

574
00:28:04,330 --> 00:28:07,420
Them se nëse kjo. state.front
është e vërtetë, ajo do të kthehet rreme.

575
00:28:07,420 --> 00:28:09,170
Pra, ne do të vendosur shtetin
nga të vërtetë të rreme.

576
00:28:09,170 --> 00:28:11,430
Nëse është e rreme, ne do të
vendosur atë rreme të vërtetë.

577
00:28:11,430 --> 00:28:17,210
>> Vetëm të vini re se ne kemi vendosur dhe për të marrë pak
ndryshe, dhe kështu që le të provoni këtë.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, shikoni në këtë.

579
00:28:18,675 --> 00:28:21,810
Butoni rrokullisje do tani
kaloni para për të mbështetur shtetin.

580
00:28:21,810 --> 00:28:24,990
>> Dhe kështu që këtu është ajo ku ju shihni një
pak e magjisë së reagojnë.

581
00:28:24,990 --> 00:28:28,420
Si ne kurrë nuk tha se ajo për të ri-bëjnë.

582
00:28:28,420 --> 00:28:30,910
Ne kurrë nuk tha se shlyen asgjë.

583
00:28:30,910 --> 00:28:32,630
Nëse jeni duke bërë këtë
pa Reago, ju do të

584
00:28:32,630 --> 00:28:34,588
kanë to-- pëlqen kur
butoni rrokullisje është klikuar,

585
00:28:34,588 --> 00:28:37,290
ju do të duhet të them se për të
dorë ri-bëjnë, apo jo?

586
00:28:37,290 --> 00:28:43,050
>> Reago është me të vërtetë ftohtë në se nëse ju
t'i jepte një shtet dhe pronat të caktuar,

587
00:28:43,050 --> 00:28:45,760
ajo gjithmonë do të bëjë
saktë të njëjtën gjë.

588
00:28:45,760 --> 00:28:48,690
Dhe kështu kur ne ndonjëherë kemi të ndryshojë
shteti dhe pronat,

589
00:28:48,690 --> 00:28:50,819
reagojnë vetëm ri-bën të gjithë gjë.

590
00:28:50,819 --> 00:28:52,860
Ai e di se ka një
një-për-një korrespondencë

591
00:28:52,860 --> 00:28:57,270
midis shtetit dhe parametri dhe HTML.

592
00:28:57,270 --> 00:29:00,110
Pra, sa herë që ose të atyre
Ndryshimet nga anë të një shteti të caktuar,

593
00:29:00,110 --> 00:29:03,750
ajo do të ndryshojë mënyrën se si
Paga është ri-dhënë.

594
00:29:03,750 --> 00:29:06,650
Dhe kështu në thelb është si Reago
duke pritur për ju për të ndryshuar.

595
00:29:06,650 --> 00:29:09,870
>> Sa herë që ajo ndryshon diçka,
ajo do të ri-bëjnë faqe të tërë.

596
00:29:09,870 --> 00:29:12,480
Dhe nëse kjo tingëllon joefikase,
kjo është për shkak se ajo do të jetë,

597
00:29:12,480 --> 00:29:15,050
por reagojnë përdor një gjë të
quajtur DOM Shadow.

598
00:29:15,050 --> 00:29:19,950
Në vend të tërhequr faqe direkt, atë
mban pemë virtuale HTML në kujtesë.

599
00:29:19,950 --> 00:29:23,620
>> Ju e dini, HTML është si një pemë,
si një strukturë të dhënave hierarkike.

600
00:29:23,620 --> 00:29:28,990
Ajo mban një pemë të rreme në kujtesë,
dhe sa herë që ju update faqen,

601
00:29:28,990 --> 00:29:31,940
ajo do të nxjerrë një tjetër rreme
pemë, dhe kjo do të llogaritur

602
00:29:31,940 --> 00:29:35,120
Çfarë ndryshimi ka nevojë për të bërë
faqe për të bërë të dy drurët e barabartë.

603
00:29:35,120 --> 00:29:38,540
Pra, në thelb, ajo praktikisht
ri-bën shumë.

604
00:29:38,540 --> 00:29:41,540
Dhe atëherë ajo vetëm si ndryshon
faqe në tweaks pak si të nevojshme,

605
00:29:41,540 --> 00:29:44,240
kështu që është shumë, shumë, shumë efikase.

606
00:29:44,240 --> 00:29:46,970
>> Pra, në thelb do të reagojnë
sa herë që të ndryshojë diçka,

607
00:29:46,970 --> 00:29:49,010
ajo do të ri-bëjnë faqen praktikisht.

608
00:29:49,010 --> 00:29:52,830
Ajo do të kuptoj se çfarë kam nevojë për
të ndryshojë për të bërë në faqen e vërtetë të reflektojë

609
00:29:52,830 --> 00:29:55,602
faqja virtuale, dhe kjo do të bëjë që.

610
00:29:55,602 --> 00:29:56,560
Kjo është DOM virtuale.

611
00:29:56,560 --> 00:29:59,350
Kjo është një nga më të madh
Karakteristika të reagojnë.

612
00:29:59,350 --> 00:30:00,880
>> A ka kjo kuptim?

613
00:30:00,880 --> 00:30:01,540
Ndonje pyetje?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Audienca: Si funksionon
të krahasohet ende në MVC

617
00:30:08,969 --> 00:30:10,760
që kemi biseduar rreth
para se të burimeve si.

618
00:30:10,760 --> 00:30:13,527
>> NEEL Mehta: Po, pyetja
është si e bën atë të krahasohet me MVC?

619
00:30:13,527 --> 00:30:14,610
Ju pyetur rreth burimeve.

620
00:30:14,610 --> 00:30:16,445
E pra, le të flasim rreth asaj se si ajo funksionon.

621
00:30:16,445 --> 00:30:18,190
>> Në MVC, ju do të rinovuar modelin.

622
00:30:18,190 --> 00:30:20,560
Në këtë rast ne do të kemi një model kartë.

623
00:30:20,560 --> 00:30:24,540
Pamja do të ketë
button rrokullisje, dhe kontrolli

624
00:30:24,540 --> 00:30:26,310
do të ketë funksionin rrokullisje.

625
00:30:26,310 --> 00:30:28,450
Pra, mendimi do të them të
kontrollues të rrokullisje rrokullisje.

626
00:30:28,450 --> 00:30:30,370
Rrokullisje do të tregoni
Modeli për të ndryshuar, e drejtë?

627
00:30:30,370 --> 00:30:33,915
>> Dhe kështu që kur ju bëni një MVC, ju
dëgjuar për modelin për të ndryshuar,

628
00:30:33,915 --> 00:30:37,150
dhe ju ri-bëjnë pamjen në përputhje me rrethanat.

629
00:30:37,150 --> 00:30:39,210
Ose ju vetëm duhet të pëlqen
kanë kontrollues.

630
00:30:39,210 --> 00:30:42,418
Prisni për modelin për të ndryshuar, dhe pastaj
vini dhe të zgjedhin një pjesë të si një gjë

631
00:30:42,418 --> 00:30:44,032
për të ndryshuar.

632
00:30:44,032 --> 00:30:45,740
Këtu kemi një gjë,
por në një app madhe,

633
00:30:45,740 --> 00:30:48,510
ju duhet të mbani mend se çfarë pëlqen
ndryshimi në çdo vend të vetëm,

634
00:30:48,510 --> 00:30:50,290
kështu që është pak i bezdisshëm.

635
00:30:50,290 --> 00:30:53,670
Dhe kështu Reago është e bukur
sepse ajo ka një Dom Shadow.

636
00:30:53,670 --> 00:30:56,040
Ajo mund të përballojë për të vetëm
rishkruaj të gjithë gjë.

637
00:30:56,040 --> 00:30:58,680
Ju nuk keni për të selektive
si me mend se çfarë për të rinovuar.

638
00:30:58,680 --> 00:31:02,186
>> Në Facebook në qoftë se ju pëlqen
të merrni një mesazh të ri, në MVC,

639
00:31:02,186 --> 00:31:04,060
ju do të duhet të mbani mend,
OK, të ndryshuar gjërat

640
00:31:04,060 --> 00:31:06,260
në majë e
faqe, mesazhi ikonë.

641
00:31:06,260 --> 00:31:08,290
Gjithashtu pop një dritare të re në fund.

642
00:31:08,290 --> 00:31:10,070
Gjithashtu të bëjë një gjë të re në atë dritare.

643
00:31:10,070 --> 00:31:11,060
Gjithashtu luajnë një tingull.

644
00:31:11,060 --> 00:31:13,150
>> Kjo është një shumë të gjëra
fiken në të njëjtën kohë.

645
00:31:13,150 --> 00:31:15,320
Dhe kështu që nëse ju nuk e bëni
kanë një Dom Shadow, ju do të

646
00:31:15,320 --> 00:31:18,740
keni për të bërë atë me dorë për shkak se
ju nuk mund të shpëtoj nga tërë faqen.

647
00:31:18,740 --> 00:31:21,430
Ju nuk mund të përballojë për të, kështu që ju keni
për të ndryshuar çdo gjë me dorë,

648
00:31:21,430 --> 00:31:23,990
e cila është me të vërtetë i bezdisshëm në MVC.

649
00:31:23,990 --> 00:31:27,640
>> Pra, në mënyrë që të jenë
begatë, ata selektive

650
00:31:27,640 --> 00:31:30,750
update faqe, i cili është
efikas, por edhe i bezdisshëm.

651
00:31:30,750 --> 00:31:34,002
Në Reago, për shkak të Shadow
Dom, ju merrni dy gjëra për të lira.

652
00:31:34,002 --> 00:31:35,710
Është efikas për shkak se
i Shadow Dom.

653
00:31:35,710 --> 00:31:37,210
Bela po përditësimin faqe.

654
00:31:37,210 --> 00:31:40,292
Kjo nuk e bën pemën manipulimin.

655
00:31:40,292 --> 00:31:41,250
Ju merrni efikasitetin.

656
00:31:41,250 --> 00:31:45,420
Ju merrni edhe lehtësinë e përdorimit, sepse
në qoftë se ju vetëm të rishkruaj faqe të tërë,

657
00:31:45,420 --> 00:31:48,970
por ju vetëm e di, të gjithë të drejtë, gjërat
do të jetë në faqen diku.

658
00:31:48,970 --> 00:31:51,180
Ajo mund të jetë në një vend tjetër, por
ajo do të jetë në faqe, e drejtë?

659
00:31:51,180 --> 00:31:52,860
Kështu që ju sapo ri-dhënë
të gjithë gjë praktikisht,

660
00:31:52,860 --> 00:31:55,540
dhe ju mund të bëni një çift
ndryshime në faqen e vetë.

661
00:31:55,540 --> 00:31:57,850
>> Pra, përsëri, në MVC ju
do të duhet të zgjedhin

662
00:31:57,850 --> 00:32:01,840
midis lehtësinë e përdorimit dhe efikasitetit,
dhe të reagojnë, që ju të merrni të dy.

663
00:32:01,840 --> 00:32:04,020
Pra, është më mirë.

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

665
00:32:05,220 --> 00:32:06,676
Të ngurta.

666
00:32:06,676 --> 00:32:12,080
>> OK, kështu që le të shohim le të flasim
pak për hapin 4,

667
00:32:12,080 --> 00:32:14,740
se si ne mund të embed komponente.

668
00:32:14,740 --> 00:32:16,260
Pra, ne kemi këtë të drejtë tani.

669
00:32:16,260 --> 00:32:19,420
Ne kemi butonin ftohtë tonë të vogël.

670
00:32:19,420 --> 00:32:23,157
Ne mund të shfletoj atë përsëri dhe
me radhë, dhe kjo është e gjitha ajo ka.

671
00:32:23,157 --> 00:32:24,990
Le të thonë se ne duam të
kanë një tjetër komponent.

672
00:32:24,990 --> 00:32:28,730
Le të thonë se app tonë Flashcard duhet
përmbajnë një listë të të gjitha kartat

673
00:32:28,730 --> 00:32:31,520
që ju keni, në mënyrë që do të thotë ne
duhet të ketë një tjetër komponent.

674
00:32:31,520 --> 00:32:32,970
E pra, ndoshta e quajti atë një pamje listë.

675
00:32:32,970 --> 00:32:36,200
Le të bëjë një pamje listë që
bashkëjeton me CardView,

676
00:32:36,200 --> 00:32:39,680
dhe kjo pikëpamje listë dhe CardView
do të donte të punojnë së bashku.

677
00:32:39,680 --> 00:32:43,190
Dhe ju mund të kombinohen ato
për të bërë aplikacionin tonë për ju.

678
00:32:43,190 --> 00:32:45,160
>> Pra, së pari, le të bëjë një
çift ​​shumë Kartat e drejtë.

679
00:32:45,160 --> 00:32:46,370
Le të themi, çfarë kartat?

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

681
00:32:49,619 --> 00:32:51,910
Dhe vetëm kështu që unë nuk duhet të
lindi ju me të shtypni atë në,

682
00:32:51,910 --> 00:32:53,410
Unë jam vetëm duke shkuar për të kopje atë nga këtu.

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

684
00:33:01,664 --> 00:33:03,580
Dhe kështu që unë jam duke shkuar për të mos
t'i jepte vetëm një kartë.

685
00:33:03,580 --> 00:33:06,910
Unë jam duke shkuar për të dhënë atë një rrjet të kartave.

686
00:33:06,910 --> 00:33:10,240
Pra, para Apps
duke shkuar për të thyer për tani.

687
00:33:10,240 --> 00:33:14,717
Të gjithë të drejtë, kështu që ne jemi duke shkuar për të bërë
kjo gjendje për të trajtuar karta të shumëfishta.

688
00:33:14,717 --> 00:33:17,800
Pra, së pari, ne jemi duke shkuar për të dhënë atë, nuk
vetëm një kartë, por një grup të kartave,

689
00:33:17,800 --> 00:33:18,700
si një listë të kartave.

690
00:33:18,700 --> 00:33:20,980
Dhe në këtë rast, ne kemi tre prej tyre.

691
00:33:20,980 --> 00:33:27,280
>> Të gjithë të drejtë, kështu që kështu app është
do të merrni një listë të kartave,

692
00:33:27,280 --> 00:33:29,870
dhe ajo do të vendosë se cili
një për të treguar në CardView.

693
00:33:29,870 --> 00:33:33,740
CardView vetëm mund të
bëjnë një kartë, por app

694
00:33:33,740 --> 00:33:37,610
merr një listë të të gjitha kartat, e drejtë?

695
00:33:37,610 --> 00:33:40,820
>> Pra, kur të kuptoj se një
kartë për të dhënë për CardView,

696
00:33:40,820 --> 00:33:44,660
si do të ju me mend ju mund të jetë në gjendje
për të marrë një vendim për të cilën kartë

697
00:33:44,660 --> 00:33:47,064
për të treguar?

698
00:33:47,064 --> 00:33:49,980
Për të ju jap një aluzion, kjo është përkohësisht
Ju do të shihni një kartë të caktuar.

699
00:33:49,980 --> 00:33:53,260
Nëse ju rifreskoni faqen, ju do të
thjesht shkoni përsëri në kartën e parë.

700
00:33:53,260 --> 00:33:55,464
Kjo është në rregull, sepse kjo është e përkohshme.

701
00:33:55,464 --> 00:33:56,630
Çfarë teknikë mund ta përdorim?

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

703
00:34:02,534 --> 00:34:08,760
>> Audienca: Ju mund të bëni një variabël
kështu që ashtu si keni pasur para.

704
00:34:08,760 --> 00:34:11,989
A është kjo e vërtetë, ju mund të
kanë kartën e tanishme është e barabartë me 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL Mehta: Yeah, kështu që ne
duan të kenë shtet, apo jo?

706
00:34:14,150 --> 00:34:16,080
Ju do të përdorni shteti në
komponent të kuptoj se

707
00:34:16,080 --> 00:34:17,288
që kartë duam që të merrni.

708
00:34:17,288 --> 00:34:19,290
Ashtu si ne kemi një listë të
të gjitha kartat, ne do të

709
00:34:19,290 --> 00:34:21,630
përdorin shtetin për të kuptoj se
një nga kartën parë,

710
00:34:21,630 --> 00:34:23,710
kartë të dytë, kartë të tretë, dhe kështu me radhë.

711
00:34:23,710 --> 00:34:28,760
>> Pra, një app kështu një app do të merrni një
kanë funksionin getInitialState,

712
00:34:28,760 --> 00:34:35,020
Kthimi getInitialState funksion.

713
00:34:35,020 --> 00:34:39,929
Dhe ne do të themi vetëm activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Kështu që tani app jonë ka është shtetin e vet.

715
00:34:42,889 --> 00:34:47,179
>> Dhe kështu që tani më bëjnë, të kuptoj se
një kartë, le të vetëm të shkojnë në grup

716
00:34:47,179 --> 00:34:49,969
dhe kap gjë në atë indeksin.

717
00:34:49,969 --> 00:34:53,580
Zgjidh kartë this.props.cards barabarta
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Pra, siç e shihni këtu, props dhe
shteti të vërtetë punojnë së bashku.

720
00:35:00,162 --> 00:35:08,990
Pra, tani që ne kemi activeCard tonë,
ne do të thërrasë atë activeCard,

721
00:35:08,990 --> 00:35:10,470
dhe le të shohim nëse kjo funksionon.

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

723
00:35:20,320 --> 00:35:20,820
[Padëgjueshme]

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, kjo ishte një gabim tekst.

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

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

728
00:35:51,420 --> 00:35:54,840
>> Cool, yep, kështu që tani ne kemi qenë prapa
ku kemi qenë më parë, apo jo?

729
00:35:54,840 --> 00:35:57,100
Programi njëjtë të vjetër me përjashtim të
tani ne mund të mbështesim

730
00:35:57,100 --> 00:35:59,390
një listë të kartave, jo vetëm një kartë.

731
00:35:59,390 --> 00:36:04,130
Dhe tani, përsëri, në qoftë se ne të ndryshojë
activeIndex, ne mund të shkojnë nga 0 në 1,

732
00:36:04,130 --> 00:36:07,330
dhe tani që kartë të dytë,
dhe pastaj shkuam në 0.

733
00:36:07,330 --> 00:36:10,390
Kështu që këtu është një i ri
souped-up version të tonë.

734
00:36:10,390 --> 00:36:16,000
>> OK, kështu që tani le të kemi një pamje listë që
tregon të gjitha kartat në programin tuaj,

735
00:36:16,000 --> 00:36:19,980
kështu që ne do të bëjë një të ri
komponenti i quajtur ListView.

736
00:36:19,980 --> 00:36:22,155
Le ListView barabartë react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Pra, ne duam që të merr një të renditura
listën me një zëri të listës për çdo kartë.

739
00:36:38,800 --> 00:36:41,490
Dhe kështu që ne kemi një bandë e kartave.

740
00:36:41,490 --> 00:36:44,990
Ne duam një zëri të listës
për çdo kartë, e drejtë?

741
00:36:44,990 --> 00:36:47,490
Ne mund të bëjmë një për lak ose
diçka për të bërë një artikull të ri listës.

742
00:36:47,490 --> 00:36:50,522
Por në mënyrë që ju të bëni atë në
Reago, përdorni një gjë të quajtur hartë.

743
00:36:50,522 --> 00:36:57,150
Harta është një mjet ose një funksion që ju përdorni
që për çdo send, shkon disa funksion,

744
00:36:57,150 --> 00:36:59,510
merr vlerë të kthimit, dhe
ju jep atë prapa.

745
00:36:59,510 --> 00:37:06,310
>> Pra, si një shembull, ne kemi array
1, 2, function-- 3.map dhe kjo

746
00:37:06,310 --> 00:37:12,120
është stenografi për një
function-- x shigjetë x x herë.

747
00:37:12,120 --> 00:37:16,110
Ky thotë, për çdo numër
në 1, 2, 3, të marrë atë.

748
00:37:16,110 --> 00:37:17,800
Katror atë, dhe të japin atë.

749
00:37:17,800 --> 00:37:22,090
Pra, çfarë mendoni 1,
2, 3.map x shkon në x kohë

750
00:37:22,090 --> 00:37:25,480
x ju jep dhënë përsëri
se ky funksion është

751
00:37:25,480 --> 00:37:27,680
të kandidojë në çdo element të kësaj grup.

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

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

754
00:37:32,190 --> 00:37:35,709
>> NEEL MEHTA: Po, 1, 4, 9
për shkak se ju të bëni 1 herë 1.

755
00:37:35,709 --> 00:37:36,500
Kjo ju jep një të tillë.

756
00:37:36,500 --> 00:37:37,690
Ky është elementi i parë.

757
00:37:37,690 --> 00:37:38,530
>> 2 herë 2 është 4.

758
00:37:38,530 --> 00:37:39,570
Ky është një element i dytë.

759
00:37:39,570 --> 00:37:40,310
3 herë 3 është 9.

760
00:37:40,310 --> 00:37:41,540
Ky është një element i tretë.

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

762
00:37:42,640 --> 00:37:45,015
Pra, harta ka një teknikë që ju
përdorim në programuesit funksionale,

763
00:37:45,015 --> 00:37:48,090
Stili i ri i
programimit për të bërë diçka

764
00:37:48,090 --> 00:37:50,500
çdo element në listën tuaj.

765
00:37:50,500 --> 00:37:51,970
Dhe kështu kjo tingëllon e njohur.

766
00:37:51,970 --> 00:37:53,370
Ne kemi një listë të kartave.

767
00:37:53,370 --> 00:37:56,860
Ne duam që të merrni një zëri të listës për çdo
një, kështu që ne do të përdorim vetëm hartën këtu.

768
00:37:56,860 --> 00:38:00,250
Ne do të themi, le të është e barabartë lista
this.props, kartat, hartë.

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

770
00:38:10,580 --> 00:38:15,070
>> Dhe kështu jepet një kartë, ne jemi
duke shkuar për të gjeneruar një zëri të listës

771
00:38:15,070 --> 00:38:17,580
me se kartën e përmbajtjeve anë të saj.

772
00:38:17,580 --> 00:38:20,660
Le të them vetëm ne duam të japim jashtë
kartat pyetje kështu card.question.

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

774
00:38:24,990 --> 00:38:30,649
Pra, kjo listë përmban një
grup i LI-së ose lista artikujt

775
00:38:30,649 --> 00:38:32,440
ku ka një listë
pika për çdo kartë,

776
00:38:32,440 --> 00:38:35,150
dhe që përmban pyetje kartat.

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

778
00:38:37,640 --> 00:38:39,450
>> Ftohtë, kështu që tani le të
në fakt të shtypura atë jashtë.

779
00:38:39,450 --> 00:38:46,521
Pra, ne do të kthehemi një ul.

780
00:38:46,521 --> 00:38:49,020
Brenda kësaj listën e parregullt,
ne vetëm do të rrinë të gjithë listën

781
00:38:49,020 --> 00:38:49,890
që ata na dhanë.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Të gjithë të drejtë, kështu që tani ky
listën e parë punon vetëm gjeni.

785
00:38:56,060 --> 00:38:59,842
Çdo pyetje në lidhje me listën e parë?

786
00:38:59,842 --> 00:39:01,270
Ju keni një bandë e kartave.

787
00:39:01,270 --> 00:39:02,800
Ju bëni një zëri të listës për çdo kartë.

788
00:39:02,800 --> 00:39:05,466
Dhe ju vënë ato brenda një parenditur
lista, dhe ju jepni atë.

789
00:39:05,466 --> 00:39:09,410
Pra, tani le të veprojë kështu që ne embed
kjo brenda app tonë,

790
00:39:09,410 --> 00:39:14,310
kështu që ne mund të bëjmë këtë, pamje të listës.

791
00:39:14,310 --> 00:39:17,070
Çfarë argumenti nuk kemi të kalojë tek lista pamje?

792
00:39:17,070 --> 00:39:18,320
Çfarë pronat nuk kemi dhënë atë?

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

794
00:39:25,111 --> 00:39:26,860
Mos harroni, nëse ju jepni
ajo një bandë e kartave,

795
00:39:26,860 --> 00:39:29,590
ajo do të bëjë listën
të parë për këto karta.

796
00:39:29,590 --> 00:39:32,267
Pra, çfarë do të kalojmë
këtu si argument?

797
00:39:32,267 --> 00:39:33,350
Audienca: Një listë e kartave?

798
00:39:33,350 --> 00:39:37,130
NEEL Mehta: Yeah, kështu që karta
barabartë this.props.cards, e drejtë?

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

800
00:39:39,850 --> 00:39:44,370
Dhe kështu problemi i vetëm
është se ju mund vetëm

801
00:39:44,370 --> 00:39:48,600
kthyer një element të nivelit të lartë në bëjnë,
kështu që ju keni marrë për të përfunduar atë në një div.

802
00:39:48,600 --> 00:39:49,100
Është e pazakontë.

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

804
00:39:56,190 --> 00:39:57,530
Pra, le të shohim nëse kjo.

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

806
00:40:09,790 --> 00:40:10,560
A do të punojë?

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

808
00:40:29,774 --> 00:40:31,030
>> Yep, ju shkoni atje.

809
00:40:31,030 --> 00:40:33,700
Deri tani ne kemi një listë
i kartave në fund,

810
00:40:33,700 --> 00:40:36,180
dhe pastaj ne kemi tonë
CardView vetë në krye,

811
00:40:36,180 --> 00:40:40,486
dhe që do të rrokullisje në mes
të dy anët e kartës.

812
00:40:40,486 --> 00:40:42,610
Tani ka që e bëjnë kuptim se si unë e bëri atë?

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

814
00:40:45,165 --> 00:40:46,790
Yeah, kështu që përsëri, ne kemi dy komponente.

815
00:40:46,790 --> 00:40:49,666
Kopje Komponenti i parë
jashtë çdo kartë në listë.

816
00:40:49,666 --> 00:40:50,540
Kjo është pikëpamja lista.

817
00:40:50,540 --> 00:40:54,770
Dhe komponenti i dytë
printon vetëm atë kartë.

818
00:40:54,770 --> 00:40:58,840
Në qoftë se ju t'i jepte një kartë të caktuar, ajo do të
shtypura nga informacion në lidhje me këtë kartë

819
00:40:58,840 --> 00:41:01,870
dhe le të ju rrokullisje prapa dhe me radhë.

820
00:41:01,870 --> 00:41:05,850
>> Pra, nëse ne duam, ne mund të përpiqemi dhe të flasin
për të shtuar disa karakteristika të reja për këtë.

821
00:41:05,850 --> 00:41:09,482
Përndryshe ne mund të flasim pak më shumë
për të shpejtësinë e reaktorit,

822
00:41:09,482 --> 00:41:11,190
ose ne mund të përgjigjem
pyetje ju mund të keni

823
00:41:11,190 --> 00:41:15,050
sepse këto janë të gjitha pjesët kryesore
të reagojnë që unë dua të flas për.

824
00:41:15,050 --> 00:41:16,540
Ne mund të shkojnë përpara.

825
00:41:16,540 --> 00:41:17,590
Ne mund të përgjigjem pyetjeve.

826
00:41:17,590 --> 00:41:18,560
Cfaredo qe te duash.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Audienca: Mund të përdorni
JSX në normale JavaScript?

829
00:41:24,205 --> 00:41:27,150
Apo është kjo diçka që
erdhi me [e padëgjueshme]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL Mehta: Pyetja është a mund
ju përdorni JSX me normale JavaScript?

831
00:41:30,760 --> 00:41:32,620
Përgjigja është po.

832
00:41:32,620 --> 00:41:41,070
JSX është vetëm një mënyrë e saj merr tuaj
JavaScript që ka HTML në brendësi të saj,

833
00:41:41,070 --> 00:41:44,215
dhe ajo harton në JavaScript që
nuk ka HTML në brendësi të saj.

834
00:41:44,215 --> 00:41:47,880
Pra, vini re that-- kështu që vini re këtu.

835
00:41:47,880 --> 00:41:50,820
Kjo duket sikur ju ta keni si div
dhe ju keni gjëra në brendësi të saj.

836
00:41:50,820 --> 00:41:54,970
>> Që përgatit për JavaScript që
si gjeneron të njëjtën gjë.

837
00:41:54,970 --> 00:41:59,590
I guess atë që unë jam duke thënë është se
JSX është vetëm një sintaktik, si është

838
00:41:59,590 --> 00:42:03,530
një preprocessor për JavaScript shumë
si PHP është një preprocessor për HTML.

839
00:42:03,530 --> 00:42:05,490
SH.A. është një preprocessor
për JavaScript që ju lejon

840
00:42:05,490 --> 00:42:12,970
ju vënë HTML brenda tuaj JavaScript.

841
00:42:12,970 --> 00:42:16,425
Dhe kështu që nëse ju keni të drejtë transformatorit
e cila është një gjë e quajtur [e padëgjueshme],

842
00:42:16,425 --> 00:42:17,300
i cili do ta transformojë.

843
00:42:17,300 --> 00:42:19,360
Preprocessor e drejta,
ajo do të ju lejojnë të bëni këtë.

844
00:42:19,360 --> 00:42:20,235
>> Audienca: [padëgjueshme]

845
00:42:20,235 --> 00:42:23,026
NEEL Mehta: Zakonisht ju nuk keni nevojë
për të vënë HTML brenda JavaScript

846
00:42:23,026 --> 00:42:24,110
nëse tuaj duke bërë reagojnë.

847
00:42:24,110 --> 00:42:27,146
Por ju mund ta bëjë atë anyway.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Audienca: Unë mendoj se ju
kishte përshkruar Reago

850
00:42:29,353 --> 00:42:31,970
si një gjuhë funksionale programing.

851
00:42:31,970 --> 00:42:35,646
Ne kemi qenë të mësuar C në CS50.

852
00:42:35,646 --> 00:42:38,032
Është C gjithashtu një gjuhë funksional?

853
00:42:38,032 --> 00:42:39,990
NEEL Mehta: Pra pyetja
ka të bëjë me funksional

854
00:42:39,990 --> 00:42:43,010
kundrejt një tjetër gjë të quajtur
programimit domosdoshme apo procedurale.

855
00:42:43,010 --> 00:42:44,820
Ka dy lloje të programeve të njohura.

856
00:42:44,820 --> 00:42:48,550
Një quhet procedurale, të cilat
është mbi të gjitha si komandave bërë,

857
00:42:48,550 --> 00:42:51,510
dhe një është funksional, e cila është e gjitha
në lidhje me të paturit e funksioneve dhe të kesh

858
00:42:51,510 --> 00:42:52,930
input dhe output i atyre.

859
00:42:52,930 --> 00:42:55,930
Reago është një paradigmë funksional.

860
00:42:55,930 --> 00:42:58,010
C është një paradigmë shumë procedurale.

861
00:42:58,010 --> 00:43:02,360
>> Dhe si një shembull, C për shembull,
ju nuk e bëni këtë mënyrë deklarative

862
00:43:02,360 --> 00:43:04,390
për të bërë programin, e drejtë?

863
00:43:04,390 --> 00:43:06,826
Ju keni për të thënë, të shkruar këtë.

864
00:43:06,826 --> 00:43:07,950
Ndryshojë këtë strukturë të dhënave.

865
00:43:07,950 --> 00:43:08,530
Printo këtë.

866
00:43:08,530 --> 00:43:10,160
Kjo është e gjitha në lidhje me komandat.

867
00:43:10,160 --> 00:43:12,640
>> Në Reago, nuk ka
që shumë komandat.

868
00:43:12,640 --> 00:43:15,145
Kjo është e gjitha në lidhje me të paturit
Komponentët ju vënë së bashku.

869
00:43:15,145 --> 00:43:16,300
Ata janë si funksione.

870
00:43:16,300 --> 00:43:26,360
Ju keni si një funksion
quajtur CardView,

871
00:43:26,360 --> 00:43:28,680
i cili është një funksion
që ka të dhëna, prodhimit,

872
00:43:28,680 --> 00:43:30,660
dhe kështu reagojnë është e gjitha
në lidhje me këtë filozofi

873
00:43:30,660 --> 00:43:32,700
na i having-- keni të dhëna.

874
00:43:32,700 --> 00:43:34,910
Ju të kalojë atë nëpërmjet kësaj
algorithm, dhe ajo do të

875
00:43:34,910 --> 00:43:36,800
HTML output që ju
vetëm shtypura faqe,

876
00:43:36,800 --> 00:43:39,180
dhe kështu ju duhet të
ndërtuar atë copë me copë.

877
00:43:39,180 --> 00:43:42,800
>> Pra, për të nxjerrë një metaforë për atë që
Kam thënë më parë, ju e dini se si

878
00:43:42,800 --> 00:43:47,050
në Facebook në qoftë se ju merrni një mesazh,
dhe ju zgjidhni atë që pjesë të rinovuar,

879
00:43:47,050 --> 00:43:47,882
kjo është procedurale.

880
00:43:47,882 --> 00:43:48,840
Është e domosdoshme, e drejtë?

881
00:43:48,840 --> 00:43:49,806
OK, unë kam një mesazh.

882
00:43:49,806 --> 00:43:50,930
Le të ndryshojë llogari atje.

883
00:43:50,930 --> 00:43:52,110
>> Le të pop një dritare këtu.

884
00:43:52,110 --> 00:43:52,780
Le të ndryshojë llogari atje.

885
00:43:52,780 --> 00:43:53,700
Le të nxjerrë këtë këtu.

886
00:43:53,700 --> 00:43:55,220
Kjo është një qasje procedurale.

887
00:43:55,220 --> 00:44:00,240
>> Kjo është ajo që gjëra të tilla si këndor,
Boost, Backbone, kornizat e përdorin.

888
00:44:00,240 --> 00:44:01,200
Reago është funksional.

889
00:44:01,200 --> 00:44:03,324
Kjo është një mënyrë shumë të ndryshme
e të menduarit për gjërat.

890
00:44:03,324 --> 00:44:07,950
Ajo merr këtë ide të le të kemi
funksione ose algoritme që do të ju

891
00:44:07,950 --> 00:44:08,800
t'i jepte të dhëna.

892
00:44:08,800 --> 00:44:11,820
Ajo do të nxjerr nga goja atë çfarë
duhet të jetë, dhe kompjuteri

893
00:44:11,820 --> 00:44:13,490
do të kujdeset peshon jashtë.

894
00:44:13,490 --> 00:44:15,890
Ju nuk merren vetë.

895
00:44:15,890 --> 00:44:18,470
Bën që të bëjë pak kuptim?

896
00:44:18,470 --> 00:44:18,970
Po?

897
00:44:18,970 --> 00:44:24,180
>> Audienca: Në një gjuhë funksionale,
çdo gjë ndodh në të njëjtën kohë?

898
00:44:24,180 --> 00:44:26,800
>> NEEL Mehta: Jo, gjëra të ndodhë në rregull.

899
00:44:26,800 --> 00:44:29,320
Si këtu ka ende
të urdhërojë, por kjo nuk ka

900
00:44:29,320 --> 00:44:32,390
të ndodhë në mënyrë të si
përgëzojmë, komandë, komandën.

901
00:44:32,390 --> 00:44:36,459
Kjo ndodh në mënyrë të
funksion ju jep prodhim.

902
00:44:36,459 --> 00:44:37,750
Vënë atë në një tjetër funksion.

903
00:44:37,750 --> 00:44:39,550
Vënë atë në një tjetër
Funksioni, një tjetër funksion.

904
00:44:39,550 --> 00:44:41,470
>> Nëse ju bëni CS51, ju do të
të mësojnë programe funksionale

905
00:44:41,470 --> 00:44:42,886
një nga pak të fushëveprimit të kësaj.

906
00:44:42,886 --> 00:44:45,090
Por në thelb, ajo që e bën
Reago ftohtë nuk është vetëm

907
00:44:45,090 --> 00:44:46,840
një mënyrë rrjedha e të dhënave
dhe Dom virtuale,

908
00:44:46,840 --> 00:44:48,700
por edhe kjo ide e
programimit funksional.

909
00:44:48,700 --> 00:44:51,720
Dhe programimit funksional është shumë e lehtë
për të hartuar dhe të bëjë cool stuff nga,

910
00:44:51,720 --> 00:44:53,844
dhe kjo është shumë e lehtë për të menduar
rreth dhe arsye në lidhje me.

911
00:44:53,844 --> 00:44:55,450
Pra, kjo është një tjetër barazim të mirë të reagojnë.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Çdo pyetje më shumë?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Po?

916
00:45:03,150 --> 00:45:06,840
>> Audienca: Um, pse do të ju
përdorin le në krahasim me var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL Mehta: Pra pyetja është
pse ju përdorni në vend të le var?

918
00:45:10,450 --> 00:45:13,220
Kjo është një gjë e quajtur
ES6 ose ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Kjo është versioni i ri i JavaScript.

920
00:45:15,820 --> 00:45:19,050
Ka një bandë e arsye teknike,
Por le është një version më të mirë të var.

921
00:45:19,050 --> 00:45:20,724
>> Kjo është se si ju të deklarojë variablave.

922
00:45:20,724 --> 00:45:21,390
Ju mund të përdorni lë.

923
00:45:21,390 --> 00:45:22,140
Ju mund të përdorni var.

924
00:45:22,140 --> 00:45:23,825
Le ka një bandë e teknik
reasons-- ju mund të shikoni ato

925
00:45:23,825 --> 00:45:25,610
up later-- Pse është më mirë.

926
00:45:25,610 --> 00:45:28,780
Në thelb, ES6 ka disa bukur
Sintaksa e re, disa tipare të reja

927
00:45:28,780 --> 00:45:30,720
në krye të JavaScript vjetër.

928
00:45:30,720 --> 00:45:32,782
>> Pra, ne kemi si pesë minuta.

929
00:45:32,782 --> 00:45:34,990
Unë vetëm të kërkuar të flas për
një gjë shumë e vërtetë shpejt.

930
00:45:34,990 --> 00:45:36,450
Nëse keni pasur ndonjë pyetje,
le të flasim për këtë pas kësaj.

931
00:45:36,450 --> 00:45:38,366
Por vetëm kështu që kjo merr
kapur në kamera, unë vetëm

932
00:45:38,366 --> 00:45:41,550
dua të flas pak për mënyrën se si
në fakt përdorin Reagoni në Apps tuaj.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Nëse ju shkoni këtu,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
Kjo është faqja shtëpi për Reagoni, dhe
ajo do të ju tregojnë se si ju përdorni në fakt

936
00:46:03,320 --> 00:46:05,320
Reagojnë në faqet tuaja.

937
00:46:05,320 --> 00:46:08,845
Në thelb, kjo është pak
komplikuar duke u përpjekur për të instaluar reagojnë.

938
00:46:08,845 --> 00:46:12,300
Kjo nuk është aq e lehtë sa ju vetëm drag
dhe një rënie JavaScript në atje.

939
00:46:12,300 --> 00:46:15,890
>> Ju duhet të keni transformator tuaj
të ngritur, e cila do, ashtu siç bëri më parë,

940
00:46:15,890 --> 00:46:18,120
kthehet JSX tuaj në
JavaScript normal.

941
00:46:18,120 --> 00:46:21,030
Ju duhet të gjë që do të
hartojnë ju ES6 në normale.

942
00:46:21,030 --> 00:46:24,720
Java ka një shumë të lëviz
Pjesët ju duhet të bëni, kështu që nuk është një gjë e

943
00:46:24,720 --> 00:46:27,200
quajtur Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Dhe kjo është një linjë mjet komandë që do të
të ju ndihmojë jashtë tribunë Reago tuaj

945
00:46:31,110 --> 00:46:32,380
Projektet e lehtë.

946
00:46:32,380 --> 00:46:38,660
>> Kështu që ju mund të lexoni në lidhje me këtë
më vonë, por ka disa mjete

947
00:46:38,660 --> 00:46:40,160
se Yeoman ofron.

948
00:46:40,160 --> 00:46:43,280
Ata do të ju lejojnë të krijojë një Reago
Aplikacioni me çdo gjë të ndërtuar në.

949
00:46:43,280 --> 00:46:46,030
Si ajo do të kanë ndërtuar
në, komponentët e ndërtuar në.

950
00:46:46,030 --> 00:46:47,880
Ajo do të keni transformator tuaj ndërtuar në.

951
00:46:47,880 --> 00:46:50,699
Ata kanë shumë të ftohtë
sende ndërtuar në mënyrë automatike

952
00:46:50,699 --> 00:46:52,240
duke përdorur këto gjëra quajtur gjeneratorë.

953
00:46:52,240 --> 00:46:54,620
>> Pra, lexoni në lidhje me këtë në qoftë se ju pëlqen.

954
00:46:54,620 --> 00:46:59,110
Vetëm të shkojnë në shërbëtor, Y-E-O-M-A-N, dhe
ju mund të gjeni gjeneratorë si këto.

955
00:46:59,110 --> 00:47:01,263
Dhe me gjeneratorë si
këto, ju vetëm si një

956
00:47:01,263 --> 00:47:03,010
është një Command Line çift komandat.

957
00:47:03,010 --> 00:47:05,530
Ajo do tribunë nga një
Gjithë Reago app për ju.

958
00:47:05,530 --> 00:47:10,470
Ajo do të marrë të gjitha tubacionet e manual,
dhe punën hungërimë bërë për ju,

959
00:47:10,470 --> 00:47:13,010
dhe kjo është arsyeja pse ju vetëm të përqëndrohet
për vetëm me shkrim në Reago.

960
00:47:13,010 --> 00:47:16,739
>> Pra, në thelb ndërtimin e një
Reago app është jo banale.

961
00:47:16,739 --> 00:47:19,530
Është Wired të gjithë së bashku, por ka
janë mjete që do të bëjë atë për ju.

962
00:47:19,530 --> 00:47:23,070
Pra, nëse ju doni të bëni një reagojnë
app, provoni duke bërë atë në këtë mënyrë.

963
00:47:23,070 --> 00:47:26,360
Nëse ju vetëm duan të eksperimentojnë,
ju mund të përpiquni të përdorni këtë CodePen

964
00:47:26,360 --> 00:47:28,550
sepse kjo CodePen ka
të gjithë reagojnë instalime elektrike.

965
00:47:28,550 --> 00:47:30,240
Unë e kam bërë të gjithë punën për ju tashmë.

966
00:47:30,240 --> 00:47:34,610
>> Pra, nëse ju doni të bëni si një
prodhimi për lirimin reagojnë app,

967
00:47:34,610 --> 00:47:37,220
provoni një nga këto gjeneratorëve.

968
00:47:37,220 --> 00:47:40,240
Në qoftë se ju vetëm duan të luajnë
rreth, kjo është shpesh vlen vetëm

969
00:47:40,240 --> 00:47:44,490
si të përpiqet të luajë rreth me CodePen këtu.

970
00:47:44,490 --> 00:47:45,470
Shëndoshë e mirë?

971
00:47:45,470 --> 00:47:45,970
Ftohtë.

972
00:47:45,970 --> 00:47:47,890
>> Pra, kjo është e gjitha unë kam.

973
00:47:47,890 --> 00:47:52,470
Përsëri, të gjithë kodi dhe shembuj janë
do të jetë në këtë website këtu.

974
00:47:52,470 --> 00:47:55,509
Pra, përsëri, ne nuk flasim
për shumë Sintaksa e Reago,

975
00:47:55,509 --> 00:47:57,550
por për të gjetur të gjithë ata
pak detajet sintaksore,

976
00:47:57,550 --> 00:48:00,320
kjo është e gjitha do të jenë në dispozicion
në këtë website këtu.

977
00:48:00,320 --> 00:48:02,660
>> Kështu që unë do të rekomandojë si
ndërmarrë hapin e parë.

978
00:48:02,660 --> 00:48:06,277
Vënë atë në CodePen tuaj.

979
00:48:06,277 --> 00:48:08,110
Provoni duke punuar në bërjen
ajo në hapin e dytë.

980
00:48:08,110 --> 00:48:11,310
Ka një hap i katërt, dhe vetëm
të parë se ku ju merrni nga ajo.

981
00:48:11,310 --> 00:48:14,840
>> Ndonjë pyetje më shumë, kontrolloni
nga ajo faqe ose email mua.

982
00:48:14,840 --> 00:48:16,490
Kjo është email tim.

983
00:48:16,490 --> 00:48:19,885
Por unë do të të duan për t'ju ndihmuar me ndonjë
pyetje ju mund të keni në lidhje me reagojnë.

984
00:48:19,885 --> 00:48:21,010
Pra, yep, kjo është e gjitha unë kam.

985
00:48:21,010 --> 00:48:23,410
Ju faleminderit shumë për
shikuar apo për të marrë pjesë.

986
00:48:23,410 --> 00:48:26,820
Dhe unë do të marrë ndonjë pyetje
ju mund të keni pas kësaj tani.

987
00:48:26,820 --> 00:48:29,140
Pra, ju falënderoj të gjithëve për të shikuar.

988
00:48:29,140 --> 00:48:31,270