1
00:00:00,000 --> 00:00:02,910
>> [Music kucheza]

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL Mehta: Hapa unaendelea.

4
00:00:07,275 --> 00:00:11,070
>> Naam, kila mtu, kuwakaribisha kwa mtandao
programu ya baadaye na kuguswa.

5
00:00:11,070 --> 00:00:11,870
Hii ni CS50.

6
00:00:11,870 --> 00:00:12,930
Jina langu ni Neel.

7
00:00:12,930 --> 00:00:17,689
Mimi nina TA kwa CS50 na sophomore
katika Harvard Chuo na sana, sana

8
00:00:17,689 --> 00:00:18,730
shauku mtandao developer.

9
00:00:18,730 --> 00:00:20,730
Kwa hiyo mimi nina kusisimua sana kwa
kuwa kuzungumza na wewe leo,

10
00:00:20,730 --> 00:00:24,550
kama wewe ni hapa au nyumbani
kuangalia, kuhusu kuguswa, ambayo ni mara ya pili

11
00:00:24,550 --> 00:00:27,270
kama nilivyosema, mustakabali wa programu mtandao.

12
00:00:27,270 --> 00:00:29,055
>> Hivyo kuguswa ni mfumo mtandao.

13
00:00:29,055 --> 00:00:30,930
Na kama nimekuwa kuwaambia
kwa baadhi ya watu hapa,

14
00:00:30,930 --> 00:00:33,400
mfumo ni
seti ya zana unaweza kutumia

15
00:00:33,400 --> 00:00:35,770
kuunda na kujenga mtandao programu yako.

16
00:00:35,770 --> 00:00:39,010
Na programu mtandao ni, tena, tovuti
ambazo ni shirikishi kama Facebook,

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

18
00:00:42,330 --> 00:00:45,590
>> Hivyo Facebook ni mfumo mtandao
ambayo ilianzishwa na Picha

19
00:00:45,590 --> 00:00:48,060
miaka michache back-- kuguswa ni.

20
00:00:48,060 --> 00:00:50,830
Ni tangu zimetumika katika
Picha juu ya programu zao za mkononi

21
00:00:50,830 --> 00:00:52,460
na mtandao programu, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy ni mwingine
maarufu adopter mapema ya kuguswa.

23
00:00:56,350 --> 00:00:58,630
>> Ni kweli kuwa kupata
maarufu sana.

24
00:00:58,630 --> 00:01:03,420
Kama umewahi kutumia vitu kama Angular au
Uti wa mgongo, hii ni wa familia moja,

25
00:01:03,420 --> 00:01:05,830
lakini ina tangu mbali
kushinda umaarufu wao.

26
00:01:05,830 --> 00:01:06,890
Ni moto jambo jipya.

27
00:01:06,890 --> 00:01:09,590
Ni kweli, kweli kubwa.

28
00:01:09,590 --> 00:01:13,470
>> Na hivyo kuguswa ni nzuri sio tu kama
mtandao mfumo wa jengo interfaces.

29
00:01:13,470 --> 00:01:16,020
Ni vizuri kwa ajili ya kujenga mtandao interfaces.

30
00:01:16,020 --> 00:01:18,350
Kuna pia jambo
aitwaye kuguswa Native ambayo

31
00:01:18,350 --> 00:01:22,200
inakuwezesha kujenga interfaces
Android na iOS

32
00:01:22,200 --> 00:01:26,390
na majukwaa labda wengine katika siku zijazo
kutumia tu sawa na javascript kanuni.

33
00:01:26,390 --> 00:01:31,130
Unaweza kutumia exact
JavaScript kificho kwa kutoa tovuti,

34
00:01:31,130 --> 00:01:33,040
atatoa programu Android na programu iOS.

35
00:01:33,040 --> 00:01:35,000
>> Ni wakati sana, kusisimua sana.

36
00:01:35,000 --> 00:01:37,070
Ni fursa kweli, kweli cool.

37
00:01:37,070 --> 00:01:42,020
Ni kweli zima mtandao
interface chombo cha maendeleo,

38
00:01:42,020 --> 00:01:44,420
hivyo ni sana, sana
Jambo muhimu kujua.

39
00:01:44,420 --> 00:01:46,949
Na, kama mimi alikuwa akiwaambia watu
kabla, hii, nadhani,

40
00:01:46,949 --> 00:01:48,990
ni kwenda na mabadiliko jinsi sisi
kujenga programu mtandao milele.

41
00:01:48,990 --> 00:01:55,820
Hivyo ni labda kidogo hyperbole, lakini mimi
nadhani ni jambo nzuri ya kujua.

42
00:01:55,820 --> 00:01:57,580
>> OK, hivyo nini ni kuguswa?

43
00:01:57,580 --> 00:02:01,020
Kuguswa ni mfumo unaweza
kutumia kwa ajili ya kujenga interfaces.

44
00:02:01,020 --> 00:02:03,240
Interface ni, tena,
ukurasa wa mtandao, sawa?

45
00:02:03,240 --> 00:02:06,340
Hivyo hapa ni Instagram.com, matumizi kuguswa.

46
00:02:06,340 --> 00:02:08,740
>> Kuguswa ni kujengwa juu ya
wazo la vipengele.

47
00:02:08,740 --> 00:02:11,900
Sehemu ni HTML
kipengele juu ya steroids,

48
00:02:11,900 --> 00:02:14,470
hivyo HTML kipengele ni kama kifungo.

49
00:02:14,470 --> 00:02:15,250
Ni aya.

50
00:02:15,250 --> 00:02:17,500
Ni kichwa, sawa?

51
00:02:17,500 --> 00:02:22,740
Na Instagram itatumia hizi, lakini
pia kutumia vipengele vya kuguswa.

52
00:02:22,740 --> 00:02:25,740
>> Kuguswa vipengele ni
souped-up HTML mambo

53
00:02:25,740 --> 00:02:28,100
ambazo zina tabia zao wenyewe
zilizomo ndani yao.

54
00:02:28,100 --> 00:02:31,800
Hivyo, kama mfano, tunaweza kuwa na
kipengele muda, sehemu ya muda,

55
00:02:31,800 --> 00:02:34,095
ambayo itakuwa na kama
wakati muhuri, unajua,

56
00:02:34,095 --> 00:02:37,170
sehemu wasifu ambayo
vyenye sura wasifu

57
00:02:37,170 --> 00:02:38,820
na jina la mtu.

58
00:02:38,820 --> 00:02:42,930
Ni inaweza kuwa kukabiliana na kama, ambayo
Unaweza kuhesabu kama idadi ya anapenda,

59
00:02:42,930 --> 00:02:45,610
na kama wewe bonyeza juu yake, ni itabidi
kuongeza idadi ya anapenda.

60
00:02:45,610 --> 00:02:48,200
Sehemu tu
rundo la HTML Code kuwa

61
00:02:48,200 --> 00:02:50,520
ina baadhi ya utendaji
amefungwa ndani yake.

62
00:02:50,520 --> 00:02:53,770
Hivyo ni kama HTML kipengele
juu ya steroids, kama nilivyosema hapo awali.

63
00:02:53,770 --> 00:02:56,270
Unaweza kuchukua vipengele hivi,
na unaweza kuziweka pamoja

64
00:02:56,270 --> 00:02:59,060
kufanya vipengele mpya, katika
kesi hiyo, sehemu ya posta,

65
00:02:59,060 --> 00:03:00,505
ambayo ina mambo haya yote.

66
00:03:00,505 --> 00:03:04,050
Itakuwa vyenye Muda, Profile,
LikeCounter, labda maoni

67
00:03:04,050 --> 00:03:06,100
na labda picha yenyewe.

68
00:03:06,100 --> 00:03:10,810
Na hivyo programu mtandao ni kujengwa tu kwa kuchukua
vipengele na kuweka pamoja.

69
00:03:10,810 --> 00:03:15,620
Kulisha Instagram ni kitu zaidi kuliko
rundo la posts mmoja baada ya mwingine,

70
00:03:15,620 --> 00:03:19,032
kila baada inajumuisha kama Time,
Profile, LikeCounter, na kadhalika.

71
00:03:19,032 --> 00:03:20,490
Ni aina ya kama kujenga nyumba.

72
00:03:20,490 --> 00:03:22,660
Huwezi kujenga
nyumba kutoka juu kwenda chini.

73
00:03:22,660 --> 00:03:24,960
Wewe kuchukua components-- wewe
kuchukua kama bafu.

74
00:03:24,960 --> 00:03:28,320
Wewe kuchukua bedroom-- wewe fimbo yao
pamoja, na una sehemu mpya.

75
00:03:28,320 --> 00:03:29,760
Una sehemu mpya ya nyumba.

76
00:03:29,760 --> 00:03:32,860
>> Hivyo kuguswa ni wote kujengwa karibu
wazo hili la vipengele ambavyo

77
00:03:32,860 --> 00:03:36,600
ni shirikishi, ambazo ni declarative.

78
00:03:36,600 --> 00:03:39,650
Kama wewe kusema tu kile a
wasifu ni, na ni mithili hiyo.

79
00:03:39,650 --> 00:03:40,600
Wao ni composable.

80
00:03:40,600 --> 00:03:43,880
Unaweza kuchukua muda na hadhi, kuweka
nao pamoja, kufanya kitu kizuri zaidi.

81
00:03:43,880 --> 00:03:47,770
Na wao uko reusable, hivyo kama wewe
na kanuni chanzo kwa wadhifa,

82
00:03:47,770 --> 00:03:49,440
unaweza kupachika kwamba mahali popote.

83
00:03:49,440 --> 00:03:53,160
>> Unaweza embed Instagram
Jambo kwenye tovuti yako mwenyewe.

84
00:03:53,160 --> 00:03:56,830
Unaweza embed katika Facebook, kwa mfano,
muda mrefu kama anatumia kuguswa pia.

85
00:03:56,830 --> 00:04:00,360
Hivyo vipengele ni kweli, kweli, kweli
nguvu kuanza ujenzi wa mtandao

86
00:04:00,360 --> 00:04:04,180
ambazo zinaweza kutumika mahali popote na kuweka
pamoja na kufanya vitalu jengo jipya.

87
00:04:04,180 --> 00:04:07,159
Hiyo ni sana, sana
ngazi ya juu maelezo.

88
00:04:07,159 --> 00:04:09,200
Hivyo, tena, kama una
maswali yoyote wakati wowote hatua

89
00:04:09,200 --> 00:04:14,470
kuhusu falsafa ya mtambo huo,
coding, na kuacha yangu, na napenda kujua.

90
00:04:14,470 --> 00:04:18,420
>> OK, hivyo kuguswa ni baridi kwa sababu ni
ina njia mbalimbali za kuangalia

91
00:04:18,420 --> 00:04:19,870
jinsi wewe kujenga programu mtandao.

92
00:04:19,870 --> 00:04:23,620
Ve pengine habari ya MVC, a
mfano wewe kudhibiti katika CS50 au chochote

93
00:04:23,620 --> 00:04:25,940
wengine uchunguzi madarasa wewe kutumia.

94
00:04:25,940 --> 00:04:29,000
Na mifumo wengi ni
kujengwa karibu wazo la MVC.

95
00:04:29,000 --> 00:04:30,410
Kuguswa si.

96
00:04:30,410 --> 00:04:32,980
Kuguswa ni kujengwa kote wazo
ya unidirectional data mtiririko

97
00:04:32,980 --> 00:04:36,510
kama kuonekana kwa chati hii au mchoro hapa.

98
00:04:36,510 --> 00:04:38,260
>> Kimsingi, una chanzo data.

99
00:04:38,260 --> 00:04:42,380
Na data chanzo ataamua
jinsi ya kuweka nje vipengele fulani.

100
00:04:42,380 --> 00:04:45,452
Na vipengele mapenzi
kisha, wakati wao kubadili,

101
00:04:45,452 --> 00:04:47,160
nao watakuambia
data chanzo kubadilika.

102
00:04:47,160 --> 00:04:49,350
>> Kutumia Instagram
mfano, unaweza kuwa

103
00:04:49,350 --> 00:04:52,050
orodha ya goli vitu kama
katika orodha ya au kitu.

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

105
00:04:53,310 --> 00:04:57,600
Na kisha baada wetu vipengele
itachukua data kwamba,

106
00:04:57,600 --> 00:05:01,830
na kutumia data kwamba atatoa
Jambo kwenye screen.

107
00:05:01,830 --> 00:05:04,300
Hilo ndilo mshale
kutoka kwa data sehemu ni,

108
00:05:04,300 --> 00:05:07,930
na kisha kwamba data huo ni kutumika
atatoa kundi la vipengele.

109
00:05:07,930 --> 00:05:10,290
>> Katika Facebook Mtume, kwa
mfano, ambayo ni kuguswa,

110
00:05:10,290 --> 00:05:13,410
unaweza kuwa na orodha ya
ujumbe kama chanzo yako data.

111
00:05:13,410 --> 00:05:15,927
Na kwamba itakuwa kutoa si
tu orodha ya ujumbe

112
00:05:15,927 --> 00:05:17,510
lakini pia orodha ya marafiki una.

113
00:05:17,510 --> 00:05:19,200
Una unread kuhesabu.

114
00:05:19,200 --> 00:05:23,330
Labda pia atatoa kitu Picha
hiyo ni chini ya Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Data huo ni
chanzo kimoja cha ukweli

116
00:05:25,610 --> 00:05:28,290
na kwamba husababisha mengi ya
vipengele kuwa kulipwa.

117
00:05:28,290 --> 00:05:30,290
Na wakati wowote mmoja wa wale
vipengele ni iliyopita,

118
00:05:30,290 --> 00:05:32,320
unaendelea nyuma na
mabadiliko chanzo data.

119
00:05:32,320 --> 00:05:33,460
>> Kutuma ujumbe, sawa?

120
00:05:33,460 --> 00:05:34,780
Kuwa mabadiliko chanzo data.

121
00:05:34,780 --> 00:05:39,490
Wewe kusoma ujumbe wako,
hivyo kuweka unread kwa 0.

