1
00:00:00,000 --> 00:00:02,910
>> [MUSIC nagpe-play]

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL MEHTA: Narito ito napupunta.

4
00:00:07,275 --> 00:00:11,070
>> Well, lahat ng tao, maligayang pagdating sa web
apps ng hinaharap na may Reaksyon.

5
00:00:11,070 --> 00:00:11,870
Ito ay CS50.

6
00:00:11,870 --> 00:00:12,930
Ang pangalan ko ay Neel.

7
00:00:12,930 --> 00:00:17,689
Ako TA para CS50 at isang sopomor
sa Harvard College at ang isang tunay, tunay

8
00:00:17,689 --> 00:00:18,730
passionate web developer.

9
00:00:18,730 --> 00:00:20,730
Kaya ako tunay nakapupukaw na
pakikipag-usap sa iyo ngayon,

10
00:00:20,730 --> 00:00:24,550
kung nandito ka o sa bahay
manood, tungkol Gumanti, na kung saan ay, muli

11
00:00:24,550 --> 00:00:27,270
gaya ng sinabi ko, ang hinaharap ng web apps.

12
00:00:27,270 --> 00:00:29,055
>> Kaya Gumanti ay isang web framework.

13
00:00:29,055 --> 00:00:30,930
At bilang ako ay nagsasabi
sa ilang mga tao dito,

14
00:00:30,930 --> 00:00:33,400
isang framework ay lamang ng isang
set ng mga kasangkapan na maaari mong gamitin

15
00:00:33,400 --> 00:00:35,770
upang buuin at bumuo ng iyong web app.

16
00:00:35,770 --> 00:00:39,010
At ang web apps, muli, mga website
na interactive tulad ng Facebook,

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

18
00:00:42,330 --> 00:00:45,590
>> So Facebook ay isang web framework
na ito ay binuo sa pamamagitan ng Facebook

19
00:00:45,590 --> 00:00:48,060
isang taon ilang back-- Gumanti ay.

20
00:00:48,060 --> 00:00:50,830
Ito ay dahil ito ay ginagamit sa
Facebook sa kanilang mga mobile apps

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

22
00:00:52,460 --> 00:00:56,350
Khan Academy ay isa pang
kilalang maaagang gumamit ng Reaksyon.

23
00:00:56,350 --> 00:00:58,630
>> Talagang Ito ay pagkuha
lubhang popular.

24
00:00:58,630 --> 00:01:03,420
Kung sakaling ikaw ay gumagamit ng mga bagay tulad ng anggular o
Gulugod, ito ay ng parehong pamilya,

25
00:01:03,420 --> 00:01:05,830
ngunit ito ay dahil sa ngayon
madaig ang kanilang katanyagan.

26
00:01:05,830 --> 00:01:06,890
Ito ay ang mainit na bagong bagay.

27
00:01:06,890 --> 00:01:09,590
Ito ay talagang, talagang malaking.

28
00:01:09,590 --> 00:01:13,470
>> At kaya Gumanti ay mabuti hindi lamang bilang isang
web framework para sa mga interface ng gusali.

29
00:01:13,470 --> 00:01:16,020
Ito ay mahusay para sa pagbuo ng web interface.

30
00:01:16,020 --> 00:01:18,350
Mayroon din ng isang bagay
tinatawag Gumanti Native na

31
00:01:18,350 --> 00:01:22,200
hinahayaan kang bumuo ng mga interface
para sa Android at iOS

32
00:01:22,200 --> 00:01:26,390
at marahil iba pang mga platform sa hinaharap
gamit lamang ang parehong JavaScript code.

33
00:01:26,390 --> 00:01:31,130
Maaari mong gamitin ang eksaktong parehong
JavaScript code upang mag-render ng mga website,

34
00:01:31,130 --> 00:01:33,040
upang mabigyan ng Android apps at iOS apps.

35
00:01:33,040 --> 00:01:35,000
>> Ito ay isang tunay, tunay nakapupukaw oras.

36
00:01:35,000 --> 00:01:37,070
Ito ay isang tunay, tunay na cool na pagkakataon.

37
00:01:37,070 --> 00:01:42,020
Ito ay talagang isang unibersal web
tool sa pag-unlad interface,

38
00:01:42,020 --> 00:01:44,420
kaya ito ay isang tunay, tunay
mahalagang bagay na malaman.

39
00:01:44,420 --> 00:01:46,949
At, bilang ay nagsasabi ako ng mga tao
bago, ito, tingin ko,

40
00:01:46,949 --> 00:01:48,990
ay pagpunta sa baguhin kung paano namin
bumuo ng mga web apps magpakailanman.

41
00:01:48,990 --> 00:01:55,820
Kaya ito ay marahil ng isang bit eksaherasyon, ngunit ako
sa tingin ito ay isang magandang magandang bagay na malaman.

42
00:01:55,820 --> 00:01:57,580
>> OK, kaya kung ano ay Gumanti?

43
00:01:57,580 --> 00:02:01,020
Reaksyon ay isang framework na maaari mong
gamitin ito para sa interface ng gusali.

44
00:02:01,020 --> 00:02:03,240
Isang interface ay, muli,
isang web page, i-right?

45
00:02:03,240 --> 00:02:06,340
Kaya dito ang Instagram.com, gumagamit Reaksyon.

46
00:02:06,340 --> 00:02:08,740
>> Reaksyon ay binuo sa
ideya ng mga bahagi.

47
00:02:08,740 --> 00:02:11,900
Bahagi ay isang HTML
element sa steroid,

48
00:02:11,900 --> 00:02:14,470
kaya isang elemento ng HTML ay tulad ng isang pindutan.

49
00:02:14,470 --> 00:02:15,250
Ito ay isang talata.

50
00:02:15,250 --> 00:02:17,500
Ito ay isang header, di ba?

51
00:02:17,500 --> 00:02:22,740
At Instagram ay gamitin ang mga ito, ngunit ito
Gagamitin din ng mga bahagi ng Reaksyon.

52
00:02:22,740 --> 00:02:25,740
>> Gumanti sangkap ay
souped-up elemento ng HTML

53
00:02:25,740 --> 00:02:28,100
na mayroon ng kanilang sariling mga pag-uugali
nilalaman sa loob ng mga ito.

54
00:02:28,100 --> 00:02:31,800
Kaya, bilang isang halimbawa, maaari kaming magkaroon ng
isang oras na sangkap, ang isang bahagi ng panahon,

55
00:02:31,800 --> 00:02:34,095
na naglalaman ng tulad ng
ang time stamp, alam mo,

56
00:02:34,095 --> 00:02:37,170
isang bahagi profile na
ay naglalaman ng mga larawan ng profile

57
00:02:37,170 --> 00:02:38,820
at ang pangalan ng tao.

58
00:02:38,820 --> 00:02:42,930
Maaari itong magkaroon ng isang tulad ng counter, na kung saan
maaaring bilangin tulad ng bilang ng mga gusto,

59
00:02:42,930 --> 00:02:45,610
at kung nag-click ka sa mga ito, makikita ito
dagdagan ang bilang ng mga gusto.

60
00:02:45,610 --> 00:02:48,200
Ang isang bahagi lamang ng isang
grupo ng HTML code na

61
00:02:48,200 --> 00:02:50,520
ay may ilang mga pag-andar
nakabalot sa loob ng mga ito.

62
00:02:50,520 --> 00:02:53,770
Kaya ito ay tulad ng isang elemento ng HTML
sa steroid, tulad ng sinabi ko dati.

63
00:02:53,770 --> 00:02:56,270
Maaari kang kumuha ng mga bahaging ito,
at maaari mong ilagay ang mga ito nang sama-sama

64
00:02:56,270 --> 00:02:59,060
upang gumawa ng mga bagong sangkap, sa
kasong ito, ang isang bahagi ng post,

65
00:02:59,060 --> 00:03:00,505
na naglalaman ng lahat ng mga bagay na ito.

66
00:03:00,505 --> 00:03:04,050
Ito ay naglalaman ng Time, Profile,
LikeCounter, siguro ang puna

67
00:03:04,050 --> 00:03:06,100
at marahil ang imahe mismo.

68
00:03:06,100 --> 00:03:10,810
At kaya web apps ay lamang na binuo sa pamamagitan ng pagkuha
mga bahagi at inilagay ang mga ito nang magkakasama.

69
00:03:10,810 --> 00:03:15,620
Isang Instagram feed ay walang iba kundi
ng grupo ng mga posts isa-isa,

70
00:03:15,620 --> 00:03:19,032
bawat post ay naglalaman ng tulad ng Time,
Profile, LikeCounter, at iba pa.

71
00:03:19,032 --> 00:03:20,490
Ito ay uri ng tulad ng pagbuo ng isang bahay.

72
00:03:20,490 --> 00:03:22,660
Hindi mo na magtayo ng
bahay mula sa itaas pababa.

73
00:03:22,660 --> 00:03:24,960
Dadalhin ka components-- mo
kumuha ng tulad ng mga banyo.

74
00:03:24,960 --> 00:03:28,320
Maglaan ka ng bedroom-- dumikit mo ang mga ito
sama-sama, at ikaw ay may isang bagong sangkap.

75
00:03:28,320 --> 00:03:29,760
Mayroon kang isang bagong bahagi ng bahay.

76
00:03:29,760 --> 00:03:32,860
>> Kaya gumanti ay lahat na binuo sa paligid
ang ideya na ito ng mga sangkap na

77
00:03:32,860 --> 00:03:36,600
mga interactive, na paturol.

78
00:03:36,600 --> 00:03:39,650
Tulad ng sinasabi mo lamang kung ano ang isang
profile ay, at ito ay nag-render ito.

79
00:03:39,650 --> 00:03:40,600
Ang mga ito ay composable.

80
00:03:40,600 --> 00:03:43,880
Maaari kang kumuha ng isang oras at isang profile, ilagay
ang mga ito nang sama-sama, gumawa ng mas mahusay sa isang bagay.

81
00:03:43,880 --> 00:03:47,770
At ang mga ito magagamit muli, kaya kung ikaw
magkaroon ng source code para sa isang post,

82
00:03:47,770 --> 00:03:49,440
maaari mong i-embed na kahit saan.

83
00:03:49,440 --> 00:03:53,160
>> Maaari mong i-embed ng isang Instagram
bagay sa iyong sariling website.

84
00:03:53,160 --> 00:03:56,830
Maaari mong i-embed sa Facebook, halimbawa,
hangga't ito ay gumagamit ng Gumanti rin.

85
00:03:56,830 --> 00:04:00,360
Kaya sangkap ay tunay, tunay, tunay
malakas na mga bloke ng gusali ng web

86
00:04:00,360 --> 00:04:04,180
na maaaring gamitin kahit saan at ilagay
magkasama upang gumawa ng bagong mga bloke ng gusali.

87
00:04:04,180 --> 00:04:07,159
Iyan ang tunay, tunay
mataas na antas ng pangkalahatang-ideya.

88
00:04:07,159 --> 00:04:09,200
Kaya, muli, kung ikaw ay may
anumang mga katanungan sa anumang punto

89
00:04:09,200 --> 00:04:14,470
tungkol sa pilosopiya ng reactor, ang
coding, na huminto sa akin, at ipaalam sa akin.

90
00:04:14,470 --> 00:04:18,420
>> OK, kaya gumanti ay cool na dahil ito
ay may iba't ibang paraan ng pagtingin

91
00:04:18,420 --> 00:04:19,870
sa kung paano mo bumuo ng mga web apps.

92
00:04:19,870 --> 00:04:23,620
Marahil narinig mo ng MVC, isang
model sa iyo ng kontrol sa CS50 o ano man

93
00:04:23,620 --> 00:04:25,940
iba pang mga pagsusuring klase mong gamitin.

94
00:04:25,940 --> 00:04:29,000
At pinaka-frameworks ay
binuo sa paligid ng ideya ng MVC.

95
00:04:29,000 --> 00:04:30,410
Reaksyon ay hindi.

96
00:04:30,410 --> 00:04:32,980
Gumanti ay binuo sa paligid ng ideya
ng unidirectional daloy ng data

97
00:04:32,980 --> 00:04:36,510
tulad ng nakikita sa pamamagitan ng tsart na ito o graphic dito.

98
00:04:36,510 --> 00:04:38,260
>> Talaga, mayroon kang isang pinagmulan ng data.

99
00:04:38,260 --> 00:04:42,380
At ang mga pinagmulan ng data ay magpasya
kung paano i-lay out ang ilang mga bahagi.

100
00:04:42,380 --> 00:04:45,452
At ang mga bahagi ay
pagkatapos, kapag binago nila,

101
00:04:45,452 --> 00:04:47,160
sila ay magsasabi sa
pinagmulan ng data na baguhin.

102
00:04:47,160 --> 00:04:49,350
>> Upang gamitin ang Instagram
Halimbawa, maaaring mayroon ka

103
00:04:49,350 --> 00:04:52,050
isang listahan ng mga post ng mga bagay tulad ng
sa isang database o isang bagay.

104
00:04:52,050 --> 00:04:53,310
Na ang mga data.

105
00:04:53,310 --> 00:04:57,600
At pagkatapos ay ang aming mga bahagi post
Dadalhin na data,

106
00:04:57,600 --> 00:05:01,830
at gamitin ang data na iyon upang mag-render
isang bagay sa screen.

107
00:05:01,830 --> 00:05:04,300
Ano Iyan ang arrow
mula sa data na bahagi ay,

108
00:05:04,300 --> 00:05:07,930
at pagkatapos na parehong data ang ginagamit
upang mailarawan ang isang grupo ng mga sangkap.

109
00:05:07,930 --> 00:05:10,290
>> Sa Facebook Messenger, para
Halimbawa, kung saan ay Gumanti,

110
00:05:10,290 --> 00:05:13,410
maaari kang magkaroon ng isang listahan ng mga
na mga mensahe bilang iyong source data.

111
00:05:13,410 --> 00:05:15,927
At iyon ay render hindi
lamang ang listahan ng mensahe

112
00:05:15,927 --> 00:05:17,510
kundi pati na rin sa listahan ng mga kaibigan mo.

113
00:05:17,510 --> 00:05:19,200
Mayroon kang count ang hindi pa nababasa.

114
00:05:19,200 --> 00:05:23,330
Siguro din render ang Facebook bagay
na ang dahilan sa ibaba ng Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Ang parehong data ay isang
isang pinagkukunan ng katotohanan

116
00:05:25,610 --> 00:05:28,290
at na nagiging sanhi ng maraming
mga sangkap na nai-render.

117
00:05:28,290 --> 00:05:30,290
At kapag ang isa sa mga
sangkap ay nagbago,

118
00:05:30,290 --> 00:05:32,320
nito ay babalik at
ang mga pagbabago sa pinagmulan ng data.

119
00:05:32,320 --> 00:05:33,460
>> Kang magpadala ng isang mensahe, i-right?