122
00:05:39,490 --> 00:05:41,136
Kuwa mabadiliko chanzo data.

123
00:05:41,136 --> 00:05:44,010
Na taarifa kwamba yote haya ya moja
mshale kurejea data hicho

124
00:05:44,010 --> 00:05:47,662
chanzo, hivyo unajua,
kutokana na baadhi ya seti data,

125
00:05:47,662 --> 00:05:49,870
kujua hasa ni nini
ukurasa ni kwenda kuangalia kama.

126
00:05:49,870 --> 00:05:50,700
Ni deterministic.

127
00:05:50,700 --> 00:05:53,451
Unajua, kutokana na data fulani, nini
ukurasa ni kwenda kuangalia kama.

128
00:05:53,451 --> 00:05:56,158
Unaweza kutabiri jinsi itakavyo
kuishi na jinsi mambo ni kwenda

129
00:05:56,158 --> 00:05:57,650
kufanya kazi wakati wao ni kuweka pamoja.

130
00:05:57,650 --> 00:06:00,410
>> Na kama ningekuwa na milioni vipengele
hapa, ingekuwa kuishi sawa, sawa?

131
00:06:00,410 --> 00:06:02,290
Wewe bila kuwa na yoyote
weird kuunganishwa.

132
00:06:02,290 --> 00:06:04,120
Data mmoja kulipwa milioni vipengele.

133
00:06:04,120 --> 00:06:06,879
Milioni vipengele naweza
kurudia na kuhariri data.

134
00:06:06,879 --> 00:06:07,920
Na hivyo hii ni nzuri sana.

135
00:06:07,920 --> 00:06:10,870
Sisi ni kujenga composable,
urahisi scalable mtandao programu.

136
00:06:10,870 --> 00:06:13,150
>> Una data chanzo kimoja,
chanzo cha ukweli.

137
00:06:13,150 --> 00:06:15,790
Kwamba anaelezea vipengele yako
jinsi ya kuweka nje ukurasa,

138
00:06:15,790 --> 00:06:18,190
na vipengele mapenzi
kushughulikia mahusiano.

139
00:06:18,190 --> 00:06:20,150
Na kama wanataka mabadiliko
mambo, tu kwenda nyuma

140
00:06:20,150 --> 00:06:21,750
na kuwaambia data chanzo kubadilika.

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

142
00:06:22,850 --> 00:06:26,010
Hivyo kuguswa ni wote kuhusu uelewa
jinsi ya kujenga sehemu

143
00:06:26,010 --> 00:06:29,540
na jinsi ya kufanya sehemu yako
kuingiliana na dunia ya nje.

144
00:06:29,540 --> 00:06:31,850
>> Maamuzi kuingiliana sehemu
na ulimwengu wa nje

145
00:06:31,850 --> 00:06:34,490
matumizi ya teknolojia nyingine
aitwaye Flux, ambayo

146
00:06:34,490 --> 00:06:36,872
ni mfumo kuwa ni
aliongeza juu ya kuguswa.

147
00:06:36,872 --> 00:06:38,330
Sisi siyo kwenda kuzungumza kuhusu hilo.

148
00:06:38,330 --> 00:06:42,990
Sisi ni kwenda kuzungumza zaidi kuhusu, kutokana na
data, jinsi gani unaweza kutoa sehemu?

149
00:06:42,990 --> 00:06:47,010
>> Na hivyo kuguswa ni kweli baridi kwa sababu wewe
Unaweza kutumia kwa mwisho wowote nyuma unataka.

150
00:06:47,010 --> 00:06:50,480
Kama una kama chatu nyuma mwisho,
kama chatu wako anaweza mate nje baadhi ya data,

151
00:06:50,480 --> 00:06:51,610
Kuguswa unaweza kutoa yake.

152
00:06:51,610 --> 00:06:54,700
Kama hakuna matokeo JS
wa takwimu, kuguswa mithili hiyo.

153
00:06:54,700 --> 00:06:56,890
Ruby reli na
data, kuguswa mithili hiyo.

154
00:06:56,890 --> 00:07:01,860
>> Hivyo kuguswa kimsingi ni mtandao
view-- mwisho mbele na vipengele

155
00:07:01,860 --> 00:07:03,910
kwa chanzo chochote data wowote.

156
00:07:03,910 --> 00:07:07,145
Na hivyo kwenda kutoka chanzo data kwa
kuguswa vipengele ni rahisi sana.

157
00:07:07,145 --> 00:07:08,770
Kwenda njia nyingine ni vigumu kidogo.

158
00:07:08,770 --> 00:07:10,462
Ambayo inatumia Flux kama nilivyoeleza hapo awali.

159
00:07:10,462 --> 00:07:11,420
Sisi si kupata ndani ya kwamba.

160
00:07:11,420 --> 00:07:13,740
Tutaweza kuzingatia zaidi juu ya
data-to-sehemu upande.

161
00:07:13,740 --> 00:07:15,880
Kwa njia hii unaweza kufanya
baridi, na furaha programu mtandao.

162
00:07:15,880 --> 00:07:19,870
Itakuwa si kuathiri dunia ya nje
kwa sasa, lakini hiyo ni hadithi nyingine.

163
00:07:19,870 --> 00:07:22,210
>> OK, hivyo kama ungekuwa hapa
kwa ajili ya semina yangu ya mwisho

164
00:07:22,210 --> 00:07:26,610
utasikia kujua kwamba wote wa kificho kwa
Majadiliano ya leo ni kwenda kuwa katika URL hii

165
00:07:26,610 --> 00:07:29,320
hapa, pole, URL hii hapa.

166
00:07:29,320 --> 00:07:32,730
Na kimsingi tunakwenda kwenda
kupitia hatua nne, labda tano,

167
00:07:32,730 --> 00:07:33,510
pengine si mitano.

168
00:07:33,510 --> 00:07:37,300
Tutaweza hoja kwa njia ya hatua nne
la kujenga sampuli kuguswa programu.

169
00:07:37,300 --> 00:07:39,550
Na hivyo kificho zote chanzo
kwa kila hatua ya njia

170
00:07:39,550 --> 00:07:42,216
ni kwenda kuwa haki hapa, hivyo kama
wewe ni kufuatia pamoja nyumbani,

171
00:07:42,216 --> 00:07:43,991
kujisikia huru peruse kanuni hii.

172
00:07:43,991 --> 00:07:46,740
Kama wewe ni kufuatia pamoja hapa,
tutaweza kuwa na kuonyesha ni juu ya screen,

173
00:07:46,740 --> 00:07:47,739
hivyo msiwe na wasiwasi kuhusu hilo.

174
00:07:47,739 --> 00:07:50,930
Lakini kama uko nyumbani, kujisikia
huru kutembelea tovuti hii.

175
00:07:50,930 --> 00:07:56,400
Na, Naam, unapaswa kuwa na uwezo wa kupata
kanuni zote wewe d milele haja hapa.

176
00:07:56,400 --> 00:08:01,380
Hivyo ni vizuri kudanganya karatasi pamoja
kwa Adventures yako ya baadaye na kuguswa.

177
00:08:01,380 --> 00:08:04,490
Baridi, hivyo kama kila mtu ambaye ni hapa,
na hata kama uko nyumbani,

178
00:08:04,490 --> 00:08:11,580
kuvuta up tovuti hii, is.gd/cs50react,
hakuna mji mkuu, hakuna kusisitiza, hakuna kitu.

179
00:08:11,580 --> 00:08:15,849
>> Utaona ukurasa kwamba inaonekana
kidogo kama hii.

180
00:08:15,849 --> 00:08:17,140
Hili ni jambo aitwaye CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen ni shirikishi
mazingira coding

182
00:08:20,030 --> 00:08:23,364
na ambayo siwezi kuandika kanuni hapa, na
kutakuwa na kuwa moja kwa moja alimtuma kwenu.

183
00:08:23,364 --> 00:08:24,780
Na kwa njia hii, siwezi kuandika kanuni.

184
00:08:24,780 --> 00:08:26,920
Siwezi kukimbia kificho hapa.

185
00:08:26,920 --> 00:08:33,470
>> Kwa example-- na kama reloads-- kuona,
Mimi mbio JavaScript kificho katika ukurasa

186
00:08:33,470 --> 00:08:36,390
hapa hapa, na itabidi
moja kwa moja atatoa ukurasa wa mtandao

187
00:08:36,390 --> 00:08:37,980
na hii kanuni JavaScript.

188
00:08:37,980 --> 00:08:40,039
Na hivyo hii ni njia
kwa sisi kujaribu nje kificho

189
00:08:40,039 --> 00:08:43,089
kweli haraka bila ya kuwa na kutumia
ID wetu au kutumia mashine yetu ya ndani

190
00:08:43,089 --> 00:08:44,290
au chochote.

191
00:08:44,290 --> 00:08:47,670
Ni njia ya haraka sana kwa wewe mockup
na mtihani nje aina mbalimbali za kificho.

192
00:08:47,670 --> 00:08:50,560
>> Hivyo nina kwenda kuwa na kuchukua
mfano kificho, kuweka hapa.

193
00:08:50,560 --> 00:08:52,374
Tunakwenda kuwa kazi kwa njia hiyo.

194
00:08:52,374 --> 00:08:54,540
Na kama wewe ni nyumbani,
anaweza kuvuta hii up pia.

195
00:08:54,540 --> 00:08:57,530
Na nimekuwa tayari imewekwa
Kuguswa hapa, hivyo unaweza tu

196
00:08:57,530 --> 00:09:00,770
kuandika kanuni yako mwenyewe hapa, na
kujaribu kama uwanja wa michezo yako mwenyewe.

197
00:09:00,770 --> 00:09:04,940
>> Naam, kama kila mtu
kufungua kiungo huu hapa.

198
00:09:04,940 --> 00:09:08,080
Tafadhali nipe Thumbs
up mara moja kuwa ni wazi.

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

200
00:09:10,960 --> 00:09:13,770
Baridi, baridi baridi.

201
00:09:13,770 --> 00:09:16,914
Kuna kitu hapa kwa sasa, lakini
sisi kubadili hali hiyo hivi karibuni.

202
00:09:16,914 --> 00:09:21,250
>> OK, hivyo kuguswa ni JavaScript
maktaba, na kama vile,

203
00:09:21,250 --> 00:09:24,480
inahitaji elimu ya JavaScript,
ambayo ni lugha ya programu ya mtandao.

204
00:09:24,480 --> 00:09:27,660
Na ni kutumiwa kwa mambo mengine
sasa pia lakini kimsingi mtandao kuendeleza

205
00:09:27,660 --> 00:09:32,040
lugha, hivyo kama wewe ni unfamiliar na
kwamba, kusoma tovuti inayoitwa JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Ni ajabu.

207
00:09:32,700 --> 00:09:34,240
Unaweza kujifunza JavaScript
katika muda wa nusu saa.

208
00:09:34,240 --> 00:09:34,990
Ni ajabu.

209
00:09:34,990 --> 00:09:36,420
>> Ili kuwapa kusoma.

210
00:09:36,420 --> 00:09:39,960
Sisi pia ni mengi ya HTML hapa kwa sababu
sisi ni kubuni kurasa za mtandao bila shaka.

211
00:09:39,960 --> 00:09:43,890
Hivyo kama wewe ni unfamiliar na
HTML, angalia HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Nadhani kujifunza kuguswa ni
rahisi mara milioni ikiwa tayari

213
00:09:46,520 --> 00:09:47,892
kujua ujenzi wa vitalu.

214
00:09:47,892 --> 00:09:50,600
Kama una vipengele, ni
rahisi kufanya sehemu kubwa.

215
00:09:50,600 --> 00:09:51,860
Hiyo ni kuguswa lugha kwa ajili yenu.

216
00:09:51,860 --> 00:09:54,270
>> Hivyo kwenda mbele na kutoa
mambo haya ya kusoma.

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

218
00:09:55,070 --> 00:09:57,440
Kuwapa kusoma kama wewe ni
nyumbani kama wewe si

219
00:09:57,440 --> 00:10:00,794
ukoo na HTML au JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, hivyo nini tunakwenda
kufanya ni tunakwenda kufanya

221
00:10:02,960 --> 00:10:06,470
msingi sana flashcard programu kutumia kuguswa.

222
00:10:06,470 --> 00:10:08,210
Tunakwenda kuwa na flashcard.

223
00:10:08,210 --> 00:10:09,880
Unaweza flip kadi na kurudi.

224
00:10:09,880 --> 00:10:12,399
Na tutaweza pia kuwa na orodha ya
kadi zote kwamba tuna,

225
00:10:12,399 --> 00:10:14,190
na kama sisi ni hisia
kabambe, tuweze kuwa

226
00:10:14,190 --> 00:10:17,060
uwezo wa kubadili kati
magari kwa kubonyeza yao.

227
00:10:17,060 --> 00:10:20,360
>> Lakini hii ni, bila wazi yako
mifupa, rahisi sana kuguswa programu.

228
00:10:20,360 --> 00:10:22,560
Na hivyo hii ni kweli
si yasiyo na kutekeleza,

229
00:10:22,560 --> 00:10:26,030
lakini tunakwenda zinaonyesha kuwa, kama wewe kufanya
hii, ni sana, ni rahisi sana kupanua

230
00:10:26,030 --> 00:10:27,680
kama watu wengine kukusaidia na hayo.

231
00:10:27,680 --> 00:10:33,750
Hivyo sisi ni kwenda kupitia hatua nne
kuanzia mwanzo wa kujenga hii.

232
00:10:33,750 --> 00:10:36,740
>> OK, hivyo hatua nne, tutaweza
kuanza mbali na hatua ya kwanza.

233
00:10:36,740 --> 00:10:39,790
Hatua ya kwanza ni kwenda kuwa
kujenga sehemu yako ya kwanza.

234
00:10:39,790 --> 00:10:44,830
Kama nilivyosema hapo kabla, sehemu katika kuguswa
ni tu HTML kipengele juu ya steroids.

235
00:10:44,830 --> 00:10:49,660
Ni bayana HTML
na baadhi ya tabia, na

236
00:10:49,660 --> 00:10:52,600
bayana jinsi watu
unaweza kuingiliana na hayo jinsi

237
00:10:52,600 --> 00:10:54,270
ingekuwa hali ya ndani.

238
00:10:54,270 --> 00:10:57,630
Kama kifungo watajua kama ni wangapi
mara imekuwa clicked kwa mfano,

239
00:10:57,630 --> 00:11:01,010
na itakuwa kujua jinsi ya kuweka yenyewe nje.

240
00:11:01,010 --> 00:11:04,430
>> Basi hebu kwenda mbele na kujenga wetu
Sehemu ya kwanza kwa kutumia JavaScript.

241
00:11:04,430 --> 00:11:09,711
Hivyo kama syntax inaonekana weird,
hiyo ni kwa sababu ni aina ya ni.

242
00:11:09,711 --> 00:11:11,710
Hivyo, tena, tunakwenda
kufanya kutofautiana kuitwa

243
00:11:11,710 --> 00:11:14,580
programu kutumia keyword basi,
ambayo inafanya kutofautiana,

244
00:11:14,580 --> 00:11:18,210
basi App sawa React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Kuguswa ni maktaba na ina
the kujenga darasa kazi.

246
00:11:22,609 --> 00:11:24,400
Na kazi hii ni
kidogo ya kificho kwamba wewe

247
00:11:24,400 --> 00:11:29,090
unaweza kutumia ili kujenga mpya
aina ya kuguswa sehemu.

248
00:11:29,090 --> 00:11:32,780
Na hivyo React.createClass
hufanya sehemu,

249
00:11:32,780 --> 00:11:35,270
na sehemu hii itakuwa
kuwa na uwezo wa kufanya mambo ya ajabu.

250
00:11:35,270 --> 00:11:40,460
Jambo kuu inaweza kufanya ni kutoa
kitu, atatoa kama kazi.

251
00:11:40,460 --> 00:11:44,500
>> Tena, kama ripoti hii si dhahiri kwa
wewe, mimi kupendekeza wewe kwenda juu ya JS ajili ya paka

252
00:11:44,500 --> 00:11:45,682
na kuangalia ni nje.

253
00:11:45,682 --> 00:11:47,710
Ni kwamba zoomed katika vizuri?

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

255
00:11:48,490 --> 00:11:50,670
>> Hivyo kila mahitaji sehemu
kuwa atatoa kazi.

256
00:11:50,670 --> 00:11:53,010
Atatoa kazi anasema,
je, mimi magazeti juu ya screen?

257
00:11:53,010 --> 00:11:54,760
Lakini sehemu ni
haina maana kama hana

258
00:11:54,760 --> 00:11:58,060
kujua nini magazeti juu ya screen, hivyo
unahitaji kuwa na atatoa kazi.

259
00:11:58,060 --> 00:12:01,904
>> Hivyo katika atatoa kitu, wewe
tu haja ya kurudi baadhi HTML.

260
00:12:01,904 --> 00:12:03,820
Na nini baridi ni kwamba
kuna kitu inaitwa ni

261
00:12:03,820 --> 00:12:08,660
JSX, ambayo ni upanuzi wa
JavaScript ambayo hutumiwa na kuguswa.

262
00:12:08,660 --> 00:12:11,845
Ni hebu wewe kuandika HTML ndani ya
ya yako, JavaScript ambayo

263
00:12:11,845 --> 00:12:13,970
sauti aina ya weird wakati
wewe kwanza kufikiri juu yake,

264
00:12:13,970 --> 00:12:15,553
lakini inafanya mengi ya akili baadaye.

265
00:12:15,553 --> 00:12:17,430
Hivyo tunaweza kufanya hivyo.

266
00:12:17,430 --> 00:12:21,360
Kama wewe ni ukoo na HTML, najua
tuna div kwa madhumuni ya jumla

267
00:12:21,360 --> 00:12:22,790
chombo kwa mambo ya ajabu.

268
00:12:22,790 --> 00:12:26,380
Tunaweza kurudi div, na ndani ya
div hii, tunaweza kuweka mambo ya ajabu.

269
00:12:26,380 --> 00:12:32,390
>> Basi hebu kusema tunataka atatoa tu
sawa-up flashcard kwa sasa.

270
00:12:32,390 --> 00:12:34,890
Flashcard, napenda kusema,
itakuwa na swali na jibu.

271
00:12:34,890 --> 00:12:37,530
Hivyo ndani ya div hii, hebu
magazeti nje aya

272
00:12:37,530 --> 00:12:42,155
kwamba anasema question-- ni nini
jibu la mwisho kwa maisha, ulimwengu?

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

274
00:12:47,640 --> 00:12:50,345
Na kisha jibu ni
kwenda kuwa, bila shaka, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Kwamba hakuwa na kuja vizuri wakati wote.

277
00:12:59,730 --> 00:13:04,164
Yeah, hivyo kimsingi unaweza kweli
kuandika HTML ndani ya wako JavaScript.

278
00:13:04,164 --> 00:13:06,330
Na hii ni kwenda kuwa
kuchapishwa katika screen.

279
00:13:06,330 --> 00:13:08,250
Basi hebu kujaribu nje.

280
00:13:08,250 --> 00:13:09,520
>> Hivyo tuna sehemu yetu.

281
00:13:09,520 --> 00:13:12,210
Tunahitaji kuwaambia kuguswa kuweka
sehemu ya juu ya screen

282
00:13:12,210 --> 00:13:18,990
hivyo React.render, hivyo taarifa kwamba sisi
kutibu programu kama kipengele kingine chochote.

283
00:13:18,990 --> 00:13:21,010
Sisi kuandika ni kama ilivyokuwa HTML kipengele.

284
00:13:21,010 --> 00:13:25,100
Kama badala ya kusema kama img
kwa picha au p kwa aya,

285
00:13:25,100 --> 00:13:28,120
kuandika App, hivyo Programu ni
kutibiwa kama HTML kipengele.

286
00:13:28,120 --> 00:13:30,380
Kama nilivyosema hapo kabla, ni
kipengele juu ya steroids.

287
00:13:30,380 --> 00:13:32,870
>> Hivyo atatoa Programu, nawe
kuwapa nafasi ya kuweka.

288
00:13:32,870 --> 00:13:37,170
Na hii ni jinsi gani unaweza
kuwaambia ni wapi kuweka hilo.

289
00:13:37,170 --> 00:13:46,200
I have umba div rahisi juu ya
ukurasa wito na kitambulisho cha ukurasa,

290
00:13:46,200 --> 00:13:48,300
na hapo ndipo
kipengele ni kwenda.

291
00:13:48,300 --> 00:13:49,841
>> Na sisi siyo kwenda kukimbia kwa HTML.

292
00:13:49,841 --> 00:13:53,145
Kimsingi hii ni kwenda kupata
kuweka ndani ya kipengele hiki ukurasa

293
00:13:53,145 --> 00:13:54,270
kwamba tuna juu ya screen.

294
00:13:54,270 --> 00:13:59,210
Hivyo ni anaendesha kanuni hii, na huchota hii
Jambo kwenye screen, hivyo hapa sisi ni.

295
00:13:59,210 --> 00:14:01,770
Tumefanya kuguswa yetu ya kwanza sehemu.

296
00:14:01,770 --> 00:14:08,000
>> Hivyo tu kama kurejea, sisi upole alifanya
aina mpya ya sehemu, sawa?

297
00:14:08,000 --> 00:14:10,145
Hiyo ni nini React.createClass.

298
00:14:10,145 --> 00:14:12,680
Na katika sehemu ambayo, sisi
habari, nini ni lazima kufanya.

299
00:14:12,680 --> 00:14:15,590
Kila sehemu hii ni kwa
kuchapishwa kwenye screen,

300
00:14:15,590 --> 00:14:19,300
itakuwa magazeti nje div kwa
aya mbili ndani yake.

301
00:14:19,300 --> 00:14:24,460
>> Na nini sisi hivyo, tukiwa na programu mpya
kutumia pembe mabano programu nukuu.

302
00:14:24,460 --> 00:14:27,160
Tunaambiwa ni kuiweka
ndani ya ukurasa kipengele.

303
00:14:27,160 --> 00:14:29,867
Na hivyo nini mimi, ni umba
programu mpya kutoka kwamba template.

304
00:14:29,867 --> 00:14:31,200
Na kisha mimi aliiambia yake ya kutoa hiyo.

305
00:14:31,200 --> 00:14:33,680
Hivyo ni kusema, sawa, programu,
nifanye magazeti nje?

306
00:14:33,680 --> 00:14:36,970
Programu anasema, kwenda magazeti nje div
na aya mbili ndani yake.

307
00:14:36,970 --> 00:14:40,420
Na voila, kuna div wetu na
aya mbili ndani yake.

308
00:14:40,420 --> 00:14:43,180
Mantiki hadi sasa?

309
00:14:43,180 --> 00:14:46,690
>> Hivyo, tena, changamoto zima la kuguswa
ni kujua tu jinsi ya kufanya vipengele.

310
00:14:46,690 --> 00:14:48,500
Jinsi ya kufanya
vipengele kazi pamoja.

311
00:14:48,500 --> 00:14:51,780
Sasa kwa kuwa tumekuwa alifanya yetu ya kwanza
sehemu, hebu kwenda nyuma

312
00:14:51,780 --> 00:14:54,284
na kufanya vipengele customizable.

313
00:14:54,284 --> 00:14:56,700
Hivyo unajua jinsi katika HTML wewe
inaweza kutoa madarasa yako vifungo?

314
00:14:56,700 --> 00:14:59,146
Unaweza kutoa nanga yako href.

315
00:14:59,146 --> 00:15:00,770
Unaweza kutoa pembejeo yako aina, sawa?

316
00:15:00,770 --> 00:15:04,740
Unaweza kutoa desturi zaidi
mali kwa wote wa mambo yako

317
00:15:04,740 --> 00:15:06,490
kwa kufanya hivyo kuvutia zaidi.

318
00:15:06,490 --> 00:15:09,030
Na sisi kweli anaweza kufanya
exact kitu.

319
00:15:09,030 --> 00:15:17,500
>> Basi hebu kusema tunataka yetu
programu ya kwenda kutoa kadi yoyote.

320
00:15:17,500 --> 00:15:19,630
Hivi sasa sisi tu
kulipwa kadi hardcoded.

321
00:15:19,630 --> 00:15:22,530
Tunajua kuna moja tu
kadi inaweza kufanya, hivyo sisi ni

322
00:15:22,530 --> 00:15:25,960
kwenda kujaribu na kubadili hali hii sasa ili
kwamba tunaweza tu kuwapa baadhi kadi.

323
00:15:25,960 --> 00:15:27,410
Kutakuwa na magazeti nje kadi.

324
00:15:27,410 --> 00:15:29,380
>> Wewe ni lazima kujaribu na kufanya yako
vipengele madhumuni ya jumla sana.

325
00:15:29,380 --> 00:15:31,654
Hivyo njia hii mimi naweza email
hii rafiki yangu na kuwa kama,

326
00:15:31,654 --> 00:15:33,820
chochote flashcard una,
tu kulisha ndani hapa,

327
00:15:33,820 --> 00:15:35,290
na kutakuwa na kufanya hivyo peke yake.

328
00:15:35,290 --> 00:15:37,650
Unaweza kuweka wengine
mambo katika programu yako mwenyewe.

329
00:15:37,650 --> 00:15:40,600
>> Lakini kwanza, hebu kuvunja hii
juu katika sehemu mbili,

330
00:15:40,600 --> 00:15:44,500
lakini tunataka tofauti kadi
uchapishaji sehemu kutoka halisi programu sehemu.

331
00:15:44,500 --> 00:15:46,660
Hivyo nini tunaweza kufanya ni sisi
Unaweza kubadilisha hii kutoka App

332
00:15:46,660 --> 00:15:51,300
kwa CardView, tu
jina jipya kwa programu,

333
00:15:51,300 --> 00:15:54,450
na tunaweza kufanya mpya
sehemu inayoitwa App,

334
00:15:54,450 --> 00:15:56,336
si kwa kuchanganyikiwa na umri wa Programu.

335
00:15:56,336 --> 00:16:00,730
Sisi tumepewa createClass,
na kama katika HTML,

336
00:16:00,730 --> 00:16:03,590
unaweza kiota kuguswa vipengele
ndani ya kila mmoja.

337
00:16:03,590 --> 00:16:16,430
>> Hivyo katika hili atatoa kazi,
kazi ya kurudi CardView,

338
00:16:16,430 --> 00:16:18,234
na hii ni halisi kitu kimoja.

339
00:16:18,234 --> 00:16:19,400
Kuona kwa nini ni kitu kimoja?

340
00:16:19,400 --> 00:16:22,590
Badala ya utoaji tu programu hiyo
ina div na pairing ndani yake,

341
00:16:22,590 --> 00:16:26,194
programu mithili CardView, na
CardView mithili div na aya.

342
00:16:26,194 --> 00:16:29,110
Hivyo hii ni mfano wetu wa kwanza wa
mambo nesting ndani ya kila mmoja.

343
00:16:29,110 --> 00:16:32,177
Je, hiyo mantiki?

344
00:16:32,177 --> 00:16:33,760
Hivyo, tena, tuna CardView kipengele.

345
00:16:33,760 --> 00:16:37,250
Tuna mambo programu
kuwa ni kubwa kuliko.

346
00:16:37,250 --> 00:16:40,990
>> OK, hivyo tunataka yetu CardView-- kama wewe
kutoa CardView nzuri kadi fulani,

347
00:16:40,990 --> 00:16:43,370
kutakuwa na magazeti nje kwa ajili yenu, haki?

348
00:16:43,370 --> 00:16:48,050
Hivyo kwanza, tunahitaji kufanya kadi,
hivyo hebu kufanya kadi kitu.

349
00:16:48,050 --> 00:17:02,930
Hivyo basi kadi yangu equal--
kama wewe ni wote wa utambuzi,

350
00:17:02,930 --> 00:17:05,260
hii ni maamuzi nukuu tu
kitu katika JavaScript.