120
00:05:33,460 --> 00:05:34,780
Na ang mga pagbabago sa mga pinagmulan ng data.

121
00:05:34,780 --> 00:05:39,490
Basahin mo ang iyong mga mensahe,
kaya mong itakda hindi pa nababasa sa 0.

122
00:05:39,490 --> 00:05:41,136
Na ang mga pagbabago sa mga pinagmulan ng data.

123
00:05:41,136 --> 00:05:44,010
At mapapansin na ang lahat ng mga ito ng isa
palaso balik sa parehong data

124
00:05:44,010 --> 00:05:47,662
source, sa gayon alam mo,
bibigyan ng isang tiyak na hanay ng data,

125
00:05:47,662 --> 00:05:49,870
alam mo kung ano ang
page ay pagpunta sa hitsura.

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

127
00:05:50,700 --> 00:05:53,451
Alam mo, bibigyan ng ilang data, kung ano
ang pahina ay pagpunta sa hitsura.

128
00:05:53,451 --> 00:05:56,158
Maaari mong hulaan kung paano ito ng pagpunta sa
kumilos at kung paano ang mga bagay ay pagpunta

129
00:05:56,158 --> 00:05:57,650
sa trabaho kapag sila ay magkasama.

130
00:05:57,650 --> 00:06:00,410
>> At kung ako ay isang milyong mga bahagi
dito, ito ay kumilos sa parehong, karapatan?

131
00:06:00,410 --> 00:06:02,290
Hindi mo nais na magkaroon ng anumang
kakaiba interconnections.

132
00:06:02,290 --> 00:06:04,120
Render One data sa isang milyong mga sangkap.

133
00:06:04,120 --> 00:06:06,879
Isang milyong mga bahagi ng dati
bumalik at i-edit ang data.

134
00:06:06,879 --> 00:06:07,920
At kaya ito ay napakabuti.

135
00:06:07,920 --> 00:06:10,870
Kami ay gusali composable,
madaling scalable web apps.

136
00:06:10,870 --> 00:06:13,150
>> Mayroon kang isang pinagmulan ng data,
ang pinagmulan ng katotohanan.

137
00:06:13,150 --> 00:06:15,790
Iyon ay nagsasabi sa iyong mga sangkap
kung paano i-lay out ang pahina,

138
00:06:15,790 --> 00:06:18,190
at ang mga sangkap ay
hawakan interaction.

139
00:06:18,190 --> 00:06:20,150
At kung gusto nilang baguhin
mga bagay-bagay, pumunta lamang pabalik

140
00:06:20,150 --> 00:06:21,750
at sabihin sa mga pinagmulan ng data na baguhin.

141
00:06:21,750 --> 00:06:22,850
Magkaroon ng kahulugan?

142
00:06:22,850 --> 00:06:26,010
Kaya Gumanti ay tungkol sa pag-unawa
kung paano bumuo ng isang bahagi

143
00:06:26,010 --> 00:06:29,540
at kung paano gumawa ng iyong component
makipag-ugnayan sa labas ng mundo.

144
00:06:29,540 --> 00:06:31,850
>> Ang pagsasagawa ng mga component interact
sa labas ng mundo

145
00:06:31,850 --> 00:06:34,490
gumagamit ng ibang technology
tinatawag na pagkilos ng bagay, na

146
00:06:34,490 --> 00:06:36,872
ay isang framework na
idinagdag sa itaas ng Reaksyon.

147
00:06:36,872 --> 00:06:38,330
Hindi namin pagpunta sa makipag-usap tungkol sa na.

148
00:06:38,330 --> 00:06:42,990
Kami ay pagpunta sa makipag-usap higit pa tungkol sa, na ibinigay
data, kung paano maaari mong i-render ang isang component?

149
00:06:42,990 --> 00:06:47,010
>> At kaya Gumanti ay talagang cool na dahil ikaw
Maaari itong gamitin sa anumang back end na gusto mo.

150
00:06:47,010 --> 00:06:50,480
Kung mayroon kang tulad ng isang Python likod ng pagtatapos,
kung ang iyong Python maaaring sabihin ang ilang mga data,

151
00:06:50,480 --> 00:06:51,610
Gumanti maaari itong mag-render.

152
00:06:51,610 --> 00:06:54,700
Kung ikaw ay walang JS output
ng data, Gumanti ito nagpapakita.

153
00:06:54,700 --> 00:06:56,890
Ruby rails up gamit
data, Gumanti ito nagpapakita.

154
00:06:56,890 --> 00:07:01,860
>> Kaya Gumanti ay karaniwang isang web
view-- isang front end na may mga bahagi

155
00:07:01,860 --> 00:07:03,910
para sa anumang mga mapagkukunan ng data ano pa man.

156
00:07:03,910 --> 00:07:07,145
At kaya ng pagpunta mula sa pinagmulan ng data na
gumanti sangkap ay medyo madali.

157
00:07:07,145 --> 00:07:08,770
Pagpunta sa iba pang paraan ay isang maliit na mas mahirap.

158
00:07:08,770 --> 00:07:10,462
Iyon ay gumagamit ng pagkilos ng bagay tulad ng nabanggit ko bago.

159
00:07:10,462 --> 00:07:11,420
Hindi namin makuha sa na.

160
00:07:11,420 --> 00:07:13,740
Susubukan naming mas pokus sa
data-to-component side.

161
00:07:13,740 --> 00:07:15,880
Sa ganitong paraan maaari kang gumawa ng
cool, fun web apps.

162
00:07:15,880 --> 00:07:19,870
Hindi nito maaapektuhan ang mundo sa labas
para sa ngayon, ngunit iyan ay isa pang kuwento.

163
00:07:19,870 --> 00:07:22,210
>> OK, kaya kung ikaw ay dito
para sa aking huling seminar

164
00:07:22,210 --> 00:07:26,610
malalaman mo na ang lahat ng mga code para sa mga
talk ngayong araw ay magiging sa URL na ito

165
00:07:26,610 --> 00:07:29,320
dito, paumanhin, ang URL na ito dito.

166
00:07:29,320 --> 00:07:32,730
At talaga namin ang pagpunta upang pumunta
sa pamamagitan ng apat na hakbang, siguro limang,

167
00:07:32,730 --> 00:07:33,510
marahil ay hindi lima.

168
00:07:33,510 --> 00:07:37,300
Susubukan naming ilipat sa pamamagitan ng apat na hakbang
ng pagbuo ng isang sample Gumanti app.

169
00:07:37,300 --> 00:07:39,550
At gayon ang lahat ng source code
para sa bawat hakbang ng paraan

170
00:07:39,550 --> 00:07:42,216
ay magiging dito mismo, kaya kung
ikaw ay sumusunod na kasama sa bahay,

171
00:07:42,216 --> 00:07:43,991
huwag mag-atubiling upang bumasang mabuti ang code na ito.

172
00:07:43,991 --> 00:07:46,740
Kung ikaw ay sumusunod na kasama dito,
makikita ay nagpapakita namin ito sa screen,

173
00:07:46,740 --> 00:07:47,739
kaya huwag mag-alala tungkol dito.

174
00:07:47,739 --> 00:07:50,930
Ngunit kung ikaw ay nasa bahay, huwag mag
atubiling bisitahin ang website na ito.

175
00:07:50,930 --> 00:07:56,400
At, oo, dapat ay maaari upang makakuha ng
ang lahat ng mga code na gusto mo kailanman kailangan dito.

176
00:07:56,400 --> 00:08:01,380
Kaya ito ay isang magandang cheat sheet pati na rin
para sa iyong mga pakikipagsapalaran sa hinaharap na may Reaksyon.

177
00:08:01,380 --> 00:08:04,490
Cool, kaya kung lahat ng tao kung sino ang dito,
at kahit na kung ikaw ay nasa bahay,

178
00:08:04,490 --> 00:08:11,580
hilahin pataas ang website na ito, is.gd/cs50react,
walang capital, walang underscore, walang wala.

179
00:08:11,580 --> 00:08:15,849
>> Makikita mo ang isang pahina na ganito
isang maliit na piraso tulad nito.

180
00:08:15,849 --> 00:08:17,140
Ito ay isang bagay na tinatawag na CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen ay isang collaborative
kapaligiran coding

182
00:08:20,030 --> 00:08:23,364
na kung saan maaari kong isulat ang code dito, at
makikita ito ay awtomatikong ipapadala sa iyo.

183
00:08:23,364 --> 00:08:24,780
At sa ganitong paraan, maaari kong isulat code.

184
00:08:24,780 --> 00:08:26,920
Maaari ko bang patakbuhin ang code dito.

185
00:08:26,920 --> 00:08:33,470
>> Para example-- at kung reloads-- ito makita,
Nauubusan na ako ng JavaScript code sa pahina

186
00:08:33,470 --> 00:08:36,390
karapatan dito, at makikita ito
Awtomatikong i-render ang isang web page

187
00:08:36,390 --> 00:08:37,980
na may ganitong JavaScript code.

188
00:08:37,980 --> 00:08:40,039
At kaya ito ay isang paraan
para sa amin upang subukan ang code

189
00:08:40,039 --> 00:08:43,089
talagang mabilis nang hindi na gumamit
aming ID o gamitin ang aming mga lokal na makina

190
00:08:43,089 --> 00:08:44,290
o kahit ano.

191
00:08:44,290 --> 00:08:47,670
Ito ay isang mabilis na paraan para sa iyo upang mockup
at subukan ang iba't ibang mga uri ng mga code.

192
00:08:47,670 --> 00:08:50,560
>> Kaya ako pagpunta sa pagkuha ng
Halimbawa code, paglalagay ng mga ito dito.

193
00:08:50,560 --> 00:08:52,374
Kami ay pagpunta sa ay nagtatrabaho sa pamamagitan nito.

194
00:08:52,374 --> 00:08:54,540
At kung ikaw ay sa bahay, sa iyo
maaaring pull ito up pati na rin.

195
00:08:54,540 --> 00:08:57,530
At mayroon akong naka-install
Gumanti dito, kaya maaari mo lamang

196
00:08:57,530 --> 00:09:00,770
isulat ang iyong sariling code dito, at
subukan ito bilang iyong sariling playground.

197
00:09:00,770 --> 00:09:04,940
>> Oo, kung lahat ng tao upang
magbukas ang link na ito dito.

198
00:09:04,940 --> 00:09:08,080
Pakibigyan ako ng isang thumbs
up sandaling ikaw ay ito bukas.

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

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

201
00:09:13,770 --> 00:09:16,914
May walang dito para sa ngayon, ngunit
kami ay baguhin na sa lalong madaling panahon.

202
00:09:16,914 --> 00:09:21,250
>> OK, kaya Gumanti ay isang JavaScript
library, at dahil dito,

203
00:09:21,250 --> 00:09:24,480
nangangailangan ng kaalaman ng JavaScript,
kung saan ay ang web programming language.

204
00:09:24,480 --> 00:09:27,660
At ito ay ginagamit para sa iba pang mga bagay
ngayon masyadong ngunit lalo na ang mga web bumuo

205
00:09:27,660 --> 00:09:32,040
wika, kaya kung hindi ka pamilyar sa
na, basahin ang isang site na tinatawag na JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Ito ay kahanga-hanga.

207
00:09:32,700 --> 00:09:34,240
Maaari mong malaman ang JavaScript
Sa kalahating oras.

208
00:09:34,240 --> 00:09:34,990
Ito ay hindi kapani-paniwala.

209
00:09:34,990 --> 00:09:36,420
>> Kaya bigyan ito ng isang basahin.

210
00:09:36,420 --> 00:09:39,960
Kami rin ay may maraming mga HTML dito dahil
ay pagdisenyo namin sa mga web page ng kurso.

211
00:09:39,960 --> 00:09:43,890
Kaya't kung hindi ka pamilyar sa
HTML, tingnan ang HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Sa tingin ko ang pag-aaral ng Gumanti ay isang
milyong beses na mas madali kung mayroon ka nang

213
00:09:46,520 --> 00:09:47,892
Alam bloke ng gusali.

214
00:09:47,892 --> 00:09:50,600
Kung ikaw ay may mga bahagi, ito ay
madaling gumawa ng isang mas malaking bahagi.

215
00:09:50,600 --> 00:09:51,860
Iyan ay Gumanti wika para sa iyo.

216
00:09:51,860 --> 00:09:54,270
>> Kaya't sige, at bigyan
mga bagay na ito ng isang basahin.

217
00:09:54,270 --> 00:09:55,070
I-pause ang video na ito.

218
00:09:55,070 --> 00:09:57,440
Bigyan ito ng isang basahin kung ikaw ay
sa bahay kung ikaw ay hindi

219
00:09:57,440 --> 00:10:00,794
pamilyar sa HTML o JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, kaya kung ano ang kami ay pagpunta sa
gawin ay kami ay pagpunta sa gawin

221
00:10:02,960 --> 00:10:06,470
isang napaka-simpleng flashcard app gamit Reaksyon.

222
00:10:06,470 --> 00:10:08,210
Kami ay pagpunta sa magkaroon ng isang flashcard.

223
00:10:08,210 --> 00:10:09,880
Maaari mong i-flip ang card at pabalik.

224
00:10:09,880 --> 00:10:12,399
At kami ay mayroon din ng isang listahan ng mga
lahat ng mga card na mayroon kami,

225
00:10:12,399 --> 00:10:14,190
at kung kami ay pakiramdam
mapaghangad, upang tayo'y maging

226
00:10:14,190 --> 00:10:17,060
magagawang lumipat sa pagitan
kotse sa pamamagitan ng pag-click sa mga ito.

227
00:10:17,060 --> 00:10:20,360
>> Ngunit ito ay, ang iyong mga hubad
buto, isang napaka-simpleng Gumanti app.

228
00:10:20,360 --> 00:10:22,560
At kaya ito ay talagang
hindi mahalaga upang ipatupad,

229
00:10:22,560 --> 00:10:26,030
ngunit kami ay pagpunta upang ipakita na, kung wala ka
ito, ito ay tunay, tunay madali upang patagalin ito

230
00:10:26,030 --> 00:10:27,680
kung ang ibang tao ay makakatulong sa iyo na may ito.

231
00:10:27,680 --> 00:10:33,750
Kaya kami ay pagpunta upang pumunta sa pamamagitan ng apat na hakbang
nagsisimula mula sa simula upang bumuo ito.

232
00:10:33,750 --> 00:10:36,740
>> OK, kaya ang apat na hakbang, bibigyan namin ng
magsimula sa unang hakbang.

233
00:10:36,740 --> 00:10:39,790
Ang unang hakbang ay magiging
gusali ng iyong unang component.

234
00:10:39,790 --> 00:10:44,830
Tulad ng sinabi ko bago, isang sangkap sa Reaksyon
ay lamang ng isang elemento ng HTML sa steroid.