351
00:17:05,260 --> 00:17:09,280
Ni aina ya kama struct
katika C, hivyo sisi alifanya kadi,

352
00:17:09,280 --> 00:17:15,920
na hivyo sasa tunaweza kupita kadi hii kama
mali au kama sifa katika HTML

353
00:17:15,920 --> 00:17:17,290
istilahi kwa programu yetu.

354
00:17:17,290 --> 00:17:20,210
Ili tuweze kufanya hivyo, Programu
kadi ni sawa na myCard.

355
00:17:20,210 --> 00:17:23,200
>> Unajua jinsi katika pembejeo, unaweza kufanya
pembejeo aina ni sawa na asilia au kifungo

356
00:17:23,200 --> 00:17:25,240
tabaka la sawa na BTN kwa bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Sawa wazo, Programu kadi equals--
nimepata kuweka braces here--

358
00:17:29,500 --> 00:17:33,830
Programu kadi ni sawa na myCard, hivyo hii
anasema tuna hii kitu kadi.

359
00:17:33,830 --> 00:17:39,149
Mimi nina kwenda kwa kupita
mali kwa sehemu ya programu.

360
00:17:39,149 --> 00:17:41,440
Na hii sehemu programu mapenzi
kuwa na uwezo wa kupata huduma hiyo na kufanya

361
00:17:41,440 --> 00:17:43,580
kuvutia mambo nayo.

362
00:17:43,580 --> 00:17:47,650
>> Hivyo programu yetu ni kwenda kuwa
kutokana na kadi, hivyo kwa sasa,

363
00:17:47,650 --> 00:17:49,980
hebu kuwa na programu kutoa tu
kadi ya CardView

364
00:17:49,980 --> 00:17:53,110
yenyewe kwa sababu kama programu si
kwenda kujua nini cha kufanya na hayo,

365
00:17:53,110 --> 00:17:54,850
hivyo tutaweza tu kuwapa CardView.

366
00:17:54,850 --> 00:18:00,050
Hivyo tutaweza kupita
njia ile ile, kadi sawa,

367
00:18:00,050 --> 00:18:05,426
na hivyo kila sehemu wanaweza kupata
mambo ambayo amepewa yake.

368
00:18:05,426 --> 00:18:07,800
Wanaweza kupata mali
ambayo yamekuwa aliyopewa ni

369
00:18:07,800 --> 00:18:09,470
kutumia syntax hii, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Hivyo kile kinachotokea hapa ni
una myCard kitu.

372
00:18:14,920 --> 00:18:18,250
Wewe kupita katika programu
kutumia App kadi ni sawa na myCard.

373
00:18:18,250 --> 00:18:21,420
Hiyo kadi kitu ni kutolewa kwa programu yako.

374
00:18:21,420 --> 00:18:24,400
Programu unaweza kupata ni
kama this.props.card.

375
00:18:24,400 --> 00:18:28,780
Ni aina ya kama picha
anajua nini chanzo ni.

376
00:18:28,780 --> 00:18:31,972
>> Programu hii anajua nini ni kadi
ni, na inaweza kufanya mambo kwa hayo.

377
00:18:31,972 --> 00:18:32,930
Inaweza kufanya computations.

378
00:18:32,930 --> 00:18:35,290
Ni wanaweza kufanya maamuzi ya msingi mbali ya hiyo.

379
00:18:35,290 --> 00:18:39,950
>> Kwa sasa, mimi alikuwa anaenda kupita
this.props.card kwenye CardView.

380
00:18:39,950 --> 00:18:43,420
Mantiki hadi sasa?

381
00:18:43,420 --> 00:18:45,210
Ni itabidi kufanya maana zaidi sasa.

382
00:18:45,210 --> 00:18:46,990
>> OK, hivyo sasa sisi ni saa CardView.

383
00:18:46,990 --> 00:18:51,719
CardView yetu, kutokana na kadi, lazima
magazeti nje swali lake na jibu.

384
00:18:51,719 --> 00:18:54,510
Hivi sasa sisi tu kuchapishwa baadhi
maswali hardcoded na majibu.

385
00:18:54,510 --> 00:18:57,720
Tunahitaji kufikiri out-- tunahitaji
kuuliza kadi kwamba alitupa

386
00:18:57,720 --> 00:19:01,360
kile ni swali na jibu, na
kisha magazeti hii nje katika screen.

387
00:19:01,360 --> 00:19:02,470
>> Hivyo tunaweza kufanya hivyo hapa.

388
00:19:02,470 --> 00:19:06,135
Katika kutoa begin-- kwanza kufanya sawa.

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

390
00:19:08,710 --> 00:19:13,050
Hivyo nini sisi ni kufanya hapa ni tunajua kwamba
kadi ni ametupa kwa mali,

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

392
00:19:13,580 --> 00:19:15,930
Ni tuliyopewa kama pembejeo.

393
00:19:15,930 --> 00:19:19,440
Kama ni karibu kama
hoja kwa kazi.

394
00:19:19,440 --> 00:19:22,810
Kadi ni hoja
karibu kwa CardView hii.

395
00:19:22,810 --> 00:19:25,239
>> Tutaweza kutafuta kwamba, na kuweka
ndani swali kutofautiana.

396
00:19:25,239 --> 00:19:27,280
Kuhakikisha jibu alikwenda
kwa jibu kutofautiana.

397
00:19:27,280 --> 00:19:31,130
Papo kwamba kadi ya kujibu.

398
00:19:31,130 --> 00:19:35,072
Na sasa kwamba tuna hizi,
badala ya uchapishaji nje maandishi kwamba,

399
00:19:35,072 --> 00:19:37,030
tunakwenda magazeti nje
chochote alitupa.

400
00:19:37,030 --> 00:19:43,580
>> Hivyo hii stuff-- hivyo tunakwenda
kuizima Swali Jibu.

401
00:19:43,580 --> 00:19:46,380
Hebu angalia kama hii kazi.

402
00:19:46,380 --> 00:19:52,800
Baridi, hivyo hebu hatua kwa njia hiyo
muda zaidi tu kuwa na uhakika.

403
00:19:52,800 --> 00:20:00,470
>> Hivyo kadi yangu ni kadi kitu, na sisi
ni kutoa kwamba kadi ya programu.

404
00:20:00,470 --> 00:20:04,790
Na programu ni kwenda kuchukua
kadi na kuwapa CardView.

405
00:20:04,790 --> 00:20:09,190
Na CardView hii anasema, kama wewe
nipe yoyote flashcard kitu,

406
00:20:09,190 --> 00:20:11,920
Mimi itabidi magazeti nje swali lake
na jibu lake, sawa?

407
00:20:11,920 --> 00:20:14,590
>> Hivyo kitu ambacho ninaweza kufanya ni siwezi
kutuma kanuni hii, kwanza

408
00:20:14,590 --> 00:20:16,580
kama mistari 10 ya kificho wangu, kwa rafiki yangu.

409
00:20:16,580 --> 00:20:18,820
Aliweza kuiweka katika
maombi yake mwenyewe.

410
00:20:18,820 --> 00:20:27,200
Na kitu kimoja kwa muda mrefu kama alifanya hivyo,
kama CardView kadi ni sawa na hii,

411
00:20:27,200 --> 00:20:30,580
muda mrefu kama yeye kuundwa CardView
akampa taarifa sahihi,

412
00:20:30,580 --> 00:20:31,987
aweze kutoa kadi yake mwenyewe.

413
00:20:31,987 --> 00:20:34,320
Na hivyo kwa njia hii, ni kweli
njia ya baridi kwa wewe kujenga

414
00:20:34,320 --> 00:20:35,906
vipengele ambavyo kutumia kila mmoja, haki?

415
00:20:35,906 --> 00:20:38,280
Kadi hii, mimi naweza kuchapisha
CardView hii kwenye mtandao,

416
00:20:38,280 --> 00:20:39,790
na watu bila kuwa na uwezo wa matumizi yake.

417
00:20:39,790 --> 00:20:45,070
Hivyo kimsingi, ni kama moja ya
kazi ya kiwango katika maktaba C.

418
00:20:45,070 --> 00:20:47,280
>> Ni kazi ambapo
mtu ameandika hilo.

419
00:20:47,280 --> 00:20:48,419
Unaweza kutoa mchango fulani.

420
00:20:48,419 --> 00:20:49,710
Ni itabidi kuzalisha pato fulani.

421
00:20:49,710 --> 00:20:50,890
Huna huduma jinsi kazi ndani.

422
00:20:50,890 --> 00:20:53,790
Muda mrefu kama wewe kuwapa haki
pembejeo, kutakuwa na kufanya pato haki.

423
00:20:53,790 --> 00:20:57,850
>> Na sehemu inaweza kuwa
mawazo ya njia hiyo hiyo.

424
00:20:57,850 --> 00:21:00,280
CardView Hii ni kama
maktaba kazi.

425
00:21:00,280 --> 00:21:03,400
Kama wewe kuwapa baadhi kadi
kama mali, itabidi

426
00:21:03,400 --> 00:21:05,095
magazeti nje maudhui ya kadi hiyo.

427
00:21:05,095 --> 00:21:16,820
Kama kama mimi kubadili kadi yangu kwa
badala kuwa kama yale ni 5 pamoja na 37,

428
00:21:16,820 --> 00:21:19,210
itakuwa update ipasavyo.

429
00:21:19,210 --> 00:21:21,955
Hivyo tu kwa kubadilisha pembejeo,
anapata pato fulani.

430
00:21:21,955 --> 00:21:24,830
Hivyo unaweza kufikiria vipengele karibu
kama kazi kwa njia hii, ambayo

431
00:21:24,830 --> 00:21:25,920
unaweza kuweka pamoja.

432
00:21:25,920 --> 00:21:29,440
Kupata pembejeo, kama CardView hii
kama pembejeo, unaweza kupata pato.

433
00:21:29,440 --> 00:21:31,900
Katika kesi hiyo, pato ni HTML.

434
00:21:31,900 --> 00:21:34,404
Mantiki hadi sasa?

435
00:21:34,404 --> 00:21:36,890
Baridi, hivyo tena, mali ni
jinsi gani unaweza kupita maelezo

436
00:21:36,890 --> 00:21:40,900
ndani na nje ya vipengele.

437
00:21:40,900 --> 00:21:42,740
>> Sawa, hivyo hebu kufanya hili
Jambo shirikishi.

438
00:21:42,740 --> 00:21:44,450
Sasa hivi ni aina ya boring.

439
00:21:44,450 --> 00:21:45,520
Ni nini [inaudible]?

440
00:21:45,520 --> 00:21:48,210
Unaweza magazeti baadhi nje,
lakini hiyo yote inaweza kufanya.

441
00:21:48,210 --> 00:21:51,550
>> Basi hebu kwenda nyuma ya
umri wa swali tu kwa sasa.

442
00:21:51,550 --> 00:21:54,405
OK, hivyo hivi sasa vipengele hivi
ni boring kwa sababu wote kufanya,

443
00:21:54,405 --> 00:21:55,030
wao kupata pembejeo.

444
00:21:55,030 --> 00:21:56,100
Wao kufanya pato, sawa?

445
00:21:56,100 --> 00:21:57,049
Hiyo ni aina ya boring.

446
00:21:57,049 --> 00:21:59,090
Tunataka kuwa na yetu
vipengele kuweza kuwa na

447
00:21:59,090 --> 00:22:02,150
aina fulani ya hali ya ndani,
kama kukumbuka kitu.

448
00:22:02,150 --> 00:22:05,320
>> Kwa flashcard, kwa
mfano, ni aina gani ya hali

449
00:22:05,320 --> 00:22:07,550
Huenda unataka
kumbuka kwa flashcard?

450
00:22:07,550 --> 00:22:09,740
Hadhi muda gani
Huenda unataka kukumbuka

451
00:22:09,740 --> 00:22:12,491
kwa flashcard katika programu flashcard?

452
00:22:12,491 --> 00:22:13,990
Watazamaji: Kama imekuwa ni flipped?

453
00:22:13,990 --> 00:22:14,990
NEEL Mehta: Yeah, haki.

454
00:22:14,990 --> 00:22:17,665
Hivyo unaweza kutaka kuweka
wimbo wa watu wewe uso juu au ni

455
00:22:17,665 --> 00:22:19,100
wewe uso chini kwenye kadi.

456
00:22:19,100 --> 00:22:23,420
Kwenye Facebook, kwa mfano, wewe ungekuwa
wanataka kukumbuka ambapo katika kulisha habari

457
00:22:23,420 --> 00:22:25,870
ni wewe au kama nani ni wasifu
unafanya hivi sasa.

458
00:22:25,870 --> 00:22:30,127
>> On Mtume, kama yale maandishi
aina katika sanduku pembejeo, sawa?

459
00:22:30,127 --> 00:22:31,710
Kama mahitaji ukurasa, unaendelea mbali.

460
00:22:31,710 --> 00:22:32,793
Lakini wewe si kweli huduma.

461
00:22:32,793 --> 00:22:33,770
Ni tu muda.

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

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

464
00:22:36,152 --> 00:22:38,360
NEEL Mehta: Kama flash
kadi, kama unaweza kuwa na kuona

465
00:22:38,360 --> 00:22:40,290
upande swali au upande jibu?

466
00:22:40,290 --> 00:22:41,070
>> Watazamaji: Sawa.

467
00:22:41,070 --> 00:22:43,270
>> NEEL Mehta: Kama
mbili upande mmoja flashcard, sawa?

468
00:22:43,270 --> 00:22:46,370
Yeah, hivyo unataka
kuwa na wazo hili la sasa

469
00:22:46,370 --> 00:22:50,370
Nina mali, ambayo ni kama pembejeo,
lakini hali, ambayo ni ya muda mfupi, uh,

470
00:22:50,370 --> 00:22:51,839
ambapo wewe ni juu ya ukurasa, haki?

471
00:22:51,839 --> 00:22:54,380
Tena, mimi alisema katika Facebook
Mjumbe, nina kama ambayo mtu