235
00:10:44,830 --> 00:10:49,660
Tinutukoy nito ang mga HTML
at ang ilang mga pag-uugali, at ito

236
00:10:49,660 --> 00:10:52,600
ay tukuyin kung paano ang mga tao
maaaring makipag-ugnayan sa mga ito sa kung paano

237
00:10:52,600 --> 00:10:54,270
ay ito ay may panloob na estado.

238
00:10:54,270 --> 00:10:57,630
Tulad ng isang pindutan ay alam tulad ng kung paano maraming
beses na ito ay nai-click, halimbawa,

239
00:10:57,630 --> 00:11:01,010
at ito ay alam kung paano mag-ipon mismo out.

240
00:11:01,010 --> 00:11:04,430
>> Kaya sabihin sige at bumuo ng aming
unang bahagi ng paggamit ng JavaScript.

241
00:11:04,430 --> 00:11:09,711
Kaya kung mukhang kakaiba ang syntax,
iyan ay dahil ang uri ng ito ay.

242
00:11:09,711 --> 00:11:11,710
Kaya, muli, kami ay pagpunta
upang gumawa ng isang variable na tinatawag na

243
00:11:11,710 --> 00:11:14,580
app gamit hayaan ang mga keyword,
na gumagawa ng isang variable,

244
00:11:14,580 --> 00:11:18,210
hayaan App pantay React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Reaksyon ay isang library at may
ang lumikha ng klase function.

246
00:11:22,609 --> 00:11:24,400
At ang function na ito ay
isang piraso ng code na kayo

247
00:11:24,400 --> 00:11:29,090
ay maaaring gamitin upang lumikha ng isang bagong
uri ng Gumanti component.

248
00:11:29,090 --> 00:11:32,780
At kaya React.createClass
gumagawa ng isang component,

249
00:11:32,780 --> 00:11:35,270
at ang bahagi na ito ay
magawa stuff.

250
00:11:35,270 --> 00:11:40,460
Ang pangunahing bagay na maaaring gawin ito ay render
ang isang bagay, i-render bilang isang function.

251
00:11:40,460 --> 00:11:44,500
>> Muli, kung ito index ay hindi halata sa
mo, inirerekomenda ko na pumunta ka sa JS para sa pusa

252
00:11:44,500 --> 00:11:45,682
at suriin ito.

253
00:11:45,682 --> 00:11:47,710
Ay na naka-zoom in na rin sapat?

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

255
00:11:48,490 --> 00:11:50,670
>> Kaya ang bawat component pangangailangan
na magkaroon ng isang render function.

256
00:11:50,670 --> 00:11:53,010
Sinasabi ng render function,
ano ang gagawin ko i-print sa screen?

257
00:11:53,010 --> 00:11:54,760
Ngunit ang mga bahagi ay
walang silbi kung ito ay hindi

258
00:11:54,760 --> 00:11:58,060
alam kung ano ang i-print sa screen, kaya
kailangan mong magkaroon ng isang render function.

259
00:11:58,060 --> 00:12:01,904
>> Kaya sa render bagay, ikaw
kailangan lang upang ibalik ang ilang mga HTML.

260
00:12:01,904 --> 00:12:03,820
At kung ano ang cool na
mayroong isang bagay na tinatawag na

261
00:12:03,820 --> 00:12:08,660
JSX, na kung saan ay isang extension ng
JavaScript na ginagamit ng umepekto.

262
00:12:08,660 --> 00:12:11,845
Ipaalam ito sumulat ka ng HTML sa loob
ng iyong JavaScript, kung saan

263
00:12:11,845 --> 00:12:13,970
tunog uri ng kakaiba kapag
ka munang mag-isip tungkol sa mga ito,

264
00:12:13,970 --> 00:12:15,553
ngunit ito ay gumagawa ng maraming kahulugan Pagkatapos.

265
00:12:15,553 --> 00:12:17,430
Kaya maaari naming gawin ito.

266
00:12:17,430 --> 00:12:21,360
Kung hindi ka pamilyar sa HTML, alam ko
kami ay may isang div na may pangkalahatang layunin

267
00:12:21,360 --> 00:12:22,790
lalagyan para sa mga bagay-bagay.

268
00:12:22,790 --> 00:12:26,380
Maaari naming bumalik sa isang div, at sa loob
ito div, maaari naming ilagay ang mga bagay-bagay.

269
00:12:26,380 --> 00:12:32,390
>> Kaya sabihin nating gusto naming i-render lamang
isang tuwid-up flashcard para sa ngayon.

270
00:12:32,390 --> 00:12:34,890
Flashcard Ang, nais kong sabihin,
ay magkakaroon ng tanong at sagot.

271
00:12:34,890 --> 00:12:37,530
Kaya sa loob ng div, sabihin
i-print out ng isang talata

272
00:12:37,530 --> 00:12:42,155
na nagsasabing question-- Ano ang
panghuli sagot sa buhay, ang daigdig?

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

274
00:12:47,640 --> 00:12:50,345
At pagkatapos ay ang sagot ay
magiging, siyempre, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Iyon ay hindi makabuo ng mabuti sa lahat.

277
00:12:59,730 --> 00:13:04,164
Oo, kaya talaga Maaari mo talagang
magsulat ng HTML sa loob ng iyong JavaScript.

278
00:13:04,164 --> 00:13:06,330
At ito ay magiging
naka-print out sa screen.

279
00:13:06,330 --> 00:13:08,250
Kaya sabihin subukan ito out.

280
00:13:08,250 --> 00:13:09,520
>> Kaya't kami sa aming bahagi.

281
00:13:09,520 --> 00:13:12,210
Kailangan nating sabihin sa Reaksyon upang ilagay
ang mga bahagi sa screen

282
00:13:12,210 --> 00:13:18,990
kaya React.render, kaya mapapansin na namin
ituturing ng app tulad ng anumang iba pang mga elemento.

283
00:13:18,990 --> 00:13:21,010
Isulat namin ito bilang ito ay isang HTML element.

284
00:13:21,010 --> 00:13:25,100
Tulad ng sa halip na sabihing tulad ng img
para sa mga imahe o p para talata,

285
00:13:25,100 --> 00:13:28,120
isulat mo App, kaya App ay
tratuhin tulad ng isang elemento ng HTML.

286
00:13:28,120 --> 00:13:30,380
Tulad ng sinabi ko bago, ito ay
isang elemento sa steroid.

287
00:13:30,380 --> 00:13:32,870
>> Kaya mong i-render App, at ikaw
bigyan ito ng isang lugar upang ilagay ito.

288
00:13:32,870 --> 00:13:37,170
At ito ay kung paano mo magagawa
sabihin dito kung saan sa ilagay ito.

289
00:13:37,170 --> 00:13:46,200
Ako ay may ginawa ng isang simpleng div sa
pahina na tinatawag na may isang ID ng pahina,

290
00:13:46,200 --> 00:13:48,300
at na kung saan ang
element ay pagpunta sa pumunta.

291
00:13:48,300 --> 00:13:49,841
>> At hindi namin pagpunta upang tumakbo kasama ang HTML.

292
00:13:49,841 --> 00:13:53,145
Karaniwang ito ay pagpunta upang makakuha ng
ilagay sa loob ng mga ito sangkap ng pahina

293
00:13:53,145 --> 00:13:54,270
na mayroon kami sa screen.

294
00:13:54,270 --> 00:13:59,210
Kaya ito ay tumatakbo ang code na ito, at ito ay nakakakuha ito
bagay sa screen, kaya dito tayo.

295
00:13:59,210 --> 00:14:01,770
Ginawa namin ang aming mga unang Gumanti component.

296
00:14:01,770 --> 00:14:08,000
>> Kaya lang bilang isang pagbabalik-tanaw, malumanay na ginawa namin
isang bagong uri ng component, di ba?

297
00:14:08,000 --> 00:14:10,145
Iyon ay kung ano ang React.createClass.

298
00:14:10,145 --> 00:14:12,680
At sa bahagi na, kami
ipinagbigay-alam ito sa kung ano ang dapat nitong gawin.

299
00:14:12,680 --> 00:14:15,590
Sa tuwing ang bahagi na ito ay upang
nakalimbag papunta sa screen,

300
00:14:15,590 --> 00:14:19,300
ito ay i-print out ang div na may
ang dalawang talata sa loob nito.

301
00:14:19,300 --> 00:14:24,460
>> At kung ano ang ginawa namin, gumawa kami ng isang bagong app
gamit ang notasyon angle bracket app.

302
00:14:24,460 --> 00:14:27,160
Sinabi namin ito upang ilagay ito
sa loob ng mga sangkap ng pahina.

303
00:14:27,160 --> 00:14:29,867
At kaya kung ano ang ko, nilikha ito
isang bagong app mula sa na template.

304
00:14:29,867 --> 00:14:31,200
At pagkatapos ay sinabi ko ito sa render ito.

305
00:14:31,200 --> 00:14:33,680
Kaya sinabi ito, OK, app,
ano ang dapat kong i-print out?

306
00:14:33,680 --> 00:14:36,970
App sabi, pumunta print out ang isang div
may dalawang talata sa loob nito.

307
00:14:36,970 --> 00:14:40,420
At voila, mayroong aming div na may
dalawang talata sa loob nito.

308
00:14:40,420 --> 00:14:43,180
Gumawa unawa sa ngayon?

309
00:14:43,180 --> 00:14:46,690
>> Kaya, muli, ang buong hamon ng Reaksyon
ay lamang ng pag-alam kung paano gumawa ng mga sangkap.

310
00:14:46,690 --> 00:14:48,500
Paano gawin ang mga
mga sangkap na sama.

311
00:14:48,500 --> 00:14:51,780
Ngayon na iyong ginawa namin ang aming unang
component, sabihin bumalik

312
00:14:51,780 --> 00:14:54,284
at gumawa ng mga sangkap na napapasadyang.

313
00:14:54,284 --> 00:14:56,700
Kaya alam mo kung paano sa HTML sa iyo
ay maaaring magbigay sa iyong mga pindutan klase?

314
00:14:56,700 --> 00:14:59,146
Maaari mong bigyan ang iyong mga anchor sa href.

315
00:14:59,146 --> 00:15:00,770
Maaari mong bigyan ang iyong input ng isang uri, tama?

316
00:15:00,770 --> 00:15:04,740
Maaari kang magbigay ng higit pang mga pasadyang
properties sa lahat ng iyong mga elemento

317
00:15:04,740 --> 00:15:06,490
upang gawin itong mas kawili-wili.

318
00:15:06,490 --> 00:15:09,030
At kami ay maaaring talagang gawin
ang eksaktong parehong bagay.

319
00:15:09,030 --> 00:15:17,500
>> Kaya sabihin nating gusto namin ang aming
app upang pumunta render ng anumang mga card.

320
00:15:17,500 --> 00:15:19,630
Sa ngayon kami ay lamang
render ng isang hardcoded card.

321
00:15:19,630 --> 00:15:22,530
Alam namin na may isa lamang
card ay maaaring gawin ito, kaya kami ay

322
00:15:22,530 --> 00:15:25,960
pagpunta sa subukan at baguhin ito ngayon kaya
na maaari lamang naming bigyan ito ng ilang card.

323
00:15:25,960 --> 00:15:27,410
Makikita ito i-print out ang mga card.

324
00:15:27,410 --> 00:15:29,380
>> Ala mong subukan at gawin ang iyong mga
bahagi ng isang pangkalahatang layunin.

325
00:15:29,380 --> 00:15:31,654
Kaya sa ganitong paraan ko maaaring i-email
ito ang aking mga kaibigan at maging tulad ng,

326
00:15:31,654 --> 00:15:33,820
kahit anong flashcard mayroon ka,
feed lang ito sa dito,

327
00:15:33,820 --> 00:15:35,290
at makikita ito gawin ito sa pamamagitan ng kanyang sarili.

328
00:15:35,290 --> 00:15:37,650
Maaari mong ilagay ang iba pang mga
mga bagay-bagay sa iyong sariling mga app.

329
00:15:37,650 --> 00:15:40,600
>> Ngunit una, ni break na ito ipaalam
up sa dalawang bahagi,

330
00:15:40,600 --> 00:15:44,500
ngunit nais naming upang paghiwalayin ang mga card
part-print mula sa aktwal na bahagi app.

331
00:15:44,500 --> 00:15:46,660
Kaya kung ano ang maaari naming gawin ay namin
maaaring baguhin ito mula sa App

332
00:15:46,660 --> 00:15:51,300
upang CardView, lamang ng isang
bagong pangalan para sa app,

333
00:15:51,300 --> 00:15:54,450
at maaari naming gumawa ng isang bagong
bahagi na tinatawag App,

334
00:15:54,450 --> 00:15:56,336
huwag malito sa mga lumang App.

335
00:15:56,336 --> 00:16:00,730
Mayroon din kaming mga createClass,
at tulad sa HTML,

336
00:16:00,730 --> 00:16:03,590
maaari mong nest Gumanti sangkap
sa loob ng bawat isa.

337
00:16:03,590 --> 00:16:16,430
>> Kaya sa render function,
function bumalik CardView,

338
00:16:16,430 --> 00:16:18,234
at ito ay ang eksaktong parehong bagay.

339
00:16:18,234 --> 00:16:19,400
Tingnan kung bakit ito ay ang parehong bagay?

340
00:16:19,400 --> 00:16:22,590
Sa halip ng pag-render lamang ang app na
may div at pagpapares sa loob ng mga ito,

341
00:16:22,590 --> 00:16:26,194
ang app nagpapagana ng CardView, at ang
CardView nagpapagana ng div at talata.

342
00:16:26,194 --> 00:16:29,110
Kaya ito ay ang aming unang halimbawa ng
pugad ng mga elemento sa loob ng bawat isa.

343
00:16:29,110 --> 00:16:32,177
Ba na magkaroon ng kahulugan?

344
00:16:32,177 --> 00:16:33,760
Kaya, muli, kami ay may isang CardView element.

345
00:16:33,760 --> 00:16:37,250
Mayroon kaming mga elemento app
na ito ay mas malaki kaysa sa.

346
00:16:37,250 --> 00:16:40,990
>> OK, kaya gusto namin ang aming CardView-- kung ikaw
magbigay ng isang magandang CardView isang tiyak na card,

347
00:16:40,990 --> 00:16:43,370
makikita ito i-print out para sa iyo, i-right?

348
00:16:43,370 --> 00:16:48,050
Kaya una, kailangan naming gumawa ng isang card,
kaya gumawa ng isang card object ipaalam.

349
00:16:48,050 --> 00:17:02,930
Kaya ipaalam sa aking card equal--
kung ikaw ay ang lahat ng mga pamilyar na,

350
00:17:02,930 --> 00:17:05,260
ito ay lamang ang notation-making
tumutol sa JavaScript.