472
00:22:54,380 --> 00:22:56,550
wewe ni kuangalia Picha
au nani ni wasifu, sawa?

473
00:22:56,550 --> 00:22:58,030
>> Hii ni muda tu.

474
00:22:58,030 --> 00:23:01,200
Ni muhimu kuonyesha mtumiaji
nini kinaendelea, lakini mahitaji ukurasa.

475
00:23:01,200 --> 00:23:02,250
Ni kweli haina jambo.

476
00:23:02,250 --> 00:23:04,530
Hivyo hali ya muda mfupi ni,
hivyo sisi wote ni serikali.

477
00:23:04,530 --> 00:23:06,250
>> Hivyo, tena, kuna hali na props.

478
00:23:06,250 --> 00:23:09,084
Props ni pembejeo kutokana na
kutoka chanzo yako data.

479
00:23:09,084 --> 00:23:10,250
Hali ni kama defaults.

480
00:23:10,250 --> 00:23:13,700
Ni kama tu mambo ambayo
hufanya jambo shirikishi.

481
00:23:13,700 --> 00:23:17,720
>> Hivyo katika yetu CardView-- hebu kuwa
CardView-- hivyo wetu ilikuwa nzuri.

482
00:23:17,720 --> 00:23:21,420
Nini tunakwenda kufanya hapa, tunakwenda
kugusa CardView na tu CardView.

483
00:23:21,420 --> 00:23:25,105
Na hivyo rafiki yangu ambaye alipata hivyo, wao
bila taarifa tofauti yoyote.

484
00:23:25,105 --> 00:23:27,230
Hawakutaka kuwa na mabadiliko
yoyote ya maadili yao wenyewe,

485
00:23:27,230 --> 00:23:29,410
lakini wao Ningependa kuona yao
CardView got souped up.

486
00:23:29,410 --> 00:23:31,270
Hiyo ni sehemu nzuri kuhusu vipengele.

487
00:23:31,270 --> 00:23:35,290
>> OK, hivyo katika CardView yetu, hebu jaribu na
kuweka wimbo wa kama sisi ni awamu up

488
00:23:35,290 --> 00:23:36,560
au uso chini.

489
00:23:36,560 --> 00:23:40,480
Katika kuguswa sisi kufanya hivyo kwa kwanza
kubainisha hali ya awali.

490
00:23:40,480 --> 00:23:42,070
Wapi kadi kuanza?

491
00:23:42,070 --> 00:23:48,480
>> Hivyo kuwa kazi kuitwa getInitialState
kazi, na sisi kurudi kitu.

492
00:23:48,480 --> 00:23:53,310
Kitu hili lina baadhi ya serikali, na
hali ni tu jozi ufunguo thamani.

493
00:23:53,310 --> 00:23:56,950
Kama katika kuwafundisha, una muhimu na
thamani, una kama jina ni kamba.

494
00:23:56,950 --> 00:24:01,410
>> Katika kesi hiyo, hebu sema mbele ni kweli.

495
00:24:01,410 --> 00:24:03,760
Hii inasema kwamba tuna serikali.

496
00:24:03,760 --> 00:24:06,570
Sehemu moja ya hali
ni sifa aitwaye mbele.

497
00:24:06,570 --> 00:24:09,649
[Inaudible], kwa hiyo kwa msingi,
tuko mbele ya kadi,

498
00:24:09,649 --> 00:24:11,440
na tunaweza kubadili hali hii
kama sisi flip kadi.

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

500
00:24:13,380 --> 00:24:18,190
>> OK, hivyo katika atatoa, sasa hivi, tuko
kuonyesha swali na jibu.

501
00:24:18,190 --> 00:24:20,860
Sasa nini tunapaswa kufanya
ni kuonyesha swali

502
00:24:20,860 --> 00:24:24,370
kama sisi ni juu ya mbele ya kadi ili
Jibu ni kwa nyuma ya kadi.

503
00:24:24,370 --> 00:24:26,850
Hiyo ni kwa nini wote kufanya
kadi shirikishi.

504
00:24:26,850 --> 00:24:28,100
Basi hebu jaribu na kwa hii hapa.

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

506
00:24:31,600 --> 00:24:33,620
Naam, kwanza tu kufanya kutofautiana.

507
00:24:33,620 --> 00:24:37,790
Tunaweza kuuliza sasa this.state.front.

508
00:24:37,790 --> 00:24:42,010
Sisi kupata hali sisi huo
upatikanaji props, hivyo this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Kama tuko mbele, kisha Nakala
ni this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Kama tuko mbele ya
kadi, sisi ni kwenda kujaribu na kunyakua

512
00:24:51,360 --> 00:24:52,485
swali kutoka kadi.

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

514
00:24:54,782 --> 00:24:57,240
Vinginevyo, kama sisi ni juu ya nyuma
ya kadi, tunafanya nini?

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

516
00:25:01,830 --> 00:25:02,750
>> Watazamaji: jibu?

517
00:25:02,750 --> 00:25:05,041
>> NEEL Mehta: Yep, hivyo maandishi
sawa this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Lakini kama taarifa, sisi ni kutumia
hali ya kufanya uamuzi

520
00:25:10,930 --> 00:25:14,420
kwa sababu sasa sehemu
kuangalia tofauti

521
00:25:14,420 --> 00:25:16,710
msingi mbali jinsi haya kuingiliana na hayo.

522
00:25:16,710 --> 00:25:20,355
Hivyo badala ya uchapishaji nje hii,
tutaweza tu magazeti nje maandishi.

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

524
00:25:25,270 --> 00:25:28,650
Baridi, hivyo kwa sasa, kama unaweza kuona,
tunaona tu swali.

525
00:25:28,650 --> 00:25:37,720
Na kama mimi kubadili hali hapa manually
mbele ni uongo tunapata 42 nyuma.

526
00:25:37,720 --> 00:25:39,720
>> Hivyo, tena, sehemu hii
ina hali yake mwenyewe.

527
00:25:39,720 --> 00:25:43,440
Kama kifungo anajua kama
imekuwa ni taabu au la,

528
00:25:43,440 --> 00:25:46,080
jambo hili anayajua yaliyomo kwenye
mbele au nyuma.

529
00:25:46,080 --> 00:25:48,320
By default, ni juu ya mbele.

530
00:25:48,320 --> 00:25:50,840
Na kisha kama ni juu ya mbele,
tutaweza magazeti nje swali.

531
00:25:50,840 --> 00:25:53,106
Kama ni juu ya nyuma, tutaweza
magazeti nje jibu.

532
00:25:53,106 --> 00:25:54,980
Hivyo, tena, habari
kutokana na ni sawa.

533
00:25:54,980 --> 00:25:59,090
Ni tu inaonekana tofauti
kulingana na jinsi mpango hilo.

534
00:25:59,090 --> 00:26:02,670
Hivyo, kwa mfano, Facebook Mtume,
hata kama wewe kupata hiyo chanzo data,

535
00:26:02,670 --> 00:26:05,170
inaweza kuangalia tofauti
kwa sababu hali ni tofauti.

536
00:26:05,170 --> 00:26:08,421
Wewe ni kuangalia
ujumbe tofauti ya mtu.

537
00:26:08,421 --> 00:26:10,930
>> OK, hivyo hii yote ni vizuri na
nzuri, lakini sasa nini kweli

538
00:26:10,930 --> 00:26:15,940
kutufanya uwezo wa kubadilisha, iwe
kadi yetu ni mbele au nyuma.

539
00:26:15,940 --> 00:26:19,010
Tunaweza kufanya hivyo kwa kuongeza flip
kifungo, kifungo kadi ambayo

540
00:26:19,010 --> 00:26:22,950
flip kadi ikiwa ni [inaudible].

541
00:26:22,950 --> 00:26:31,770
Basi hebu kuongeza kifungo hapa, hii
kifungo, na kifungo hii watasema flip.

542
00:26:31,770 --> 00:26:35,650
>> Na hivyo sasa hivi, ni
haina kufanya kitu chochote.

543
00:26:35,650 --> 00:26:37,075
Ni tu inaonekana nzuri.

544
00:26:37,075 --> 00:26:43,650
Nini tunaweza kufanya ni tunaweza kuongeza click
handler, onClick sawa na this.flip,

545
00:26:43,650 --> 00:26:44,820
na tutaweza kufafanua flip baadaye.

546
00:26:44,820 --> 00:26:47,120
Lakini kimsingi, onClick
ni kazi ambayo

547
00:26:47,120 --> 00:26:48,675
anapata kuitwa wakati mtumiaji Clicks yake.

548
00:26:48,675 --> 00:26:52,330
>> Hivyo kifungo watajua
wakati imekuwa ni clicked.

549
00:26:52,330 --> 00:26:54,750
Akaenda imekuwa clicked,
itakuwa flip kadi.

550
00:26:54,750 --> 00:26:58,382
Ni aina ya kama yako
pizza utoaji guy.

551
00:26:58,382 --> 00:27:01,590
Wewe ni kama, sawa, wakati wowote mtu
wito mimi, itabidi kutoa pizza, sawa?

552
00:27:01,590 --> 00:27:03,420
>> Kujiandikisha msikilizaji hii.

553
00:27:03,420 --> 00:27:04,530
Wewe kusikiliza kwa tukio hilo.

554
00:27:04,530 --> 00:27:07,657
Wewe kupata kuitwa, na wakati
tukio kinachotokea, wewe kufanya kitu.

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

556
00:27:08,240 --> 00:27:11,480
Katika kesi hiyo, wakati uko
clicked, flip kadi.

557
00:27:11,480 --> 00:27:14,560
>> Na hivyo tunahitaji kufafanua
kazi ambayo itakuwa flip kadi,

558
00:27:14,560 --> 00:27:17,930
hivyo tutaweza kuandika kwamba haki
hapa, flip kazi.

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

560
00:27:20,850 --> 00:27:23,680
Na hivyo unafikiri nini flip atafanya?

561
00:27:23,680 --> 00:27:27,180
Tena hii anapata kuitwa wakati
sisi bonyeza flip kifungo.

562
00:27:27,180 --> 00:27:29,406
Kile lazima kazi flip nini?

563
00:27:29,406 --> 00:27:34,136
>> Watazamaji: kubadilika this.state.front
kutoka kweli kwa uongo, uongo na kweli.

564
00:27:34,136 --> 00:27:38,420
>> NEEL Mehta: Yep, hivyo kuchukua chochote
this.front is-- hali mbele ni.

565
00:27:38,420 --> 00:27:40,930
Kuchukua hali mbele, ikiwa
ni kweli, kufanya hivyo uongo.

566
00:27:40,930 --> 00:27:42,530
Kama ni uongo, iwe ya kweli, haki?

567
00:27:42,530 --> 00:27:45,330
Basi hebu jaribu hilo.

568
00:27:45,330 --> 00:27:48,240
>> Huwezi kubadili hali
tu kwa kufanya this.state.

569
00:27:48,240 --> 00:27:50,380
Huwezi kufanya hivyo.

570
00:27:50,380 --> 00:27:52,030
Huwezi kufanya hivyo.

571
00:27:52,030 --> 00:27:55,810
Una kutumia kazi
aitwaye this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Hivyo unaweza kusema this.setState mbele
matumbo hii ambapo, tena, mshangao

573
00:28:03,230 --> 00:28:04,330
hatua ina maana kinyume.

574
00:28:04,330 --> 00:28:07,420
Mimi nadhani kama hii. state.front
Ni kweli, kutakuwa na kugeuka uongo.

575
00:28:07,420 --> 00:28:09,170
Hivyo tutaweza kuweka hali
kutoka kweli kwa uongo.

576
00:28:09,170 --> 00:28:11,430
Kama ni uongo, tutaweza
kuliweka uongo kwa kweli.

577
00:28:11,430 --> 00:28:17,210
>> Tu taarifa kwamba sisi kuweka na kupata kidogo
tofauti, na hivyo hebu jaribu hii.

578
00:28:17,210 --> 00:28:18,675
Bada bing, kuangalia hii.

579
00:28:18,675 --> 00:28:21,810
Kifungo flip mapenzi sasa
kubadili mbele na nyuma serikali.

580
00:28:21,810 --> 00:28:24,990
>> Na hivyo hapa ni wapi unaweza kuona
kidogo ya uchawi ya kuguswa.

581
00:28:24,990 --> 00:28:28,420
Kama sisi kamwe aliiambia yake ni upya atatoa.

582
00:28:28,420 --> 00:28:30,910
Sisi kamwe aliiambia yake redraw kitu chochote.

583
00:28:30,910 --> 00:28:32,630
Kama wewe ni kufanya hii
bila kuguswa, wewe d

584
00:28:32,630 --> 00:28:34,588
kuwa to-- kama wakati
flip kifungo ni clicked,

585
00:28:34,588 --> 00:28:37,290
wewe d na kuwaambia ni
manually re-atatoa, sawa?

586
00:28:37,290 --> 00:28:43,050
>> Kuguswa ni kweli baridi katika kwamba kama wewe
kuwapa hali fulani na mali,

587
00:28:43,050 --> 00:28:45,760
itakuwa daima atatoa
exact kitu.

588
00:28:45,760 --> 00:28:48,690
Na hivyo wakati sisi milele sisi kubadili
hali na mali,

589
00:28:48,690 --> 00:28:50,819
kuguswa tu re-mithili jambo zima.

590
00:28:50,819 --> 00:28:52,860
Ni anajua kwamba kuna
mawasiliano ya moja kwa moja

591
00:28:52,860 --> 00:28:57,270
kati ya serikali na vigezo na HTML.

592
00:28:57,270 --> 00:29:00,110
Hivyo wakati wowote ama ya wale
mabadiliko na kupitia hali ya kuweka,

593
00:29:00,110 --> 00:29:03,750
itabadilisha jinsi
kulipa ni re-kulipwa.

594
00:29:03,750 --> 00:29:06,650
Na hivyo kimsingi kuguswa ni kama
kusubiri kwa ajili yenu kubadilika.

595
00:29:06,650 --> 00:29:09,870
>> Kila kitu ni mabadiliko,
kutakuwa na re-atatoa ukurasa mzima.