351
00:17:05,260 --> 00:17:09,280
Ito ay uri ng tulad ng isang struct
sa C, kaya gumawa kami ng isang card,

352
00:17:09,280 --> 00:17:15,920
at kaya ngayon maaari naming ipasa ang card na ito bilang
isang ari-arian o bilang isang katangian sa HTML

353
00:17:15,920 --> 00:17:17,290
terminolohiya sa aming app.

354
00:17:17,290 --> 00:17:20,210
Kaya maaari naming gawin ito, App
ay katumbas ng card MyCard.

355
00:17:20,210 --> 00:17:23,200
>> Alam mo kung paano sa input, mong gawin
uri ng input ay katumbas ng text o pindutan

356
00:17:23,200 --> 00:17:25,240
klase ay katumbas btn para bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Parehong ideya, App card equals--
nakuha mo na ilagay ang braces here--

358
00:17:29,500 --> 00:17:33,830
Katumbas App card MyCard, kaya ito
sabi namin ang card na ito object.

359
00:17:33,830 --> 00:17:39,149
Pupunta ako upang pumasa ito bilang
ari-arian upang ang mga bahagi ng app.

360
00:17:39,149 --> 00:17:41,440
At bahagi na ito app ay
ma-access ang mga ito at gawin

361
00:17:41,440 --> 00:17:43,580
kagiliw-giliw na mga bagay-bagay sa mga ito.

362
00:17:43,580 --> 00:17:47,650
>> Kaya aming mga app ay magiging
bibigyan ng isang card, kaya sa ngayon,

363
00:17:47,650 --> 00:17:49,980
Mayroon ng mga app bigyan lamang ipaalam
ang card sa CardView

364
00:17:49,980 --> 00:17:53,110
sa sarili dahil tulad ng mga app na ito ay hindi
pagpunta sa kung ano ang gagawin sa mga ito,

365
00:17:53,110 --> 00:17:54,850
kaya kami na lang ibigay ito sa mga CardView.

366
00:17:54,850 --> 00:18:00,050
Kaya makikita namin ipasa ito sa
parehong paraan, card katumbas,

367
00:18:00,050 --> 00:18:05,426
at sa gayon ang bawat bahagi ay maaaring ma-access ang
mga bagay na ito ay ibinigay sa mga ito.

368
00:18:05,426 --> 00:18:07,800
Maaari silang ma-access ang mga katangian
na ibinigay sa mga ito

369
00:18:07,800 --> 00:18:09,470
gamit ang syntax na ito, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Kaya kung ano ang mangyayari dito ay
ikaw ay may MyCard object.

372
00:18:14,920 --> 00:18:18,250
Pumasa ka ito sa app
gamit App card ay katumbas MyCard.

373
00:18:18,250 --> 00:18:21,420
Iyon card object ay ibinigay sa iyong app.

374
00:18:21,420 --> 00:18:24,400
Maaari itong ma-access ang app
bilang this.props.card.

375
00:18:24,400 --> 00:18:28,780
Ito ay uri ng tulad ng isang imahe
nakakaalam kung ano ang mga ito ay mga pinagmulan ay.

376
00:18:28,780 --> 00:18:31,972
>> Alam ng app na ito kung ano ito ay card
ay, at maaari itong gawin mga bagay-bagay sa mga ito.

377
00:18:31,972 --> 00:18:32,930
Maaari itong gawin computations.

378
00:18:32,930 --> 00:18:35,290
Ito ay maaaring gumawa ng mga pagpapasya batay off ng mga ito.

379
00:18:35,290 --> 00:18:39,950
>> Para sa ngayon, ako ay pagpunta upang pumasa
this.props.card papunta sa CardView.

380
00:18:39,950 --> 00:18:43,420
Gumawa unawa sa ngayon?

381
00:18:43,420 --> 00:18:45,210
Makikita ito maging mas makatuturan ngayon.

382
00:18:45,210 --> 00:18:46,990
>> OK, kaya ngayon kami ay sa CardView.

383
00:18:46,990 --> 00:18:51,719
Ang aming CardView, na ibinigay ng card, dapat
i-print ang kanyang tanong at sagot.

384
00:18:51,719 --> 00:18:54,510
Sa ngayon naka-print na lang namin ang ilang mga
hardcoded tanong at sagot.

385
00:18:54,510 --> 00:18:57,720
Kailangan namin upang malaman out-- kailangan namin
upang hilingin ang card na ibinigay nila sa amin

386
00:18:57,720 --> 00:19:01,360
ano ang tanong at sagot, at
pagkatapos ay i-print ito out sa screen.

387
00:19:01,360 --> 00:19:02,470
>> Kaya maaari naming gawin ito dito.

388
00:19:02,470 --> 00:19:06,135
Sa render begin-- unang gawin ay katumbas.

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

390
00:19:08,710 --> 00:19:13,050
Kaya kung ano ang ginagawa namin dito ay alam namin na
ang mga card na ibinigay sa amin sa isang ari-arian,

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

392
00:19:13,580 --> 00:19:15,930
Ito ay ibinigay sa atin bilang isang input.

393
00:19:15,930 --> 00:19:19,440
Tulad ng ito ay halos tulad ng
argumento sa isang function.

394
00:19:19,440 --> 00:19:22,810
Ang card ay isang argument
halos sa CardView.

395
00:19:22,810 --> 00:19:25,239
>> Susubukan naming kunin iyon, at ilagay
ito sa tanong na variable.

396
00:19:25,239 --> 00:19:27,280
Gumawa nagpunta bang ang sagot
sa mga variable ng sagot.

397
00:19:27,280 --> 00:19:31,130
Mga senyas na ang card upang sagutin.

398
00:19:31,130 --> 00:19:35,072
At ngayon na kami ay may mga ito,
sa halip ng pag-print out teksto na,

399
00:19:35,072 --> 00:19:37,030
kami ay pagpunta upang i-print out
kahit na ano sila ay nagbigay sa amin.

400
00:19:37,030 --> 00:19:43,580
>> Kaya ito stuff-- kaya kami ay pagpunta
upang ilabas Tanong Sagot.

401
00:19:43,580 --> 00:19:46,380
Tingnan natin kung ito gumagana.

402
00:19:46,380 --> 00:19:52,800
Cool, ni magbasa-basa sa mga ito upang ipaalam sa
isa pang beses upang matiyak na.

403
00:19:52,800 --> 00:20:00,470
>> Kaya ang aking card ay object card, at hindi na namin
binibigyan na card sa app.

404
00:20:00,470 --> 00:20:04,790
At ang app ay pagpunta sa gawin ang
card at ibigay ito sa mga CardView.

405
00:20:04,790 --> 00:20:09,190
At ito CardView sabi, kung ikaw
bigyan ako ng anumang flashcard object,

406
00:20:09,190 --> 00:20:11,920
Kukunin ko i-print ang tanong nito
at ang sagot nito, di ba?

407
00:20:11,920 --> 00:20:14,590
>> Kaya kung ano ang maaari kong gawin ay ako maaaring
ipadala ang code na ito, ang unang

408
00:20:14,590 --> 00:20:16,580
tulad ng 10 mga linya ng aking code, sa aking kaibigan.

409
00:20:16,580 --> 00:20:18,820
Siya ay maaaring i-embed ang mga ito sa
kanyang sariling application.

410
00:20:18,820 --> 00:20:27,200
At habang kaniyang ginawa ang parehong bagay,
tulad ng katumbas ito CardView card,

411
00:20:27,200 --> 00:20:30,580
habang kaniyang nilikha ang CardView
at ibinigay ang tamang impormasyon,

412
00:20:30,580 --> 00:20:31,987
siya ay maaaring i-render ang kanyang sariling card.

413
00:20:31,987 --> 00:20:34,320
At upang sa ganitong paraan, ito ay isang tunay na
cool na paraan para sa iyo na bumuo ng

414
00:20:34,320 --> 00:20:35,906
mga sangkap na ginagamit sa bawat isa, di ba?

415
00:20:35,906 --> 00:20:38,280
Ang card na ito, maaari ko bang i-publish
ito CardView sa internet,

416
00:20:38,280 --> 00:20:39,790
at ang mga tao ay maaaring gamitin ito.

417
00:20:39,790 --> 00:20:45,070
Kaya talaga, ito ay tulad ng isa sa mga
karaniwang mga function sa C library.

418
00:20:45,070 --> 00:20:47,280
>> Ito ay isang function na kung saan ang
ang isang tao ay may nakasulat na ito.

419
00:20:47,280 --> 00:20:48,419
Magbibigay sa iyo ng isang tiyak na input.

420
00:20:48,419 --> 00:20:49,710
Makikita ito gumawa ng isang tiyak na output.

421
00:20:49,710 --> 00:20:50,890
Hindi mo pag-aalaga kung paano ito gumagana sa loob.

422
00:20:50,890 --> 00:20:53,790
Hangga't ikaw ay bigyan ito sa kanan
input, ito ay gumawa ng tamang output.

423
00:20:53,790 --> 00:20:57,850
>> At ang isang bahagi ay maaaring maging
Akala ng parehong paraan.

424
00:20:57,850 --> 00:21:00,280
CardView Ito ay tulad ng
isang function library.

425
00:21:00,280 --> 00:21:03,400
Kung ikaw ay bigyan ito ng ilang mga card
bilang isang ari-arian, makikita ito

426
00:21:03,400 --> 00:21:05,095
i-print out ang mga nilalaman ng card na iyon.

427
00:21:05,095 --> 00:21:16,820
Tulad ng kung binago ko ang aking card sa
sa halip ay magiging tulad ng kung ano ang 5 plus 37,

428
00:21:16,820 --> 00:21:19,210
Ia-update ito nang naaayon.

429
00:21:19,210 --> 00:21:21,955
Kaya sa pamamagitan lamang ng pagbabago ng mga input,
ito ay makakakuha ng isang tiyak na output.

430
00:21:21,955 --> 00:21:24,830
Kaya maaari mong isipin ng mga bahagi ng halos
bilang mga function sa ganitong paraan, na kung saan

431
00:21:24,830 --> 00:21:25,920
maaari mong ilagay ang sama-sama.

432
00:21:25,920 --> 00:21:29,440
Makukuha mo ang input, tulad nito CardView
bilang ang input, makakakuha ka ng output.

433
00:21:29,440 --> 00:21:31,900
Sa kasong ito, output ay ang HTML.

434
00:21:31,900 --> 00:21:34,404
Gumawa unawa sa ngayon?

435
00:21:34,404 --> 00:21:36,890
Cool, kaya muli, ari-arian ay
kung paano mo maaaring ipasa ang impormasyon

436
00:21:36,890 --> 00:21:40,900
at sa labas ng mga bahagi.

437
00:21:40,900 --> 00:21:42,740
>> OK, ni gumawa ito upang ipaalam sa
bagay interactive.

438
00:21:42,740 --> 00:21:44,450
Sa ngayon ito ay uri ng panganganak.

439
00:21:44,450 --> 00:21:45,520
Ano ang [hindi marinig]?

440
00:21:45,520 --> 00:21:48,210
Maaari mong i-print ang ilang mga out,
ngunit na ang lahat ay maaaring gawin ito.

441
00:21:48,210 --> 00:21:51,550
>> Kaya sabihin bumalik sa
lumang tanong para lamang sa ngayon.

442
00:21:51,550 --> 00:21:54,405
OK, kaya ngayon ang mga sangkap
ay boring dahil ginagawa nila ang lahat,

443
00:21:54,405 --> 00:21:55,030
sila makakuha ng input.

444
00:21:55,030 --> 00:21:56,100
Sila ay gumawa ng output, di ba?

445
00:21:56,100 --> 00:21:57,049
Iyon uri ng panganganak.

446
00:21:57,049 --> 00:21:59,090
Gusto naming magkaroon ang aming mga
sangkap upang ma-magkaroon

447
00:21:59,090 --> 00:22:02,150
ang ilang mga uri ng mga panloob na estado,
tandaan na tulad ng isang bagay.

448
00:22:02,150 --> 00:22:05,320
>> Para sa isang flashcard, para sa
Halimbawa, kung anong uri ng estado

449
00:22:05,320 --> 00:22:07,550
baka gusto mong
tandaan para sa isang flashcard?

450
00:22:07,550 --> 00:22:09,740
Ano pansamantalang katayuan
baka gusto mong tandaan

451
00:22:09,740 --> 00:22:12,491
para sa isang flashcard sa isang flashcard app?

452
00:22:12,491 --> 00:22:13,990
Madla: Kung ito ay tinanggal Binaligtad?

453
00:22:13,990 --> 00:22:14,990
NEEL MEHTA: Oo, tama.

454
00:22:14,990 --> 00:22:17,665
Kaya baka gusto mong panatilihin ang
subaybayan ng mga mukha hanggang sa iyo o sa mga

455
00:22:17,665 --> 00:22:19,100
mukha down ka sa card.

456
00:22:19,100 --> 00:22:23,420
Sa Facebook, halimbawa, gusto mo
nais na tandaan na kung saan sa mga feed ng balita

457
00:22:23,420 --> 00:22:25,870
ikaw ay o nais sino ang profile
ang ginagawa mo ngayon.

458
00:22:25,870 --> 00:22:30,127
>> On Messenger, tulad ng kung ano ang text mo
type sa input box, i-right?

459
00:22:30,127 --> 00:22:31,710
Kung i-refresh mo ang pahina, ang layo na ito napupunta.

460
00:22:31,710 --> 00:22:32,793
Ngunit hindi mo talagang pakialam.

461
00:22:32,793 --> 00:22:33,770
Ito ay pansamantala lamang.

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

463
00:22:34,548 --> 00:22:36,152
>> Madla: [hindi marinig]

464
00:22:36,152 --> 00:22:38,360
NEEL MEHTA: Tulad ng isang flash
card, tulad ng maaari mo ang dapat makita

465
00:22:38,360 --> 00:22:40,290
ang tanong side o ang sagot side?

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

467
00:22:41,070 --> 00:22:43,270
>> NEEL MEHTA: Tulad ng isang
magkabilaan flashcard, di ba?

468
00:22:43,270 --> 00:22:46,370
Oo, kaya gusto mong
Mayroon ito ideya ng ngayon

469
00:22:46,370 --> 00:22:50,370
Mayroon akong mga katangian, na kung saan ay tulad ng input,
ngunit estado, na kung saan ay pansamantalang, uh,

470
00:22:50,370 --> 00:22:51,839
kung nasaan ka sa pahina, i-right?

471
00:22:51,839 --> 00:22:54,380
Muli, sinabi ko sa Facebook
Messenger, mayroon akong tulad ng kung saan ang tao

472
00:22:54,380 --> 00:22:56,550
tinitingnan mo Facebook
o kung sino ang profile, i-right?

473
00:22:56,550 --> 00:22:58,030
>> Ito ay pansamantala lamang.