596
00:29:09,870 --> 00:29:12,480
Na kama ni sauti ufanisi,
ni kwa sababu itakuwa,

597
00:29:12,480 --> 00:29:15,050
lakini kuguswa anatumia jambo
aitwaye Kivuli DOM.

598
00:29:15,050 --> 00:29:19,950
Badala ya kuchora ukurasa moja kwa moja,
anaendelea virtual HTML mti katika kumbukumbu.

599
00:29:19,950 --> 00:29:23,620
>> Unajua, HTML ni kama mti,
kama kihierarkia muundo data.

600
00:29:23,620 --> 00:29:28,990
Ni anaendelea mti bandia katika kumbukumbu,
na wakati wowote update ukurasa,

601
00:29:28,990 --> 00:29:31,940
kutakuwa na kuteka bandia mwingine
mti, na kutakuwa na mahesabu ya

602
00:29:31,940 --> 00:29:35,120
nini mabadiliko hayo mahitaji ya kufanya
ukurasa wa kufanya miti miwili sawa.

603
00:29:35,120 --> 00:29:38,540
Hivyo kimsingi, ni karibu
re-mithili mengi.

604
00:29:38,540 --> 00:29:41,540
Na kisha tu kama mabadiliko
ukurasa katika tweaks kidogo kama inahitajika,

605
00:29:41,540 --> 00:29:44,240
hivyo ni sana, sana, ufanisi sana.

606
00:29:44,240 --> 00:29:46,970
>> Hivyo kimsingi kuguswa mapenzi
wakati wowote kubadili kitu,

607
00:29:46,970 --> 00:29:49,010
kutakuwa na re-atatoa ukurasa karibu.

608
00:29:49,010 --> 00:29:52,830
Ni itabidi kufikiri nini nahitaji
mabadiliko ya kufanya ukurasa halisi kutafakari

609
00:29:52,830 --> 00:29:55,602
ukurasa virtual, na kutakuwa na kufanya hivyo.

610
00:29:55,602 --> 00:29:56,560
Hiyo ni DOM virtual.

611
00:29:56,560 --> 00:29:59,350
Ni moja kubwa
sifa za kuguswa.

612
00:29:59,350 --> 00:30:00,880
>> Je, hiyo mantiki?

613
00:30:00,880 --> 00:30:01,540
Maswali yoyote?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Watazamaji: Ni kwa jinsi gani
kulinganisha bado kwa MVC

617
00:30:08,969 --> 00:30:10,760
kwamba kuongelea
kabla rasilimali kama.

618
00:30:10,760 --> 00:30:13,527
>> NEEL Mehta: Yeah, swali
ni jinsi gani kulinganisha na MVC?

619
00:30:13,527 --> 00:30:14,610
Wewe aliuliza kuhusu rasilimali.

620
00:30:14,610 --> 00:30:16,445
Naam, hebu majadiliano kuhusu jinsi inafanya kazi.

621
00:30:16,445 --> 00:30:18,190
>> Katika MVC, utaweza kuboresha mfano wa kuigwa.

622
00:30:18,190 --> 00:30:20,560
Katika kesi hiyo tunatarajia kuwa kadi mfano wa kuigwa.

623
00:30:20,560 --> 00:30:24,540
Mtazamo ingekuwa
flip kifungo, na udhibiti

624
00:30:24,540 --> 00:30:26,310
ingekuwa flip kazi.

625
00:30:26,310 --> 00:30:28,450
Hivyo mtazamo waliniambia
mtawala flip flip.

626
00:30:28,450 --> 00:30:30,370
Flip waliniambia
mfano kubadilisha, sawa?

627
00:30:30,370 --> 00:30:33,915
>> Na hivyo wakati wa kufanya MVC, wewe
kusikiliza kwa mfano kubadilisha,

628
00:30:33,915 --> 00:30:37,150
na re-atatoa maoni ipasavyo.

629
00:30:37,150 --> 00:30:39,210
Au wewe tu na kama
na mtawala.

630
00:30:39,210 --> 00:30:42,418
Kusubiri kwa mfano kubadili, na kisha
kuchukua na kuchagua sehemu ya jambo kama

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

632
00:30:44,032 --> 00:30:45,740
Hapa tuna jambo moja,
lakini katika programu kubwa,

633
00:30:45,740 --> 00:30:48,510
una kama kukumbuka yale
mabadiliko katika kila mahali moja,

634
00:30:48,510 --> 00:30:50,290
hivyo ni kidogo annoying.

635
00:30:50,290 --> 00:30:53,670
Na hivyo kuguswa ni nzuri
kwa sababu ina Kivuli Dom.

636
00:30:53,670 --> 00:30:56,040
Ni inaweza kumudu tu
kuandika upya jambo nzima.

637
00:30:56,040 --> 00:30:58,680
Huwezi kuwa selectively
kama nadhani nini update.

638
00:30:58,680 --> 00:31:02,186
>> Katika Picha kama wewe kama
kupata ujumbe mpya, katika MVC,

639
00:31:02,186 --> 00:31:04,060
wewe d na kukumbuka,
OK, kubadili mambo

640
00:31:04,060 --> 00:31:06,260
juu ya
ukurasa, ujumbe icon.

641
00:31:06,260 --> 00:31:08,290
Pia pop dirisha jipya chini.

642
00:31:08,290 --> 00:31:10,070
Pia kufanya jambo jipya katika dirisha hilo.

643
00:31:10,070 --> 00:31:11,060
Pia kucheza sauti.

644
00:31:11,060 --> 00:31:13,150
>> Hiyo ni mengi ya mambo
kwenda nje kwa wakati mmoja.

645
00:31:13,150 --> 00:31:15,320
Na hivyo kama huna
na Kivuli Dom, wewe d

646
00:31:15,320 --> 00:31:18,740
kuwa kufanya hivyo manually kwa sababu
huwezi kujikwamua ukurasa mzima.

647
00:31:18,740 --> 00:31:21,430
Huwezi kumudu, hivyo kuwa
kubadili kila kitu kwa mikono,

648
00:31:21,430 --> 00:31:23,990
ambayo ni kweli annoying katika MVC.

649
00:31:23,990 --> 00:31:27,640
>> Hivyo ili kuwa na
kabidhi, wao huchagua

650
00:31:27,640 --> 00:31:30,750
update ukurasa, ambayo ni
ufanisi, lakini pia annoying.

651
00:31:30,750 --> 00:31:34,002
Katika kuguswa, kwa sababu ya kivuli
Dom, kupata mambo yote kwa ajili ya bure.

652
00:31:34,002 --> 00:31:35,710
Ni ufanisi kwa sababu
ya kivuli Dom.

653
00:31:35,710 --> 00:31:37,210
Bottleneck ni kuhuisha ukurasa.

654
00:31:37,210 --> 00:31:40,292
Siyo kufanya mti kudanganywa.

655
00:31:40,292 --> 00:31:41,250
Kupata ufanisi mkubwa.

656
00:31:41,250 --> 00:31:45,420
Unaweza pia kupata urahisi wa kutumia kwa sababu
kama wewe tu kuandika upya ukurasa mzima,

657
00:31:45,420 --> 00:31:48,970
lakini wewe tu kujua, sawa, mambo
ni kwenda kuwa juu ya ukurasa fulani.

658
00:31:48,970 --> 00:31:51,180
Ni inaweza kuwa katika nafasi mbalimbali, lakini
ni kwenda kuwa juu ya ukurasa, haki?

659
00:31:51,180 --> 00:31:52,860
Hivyo wewe tu re-kulipwa
jambo nzima karibu,

660
00:31:52,860 --> 00:31:55,540
na unaweza kufanya michache
mabadiliko ya ukurasa yenyewe.

661
00:31:55,540 --> 00:31:57,850
>> Hivyo, tena, katika MVC wewe
ingekuwa kuchagua

662
00:31:57,850 --> 00:32:01,840
kati ya urahisi wa kutumia na ufanisi,
na kuguswa, kupata zote mbili.

663
00:32:01,840 --> 00:32:04,020
Hivyo ni bora zaidi.

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

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

666
00:32:06,676 --> 00:32:12,080
>> Sawa, hivyo hebu angalia hebu majadiliano
kidogo kuhusu hatua 4,

667
00:32:12,080 --> 00:32:14,740
jinsi gani tunaweza kuiweka vipengele.

668
00:32:14,740 --> 00:32:16,260
Hivyo tuna haki hii sasa.

669
00:32:16,260 --> 00:32:19,420
Tuna baridi kidogo kifungo yetu.

670
00:32:19,420 --> 00:32:23,157
Tunaweza flip nyuma na
nje, na kwamba wote ni gani.

671
00:32:23,157 --> 00:32:24,990
Hebu sema tunataka
na sehemu nyingine.

672
00:32:24,990 --> 00:32:28,730
Hebu sema flashcard programu yetu lazima
vyenye orodha ya kadi zote

673
00:32:28,730 --> 00:32:31,520
kwamba una, hivyo kwamba maana sisi
wanapaswa kuwa na sehemu nyingine.

674
00:32:31,520 --> 00:32:32,970
Naam, labda kuiita orodha mtazamo.

675
00:32:32,970 --> 00:32:36,200
Hebu kutengeneza orodha mtazamo kwamba
coexists na CardView,

676
00:32:36,200 --> 00:32:39,680
na hii orodha mtazamo na CardView
itakuwa kama kazi kwa pamoja.

677
00:32:39,680 --> 00:32:43,190
Na unaweza kuchanganya yao
kufanya programu yetu kwa ajili yenu.

678
00:32:43,190 --> 00:32:45,160
>> Hivyo kwanza, wacha kufanya
wanandoa kadi zaidi ya haki.

679
00:32:45,160 --> 00:32:46,370
Hebu kusema, kadi nini?

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

681
00:32:49,619 --> 00:32:51,910
Na hivyo tu sina kwa
kuzaa kwa kuandika katika,

682
00:32:51,910 --> 00:32:53,410
Mimi tu kwenda na nakala yake kutoka hapa.

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

684
00:33:01,664 --> 00:33:03,580
Na hivyo mimi nina kwenda si
kuwapa kadi moja tu.

685
00:33:03,580 --> 00:33:06,910
Mimi nina kwenda kuwapa safu ya kadi.

686
00:33:06,910 --> 00:33:10,240
Hivyo kwanza ya programu
kwenda kuvunja kwa sasa.

687
00:33:10,240 --> 00:33:14,717
Haki wote, hivyo sisi ni kwenda kufanya
huu uwezo wa kushughulikia kadi nyingi.

688
00:33:14,717 --> 00:33:17,800
Hivyo kwanza, tunakwenda kuwapa, si
moja tu kadi lakini safu ya kadi,

689
00:33:17,800 --> 00:33:18,700
kama orodha ya kadi.

690
00:33:18,700 --> 00:33:20,980
Na katika kesi hii, tuna watatu kati yao.

691
00:33:20,980 --> 00:33:27,280
>> Haki wote, hivyo hivyo programu ni
kwenda kupata orodha kadi,

692
00:33:27,280 --> 00:33:29,870
na ni kwenda na kuamua ni
moja kuonyesha kwa CardView.

693
00:33:29,870 --> 00:33:33,740
CardView Unaweza tu
atatoa kadi moja, lakini programu

694
00:33:33,740 --> 00:33:37,610
anapata orodha ya kadi zote, haki?

695
00:33:37,610 --> 00:33:40,820
>> Hivyo wakati wewe kufikiri moja
kadi ya kuwapa CardView,

696
00:33:40,820 --> 00:33:44,660
jinsi gani unaweza nadhani unaweza kuwa na uwezo
kufanya uamuzi kuhusu ambayo kadi

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

698
00:33:47,064 --> 00:33:49,980
Kukupa ladha, ni kwa muda
Wewe utakuwa kuangalia kadi fulani.

699
00:33:49,980 --> 00:33:53,260
Kama mahitaji ukurasa, utasikia
tu kwenda nyuma na kadi ya kwanza.

700
00:33:53,260 --> 00:33:55,464
Hiyo ni sawa kwa sababu ni la muda.

701
00:33:55,464 --> 00:33:56,630
Nini mbinu gani sisi kutumia?

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

703
00:34:02,534 --> 00:34:08,760
>> Watazamaji: Unaweza kufanya kutofautiana
hivyo kama wewe alikuwa mbele.

704
00:34:08,760 --> 00:34:11,989
Je, hii ni kweli, wewe naweza
kuwa na kadi ya sasa ni sawa na 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL Mehta: Yeah, hivyo sisi
wanataka kuwa na hali, sawa?

706
00:34:14,150 --> 00:34:16,080
Ungependa kutumia hali katika
sehemu kufikiri

707
00:34:16,080 --> 00:34:17,288
ambayo kadi kufanya tunataka kupata.

708
00:34:17,288 --> 00:34:19,290
Kama tuna orodha ya
kadi zote, tutaweza

709
00:34:19,290 --> 00:34:21,630
kutumia hali kufikiri
moja ya kadi ya kwanza,

710
00:34:21,630 --> 00:34:23,710
kadi ya pili, kadi tatu, na kadhalika.

711
00:34:23,710 --> 00:34:28,760
>> Hivyo programu hivyo programu kupata
kuwa na kazi getInitialState,

712
00:34:28,760 --> 00:34:35,020
getInitialState kurudi kazi.

713
00:34:35,020 --> 00:34:39,929
Na tutaweza kusema tu activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Hivyo sasa programu yetu ina yake mwenyewe hali.

715
00:34:42,889 --> 00:34:47,179
>> Na hivyo sasa juu ya kutoa, kufikiri
kadi, hebu tu kwenda safu

716
00:34:47,179 --> 00:34:49,969
na kunyakua kitu katika kuwa ripoti.

717
00:34:49,969 --> 00:34:53,580
Teule kadi this.props.cards sawa
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Hivyo kama unaweza kuona hapa, props na
hali kwa kweli kazi pamoja.

720
00:35:00,162 --> 00:35:08,990
Hivyo sasa kwamba tuna activeCard yetu,
tutaweza simu yake activeCard,