474
00:22:58,030 --> 00:23:01,200
Ito ay mahalaga upang ipakita ang user
kung ano ang nangyayari, ngunit i-refresh ang pahina.

475
00:23:01,200 --> 00:23:02,250
Ito ay hindi talagang mahalaga.

476
00:23:02,250 --> 00:23:04,530
Kaya ito ay pansamantalang estado,
kaya namin ang lahat ng estado nito.

477
00:23:04,530 --> 00:23:06,250
>> Kaya, muli, may estado at props.

478
00:23:06,250 --> 00:23:09,084
Props ay ibinigay input
mula sa iyong mga pinagmulan ng data.

479
00:23:09,084 --> 00:23:10,250
Estado ay katulad lamang ng mga default.

480
00:23:10,250 --> 00:23:13,700
Ito ay tulad ng mga bagay-bagay na
gumagawa ng mga bagay na interactive.

481
00:23:13,700 --> 00:23:17,720
>> Kaya sa aming CardView-- magkaroon ng ipaalam
aming CardView-- kaya ito ay nice.

482
00:23:17,720 --> 00:23:21,420
Ano kami ay pagpunta sa gawin dito, kami ay pagpunta
upang hawakan CardView at tanging CardView.

483
00:23:21,420 --> 00:23:25,105
At kaya na nakuha na ito, ang mga ito sa aking mga kaibigan
hindi mapansin ang anumang pagkakaiba.

484
00:23:25,105 --> 00:23:27,230
Sila ay hindi na kailangang baguhin
anuman sa kanilang sariling mga code,

485
00:23:27,230 --> 00:23:29,410
ngunit gusto nilang makita ang kanilang
CardView Kaka souped up.

486
00:23:29,410 --> 00:23:31,270
Iyan ay isang magandang bahagi tungkol sa mga bahagi.

487
00:23:31,270 --> 00:23:35,290
>> OK, para sa ating CardView, sabihin subukan at
subaybayan kung na phase up namin

488
00:23:35,290 --> 00:23:36,560
o mukha pababa.

489
00:23:36,560 --> 00:23:40,480
Sa Gumanti ginagawa namin ito sa pamamagitan ng unang
na tumutukoy sa unang estado.

490
00:23:40,480 --> 00:23:42,070
Saan magsisimula ang card?

491
00:23:42,070 --> 00:23:48,480
>> Kaya maging isang function na tinatawag getInitialState
gumana, at bumalik kami ng isang bagay.

492
00:23:48,480 --> 00:23:53,310
Object na ito ay naglalaman ng ilang mga estado, at
isang estado ay lamang ng isang pares ng key-value.

493
00:23:53,310 --> 00:23:56,950
Tulad ng sa magturo, mayroon kang isang susi at isang
halaga, mayroon kang tulad ng pangalan ay isang string.

494
00:23:56,950 --> 00:24:01,410
>> Sa kasong ito, sabihin natin na front ay totoo.

495
00:24:01,410 --> 00:24:03,760
Ito ay nagsasabi na kami ay may isang estado.

496
00:24:03,760 --> 00:24:06,570
Isang bahagi ng estado
ay isang katangian na tinatawag na front.

497
00:24:06,570 --> 00:24:09,649
[Hindi marinig], kaya sa pamamagitan ng default,
Ikinalulungkot namin sa harap ng card,

498
00:24:09,649 --> 00:24:11,440
at maaari naming baguhin ito
bilang i-flip namin ang card.

499
00:24:11,440 --> 00:24:13,380
Magkaroon ng kahulugan?

500
00:24:13,380 --> 00:24:18,190
>> OK, kaya sa render, sa ngayon, hindi namin
Ipinapakita ang mga tanong at mga sagot.

501
00:24:18,190 --> 00:24:20,860
Ngayon kung ano ang dapat naming gawin
ay ipakita ang tanong

502
00:24:20,860 --> 00:24:24,370
kung kami sa harap ng card kaya
ang sagot ay para sa likod ng card.

503
00:24:24,370 --> 00:24:26,850
Iyon ang dahilan kung bakit mo ang lahat ng gumawa
ang card interactive.

504
00:24:26,850 --> 00:24:28,100
Kaya sabihin subukan at upang ito dito.

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

506
00:24:31,600 --> 00:24:33,620
Well, unang gumawa ng isang variable.

507
00:24:33,620 --> 00:24:37,790
Maaari naming hilingin sa ngayon this.state.front.

508
00:24:37,790 --> 00:24:42,010
Ma-access ang naming estado ang parehong namin
access props, para this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Kung hindi namin harap, at pagkatapos ng text
ay this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Kung hindi namin sa harap ng
card, kami ay pagpunta sa subukan at grab

512
00:24:51,360 --> 00:24:52,485
ang tanong mula sa card.

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

514
00:24:54,782 --> 00:24:57,240
Kung hindi, kung hindi namin sa likod
ng card, kung ano ang gagawin namin?

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

516
00:25:01,830 --> 00:25:02,750
>> Madla: ang sagot?

517
00:25:02,750 --> 00:25:05,041
>> NEEL MEHTA: Oo, kaya text
katumbas this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Ngunit kung napansin mo, kami ay gumagamit ng
estado upang gumawa ng desisyon

520
00:25:10,930 --> 00:25:14,420
dahil ngayon ang component
ang magiging hitsura ng iba't ibang

521
00:25:14,420 --> 00:25:16,710
batay off kung paano ang mga nakikipag-ugnayan sa mga ito.

522
00:25:16,710 --> 00:25:20,355
Kaya sa halip ng pag-print out ito,
Makikita lamang i-print namin ang mga text.

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

524
00:25:25,270 --> 00:25:28,650
Cool, kaya ngayon, tulad ng nakikita mo,
makita lang namin ang tanong ng.

525
00:25:28,650 --> 00:25:37,720
At kung babaguhin ko ang estado dito mano-mano
sa harap ay false makuha namin 42 back.

526
00:25:37,720 --> 00:25:39,720
>> Kaya, muli, ang bahagi na ito
ay may sarili nitong estado.

527
00:25:39,720 --> 00:25:43,440
Tulad ng isang pindutan nakakaalam kung
ito ay pinindot o hindi,

528
00:25:43,440 --> 00:25:46,080
alam ang bagay na ito kung ano ang sa
sa harap o sa likod.

529
00:25:46,080 --> 00:25:48,320
Sa pamamagitan ng default, ito ay sa harap.

530
00:25:48,320 --> 00:25:50,840
At pagkatapos ay kung ito ay sa harap,
Kukunin namin i-print out ang tanong.

531
00:25:50,840 --> 00:25:53,106
Kung ito ay sa likod, bibigyan namin ng
i-print out ang sagot.

532
00:25:53,106 --> 00:25:54,980
Kaya, muli, ang mga impormasyon
ibinigay ay pareho.

533
00:25:54,980 --> 00:25:59,090
Mukhang lamang nito ang iba't ibang
batay sa kung paano mo programa ito.

534
00:25:59,090 --> 00:26:02,670
Kaya, halimbawa, Facebook Messenger,
kahit na kung ikaw ay makakuha ng parehong pinagmulan ng data,

535
00:26:02,670 --> 00:26:05,170
maaaring ito naiiba ang itsura
dahil ang estado ay naiiba.

536
00:26:05,170 --> 00:26:08,421
Ikaw ay naghahanap sa isang
mensahe ng iba't ibang tao.

537
00:26:08,421 --> 00:26:10,930
>> OK, kaya ito ay ang lahat ng mabuti at
mabuti, ngunit ngayon kung ano ang tunay na

538
00:26:10,930 --> 00:26:15,940
gawin tayong magagawang baguhin, kung
aming card ay harap o likod.

539
00:26:15,940 --> 00:26:19,010
Maaari naming gawin ito sa pamamagitan ng pagdaragdag ng isang flip
button, ang isang pindutan upang ang card na

540
00:26:19,010 --> 00:26:22,950
ay i-flip ang mga card na ito ay [hindi marinig].

541
00:26:22,950 --> 00:26:31,770
Kaya sabihin magdagdag ng isang pindutan dito, ito
button, at ang pindutan na ito ay sinasabi ng flip.

542
00:26:31,770 --> 00:26:35,650
>> At kaya sa ngayon, ito
ay hindi dapat gawin.

543
00:26:35,650 --> 00:26:37,075
Ito lamang ang hitsura nice.

544
00:26:37,075 --> 00:26:43,650
Ano ang maaari naming gawin ay maaari naming idagdag ang isang pag-click
handler, onClick katumbas this.flip,

545
00:26:43,650 --> 00:26:44,820
at kami ay tukuyin flip mamaya.

546
00:26:44,820 --> 00:26:47,120
Pero talaga, onClick
ay isang function na

547
00:26:47,120 --> 00:26:48,675
makakakuha ng tinatawag na kapag nag-click ang mga ito.

548
00:26:48,675 --> 00:26:52,330
>> Kaya ang button ay alam
kapag ito ay na-click.

549
00:26:52,330 --> 00:26:54,750
Napunta ito ay nai-click,
ito ay i-flip ang card.

550
00:26:54,750 --> 00:26:58,382
Ito ay uri ng tulad ng iyong
pizza delivery guy.

551
00:26:58,382 --> 00:27:01,590
Ikaw ay tulad ng, ang lahat ng mga karapatan, sa tuwing ang isang tao
tawag sa akin, kukunin ko na maghatid ng pizza, di ba?

552
00:27:01,590 --> 00:27:03,420
>> Irehistro ka tagapakinig na ito.

553
00:27:03,420 --> 00:27:04,530
Makinig ka para sa isang kaganapan.

554
00:27:04,530 --> 00:27:07,657
Ikaw makakuha ng tinatawag na, at kapag ang
kaganapan ang mangyayari, gawin mo ng isang bagay.

555
00:27:07,657 --> 00:27:08,240
Makakakuha ka ng pizza.

556
00:27:08,240 --> 00:27:11,480
Sa kasong ito, kapag ikaw ay
nag-click, i-flip ang card.

557
00:27:11,480 --> 00:27:14,560
>> At kaya kailangan namin upang tukuyin ang isang
function na ay i-flip ang card,

558
00:27:14,560 --> 00:27:17,930
kaya makikita namin magsulat na karapatan
dito, i-flip function.

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

560
00:27:20,850 --> 00:27:23,680
At kaya kung ano ang tingin mo flip ay gawin?

561
00:27:23,680 --> 00:27:27,180
Muli ito ay makakakuha ng tinatawag na kapag
namin i-click ang pindutan ng flip.

562
00:27:27,180 --> 00:27:29,406
Ano ang dapat gawin ang function flip?

563
00:27:29,406 --> 00:27:34,136
>> Madla: Baguhin this.state.front
mula sa tunay na hindi totoo, hindi totoo sa totoo.

564
00:27:34,136 --> 00:27:38,420
>> NEEL MEHTA: Yep, para gumawa ng kahit anong
this.front is-- harap estado ay.

565
00:27:38,420 --> 00:27:40,930
Dumaan sa harap ng estado, kung
ito ay totoo, gawin itong totoo.

566
00:27:40,930 --> 00:27:42,530
Kung ito ay hindi totoo, ito totoo, di ba?

567
00:27:42,530 --> 00:27:45,330
Kaya sabihin subukan iyon.

568
00:27:45,330 --> 00:27:48,240
>> Hindi mo maaaring baguhin ang estado
lamang sa pamamagitan ng paggawa this.state.

569
00:27:48,240 --> 00:27:50,380
Hindi mo maaaring gawin ito.

570
00:27:50,380 --> 00:27:52,030
Hindi mo maaaring gawin na.

571
00:27:52,030 --> 00:27:55,810
Kailangan mong gamitin ang isang function
tinatawag this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Kaya maaari mong sabihin this.setState front
colon na ito kung saan, muli, ang exclamation

573
00:28:03,230 --> 00:28:04,330
point ay nangangahulugan na ang kabaligtaran.

574
00:28:04,330 --> 00:28:07,420
Hulaan ko kung ito. state.front
ay totoo, ito ay maging totoo.

575
00:28:07,420 --> 00:28:09,170
Kaya makikita namin-set ang estado
mula sa tunay na false.

576
00:28:09,170 --> 00:28:11,430
Kung ito ay hindi totoo, bibigyan namin ng
itakda ito false sa totoo.

577
00:28:11,430 --> 00:28:17,210
>> Paunawa lamang na itinakda namin at makakuha ng bahagyang
sa ibang paraan, at sa gayon ay subukan ito ipaalam.

578
00:28:17,210 --> 00:28:18,675
Bada bing, tingnan ang mga ito.

579
00:28:18,675 --> 00:28:21,810
Ang pindutan ng flip ay ngayon
lumipat ang harap sa likod ng estado.

580
00:28:21,810 --> 00:28:24,990
>> At kaya narito ang kung saan nakikita mo ang isang
maliit na piraso ng ang magic ng Reaksyon.

581
00:28:24,990 --> 00:28:28,420
Tulad ng hindi namin ito sinabi sa mga ito upang muling i-render.

582
00:28:28,420 --> 00:28:30,910
Kami ay hindi kailanman sinabi ito redraw kahit ano.

583
00:28:30,910 --> 00:28:32,630
Kung ikaw ay gumagawa ito
walang Reaksyon, gusto mo

584
00:28:32,630 --> 00:28:34,588
may to-- gusto kapag ang
button flip ay na-click,

585
00:28:34,588 --> 00:28:37,290
gusto mo na kailangang sabihin mo ito sa
manu-manong muling-render, di ba?

586
00:28:37,290 --> 00:28:43,050
>> Reaksyon ay talagang cool sa na kung ikaw
bigyan ito ng isang tiyak na kalagayan at mga katangian,

587
00:28:43,050 --> 00:28:45,760
ito ay palaging i-render
ang eksaktong parehong bagay.

588
00:28:45,760 --> 00:28:48,690
At kaya kapag namin kailanman babaguhin namin
ang estado at ang mga ari-arian,

589
00:28:48,690 --> 00:28:50,819
gumanti lang muling nagpapagana ng buong bagay.

590
00:28:50,819 --> 00:28:52,860
Ito alam na mayroong isang
isa-sa-isang sulat

591
00:28:52,860 --> 00:28:57,270
sa pagitan ng estado at mga parameter at HTML.

592
00:28:57,270 --> 00:29:00,110
Kaya kapag alinman sa mga
mga pagbabago sa pamamagitan ng sa pamamagitan ng isang hanay ng estado,

593
00:29:00,110 --> 00:29:03,750
ito ay baguhin kung paano ang
pay ay muling nai-render.

594
00:29:03,750 --> 00:29:06,650
At kaya talaga Gumanti ay tulad ng
naghihintay para sa iyo upang baguhin.

595
00:29:06,650 --> 00:29:09,870
>> Tuwing ito ang mga pagbabago ng isang bagay,
makikita ito muling i-render ang buong pahina.

596
00:29:09,870 --> 00:29:12,480
At kung ito tunog walang kakayahan,
ito ay dahil ito ay magiging,

597
00:29:12,480 --> 00:29:15,050
ngunit gumanti ay gumagamit ng isang bagay
tinatawag na isang Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
Sa halip ng pagguhit ng mga pahina nang direkta, ito
mapigil ang mga virtual puno HTML sa memorya.

599
00:29:19,950 --> 00:29:23,620
>> Alam mo, HTML ay tulad ng isang puno,
tulad ng isang hierarchical istraktura ng data.

600
00:29:23,620 --> 00:29:28,990
Ito ay para mapigil ang isang pekeng puno sa memory,
at kahit kailan i-update mo ang pahina,

601
00:29:28,990 --> 00:29:31,940
makikita ito gumuhit ng isa pang pekeng
tree, at makikita ito makalkula

602
00:29:31,940 --> 00:29:35,120
kung ano ang baguhin ang mga pangangailangan upang gawin ang mga
page upang gawin ang dalawang puno pantay.

603
00:29:35,120 --> 00:29:38,540
Kaya talaga, ito halos
re-render ng isang pulutong.

604
00:29:38,540 --> 00:29:41,540
At pagkatapos ay ito lamang ang gusto ang mga pagbabago sa
pahina sa maliit na mga pag-aayos kung kinakailangan,

605
00:29:41,540 --> 00:29:44,240
kaya ito ay tunay, tunay, tunay na mahusay.

606
00:29:44,240 --> 00:29:46,970
>> Kaya talaga Gumanti habilin
kapag binago mo ang isang bagay,

607
00:29:46,970 --> 00:29:49,010
makikita ito muling i-render ang pahina virtually.

608
00:29:49,010 --> 00:29:52,830
Makikita ito ng malaman kung ano ang kailangan kong
baguhin upang gawin ang mga tunay na pahina sumalamin

609
00:29:52,830 --> 00:29:55,602
ang virtual page, at makikita ito gawin iyon.

610
00:29:55,602 --> 00:29:56,560
Iyan ang virtual DOM.

611
00:29:56,560 --> 00:29:59,350
Ito ay isa sa mga pinakamalaking
mga tampok ng Reaksyon.

612
00:29:59,350 --> 00:30:00,880
>> Ba na magkaroon ng kahulugan?

613
00:30:00,880 --> 00:30:01,540
May tanong?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Madla: Paano gumagana
ihambing pa rin sa MVC

617
00:30:08,969 --> 00:30:10,760
na usapan natin ang tungkol sa
bago tulad ng mga mapagkukunan.

618
00:30:10,760 --> 00:30:13,527
>> NEEL MEHTA: Oo, ang tanong
ay kung paano ito ihambing sa MVC?

619
00:30:13,527 --> 00:30:14,610
Nagtanong ka tungkol sa mga mapagkukunan.

620
00:30:14,610 --> 00:30:16,445
Well, makipag-usap tungkol sa kung paano ito function ipaalam.

621
00:30:16,445 --> 00:30:18,190
>> Sa MVC, gusto mong i-update ang mga modelo.

622
00:30:18,190 --> 00:30:20,560
Sa kasong ito gusto naming magkaroon ng isang modelo ng card.

623
00:30:20,560 --> 00:30:24,540
Ang view ay magkakaroon ng
button flip, at ang control

624
00:30:24,540 --> 00:30:26,310
ay magkakaroon ng flip function.

625
00:30:26,310 --> 00:30:28,450
Kaya tingnan ang mga nais sabihin ang
controller upang i-flip flip.

626
00:30:28,450 --> 00:30:30,370
Flip nais sabihin ang
model na baguhin, di ba?

627
00:30:30,370 --> 00:30:33,915
>> At kaya kapag gumawa ka ng isang MVC, ikaw
makinig para sa mga modelo sa pagbabago,

628
00:30:33,915 --> 00:30:37,150
at muling i-render mo ang view nang naaayon.

629
00:30:37,150 --> 00:30:39,210
O ikaw na lang gusto
may controller.

630
00:30:39,210 --> 00:30:42,418
Maghintay para sa mga modelo na baguhin, at pagkatapos ay
pumili at piliin ang isang bahagi ng tulad ng isang bagay

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

632
00:30:44,032 --> 00:30:45,740
Narito kami ay may isang bagay,
ngunit sa isang malaking app,

633
00:30:45,740 --> 00:30:48,510
ikaw ay may gusto matandaan kung ano
ang pagbabago sa bawat isang lugar,

634
00:30:48,510 --> 00:30:50,290
kaya ito ay isang maliit na nakakainis.

635
00:30:50,290 --> 00:30:53,670
At kaya Gumanti ay nice
dahil ito ay isang Shadow DOM.

636
00:30:53,670 --> 00:30:56,040
Maaari itong bayaran sa makatarungan
isulat na muli ang buong bagay.

637
00:30:56,040 --> 00:30:58,680
Hindi mo na kailangang i-pili
tulad ng hulaan kung ano ang i-update.

638
00:30:58,680 --> 00:31:02,186
>> Sa Facebook kung gusto mo
makakuha ng isang bagong mensahe, sa MVC,

639
00:31:02,186 --> 00:31:04,060
gusto mo na kailangang tandaan,
OK, baguhin ang mga bagay-bagay

640
00:31:04,060 --> 00:31:06,260
sa tuktok ng
pahina, ang icon ng mensahe.

641
00:31:06,260 --> 00:31:08,290
Pop Din ng isang bagong window sa ibaba.

642
00:31:08,290 --> 00:31:10,070
Ring gumawa ng bagong bagay sa na window.

643
00:31:10,070 --> 00:31:11,060
Gayundin-play ng tunog.

644
00:31:11,060 --> 00:31:13,150
>> Iyan ay isang pulutong ng mga bagay-bagay
pagpunta sa labas at sa parehong oras.

645
00:31:13,150 --> 00:31:15,320
At kaya kung hindi mo gusto
magkaroon ng isang Shadow DOM, gusto mo

646
00:31:15,320 --> 00:31:18,740
may gawin na mano-mano dahil
hindi ka maaaring makakuha ng alisan ng mga buong pahina.

647
00:31:18,740 --> 00:31:21,430
Hindi mo kayang, kaya wala kayong
upang baguhin ang bawat bagay nang mano-mano,

648
00:31:21,430 --> 00:31:23,990
na kung saan ay talagang nakakainis sa MVC.

649
00:31:23,990 --> 00:31:27,640
>> Kaya upang maging
mapag-impok, sila pili

650
00:31:27,640 --> 00:31:30,750
i-update ang mga pahina, na kung saan ay
mahusay, ngunit din nakakainis.

651
00:31:30,750 --> 00:31:34,002
Sa Gumanti, dahil sa Shadow
Dom, makakakuha ka ng parehong mga bagay-bagay para sa libreng.

652
00:31:34,002 --> 00:31:35,710
Ito ay mahusay dahil
ng Shadow DOM.

653
00:31:35,710 --> 00:31:37,210
Bottleneck ay ina-update ang mga pahina.

654
00:31:37,210 --> 00:31:40,292
Hindi ito ginagawa ng puno manipulasyon.

655
00:31:40,292 --> 00:31:41,250
Makukuha mo ang mga kahusayan.

656
00:31:41,250 --> 00:31:45,420
Mo ring makuha ang kadalian ng paggamit dahil
kung muling isulat mo lamang ang buong pahina,

657
00:31:45,420 --> 00:31:48,970
ngunit alam mo lang, ang lahat ng karapatan, ang mga bagay-bagay
ay magiging isang lugar sa pahina.

658
00:31:48,970 --> 00:31:51,180
Ito ay maaaring maging sa isang iba't ibang mga lugar, ngunit
ito ay pagpunta sa maging sa pahina, i-right?

659
00:31:51,180 --> 00:31:52,860
Kaya mo lamang muling-render
ang buong bagay na halos,

660
00:31:52,860 --> 00:31:55,540
at maaari kang gumawa ng isang pares
mga pagbabago sa pahina ng kanyang sarili.

661
00:31:55,540 --> 00:31:57,850
>> So, muli, sa MVC mo
ay kailangang piliin ang

662
00:31:57,850 --> 00:32:01,840
pagitan ng kadalian ng paggamit at kahusayan,
at Gumanti, makakakuha ka ng parehong.

663
00:32:01,840 --> 00:32:04,020
Kaya ito ay mas mahusay.

664
00:32:04,020 --> 00:32:05,220
Magkaroon ng kahulugan?

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

666
00:32:06,676 --> 00:32:12,080
>> OK, ang makita ni makipag-usap ipaalam kaya hayaan
nang kaunti tungkol sa 4 na hakbang,

667
00:32:12,080 --> 00:32:14,740
kung paano namin maaaring i-embed na mga sangkap.

668
00:32:14,740 --> 00:32:16,260
Kaya kami ay may ito sa ngayon.

669
00:32:16,260 --> 00:32:19,420
Mayroon kaming aming cool na maliit na button.

670
00:32:19,420 --> 00:32:23,157
Maaari naming i-flip ito sa likod at
balik, at na ang lahat ng ginagawa nito.

671
00:32:23,157 --> 00:32:24,990
Ipagpalagay natin na nais nating
magkaroon ng isa pang component.

672
00:32:24,990 --> 00:32:28,730
Ipagpalagay natin na ang ating flashcard app dapat
naglalaman ng isang listahan ng lahat ng mga baraha

673
00:32:28,730 --> 00:32:31,520
na mayroon ka, sa gayon ay nangangahulugan namin
Dapat magkaroon ng isa pang component.

674
00:32:31,520 --> 00:32:32,970
Well, tumawag siguro ito ng isang view ng listahan.

675
00:32:32,970 --> 00:32:36,200
Gumawa ng isang view ng listahan Hayaan na
coexists sa CardView,

676
00:32:36,200 --> 00:32:39,680
at sa pagtingin na ito at CardView listahan
ay gusto magtulungan.

677
00:32:39,680 --> 00:32:43,190
At maaari mong pagsamahin ang mga ito
upang gumawa ng aming app para sa iyo.

678
00:32:43,190 --> 00:32:45,160
>> Kaya una, ni gumawa ng isang ipaalam
ilang karagdagang card sa kanan.

679
00:32:45,160 --> 00:32:46,370
Hayaan sabihin, kung anong mga cards?

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

681
00:32:49,619 --> 00:32:51,910
At kaya lang hindi ko na kailangang
magbutas sa iyo ng pag-type ito sa,

682
00:32:51,910 --> 00:32:53,410
Lamang ako ng pagpunta sa kopyahin ito mula dito.

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

684
00:33:01,664 --> 00:33:03,580
At kaya ako pagpunta sa hindi
bigyan ito ng isa lamang card.

685
00:33:03,580 --> 00:33:06,910
Pupunta ako upang bigyan ito ng isang hanay ng mga baraha.

686
00:33:06,910 --> 00:33:10,240
Kaya una ang apps
pagpunta sa break para sa ngayon.

687
00:33:10,240 --> 00:33:14,717
Lahat ng karapatan, kaya kami ay pagpunta sa gumawa
ito maaaring hawakan ng maramihang cards.

688
00:33:14,717 --> 00:33:17,800
Kaya una, kami ay pagpunta upang bigyan ito, hindi
lamang ng isang card ngunit isang hanay ng mga baraha,

689
00:33:17,800 --> 00:33:18,700
tulad ng isang listahan ng mga baraha.

690
00:33:18,700 --> 00:33:20,980
At sa kasong ito, kami ay may tatlo sa kanila.

691
00:33:20,980 --> 00:33:27,280
>> Lahat ng karapatan, kaya kaya app ay
pagpunta upang makakuha ng isang listahan ng baraha,

692
00:33:27,280 --> 00:33:29,870
at ito ay pagpunta upang magpasya kung aling
ang isa ay upang ipakita sa mga CardView.

693
00:33:29,870 --> 00:33:33,740
Ang CardView maaari lamang
render isa card, ngunit ang app

694
00:33:33,740 --> 00:33:37,610
makakakuha ng isang listahan ng lahat ng mga baraha, di ba?

695
00:33:37,610 --> 00:33:40,820
>> Kaya kapag figure out ka sa isa
card na ibibigay sa CardView,

696
00:33:40,820 --> 00:33:44,660
paano hulaan mo maaaring magawa
upang gumawa ng desisyon tungkol sa kung aling card

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

698
00:33:47,064 --> 00:33:49,980
Upang bigyan ka ng isang pahiwatig, ito ay pansamantalang
Ikaw ay tumitingin sa isang tiyak na card.

699
00:33:49,980 --> 00:33:53,260
Kung i-refresh mo ang pahina, makikita mo
pumunta lamang pabalik sa unang card.

700
00:33:53,260 --> 00:33:55,464
Iyon ay OK dahil sa ito ay pansamantalang.

701
00:33:55,464 --> 00:33:56,630
Ano ang pamamaraan na maaari naming gamitin?

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

703
00:34:02,534 --> 00:34:08,760
>> Madla: Maaari kang gumawa ng isang variable
kaya tulad ng nagkaroon ka ng harap.

704
00:34:08,760 --> 00:34:11,989
Totoo ba ito, maaari mong
Mayroon katumbas kasalukuyang card 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL MEHTA: Oo, kaya kami ay
nais na magkaroon ng estado, tama?

706
00:34:14,150 --> 00:34:16,080
Gusto mong gamitin ang estado sa
component upang malaman kung

707
00:34:16,080 --> 00:34:17,288
na card ang gusto namin upang makakuha ng.

708
00:34:17,288 --> 00:34:19,290
Tulad ng kami ay may isang listahan ng mga
lahat ng mga card, bibigyan namin ng

709
00:34:19,290 --> 00:34:21,630
gamitin ang estado upang malaman kung
isa sa mga unang card,

710
00:34:21,630 --> 00:34:23,710
pangalawang card, third card, at iba pa.

711
00:34:23,710 --> 00:34:28,760
>> Kaya ang isang app sa gayon ang isang app ay makakakuha ng isang
may getInitialState function,

712
00:34:28,760 --> 00:34:35,020
getInitialState return function.

713
00:34:35,020 --> 00:34:39,929
At kami lang sabihin activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Kaya ngayon ang aming mga app na ito ay may sariling estado.

715
00:34:42,889 --> 00:34:47,179
>> At kaya ngayon sa render, upang malaman kung
isang card, sabihin pumunta lamang ni sa array

716
00:34:47,179 --> 00:34:49,969
at grab ang mga bagay sa index iyon.

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

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

719
00:34:56,469 --> 00:35:00,162
Kaya bilang makikita mo dito, ang mga props at
ang estado ay aktwal na gumana nang magkasama.