721
00:35:08,990 --> 00:35:10,470
na hebu angalia kama hii kazi.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, kwamba ilikuwa kosa asilia.

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
>> Baridi, yep, hivyo sasa tulikuwa nyuma
ambapo tulikuwa kabla, haki?

729
00:35:54,840 --> 00:35:57,100
Umri huo mpango isipokuwa
sasa tunaweza kusaidia

730
00:35:57,100 --> 00:35:59,390
orodha ya kadi, kadi si moja tu.

731
00:35:59,390 --> 00:36:04,130
Na sasa, tena, kama sisi mabadiliko
activeIndex, tunaweza kwenda kutoka 0 kwa 1,

732
00:36:04,130 --> 00:36:07,330
na sasa kadi ambayo pili,
na kisha tukaenda 0.

733
00:36:07,330 --> 00:36:10,390
Hivyo hapa ni mpya
souped-up toleo la yetu.

734
00:36:10,390 --> 00:36:16,000
>> OK, hivyo sasa hebu kuwa na orodha mtazamo kwamba
inaonyesha kadi zote katika mpango wako,

735
00:36:16,000 --> 00:36:19,980
hivyo tutaweza kufanya mpya
sehemu inayoitwa listview.

736
00:36:19,980 --> 00:36:22,155
Hebu listview sawa na react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Hivyo tunataka kutoa unordered
orodha kwa orodha ya bidhaa kwa kila kadi.

739
00:36:38,800 --> 00:36:41,490
Na hivyo sisi kuwa na rundo la kadi.

740
00:36:41,490 --> 00:36:44,990
Tunataka moja orodha ya bidhaa
kwa kila kadi, sawa?

741
00:36:44,990 --> 00:36:47,490
Tunaweza kufanya kwa kitanzi au
kitu cha kufanya mpya orodha ya bidhaa.

742
00:36:47,490 --> 00:36:50,522
Lakini njia ya kufanya hivyo katika
Kuguswa, kutumia kitu kinachoitwa ramani.

743
00:36:50,522 --> 00:36:57,150
Ramani ni chombo au kazi unatumia
kwamba kwa kila kitu, anaendesha baadhi ya kazi,

744
00:36:57,150 --> 00:36:59,510
inachukua thamani ya kurudi, na
anatoa nyuma.

745
00:36:59,510 --> 00:37:06,310
>> Hivyo kama mfano, tuna safu
1, 2, 3.map function-- na hii

746
00:37:06,310 --> 00:37:12,120
ni shorthand kwa
function-- x mshale x mara x.

747
00:37:12,120 --> 00:37:16,110
Hii inasema, kwa kila idadi
katika 1, 2, 3, kuchukua hiyo.

748
00:37:16,110 --> 00:37:17,800
Mraba, na kuwapa nyuma.

749
00:37:17,800 --> 00:37:22,090
Hivyo unafikiri nini 1,
2, 3.map x inakwenda mara x

750
00:37:22,090 --> 00:37:25,480
x anatoa wewe nyuma kutokana
kuwa kazi hii ni

751
00:37:25,480 --> 00:37:27,680
kukimbia kwenye kila kipengele cha safu hiyo.

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

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

754
00:37:32,190 --> 00:37:35,709
>> NEEL Mehta: Yep, 1, 4, 9
kwa sababu wewe kufanya 1 mara 1.

755
00:37:35,709 --> 00:37:36,500
Kwamba anatoa moja.

756
00:37:36,500 --> 00:37:37,690
Hiyo ni kitu cha kwanza.

757
00:37:37,690 --> 00:37:38,530
>> Mara 2 2 ni 4.

758
00:37:38,530 --> 00:37:39,570
Hiyo ni kipengele cha pili.

759
00:37:39,570 --> 00:37:40,310
Mara 3 3 ni 9.

760
00:37:40,310 --> 00:37:41,540
Hiyo ni kipengele cha tatu.

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

762
00:37:42,640 --> 00:37:45,015
Hivyo ramani ina mbinu wewe
kutumia katika programmers kazi,

763
00:37:45,015 --> 00:37:48,090
style mpya ya
programu ya kufanya kitu

764
00:37:48,090 --> 00:37:50,500
kwa kila kipengele katika orodha yako.

765
00:37:50,500 --> 00:37:51,970
Na hivyo hii inaonekana familiar.

766
00:37:51,970 --> 00:37:53,370
Tuna orodha ya kadi.

767
00:37:53,370 --> 00:37:56,860
Tunataka kupata orodha ya bidhaa kwa kila
moja, hivyo tutaweza tu kutumia ramani hapa.

768
00:37:56,860 --> 00:38:00,250
Tutaweza kusema, hebu orodha sawa
this.props, kadi, ramani.

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

770
00:38:10,580 --> 00:38:15,070
>> Na hivyo kutokana na kadi, tuko
kwenda kuzalisha bidhaa orodha

771
00:38:15,070 --> 00:38:17,580
na kwamba kadi ya yaliyomo upande wa hayo.

772
00:38:17,580 --> 00:38:20,660
Hebu sema tu tunataka kutoa nje
kadi kuhoji hivyo card.question.

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

774
00:38:24,990 --> 00:38:30,649
Hivyo orodha hili lina
safu ya li ya au Orodha Vitu

775
00:38:30,649 --> 00:38:32,440
ambapo kuna orodha moja
bidhaa kwa kila kadi,

776
00:38:32,440 --> 00:38:35,150
na kwamba ina kadi swali.

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

778
00:38:37,640 --> 00:38:39,450
>> Baridi, hivyo sasa hebu
kweli magazeti kwamba nje.

779
00:38:39,450 --> 00:38:46,521
Hivyo sisi kurudi ul.

780
00:38:46,521 --> 00:38:49,020
Ndani ya kwamba orodha unordered,
tutaweza tu fimbo orodha nzima

781
00:38:49,020 --> 00:38:49,890
kwamba wao alitupa.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Sawa, sasa hivyo hii
orodha mtazamo matendo kupata tu.

785
00:38:56,060 --> 00:38:59,842
Maswali yoyote kuhusu orodha mtazamo?

786
00:38:59,842 --> 00:39:01,270
Wewe kuwa na rundo la kadi.

787
00:39:01,270 --> 00:39:02,800
Kufanya orodha ya bidhaa kwa kila kadi.

788
00:39:02,800 --> 00:39:05,466
Na wewe kuziweka ndani ya unordered
orodha, na wewe kuwapa nyuma.

789
00:39:05,466 --> 00:39:09,410
Hivyo sasa hebu kutenda hivyo sisi kupachika
ndani ya hii ya programu yetu,

790
00:39:09,410 --> 00:39:14,310
ili tuweze kufanya hivyo, mtazamo orodha.

791
00:39:14,310 --> 00:39:17,070
Nini hoja gani sisi kupita kuorodhesha maoni?

792
00:39:17,070 --> 00:39:18,320
Nini mali gani sisi kuwapa?

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

794
00:39:25,111 --> 00:39:26,860
Kumbuka, kama wewe kutoa
ni rundo ya kadi,

795
00:39:26,860 --> 00:39:29,590
kutakuwa na kufanya orodha
kuona kwa kadi hizo.

796
00:39:29,590 --> 00:39:32,267
Hivyo gani sisi kupita
hapa kama hoja?

797
00:39:32,267 --> 00:39:33,350
Watazamaji: orodha ya kadi?

798
00:39:33,350 --> 00:39:37,130
NEEL Mehta: Yeah, hivyo kadi
sawa this.props.cards, sawa?

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

800
00:39:39,850 --> 00:39:44,370
Na hivyo tatizo tu
ni kwamba unaweza tu

801
00:39:44,370 --> 00:39:48,600
akageuka moja juu cha kipengele katika atatoa,
hivyo nimepata wrap katika div.

802
00:39:48,600 --> 00:39:49,100
Ni weird.

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

804
00:39:56,190 --> 00:39:57,530
Basi hebu angalia kama kwamba.

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

806
00:40:09,790 --> 00:40:10,560
Je, hiyo kazi?

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

808
00:40:29,774 --> 00:40:31,030
>> Yep, kuna kwenda.

809
00:40:31,030 --> 00:40:33,700
Hivyo basi, tuna orodha
ya kadi chini,

810
00:40:33,700 --> 00:40:36,180
na kisha tuna yetu
CardView yenyewe juu,

811
00:40:36,180 --> 00:40:40,486
na kwamba itakuwa flip kati ya
pande mbili za kadi.

812
00:40:40,486 --> 00:40:42,610
Sasa je, hiyo mantiki jinsi mimi alifanya hivyo?

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

814
00:40:45,165 --> 00:40:46,790
Yeah, hivyo tena, tuna sehemu mbili.

815
00:40:46,790 --> 00:40:49,666
Kwanza sehemu prints
nje kila kadi katika orodha.

816
00:40:49,666 --> 00:40:50,540
Hiyo ni mtazamo orodha.

817
00:40:50,540 --> 00:40:54,770
Na sehemu ya pili
Prints nje tu kwamba kadi.

818
00:40:54,770 --> 00:40:58,840
Kama wewe kuwapa kadi fulani, itabidi
magazeti nje maelezo kuhusu kadi ambayo

819
00:40:58,840 --> 00:41:01,870
na basi wewe flip na kurudi.

820
00:41:01,870 --> 00:41:05,850
>> Hivyo kama tunataka, tunaweza kujaribu na majadiliano
kuhusu kuongeza baadhi ya vipengele mpya kwa hili.

821
00:41:05,850 --> 00:41:09,482
Vinginevyo tunaweza kuongea kidogo zaidi
kuhusu wa kasi ya mtambo huo,

822
00:41:09,482 --> 00:41:11,190
au tunaweza kujibu
maswali unaweza kuwa

823
00:41:11,190 --> 00:41:15,050
kwa sababu haya yote ni sehemu ya msingi ya
ya kuguswa kwamba mimi nataka kuzungumzia.

824
00:41:15,050 --> 00:41:16,540
Tunaweza kwenda mbele.

825
00:41:16,540 --> 00:41:17,590
Tunaweza kujibu maswali.

826
00:41:17,590 --> 00:41:18,560
Chochote unataka.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Watazamaji: Je, unaweza kutumia
JSX katika kawaida na javascript?

829
00:41:24,205 --> 00:41:27,150
Au ni kwamba kitu ambacho
alikuja na [inaudible]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL Mehta: Swali ni can
matumizi JSX kwa kawaida JavaScript?

831
00:41:30,760 --> 00:41:32,620
Jibu ni ndiyo.

832
00:41:32,620 --> 00:41:41,070
JSX ni njia tu ya inachukua yako
JavaScript ambayo ina HTML ndani yake,

833
00:41:41,070 --> 00:41:44,215
na inaandaa katika JavaScript kwamba
hana HTML ndani yake.

834
00:41:44,215 --> 00:41:47,880
Hivyo taarifa that-- hivyo taarifa hapa.

835
00:41:47,880 --> 00:41:50,820
Hii inaonekana kama una kama div
na una mambo ndani yake.

836
00:41:50,820 --> 00:41:54,970
>> Hiyo inaandaa kwa JavaScript kwamba
kama inazalisha kitu kimoja.

837
00:41:54,970 --> 00:41:59,590
Nadhani nini mimi kusema ni kwamba
JSX ni kisintaksia, kama ni

838
00:41:59,590 --> 00:42:03,530
preprocessor kwa JavaScript kiasi
kama PHP ni preprocessor kwa HTML.

839
00:42:03,530 --> 00:42:05,490
JSC ni preprocessor
kwa JavaScript ambayo inakuwezesha

840
00:42:05,490 --> 00:42:12,970
kuweka HTML ndani ya wako JavaScript.

841
00:42:12,970 --> 00:42:16,425
Na hivyo kama una transfoma haki
ambayo ni jambo aitwaye [inaudible],

842
00:42:16,425 --> 00:42:17,300
ambayo kubadilisha.

843
00:42:17,300 --> 00:42:19,360
Preprocessor haki,
kutakuwa na basi wewe kufanya hivyo.

844
00:42:19,360 --> 00:42:20,235
>> Watazamaji: [inaudible]

845
00:42:20,235 --> 00:42:23,026
NEEL Mehta: Kwa kawaida huhitaji
kuweka HTML ndani ya JavaScript

846
00:42:23,026 --> 00:42:24,110
isipokuwa kufanya yako kuguswa.

847
00:42:24,110 --> 00:42:27,146
Lakini unaweza kufanya hivyo anyway.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Watazamaji: Nadhani wewe
alikuwa ilivyoelezwa kuguswa

850
00:42:29,353 --> 00:42:31,970
kama kazi lugha Programing.

851
00:42:31,970 --> 00:42:35,646
Tumekuwa kujifunza C katika CS50.

852
00:42:35,646 --> 00:42:38,032
Ni C pia lugha ya kazi?

853
00:42:38,032 --> 00:42:39,990
NEEL Mehta: Kwa hiyo swali
ni kuhusu kazi

854
00:42:39,990 --> 00:42:43,010
dhidi ya jambo lingine aitwaye
muhimu au kiutaratibu programu.

855
00:42:43,010 --> 00:42:44,820
Kuna aina mbili ya mipango maarufu.

856
00:42:44,820 --> 00:42:48,550
Moja kuitwa kiutaratibu, ambayo
Ni kuhusu kama kufanya amri,

857
00:42:48,550 --> 00:42:51,510
na moja ni kazi, ambayo yote ni
juu ya kuwa na kazi na kuwa na

858
00:42:51,510 --> 00:42:52,930
pembejeo na mazao ya wale.

859
00:42:52,930 --> 00:42:55,930
Kuguswa ni dhana kazi.

860
00:42:55,930 --> 00:42:58,010
C ni dhana kiutaratibu sana.

861
00:42:58,010 --> 00:43:02,360
>> Na kama mfano, C kwa mfano,
huna kufanya njia hii declarative

862
00:43:02,360 --> 00:43:04,390
ya kufanya mpango, haki?

863
00:43:04,390 --> 00:43:06,826
Una kusema, magazeti hii.