720
00:35:00,162 --> 00:35:08,990
Kaya ngayon na mayroon kami sa aming activeCard,
kami ay tumawag ito activeCard,

721
00:35:08,990 --> 00:35:10,470
at sabihin makita kung ito ay gumagana.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, na noon ay isang error text.

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, kaya ngayon kami ay bumalik
na kung saan kami ay bago, di ba?

729
00:35:54,840 --> 00:35:57,100
Parehong lumang program maliban
ngayon maaari naming suporta

730
00:35:57,100 --> 00:35:59,390
isang listahan ng mga baraha, hindi lamang isa card.

731
00:35:59,390 --> 00:36:04,130
At ngayon, muli, kung babaguhin namin ang
activeIndex, maaari naming pumunta mula sa 0 hanggang 1,

732
00:36:04,130 --> 00:36:07,330
at ngayon na second card,
at pagkatapos ay nagpunta kami sa 0.

733
00:36:07,330 --> 00:36:10,390
Kaya narito ang isang bagong
souped-up na bersyon ng aming.

734
00:36:10,390 --> 00:36:16,000
>> OK, sabihin magkaroon ng isang view ng listahan kaya ngayon hayaan na
ay nagpapakita ng lahat ng mga card sa iyong programa,

735
00:36:16,000 --> 00:36:19,980
kaya kami ay gumawa ng isang bagong
tinatawag na component ListView.

736
00:36:19,980 --> 00:36:22,155
Hayaan ListView katumbas react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Kaya gusto namin na mag-render ng isang unordered
ilista sa isang item sa listahan para sa bawat card.

739
00:36:38,800 --> 00:36:41,490
At kaya kami ay may isang bungkos ng mga baraha.

740
00:36:41,490 --> 00:36:44,990
Gusto naming ng isang item na listahan
para sa bawat card, i-right?

741
00:36:44,990 --> 00:36:47,490
Maaari naming gawin para sa isang loop o
isang bagay upang gumawa ng isang bagong listahan ng item.

742
00:36:47,490 --> 00:36:50,522
Ngunit ang paraan na gagawin mo ito sa
Reaksyon, gumamit ng isang bagay na tinatawag na mapa.

743
00:36:50,522 --> 00:36:57,150
Mapa ay isang kasangkapan o ng isang function na gamitin mo
na para sa bawat item, ay tumatakbo ang ilang mga function,

744
00:36:57,150 --> 00:36:59,510
tumatagal ng return halaga, at
Binibigyan ka na bumalik.

745
00:36:59,510 --> 00:37:06,310
>> Kaya bilang isang halimbawa, kami ay may mga array
1, 2, 3.map function-- at ito

746
00:37:06,310 --> 00:37:12,120
ay takigrapya para sa isang
function-- x arrow x beses x.

747
00:37:12,120 --> 00:37:16,110
Ito sabi, para sa bawat number
sa 1, 2, 3, dalhin ito.

748
00:37:16,110 --> 00:37:17,800
Square ang mga ito, at bigyan ito pabalik.

749
00:37:17,800 --> 00:37:22,090
Kaya kung ano ang tingin mo sa 1,
2, 3.map x papunta sa beses x

750
00:37:22,090 --> 00:37:25,480
x likod ay nagbibigay sa iyo na ibinigay
na ang function na ito ay

751
00:37:25,480 --> 00:37:27,680
tumakbo sa bawat elemento ng array na.

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

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

754
00:37:32,190 --> 00:37:35,709
>> NEEL MEHTA: Oo, 1, 4, 9
dahil gawin mo 1 beses 1.

755
00:37:35,709 --> 00:37:36,500
Iyon ay nagbibigay sa iyo ng isa.

756
00:37:36,500 --> 00:37:37,690
Iyan ang unang elemento.

757
00:37:37,690 --> 00:37:38,530
>> 2 beses 2 ay 4.

758
00:37:38,530 --> 00:37:39,570
Iyan ay isang pangalawang elemento.

759
00:37:39,570 --> 00:37:40,310
3 beses 3 ay 9.

760
00:37:40,310 --> 00:37:41,540
Iyan ay isang ikatlong sangkap.

761
00:37:41,540 --> 00:37:42,640
Magkaroon ng kahulugan?

762
00:37:42,640 --> 00:37:45,015
Kaya mapa ay may isang pamamaraan mo
gamitin sa functional programmers,

763
00:37:45,015 --> 00:37:48,090
ang bagong estilo ng
programming upang gawin ang isang bagay

764
00:37:48,090 --> 00:37:50,500
sa bawat elemento sa iyong listahan.

765
00:37:50,500 --> 00:37:51,970
At kaya ito tunog pamilyar.

766
00:37:51,970 --> 00:37:53,370
Kami ay may isang listahan ng mga baraha.

767
00:37:53,370 --> 00:37:56,860
Gusto naming upang makakuha ng isang item sa listahan para sa bawat
isa, kaya kami na lang gamitin mapa dito.

768
00:37:56,860 --> 00:38:00,250
Susubukan naming sabihin, hayaan list equals
this.props, cards, mapa.

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

770
00:38:10,580 --> 00:38:15,070
>> At kaya bibigyan ng isang card, hindi namin
pagpunta sa bumuo ng isang item sa listahan

771
00:38:15,070 --> 00:38:17,580
may mga nilalaman side na card ng mga ito.

772
00:38:17,580 --> 00:38:20,660
Sabihin lang nais naming bigyan out
tanong ang card upang card.question.

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

774
00:38:24,990 --> 00:38:30,649
Kaya ang listahan na ito ay naglalaman ng isang
array ng List Items li o

775
00:38:30,649 --> 00:38:32,440
kung saan mayroong isang listahan
item para sa bawat card,

776
00:38:32,440 --> 00:38:35,150
at na naglalaman ng mga katanungan cards.

777
00:38:35,150 --> 00:38:37,640
Magkaroon ng kahulugan?

778
00:38:37,640 --> 00:38:39,450
>> Cool, kaya ngayon sabihin
talagang i-print out na.

779
00:38:39,450 --> 00:38:46,521
Kaya babalik kami ng isang ul.

780
00:38:46,521 --> 00:38:49,020
Inside na unordered listahan,
Makikita lamang stick namin ang buong listahan

781
00:38:49,020 --> 00:38:49,890
na ibinigay sa amin.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Lahat ng karapatan, kaya ngayon ito
view ng listahan gumagana hanapin lamang.

785
00:38:56,060 --> 00:38:59,842
Ang anumang mga katanungan tungkol sa mga view ng listahan?

786
00:38:59,842 --> 00:39:01,270
Mayroon kang isang bungkos ng mga baraha.

787
00:39:01,270 --> 00:39:02,800
Kikita ka ng isang item sa listahan para sa bawat card.

788
00:39:02,800 --> 00:39:05,466
At ilagay ang mga ito sa loob ng isang unordered
listahan, at magbibigay sa iyo ng mga ito pabalik.

789
00:39:05,466 --> 00:39:09,410
Kaya ng kumilos upang i-embed naming ipaalam sa ngayon
ito sa loob ng aming mga app,

790
00:39:09,410 --> 00:39:14,310
upang maaari naming gawin ito, view ng listahan.

791
00:39:14,310 --> 00:39:17,070
Ano argument na kami ay pumasa sa list view?

792
00:39:17,070 --> 00:39:18,320
Ano properties bigyan namin ito?

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

794
00:39:25,111 --> 00:39:26,860
Tandaan, kung ikaw ay bigyan
ito ng grupo ng mga baraha,

795
00:39:26,860 --> 00:39:29,590
ito ay gumawa ng sa listahan
tingnan para sa mga cards.

796
00:39:29,590 --> 00:39:32,267
Kaya kung ano ang gusto namin ipasa
dito bilang ang argument?

797
00:39:32,267 --> 00:39:33,350
Madla: Ang isang listahan ng mga baraha?

798
00:39:33,350 --> 00:39:37,130
NEEL MEHTA: Oo, kaya cards
katumbas this.props.cards, di ba?

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

800
00:39:39,850 --> 00:39:44,370
At kaya lamang ang problema
ay na maaari ka lamang

801
00:39:44,370 --> 00:39:48,600
naka-isa top level na sangkap sa render,
kaya nakuha mo na ibalot ito sa isang div.

802
00:39:48,600 --> 00:39:49,100
Ito ay kakaiba.

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

804
00:39:56,190 --> 00:39:57,530
Kaya sabihin makita kung na.

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

806
00:40:09,790 --> 00:40:10,560
Na trabaho?

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

808
00:40:29,774 --> 00:40:31,030
>> Oo, mayroong kang pumunta.

809
00:40:31,030 --> 00:40:33,700
Kaya ngayon kami ay may isang listahan
ng mga baraha sa ibaba,

810
00:40:33,700 --> 00:40:36,180
at pagkatapos na namin ang aming
CardView mismo sa itaas,

811
00:40:36,180 --> 00:40:40,486
at na-flip sa pagitan
ang dalawang panig ng card.

812
00:40:40,486 --> 00:40:42,610
Ngayon ay na magkaroon ng kahulugan kung paano ginawa ko na?

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

814
00:40:45,165 --> 00:40:46,790
Oo, kaya muli, kami ay may dalawang mga sangkap.

815
00:40:46,790 --> 00:40:49,666
Ang unang bahagi ng mga kopya
ang bawat card sa listahan.

816
00:40:49,666 --> 00:40:50,540
Iyan ang view ng listahan.

817
00:40:50,540 --> 00:40:54,770
At ang ikalawang bahagi
mga kopya ng card na lang.

818
00:40:54,770 --> 00:40:58,840
Kung ikaw ay bigyan ito ng isang tiyak na card, makikita ito
i-print ang impormasyon tungkol sa card na

819
00:40:58,840 --> 00:41:01,870
at hayaan mong i-flip nang pabalik-balik.

820
00:41:01,870 --> 00:41:05,850
>> Kaya kung gusto namin, maaari naming subukan at makipag-usap
tungkol sa pagdagdag ng ilang mga bagong tampok na ito.

821
00:41:05,850 --> 00:41:09,482
Kung hindi, maaari naming makipag-usap ng kaunti pang
tungkol sa mga bilis ng reactor,

822
00:41:09,482 --> 00:41:11,190
o maaari naming sagutin
mga katanungan na maaaring mayroon ka

823
00:41:11,190 --> 00:41:15,050
dahil ito ay ang lahat ng mga pangunahing mga bahagi
ng reaksyon na gusto kong makipag-usap tungkol sa.

824
00:41:15,050 --> 00:41:16,540
Maaari naming sige.

825
00:41:16,540 --> 00:41:17,590
Maaari naming sagutin ang mga katanungan.

826
00:41:17,590 --> 00:41:18,560
Kahit anong gusto mo.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Madla: Maaari mong gamitin ang
JSX sa normal JavaScript?

829
00:41:24,205 --> 00:41:27,150
O ay na ang isang bagay na
dumating na kasama ang [hindi marinig]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL MEHTA: Ang tanong ay maaari
gamitin mo JSX sa normal JavaScript?

831
00:41:30,760 --> 00:41:32,620
Ang sagot ay oo.

832
00:41:32,620 --> 00:41:41,070
JSX ay lamang ng isang paraan ng ito ay tumatagal ng iyong
JavaScript na may HTML sa loob ng mga ito,

833
00:41:41,070 --> 00:41:44,215
at ito compiles sa JavaScript na
ay walang HTML sa loob ng mga ito.

834
00:41:44,215 --> 00:41:47,880
Kaya mapansin na- kaya mapapansin dito.

835
00:41:47,880 --> 00:41:50,820
Ito ay mukhang mayroon ka tulad ng div
at ikaw ay may mga bagay-bagay sa loob nito.

836
00:41:50,820 --> 00:41:54,970
>> Iyon compiles sa JavaScript na
tulad ng bumubuo ng parehong bagay.

837
00:41:54,970 --> 00:41:59,590
Hulaan ko kung ano ako ay sinasabi na
JSX ay lamang ng isang sintaktik, tulad ng ito ay

838
00:41:59,590 --> 00:42:03,530
isang preprocessor para sa JavaScript marami
tulad ng PHP ay isang preprocessor para sa HTML.

839
00:42:03,530 --> 00:42:05,490
JSC ay isang preprocessor
para sa JavaScript na hinahayaan

840
00:42:05,490 --> 00:42:12,970
ilagay mo HTML sa loob ng iyong JavaScript.

841
00:42:12,970 --> 00:42:16,425
At kaya kung ikaw ay may karapatan transformer
kung saan ay isang bagay na tinatawag na [hindi marinig],

842
00:42:16,425 --> 00:42:17,300
na kung saan ay ibahin ang anyo.

843
00:42:17,300 --> 00:42:19,360
Ang karapatan preprocessor,
Makikita ito sa inyo na gawin iyon.

844
00:42:19,360 --> 00:42:20,235
>> Madla: [hindi marinig]

845
00:42:20,235 --> 00:42:23,026
NEEL MEHTA: Karaniwan hindi mo na kailangan
upang ilagay ang HTML sa loob ng JavaScript

846
00:42:23,026 --> 00:42:24,110
maliban kung ang iyong ginagawa Reaksyon.

847
00:42:24,110 --> 00:42:27,146
Ngunit maaari mo itong gawin pa rin.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Madla: Sa tingin ko sa iyo
ay inilarawan Reaksyon

850
00:42:29,353 --> 00:42:31,970
bilang functional programing wika.

851
00:42:31,970 --> 00:42:35,646
Ay pag-aaral Kami C sa CS50.

852
00:42:35,646 --> 00:42:38,032
Ay C din ng isang functional na wika?

853
00:42:38,032 --> 00:42:39,990
NEEL MEHTA: Kaya ang tanong
ay tungkol sa functional

854
00:42:39,990 --> 00:42:43,010
kumpara sa ibang bagay na tinatawag na
mahalaga o pamamaraan programming.

855
00:42:43,010 --> 00:42:44,820
Mayroong dalawang uri ng mga programa popular.

856
00:42:44,820 --> 00:42:48,550
Isa ay tinatawag na pamamaraan, na kung saan
ay tungkol sa lahat tulad ng paggawa ng mga utos,

857
00:42:48,550 --> 00:42:51,510
at isa ay sa pagganap, na kung saan ay ang lahat ng
tungkol sa pagkakaroon ng mga pag-andar at pagkakaroon

858
00:42:51,510 --> 00:42:52,930
input at output ng mga iyon.

859
00:42:52,930 --> 00:42:55,930
Reaksyon ay isang functional tularan.

860
00:42:55,930 --> 00:42:58,010
C ay isang napaka pamamaraan tularan.

861
00:42:58,010 --> 00:43:02,360
>> At bilang isang halimbawa, C halimbawa,
hindi mo na gawin ito paturol paraan

862
00:43:02,360 --> 00:43:04,390
ng paggawa ng mga programa, di ba?

863
00:43:04,390 --> 00:43:06,826
Mayroon kang sabihin, i-print ito.

864
00:43:06,826 --> 00:43:07,950
Baguhin ito istraktura ng data.

865
00:43:07,950 --> 00:43:08,530
I-print ito.

866
00:43:08,530 --> 00:43:10,160
Lahat ng ito ay tungkol sa mga utos.

867
00:43:10,160 --> 00:43:12,640
>> Sa Gumanti, may hindi
na ang maraming utos.

868
00:43:12,640 --> 00:43:15,145
Lahat ng ito ay tungkol sa pagkakaroon ng
bahagi kayo magkasama.

869
00:43:15,145 --> 00:43:16,300
Sila ay tulad ng pag-andar.

870
00:43:16,300 --> 00:43:26,360
Mayroon kang tulad ng isang function
tinatawag CardView,

871
00:43:26,360 --> 00:43:28,680
na kung saan ay isang function
na may input, output,

872
00:43:28,680 --> 00:43:30,660
at iba Gumanti ay ang lahat ng
tungkol sa pilosopiya

873
00:43:30,660 --> 00:43:32,700
amin ng having-- mayroon kang data.

874
00:43:32,700 --> 00:43:34,910
Ipasa mo ito sa pamamagitan na ito
algorithm, at ito makikita

875
00:43:34,910 --> 00:43:36,800
HTML na output na kayo
naka-print lamang ang mga pahina,

876
00:43:36,800 --> 00:43:39,180
at kaya kailangan mong
magtayo ito piraso ng piraso.

877
00:43:39,180 --> 00:43:42,800
>> Kaya upang gumuhit ng isang talinghaga sa kung ano ang
Sinabi ko bago, alam mo kung paano

878
00:43:42,800 --> 00:43:47,050
sa Facebook kung ikaw ay makakuha ng mensahe,
at piliin mo kung ano ang mga bahagi upang i-update,

879
00:43:47,050 --> 00:43:47,882
na pamamaraan.

880
00:43:47,882 --> 00:43:48,840
Ito ay mahalaga, di ba?

881
00:43:48,840 --> 00:43:49,806
OK, Nakatanggap ako ng isang mensahe.

882
00:43:49,806 --> 00:43:50,930
Baguhin ang account ni doon.

883
00:43:50,930 --> 00:43:52,110
>> Pop ng isang window dito.

884
00:43:52,110 --> 00:43:52,780
Baguhin ang account ni doon.

885
00:43:52,780 --> 00:43:53,700
Gumuhit ito dito.

886
00:43:53,700 --> 00:43:55,220
Iyan ay isang diskarte sa pamamaraan.

887
00:43:55,220 --> 00:44:00,240
>> Iyan ang mga bagay tulad ng anggular,
Boost, gulugod, iba pang mga Framework gamitin.

888
00:44:00,240 --> 00:44:01,200
Reaksyon ay functional.

889
00:44:01,200 --> 00:44:03,324
Ito ay isang iba't ibang mga paraan
ng pag-iisip tungkol sa mga bagay.

890
00:44:03,324 --> 00:44:07,950
Ito ay tumatagal ng mga ideya na ito ng may ni ipaalam
function o mga algorithm na kayo

891
00:44:07,950 --> 00:44:08,800
bigyan ito ng data.

892
00:44:08,800 --> 00:44:11,820
Makikita ito ng sabihin ang lahat ng kung ano ito
dapat, at ang computer

893
00:44:11,820 --> 00:44:13,490
ay alagaan ng pagtimbang out.

894
00:44:13,490 --> 00:44:15,890
Hindi mo na hawakan ito sa iyong sarili.

895
00:44:15,890 --> 00:44:18,470
Ba na gumawa ng isang maliit na piraso ng kahulugan?

896
00:44:18,470 --> 00:44:18,970
Oo?

897
00:44:18,970 --> 00:44:24,180
>> Madla: Sa isang functional na wika,
ang lahat ng bagay ang mangyayari nang sabay-sabay?

898
00:44:24,180 --> 00:44:26,800
>> NEEL MEHTA: Hindi, mga bagay na mangyayari sa order.

899
00:44:26,800 --> 00:44:29,320
Tulad dito mayroon pa rin
order, ngunit ito ay hindi

900
00:44:29,320 --> 00:44:32,390
mangyari sa order ng tulad ng
purihin, command, command.

901
00:44:32,390 --> 00:44:36,459
Ito ay nangyayari sa order ng
function na nagbibigay sa iyo ng output.

902
00:44:36,459 --> 00:44:37,750
Ilagay na sa isa pang function.

903
00:44:37,750 --> 00:44:39,550
Ilagay na sa isa pang
function, ang isa pang pag-andar.

904
00:44:39,550 --> 00:44:41,470
>> Kung gagawin mo CS51, makikita mo
matuto functional programa

905
00:44:41,470 --> 00:44:42,886
isang maliit na sa labas ng saklaw ng mga ito.

906
00:44:42,886 --> 00:44:45,090
Pero talaga, kung ano ang gumagawa
Gumanti cool na ay hindi lamang

907
00:44:45,090 --> 00:44:46,840
ang one-way na daloy ng data
at ang mga virtual Dom,

908
00:44:46,840 --> 00:44:48,700
kundi pati na rin ang ideya ng
functional programming.

909
00:44:48,700 --> 00:44:51,720
At functional programming ay tunay madali
gumawa ng sulat at gumawa ng mga cool na bagay sa labas ng,

910
00:44:51,720 --> 00:44:53,844
at ito ay tunay madali na mag-isip
tungkol sa at dahilan tungkol sa.

911
00:44:53,844 --> 00:44:55,450
Kaya ito ay isa pang mahusay na gumuhit ng mga Reaksyon.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Anumang higit pang mga tanong?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Oo?

916
00:45:03,150 --> 00:45:06,840
>> Madla: Um, bakit gusto mo
gamitin hayaan bilang laban sa var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL MEHTA: Kaya ang tanong ay
bakit mo ginagamit ipaalam sa halip ng var?

918
00:45:10,450 --> 00:45:13,220
Ito ay isang bagay na tinatawag na
ES6 o ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Ito ay ang bagong bersyon ng JavaScript.

920
00:45:15,820 --> 00:45:19,050
May isang grupo ng mga teknikal na dahilan,
ngunit hayaan ay isang mas mahusay na bersyon ng var.

921
00:45:19,050 --> 00:45:20,724
>> Ito ay kung paano ipinapahayag mo variable.

922
00:45:20,724 --> 00:45:21,390
Maaari mong gamitin ang ipaalam.

923
00:45:21,390 --> 00:45:22,140
Maaari mong gamitin ang var.

924
00:45:22,140 --> 00:45:23,825
Hayaan ay may isang bungkos ng mga teknikal na
reasons-- maaari mong tingnan ang mga ito

925
00:45:23,825 --> 00:45:25,610
up later-- para sa kung bakit ito ay mas mahusay.

926
00:45:25,610 --> 00:45:28,780
Karaniwang, ES6 ay may ilang magaling
bagong syntax, ang ilang mga bagong tampok

927
00:45:28,780 --> 00:45:30,720
sa itaas ng lumang JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Kaya kami ay may tulad ng limang minuto.

929
00:45:32,782 --> 00:45:34,990
Nais ko lamang na makipag-usap tungkol
isa pang bagay real mabilis.

930
00:45:34,990 --> 00:45:36,450
Kung nagkaroon ka ng anumang mga tanong,
usapan natin ang tungkol sa mga ito pagkatapos na ito hayaan.

931
00:45:36,450 --> 00:45:38,366
Subalit kaya lamang ang makakakuha ito
nahuli sa camera, ako lamang

932
00:45:38,366 --> 00:45:41,550
gustong makipag-usap ng kaunti tungkol sa kung paano mo
talagang gamitin Kikilos sa iyong apps.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Kung pupunta ka dito,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
ito ay ang home page para sa Reaksyon, at
na ito ay magpapakita sa iyo kung paano mo talagang gamitin

936
00:46:03,320 --> 00:46:05,320
Kikilos sa iyong mga pahina.

937
00:46:05,320 --> 00:46:08,845
Talaga, ito ay isang maliit na
kumplikado sinusubukang i-install Reaksyon.

938
00:46:08,845 --> 00:46:12,300
Ito ay hindi kasing-dali ng i-drag mo lang
at drop ng isang JavaScript sa doon.

939
00:46:12,300 --> 00:46:15,890
>> Mayroon kang magkaroon ng iyong mga transformer
set up, na kung saan ay, tulad ng ito ay bago,

940
00:46:15,890 --> 00:46:18,120
buksan ang iyong JSX sa
ang normal JavaScript.

941
00:46:18,120 --> 00:46:21,030
Ikaw ay may na bagay na makikita
sumulat ng libro ES6 mong normal.

942
00:46:21,030 --> 00:46:24,720
JavaScript may isang pulutong ng mga paglipat
bahagi ng kailangan mong gawin, kaya may isang bagay

943
00:46:24,720 --> 00:46:27,200
tinatawag Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
At ito ay isang kasangkapan na command line na idedetalye
makatulong sa iyo na plantsa out ang iyong Reaksyon

945
00:46:31,110 --> 00:46:32,380
proyekto madali.

946
00:46:32,380 --> 00:46:38,660
>> Kaya maaari mong basahin ang tungkol sa mga ito
sa ibang pagkakataon, ngunit may ilang mga tool

947
00:46:38,660 --> 00:46:40,160
na Yeoman aalok.

948
00:46:40,160 --> 00:46:43,280
Makikita nila hayaan kang lumikha ng isang Reaksyon
app sa lahat ng bagay na binuo sa.

949
00:46:43,280 --> 00:46:46,030
Tulad ng makikita ito ay binuo ng
in, mga sangkap na binuo sa.

950
00:46:46,030 --> 00:46:47,880
Makikita ito kung ang iyong mga transformer built in.

951
00:46:47,880 --> 00:46:50,699
Sila ay may isang pulutong ng mga cool
mga bagay-bagay na binuo sa awtomatikong

952
00:46:50,699 --> 00:46:52,240
gamit ang mga bagay na tinatawag generators.

953
00:46:52,240 --> 00:46:54,620
>> Kaya basahin ang tungkol sa kung gusto mo.

954
00:46:54,620 --> 00:46:59,110
Pumunta lamang sa Yeoman, Y-E-O-M-A-N, at
maaari mong mahanap generators tulad ng mga ito.

955
00:46:59,110 --> 00:47:01,263
At sa pamamagitan ng generators tulad ng
ng mga ito, gusto mo lamang ng isang

956
00:47:01,263 --> 00:47:03,010
ay isang pares command line command.

957
00:47:03,010 --> 00:47:05,530
Makikita ito ng plantsa sa labas ng isang
buong Gumanti app para sa iyo.

958
00:47:05,530 --> 00:47:10,470
Makikita ito makakuha ng lahat ng manual mga tubo,
at igik trabaho tapos na para sa iyo,

959
00:47:10,470 --> 00:47:13,010
at ito ang dahilan kung bakit ikaw lamang ang focus
sa pagsusulat lamang ng sa Reaksyon.

960
00:47:13,010 --> 00:47:16,739
>> Kaya karaniwang pagbuo ng isang
Gumanti app ay nontrivial.

961
00:47:16,739 --> 00:47:19,530
Ito ay naka-wire na ang lahat ng sama-sama, ngunit may
mga kasangkapan na kailangan gawin ito para sa iyo.

962
00:47:19,530 --> 00:47:23,070
Kaya kung nais mong gumawa ng isang Reaksyon
app, subukan ang paggawa ng mga ito na paraan.

963
00:47:23,070 --> 00:47:26,360
Kung gusto mo lamang na mag-eksperimento,
maaari mong subukan ang paggamit ng ganitong CodePen

964
00:47:26,360 --> 00:47:28,550
dahil ito CodePen ay
lahat ng mga reaksyon ng mga kable.

965
00:47:28,550 --> 00:47:30,240
Ginawa ko na ang lahat ng mga trabaho para sa iyo na.

966
00:47:30,240 --> 00:47:34,610
>> Kaya kung nais mong gumawa ng tulad ng isang
produksyon sa release Gumanti app,

967
00:47:34,610 --> 00:47:37,220
subukan ang isa sa mga generators.

968
00:47:37,220 --> 00:47:40,240
Kung gusto mo lamang upang i-play
sa paligid, ito ay madalas na nagkakahalaga lamang

969
00:47:40,240 --> 00:47:44,490
tulad subukang mag-play sa paligid sa CodePen dito.

970
00:47:44,490 --> 00:47:45,470
Tunog mabuti?

971
00:47:45,470 --> 00:47:45,970
Cool.

972
00:47:45,970 --> 00:47:47,890
>> Kaya na ang lahat ng mayroon ako.

973
00:47:47,890 --> 00:47:52,470
Muli, ang lahat ng mga code at mga halimbawa ay
magiging sa website na ito dito.

974
00:47:52,470 --> 00:47:55,509
Kaya, muli, hindi namin makipag-usap
tungkol sa marami syntax ng Reaksyon,

975
00:47:55,509 --> 00:47:57,550
ngunit upang mahanap ang lahat ng mga
maliit syntactical detalye,

976
00:47:57,550 --> 00:48:00,320
ang lahat ng ito ay magiging available
sa website na ito dito.

977
00:48:00,320 --> 00:48:02,660
>> Kaya gusto ko inirerekumenda tulad
gawin ang unang hakbang.

978
00:48:02,660 --> 00:48:06,277
Ilagay ito sa iyong CodePen.

979
00:48:06,277 --> 00:48:08,110
Subukan ang nagtatrabaho sa paggawa ng
ito sa ikalawang hakbang.

980
00:48:08,110 --> 00:48:11,310
May isang ika-apat na hakbang, at lamang
makita kung saan makakakuha ka ng mula sa na.

981
00:48:11,310 --> 00:48:14,840
>> Anumang higit pang mga tanong, tingnan
out na pahina o email sa akin.

982
00:48:14,840 --> 00:48:16,490
Iyon ang aking email.

983
00:48:16,490 --> 00:48:19,885
Ngunit Gusto kong tulungan ka sa anumang
mga katanungan na maaaring mayroon ka tungkol sa Reaksyon.

984
00:48:19,885 --> 00:48:21,010
Kaya, yep, na ang lahat ng mayroon ako.

985
00:48:21,010 --> 00:48:23,410
Maraming salamat sa lahat napaka para sa
nanonood o para sa mga nag-aaral.

986
00:48:23,410 --> 00:48:26,820
At kukunin ko na gumawa ng anumang mga katanungan
na maaaring mayroon ka, pagkatapos nito ngayon.

987
00:48:26,820 --> 00:48:29,140
Kaya salamat sa iyo para sa lahat ng nanonood.

988
00:48:29,140 --> 00:48:31,270