864
00:43:06,826 --> 00:43:07,950
Mabadiliko ya muundo huu data.

865
00:43:07,950 --> 00:43:08,530
Magazeti hii.

866
00:43:08,530 --> 00:43:10,160
Ni wote kuhusu amri.

867
00:43:10,160 --> 00:43:12,640
>> Katika kuguswa, kuna si
amri kwamba watu wengi.

868
00:43:12,640 --> 00:43:15,145
Ni wote kuhusu kuwa
vipengele wewe kuweka pamoja.

869
00:43:15,145 --> 00:43:16,300
Wao ni kama kazi.

870
00:43:16,300 --> 00:43:26,360
Una kama kazi
aitwaye CardView,

871
00:43:26,360 --> 00:43:28,680
ambayo ni kazi
ambayo ina mchango, pato,

872
00:43:28,680 --> 00:43:30,660
na hivyo kuguswa ni wote
kuhusu falsafa hii

873
00:43:30,660 --> 00:43:32,700
sisi wa having-- una data.

874
00:43:32,700 --> 00:43:34,910
Wewe kupita kwa njia hii
algorithm, na kutakuwa na

875
00:43:34,910 --> 00:43:36,800
pato HTML kwamba
tu kuchapishwa ukurasa,

876
00:43:36,800 --> 00:43:39,180
na hivyo kuwa na
kuujenga kipande kwa kipande.

877
00:43:39,180 --> 00:43:42,800
>> Hivyo kuteka mfano kwa nini
Nilivyosema hapo kabla, unajua jinsi

878
00:43:42,800 --> 00:43:47,050
katika Picha kama wewe kupata ujumbe,
na wewe kuchagua nini sehemu ya kuboresha,

879
00:43:47,050 --> 00:43:47,882
hiyo ni kiutaratibu.

880
00:43:47,882 --> 00:43:48,840
Ni muhimu, sawa?

881
00:43:48,840 --> 00:43:49,806
OK, I got ujumbe.

882
00:43:49,806 --> 00:43:50,930
Hebu mabadiliko ya akaunti huko.

883
00:43:50,930 --> 00:43:52,110
>> Hebu pop window hapa.

884
00:43:52,110 --> 00:43:52,780
Hebu mabadiliko ya akaunti huko.

885
00:43:52,780 --> 00:43:53,700
Hebu kuteka hii hapa.

886
00:43:53,700 --> 00:43:55,220
Hiyo ni mbinu kiutaratibu.

887
00:43:55,220 --> 00:44:00,240
>> Hiyo ni nini mambo kama Angular,
Kuongeza, uti wa mgongo, mifumo mingine kutumia.

888
00:44:00,240 --> 00:44:01,200
Kuguswa ni kazi.

889
00:44:01,200 --> 00:44:03,324
Ni njia tofauti sana
ya kufikiria juu ya mambo.

890
00:44:03,324 --> 00:44:07,950
Inachukua wazo hili la hebu kuwa
kazi au algorithms kwamba je

891
00:44:07,950 --> 00:44:08,800
kuwapa data.

892
00:44:08,800 --> 00:44:11,820
Ni itabidi mate nje nini
lazima, na kompyuta

893
00:44:11,820 --> 00:44:13,490
itachukua huduma ya uzito wa nje.

894
00:44:13,490 --> 00:44:15,890
Huwezi kushughulikia hilo wewe mwenyewe.

895
00:44:15,890 --> 00:44:18,470
Je, hiyo kufanya kidogo ya akili?

896
00:44:18,470 --> 00:44:18,970
Yeah?

897
00:44:18,970 --> 00:44:24,180
>> Watazamaji: Katika lugha ya kazi,
kila kitu kinachotokea kwa mara moja?

898
00:44:24,180 --> 00:44:26,800
>> NEEL Mehta: Hapana, mambo kutokea kwa utaratibu.

899
00:44:26,800 --> 00:44:29,320
Kama hapa bado kuna
ili, lakini hana

900
00:44:29,320 --> 00:44:32,390
kutokea katika utaratibu wa kama
kuwapongeza, amri, amri.

901
00:44:32,390 --> 00:44:36,459
Ni hutokea katika utaratibu wa
kazi anatoa pato.

902
00:44:36,459 --> 00:44:37,750
Kuweka kwamba katika kazi nyingine.

903
00:44:37,750 --> 00:44:39,550
Kuweka kwamba katika mwingine
kazi, kazi nyingine.

904
00:44:39,550 --> 00:44:41,470
>> Kama wewe kufanya CS51, itabidi
kujifunza mipango ya kazi

905
00:44:41,470 --> 00:44:42,886
nje kidogo ya wigo wa hii.

906
00:44:42,886 --> 00:44:45,090
Lakini kimsingi, nini hufanya
Kuguswa baridi sio tu

907
00:44:45,090 --> 00:44:46,840
njia moja data mtiririko
na virtual Dom,

908
00:44:46,840 --> 00:44:48,700
lakini pia hii wazo la
kazi ya programu.

909
00:44:48,700 --> 00:44:51,720
Na programu ya kazi ni rahisi sana
kutunga na kufanya mambo ya baridi kutoka katika,

910
00:44:51,720 --> 00:44:53,844
na ni rahisi sana kufikiri
kuhusu na sababu juu.

911
00:44:53,844 --> 00:44:55,450
Hivyo ni mwingine sare nzuri ya kuguswa.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Maswali yoyote zaidi?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Yeah?

916
00:45:03,150 --> 00:45:06,840
>> Watazamaji: Um, kwa nini wewe
kutumia basi kinyume na var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL Mehta: Hivyo swali ni
mbona kutumia basi badala ya var?

918
00:45:10,450 --> 00:45:13,220
Hili ni jambo aitwaye
ES6 au ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Ni toleo jipya la JavaScript.

920
00:45:15,820 --> 00:45:19,050
Kuna kundi la sababu za kiufundi ni,
lakini hebu ni toleo bora ya var.

921
00:45:19,050 --> 00:45:20,724
>> Ni jinsi gani kutangaza vigezo.

922
00:45:20,724 --> 00:45:21,390
Unaweza kutumia basi.

923
00:45:21,390 --> 00:45:22,140
Unaweza kutumia var.

924
00:45:22,140 --> 00:45:23,825
Hebu ina rundo la kiufundi
reasons-- unaweza kuangalia yao

925
00:45:23,825 --> 00:45:25,610
up later-- kwa nini ni bora zaidi.

926
00:45:25,610 --> 00:45:28,780
Kimsingi, ES6 ina baadhi nzuri
syntax mpya, baadhi ya vipengele mpya

927
00:45:28,780 --> 00:45:30,720
juu ya umri wa JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Hivyo tuna kama dakika tano.

929
00:45:32,782 --> 00:45:34,990
Mimi nilitaka kuzungumzia
jambo moja zaidi halisi haraka.

930
00:45:34,990 --> 00:45:36,450
Kama alikuwa na maswali yoyote,
hebu majadiliano kuhusu hilo baada ya hii.

931
00:45:36,450 --> 00:45:38,366
Lakini tu hivyo hii anapata
hawakupata juu ya kamera, mimi tu

932
00:45:38,366 --> 00:45:41,550
wanataka kuzungumza kidogo kuhusu jinsi
kweli kutumia kuguswa katika programu yako.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Kama kwenda hapa,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
huu ni ukurasa wa nyumbani kwa kuguswa, na
kutakuwa na kuonyesha kweli jinsi gani matumizi

936
00:46:03,320 --> 00:46:05,320
Kuguswa katika kurasa yako.

937
00:46:05,320 --> 00:46:08,845
Kimsingi, ni kidogo
ngumu kujaribu kufunga kuguswa.

938
00:46:08,845 --> 00:46:12,300
Ni si rahisi kama wewe tu Drag
na kuacha JavaScript katika huko.

939
00:46:12,300 --> 00:46:15,890
>> Unaweza kuwa na transfoma yako
kuanzisha, ambayo itakuwa, kama ilivyokuwa kabla,

940
00:46:15,890 --> 00:46:18,120
kugeuka JSX yako katika
JavaScript kawaida.

941
00:46:18,120 --> 00:46:21,030
Una kitu ambacho itabidi
kukusanya wewe ES6 ya kawaida.

942
00:46:21,030 --> 00:46:24,720
JavaScript kuna mengi ya kusonga
sehemu una kufanya, hivyo kuna kitu ndiyo

943
00:46:24,720 --> 00:46:27,200
aitwaye Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Na hii ni mstari amri chombo kwamba itabidi
kukusaidia jukwaa nje yako kuguswa

945
00:46:31,110 --> 00:46:32,380
miradi kwa urahisi.

946
00:46:32,380 --> 00:46:38,660
>> Hivyo unaweza kusoma kuhusu hili
baadaye, lakini kuna baadhi ya zana

947
00:46:38,660 --> 00:46:40,160
kwamba Yeoman inatoa.

948
00:46:40,160 --> 00:46:43,280
Wao itabidi basi wewe kujenga kuguswa
programu na kila kitu kujengwa katika.

949
00:46:43,280 --> 00:46:46,030
Kama kutakuwa na wamejenga
katika, vipengele kujengwa katika.

950
00:46:46,030 --> 00:46:47,880
Ni itabidi transfoma yako kujengwa katika.

951
00:46:47,880 --> 00:46:50,699
Wana mengi ya baridi
mambo kujengwa moja kwa moja

952
00:46:50,699 --> 00:46:52,240
kutumia mambo haya kuitwa jenereta.

953
00:46:52,240 --> 00:46:54,620
>> Hivyo kusoma kuhusu hili kama wewe kama.

954
00:46:54,620 --> 00:46:59,110
Tu kwenda juu ya Yeoman, Y-E-O-M-A-N, na
unaweza kupata jenereta kama hizi.

955
00:46:59,110 --> 00:47:01,263
Na kwa jenereta kama
haya, wewe tu kama moja

956
00:47:01,263 --> 00:47:03,010
ni wanandoa mstari amri amri.

957
00:47:03,010 --> 00:47:05,530
Kutakuwa na jukwaa nje
nzima kuguswa programu kwa ajili yenu.

958
00:47:05,530 --> 00:47:10,470
Ni utapata kusambaza zote za mikono,
na grunt kazi iliyofanywa kwa ajili yenu,

959
00:47:10,470 --> 00:47:13,010
na hii ni kwa nini wewe tu kuzingatia
juu ya kuandika tu katika kuguswa.

960
00:47:13,010 --> 00:47:16,739
>> Hivyo kimsingi kujenga
Kuguswa programu ni nontrivial.

961
00:47:16,739 --> 00:47:19,530
Ni wired wote kwa pamoja, lakini kuna
ni zana kwamba itabidi kufanya hivyo kwa ajili yenu.

962
00:47:19,530 --> 00:47:23,070
Hivyo kama unataka kufanya kuguswa
programu, jaribu kufanya hivyo kwa njia hiyo.

963
00:47:23,070 --> 00:47:26,360
Kama unataka tu kufanya majaribio,
unaweza kujaribu kutumia hii CodePen

964
00:47:26,360 --> 00:47:28,550
kwa sababu hii ina CodePen
wote kuguswa wiring.

965
00:47:28,550 --> 00:47:30,240
Mimi tumefanya kazi yote kwa ajili yenu tayari.

966
00:47:30,240 --> 00:47:34,610
>> Hivyo kama unataka kufanya kama
uzalishaji na kutolewa kuguswa programu,

967
00:47:34,610 --> 00:47:37,220
kujaribu moja ya jenereta hizi.

968
00:47:37,220 --> 00:47:40,240
Kama unataka tu kucheza
karibu, ni mara nyingi tu yenye thamani ya

969
00:47:40,240 --> 00:47:44,490
kama kujaribu kucheza karibu juu ya CodePen hapa.

970
00:47:44,490 --> 00:47:45,470
Sauti nzuri?

971
00:47:45,470 --> 00:47:45,970
Baridi.

972
00:47:45,970 --> 00:47:47,890
>> Hivyo hiyo ni yote ninayo.

973
00:47:47,890 --> 00:47:52,470
Tena, kila kanuni na mifano ni
kwenda kuwa kwenye tovuti hii hapa.

974
00:47:52,470 --> 00:47:55,509
Hivyo, tena, hatukuwa kuzungumza
kuhusu syntax sehemu kubwa ya kuguswa,

975
00:47:55,509 --> 00:47:57,550
lakini kupata wale wote
kidogo maelezo syntactical,

976
00:47:57,550 --> 00:48:00,320
ni wote kwenda kuwa inapatikana
katika tovuti hii hapa.

977
00:48:00,320 --> 00:48:02,660
>> Hivyo Ningependa kupendekeza kama
kuchukua hatua ya kwanza.

978
00:48:02,660 --> 00:48:06,277
Kuiweka katika CodePen yako.

979
00:48:06,277 --> 00:48:08,110
Jaribu kufanya kazi juu ya maamuzi
kwa hatua ya pili.

980
00:48:08,110 --> 00:48:11,310
Kuna hatua nne, na tu
ona ambapo unaweza kupata kutoka kwamba.

981
00:48:11,310 --> 00:48:14,840
>> Yoyote maswali zaidi, angalia
nje ukurasa kwamba au barua pepe yangu.

982
00:48:14,840 --> 00:48:16,490
Hiyo ni email yangu.

983
00:48:16,490 --> 00:48:19,885
Lakini Ningependa upendo na kukusaidia na lolote
maswali unaweza kuwa kuhusu kuguswa.

984
00:48:19,885 --> 00:48:21,010
Hivyo, yep, hiyo ni yote ninayo.

985
00:48:21,010 --> 00:48:23,410
Asante wote sana kwa
kuangalia au kwa kuhudhuria.

986
00:48:23,410 --> 00:48:26,820
Na mimi itabidi kuchukua maswali yoyote
unaweza kuwa baada ya hili sasa.

987
00:48:26,820 --> 00:48:29,140
Hivyo kuwashukuru wote kwa ajili ya kuangalia.

988
00:48:29,140 --> 00:48:31,270