1
00:00:00,000 --> 00:00:02,910
>> [Bermain muzik]

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL MEHTA: Di sini ia pergi.

4
00:00:07,275 --> 00:00:11,070
>> Well, semua orang, selamat datang ke web
aplikasi masa depan dengan Bertindak balas.

5
00:00:11,070 --> 00:00:11,870
Ini adalah CS50.

6
00:00:11,870 --> 00:00:12,930
Nama saya Neel.

7
00:00:12,930 --> 00:00:17,689
Saya adalah seorang TA untuk CS50 dan mahasiswa tingkat kedua
di Harvard College dan yang sangat, sangat

8
00:00:17,689 --> 00:00:18,730
pemaju web ghairah.

9
00:00:18,730 --> 00:00:20,730
Jadi saya sangat menarik untuk
berbincang dengan anda hari ini,

10
00:00:20,730 --> 00:00:24,550
sama ada anda berada di sini atau di rumah
menonton, kira-kira Bertindak balas, yang, sekali lagi

11
00:00:24,550 --> 00:00:27,270
seperti yang saya katakan, masa depan aplikasi web.

12
00:00:27,270 --> 00:00:29,055
>> Jadi Bertindak balas adalah satu rangka kerja web.

13
00:00:29,055 --> 00:00:30,930
Dan seperti yang saya telah memberitahu
kepada beberapa orang di sini,

14
00:00:30,930 --> 00:00:33,400
rangka kerja yang hanya
set alat yang anda boleh menggunakan

15
00:00:33,400 --> 00:00:35,770
untuk menstruktur dan membina aplikasi web anda.

16
00:00:35,770 --> 00:00:39,010
Dan aplikasi web, sekali lagi, laman web
yang interaktif seperti Facebook,

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

18
00:00:42,330 --> 00:00:45,590
>> Jadi Facebook adalah satu rangka kerja web
yang telah dibangunkan oleh Facebook

19
00:00:45,590 --> 00:00:48,060
beberapa tahun back-- Bertindak balas adalah.

20
00:00:48,060 --> 00:00:50,830
Ia pun digunakan dalam
Facebook pada aplikasi mudah alih mereka

21
00:00:50,830 --> 00:00:52,460
dan aplikasi web, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy adalah satu lagi
pengguna awal menonjol Bertindak balas.

23
00:00:56,350 --> 00:00:58,630
>> Ia benar-benar telah mendapat
sangat popular.

24
00:00:58,630 --> 00:01:03,420
Jika anda pernah menggunakan perkara-perkara seperti sudut atau
Tulang belakang, ini adalah dari keluarga yang sama,

25
00:01:03,420 --> 00:01:05,830
tetapi ia mempunyai sejak jauh
mendahului populariti mereka.

26
00:01:05,830 --> 00:01:06,890
Ia adalah perkara yang baru panas.

27
00:01:06,890 --> 00:01:09,590
Ia benar-benar, benar-benar besar.

28
00:01:09,590 --> 00:01:13,470
>> Dan sebagainya Bertindak balas yang baik bukan sahaja sebagai
rangka kerja web untuk antara muka bangunan.

29
00:01:13,470 --> 00:01:16,020
Ia baik untuk membina antara muka web.

30
00:01:16,020 --> 00:01:18,350
Terdapat juga perkara yang
dipanggil Bertindak balas asli yang

31
00:01:18,350 --> 00:01:22,200
membolehkan anda membina antara muka
untuk Android dan IOS

32
00:01:22,200 --> 00:01:26,390
dan platform mungkin lain pada masa akan datang
dengan hanya menggunakan kod JavaScript yang sama.

33
00:01:26,390 --> 00:01:31,130
Anda boleh menggunakan yang sama
Kod JavaScript untuk menjadikan laman web,

34
00:01:31,130 --> 00:01:33,040
untuk menjadikan Android aplikasi dan IOS aplikasi.

35
00:01:33,040 --> 00:01:35,000
>> Ia adalah masa yang sangat, sangat menarik.

36
00:01:35,000 --> 00:01:37,070
Ia adalah peluang yang benar-benar, benar-benar sejuk.

37
00:01:37,070 --> 00:01:42,020
Ia merupakan satu web universal
alat pembangunan antara muka,

38
00:01:42,020 --> 00:01:44,420
jadi ia adalah sangat, sangat
Perkara penting yang perlu tahu.

39
00:01:44,420 --> 00:01:46,949
Dan, seperti yang saya telah memberitahu orang ramai
sebelum ini, ini, saya fikir,

40
00:01:46,949 --> 00:01:48,990
akan menukar cara kita
membina aplikasi web selama-lamanya.

41
00:01:48,990 --> 00:01:55,820
Jadi ia mungkin satu hiperbola sedikit, tetapi saya
fikir ia adalah satu perkara yang cukup baik untuk mengetahui.

42
00:01:55,820 --> 00:01:57,580
>> OK, jadi apa yang Bertindak balas?

43
00:01:57,580 --> 00:02:01,020
Bertindak balas adalah rangka kerja yang anda boleh
digunakan untuk membina antara muka.

44
00:02:01,020 --> 00:02:03,240
Antara muka, sekali lagi,
laman web, bukan?

45
00:02:03,240 --> 00:02:06,340
Jadi di sini adalah Instagram.com, kegunaan Bertindak balas.

46
00:02:06,340 --> 00:02:08,740
>> Bertindak balas dibina di atas
idea komponen.

47
00:02:08,740 --> 00:02:11,900
Komponen adalah HTML
elemen pada steroid,

48
00:02:11,900 --> 00:02:14,470
supaya elemen HTML adalah seperti butang.

49
00:02:14,470 --> 00:02:15,250
Ia perenggan.

50
00:02:15,250 --> 00:02:17,500
Ia tandukan, bukan?

51
00:02:17,500 --> 00:02:22,740
Dan Instagram akan menggunakan ini, tetapi ia
juga akan menggunakan komponen Bertindak balas.

52
00:02:22,740 --> 00:02:25,740
>> Bertindak balas komponen adalah
souped-up elemen HTML

53
00:02:25,740 --> 00:02:28,100
yang mempunyai tingkah laku mereka sendiri
yang terkandung dalam diri mereka.

54
00:02:28,100 --> 00:02:31,800
Jadi, sebagai contoh, kita boleh mempunyai
elemen masa, komponen masa,

55
00:02:31,800 --> 00:02:34,095
yang akan mengandungi seperti
setem masa, anda tahu,

56
00:02:34,095 --> 00:02:37,170
komponen profil yang
akan mengandungi imej profil

57
00:02:37,170 --> 00:02:38,820
dan nama orang itu.

58
00:02:38,820 --> 00:02:42,930
Ia boleh mempunyai kaunter seperti yang
boleh dikira seperti jumlah orang seperti,

59
00:02:42,930 --> 00:02:45,610
dan jika anda klik di atasnya, ia akan mempunyai
meningkatkan bilangan orang seperti.

60
00:02:45,610 --> 00:02:48,200
Komponen adalah hanya satu
sekumpulan kod HTML yang

61
00:02:48,200 --> 00:02:50,520
mempunyai beberapa fungsi
dibalut di dalamnya.

62
00:02:50,520 --> 00:02:53,770
Jadi ia seperti elemen HTML
pada steroid, seperti yang saya katakan sebelum ini.

63
00:02:53,770 --> 00:02:56,270
Anda boleh menggunakan komponen ini,
dan anda boleh meletakkan mereka bersama-sama

64
00:02:56,270 --> 00:02:59,060
untuk membuat komponen baru,
kes ini, komponen pos,

65
00:02:59,060 --> 00:03:00,505
yang mengandungi semua barangan ini.

66
00:03:00,505 --> 00:03:04,050
Ia akan mengandungi Masa, Profil,
LikeCounter, mungkin komen

67
00:03:04,050 --> 00:03:06,100
dan mungkin imej itu sendiri.

68
00:03:06,100 --> 00:03:10,810
Dan sebagainya aplikasi web hanya dibina dengan mengambil
komponen dan meletakkan mereka bersama-sama.

69
00:03:10,810 --> 00:03:15,620
Suapan Instagram adalah tidak lebih daripada
sekumpulan jawatan satu demi satu,

70
00:03:15,620 --> 00:03:19,032
setiap pos mengandungi seperti Masa,
Profil, LikeCounter, dan sebagainya.

71
00:03:19,032 --> 00:03:20,490
Ia adalah jenis seperti membina sebuah rumah.

72
00:03:20,490 --> 00:03:22,660
Anda tidak membina
rumah dari atas ke bawah.

73
00:03:22,660 --> 00:03:24,960
Anda mengambil components-- anda
mengambil seperti bilik mandi.

74
00:03:24,960 --> 00:03:28,320
Anda mengambil bedroom-- yang anda melekat mereka
bersama-sama, dan anda mempunyai komponen baru.

75
00:03:28,320 --> 00:03:29,760
Anda mempunyai bahagian baru dari rumah.

76
00:03:29,760 --> 00:03:32,860
>> Jadi bertindak balas adalah semua yang dibina di sekitar
idea ini komponen yang

77
00:03:32,860 --> 00:03:36,600
interaktif, yang perisytiharan.

78
00:03:36,600 --> 00:03:39,650
Seperti anda hanya mengatakan apa yang
profil, dan ia menyebabkan ia.

79
00:03:39,650 --> 00:03:40,600
Mereka adalah composable.

80
00:03:40,600 --> 00:03:43,880
Anda boleh mengambil masa dan profil, meletakkan
mereka bersama-sama, membuat sesuatu yang lebih baik.

81
00:03:43,880 --> 00:03:47,770
Dan mereka yang boleh digunakan semula, jadi jika anda
mempunyai kod sumber untuk jawatan,

82
00:03:47,770 --> 00:03:49,440
anda boleh menanamkan di mana-mana.

83
00:03:49,440 --> 00:03:53,160
>> Anda boleh membenamkan Instagram
Perkara di laman web anda sendiri.

84
00:03:53,160 --> 00:03:56,830
Anda boleh menanamkan di Facebook, sebagai contoh,
selagi ia menggunakan Bertindak balas juga.

85
00:03:56,830 --> 00:04:00,360
Jadi komponen adalah benar-benar, benar-benar, benar-benar
blok bangunan berkuasa web

86
00:04:00,360 --> 00:04:04,180
yang boleh digunakan di mana sahaja dan meletakkan
bersama-sama untuk membuat blok bangunan baru.

87
00:04:04,180 --> 00:04:07,159
Itulah yang sangat, sangat
gambaran keseluruhan tahap yang tinggi.

88
00:04:07,159 --> 00:04:09,200
Jadi, sekali lagi, jika anda mempunyai
sebarang soalan pada bila-bila

89
00:04:09,200 --> 00:04:14,470
tentang falsafah reaktor, yang
pengekodan, untuk menghentikan saya dan beritahu saya.

90
00:04:14,470 --> 00:04:18,420
>> OK, jadi bertindak balas adalah sejuk kerana ia
mempunyai cara yang berbeza melihat

91
00:04:18,420 --> 00:04:19,870
bagaimana anda membina aplikasi web.

92
00:04:19,870 --> 00:04:23,620
Anda mungkin pernah mendengar tentang MVC, yang
model anda mengawal dalam CS50 atau apa sahaja

93
00:04:23,620 --> 00:04:25,940
menyelesaikan sesuatu kelas anda menggunakan lain.

94
00:04:25,940 --> 00:04:29,000
Dan yang paling rangka kerja yang
dibina di sekitar idea MVC.

95
00:04:29,000 --> 00:04:30,410
Bertindak balas tidak.

96
00:04:30,410 --> 00:04:32,980
Bertindak balas dibina di sekitar idea
aliran data satu arah

97
00:04:32,980 --> 00:04:36,510
seperti yang dilihat oleh carta ini atau grafik di sini.

98
00:04:36,510 --> 00:04:38,260
>> Pada asasnya, anda mempunyai sumber data.

99
00:04:38,260 --> 00:04:42,380
Dan sumber data yang akan membuat keputusan
bagaimana untuk meletakkan komponen tertentu.

100
00:04:42,380 --> 00:04:45,452
Dan komponen akan
kemudian, apabila mereka berubah,

101
00:04:45,452 --> 00:04:47,160
mereka akan berkata kepada para
sumber data kepada perubahan.

102
00:04:47,160 --> 00:04:49,350
>> Untuk menggunakan Instagram
Sebagai contoh, anda mungkin mempunyai

103
00:04:49,350 --> 00:04:52,050
senarai objek jawatan seperti
dalam pangkalan data atau sesuatu.

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

105
00:04:53,310 --> 00:04:57,600
Dan kemudian komponen post kami
akan mengambil data itu,

106
00:04:57,600 --> 00:05:01,830
dan menggunakan data itu untuk menjadikan
satu perkara yang pada skrin.

107
00:05:01,830 --> 00:05:04,300
Itulah apa yang anak panah
daripada data kepada komponen adalah,

108
00:05:04,300 --> 00:05:07,930
dan kemudian data yang sama digunakan
untuk memberi sekumpulan komponen.

109
00:05:07,930 --> 00:05:10,290
>> Pada Facebook Messenger, untuk
Sebagai contoh, yang merupakan Bertindak balas,

110
00:05:10,290 --> 00:05:13,410
anda mungkin mempunyai senarai
mesej sebagai sumber data anda.

111
00:05:13,410 --> 00:05:15,927
Dan yang tidak akan menyebabkan
hanya senarai mesej

112
00:05:15,927 --> 00:05:17,510
tetapi juga senarai rakan-rakan anda.

113
00:05:17,510 --> 00:05:19,200
Anda mempunyai kiraan yang belum dibaca.

114
00:05:19,200 --> 00:05:23,330
Mungkin juga menyebabkan perkara Facebook
itulah di bahagian bawah Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Data yang sama adalah
sumber tunggal kebenaran

116
00:05:25,610 --> 00:05:28,290
dan yang menyebabkan banyak
komponen yang akan diberikan.

117
00:05:28,290 --> 00:05:30,290
Dan apabila salah seorang daripada mereka
Komponen berubah,

118
00:05:30,290 --> 00:05:32,320
ia kembali dan
perubahan sumber data.

119
00:05:32,320 --> 00:05:33,460
>> Anda menghantar mesej, bukan?

120
00:05:33,460 --> 00:05:34,780
Yang mengubah sumber data.

121
00:05:34,780 --> 00:05:39,490
Anda membaca mesej anda,
supaya anda menetapkan belum dibaca kepada 0.

122
00:05:39,490 --> 00:05:41,136
Yang mengubah sumber data.

123
00:05:41,136 --> 00:05:44,010
Dan perhatikan bahawa semua ini satu
arrow kembali kepada data yang sama

124
00:05:44,010 --> 00:05:47,662
sumber, supaya anda tahu,
diberikan satu set data tertentu,

125
00:05:47,662 --> 00:05:49,870
anda tahu apa yang
halaman akan kelihatan seperti.

126
00:05:49,870 --> 00:05:50,700
Ia berketentuan.

127
00:05:50,700 --> 00:05:53,451
Anda tahu, data tertentu diberikan, apa
laman web tersebut akan kelihatan seperti.

128
00:05:53,451 --> 00:05:56,158
Anda boleh meramalkan bagaimana ia akan
berkelakuan dan bagaimana mereka akan berdepan

129
00:05:56,158 --> 00:05:57,650
untuk bekerja apabila mereka bersama.

130
00:05:57,650 --> 00:06:00,410
>> Dan jika saya mempunyai satu juta komponen
sini, ia akan berkelakuan yang sama, bukan?

131
00:06:00,410 --> 00:06:02,290
Anda tidak akan mempunyai apa-apa
saling hubungan pelik.

132
00:06:02,290 --> 00:06:04,120
Satu data yang diberikan satu juta komponen.

133
00:06:04,120 --> 00:06:06,879
Sejuta komponen boleh
kembali dan mengedit data.

134
00:06:06,879 --> 00:06:07,920
Dan hal ini adalah sangat bagus.

135
00:06:07,920 --> 00:06:10,870
Kami membina composable,
mudah aplikasi web berskala.

136
00:06:10,870 --> 00:06:13,150
>> Anda mempunyai satu sumber data,
sumber kebenaran.

137
00:06:13,150 --> 00:06:15,790
Yang memberitahu komponen anda
bagaimana untuk meletakkan keluar halaman,

138
00:06:15,790 --> 00:06:18,190
dan komponen akan
mengendalikan interaksi.

139
00:06:18,190 --> 00:06:20,150
Dan jika mereka mahu berubah
perkara, hanya kembali

140
00:06:20,150 --> 00:06:21,750
dan memberitahu sumber data untuk berubah.

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

142
00:06:22,850 --> 00:06:26,010
Jadi Bertindak balas adalah tentang pemahaman
bagaimana untuk membina komponen

143
00:06:26,010 --> 00:06:29,540
dan bagaimana untuk membuat komponen anda
berinteraksi dengan dunia luar.

144
00:06:29,540 --> 00:06:31,850
>> Membuat berinteraksi komponen
dengan dunia luar

145
00:06:31,850 --> 00:06:34,490
menggunakan teknologi lain
dipanggil sentiasa berubah-ubah, yang

146
00:06:34,490 --> 00:06:36,872
adalah satu rangka kerja yang
ditambah pada bahagian atas Bertindak balas.

147
00:06:36,872 --> 00:06:38,330
Kami tidak akan bercakap tentang itu.

148
00:06:38,330 --> 00:06:42,990
Kita akan bercakap lebih lanjut mengenai, memandangkan
data, bagaimana anda boleh menyebabkan komponen?

149
00:06:42,990 --> 00:06:47,010
>> Dan sebagainya Bertindak balas adalah benar-benar sejuk kerana anda
boleh menggunakannya dengan mana-mana akhir belakang yang anda mahu.

150
00:06:47,010 --> 00:06:50,480
Jika anda mempunyai seperti akhir belakang Python,
jika Python anda boleh meludah keluar beberapa data,

151
00:06:50,480 --> 00:06:51,610
Bertindak balas boleh menyebabkan ia.

152
00:06:51,610 --> 00:06:54,700
Jika anda tidak output JS
data, Bertindak balas menyebabkannya.

153
00:06:54,700 --> 00:06:56,890
Ruby rel dengan
data, Bertindak balas menyebabkannya.

154
00:06:56,890 --> 00:07:01,860
>> Jadi Bertindak balas pada dasarnya web yang
view-- akhir hadapan dengan komponen

155
00:07:01,860 --> 00:07:03,910
mana-mana sumber data sekalipun.

156
00:07:03,910 --> 00:07:07,145
Dan supaya pergi dari sumber data untuk
bertindak balas komponen adalah agak mudah.

157
00:07:07,145 --> 00:07:08,770
Berlaku dengan cara yang lain adalah agak sukar.

158
00:07:08,770 --> 00:07:10,462
Yang menggunakan Flux seperti yang saya nyatakan sebelum ini.

159
00:07:10,462 --> 00:07:11,420
Kami tidak akan masuk ke dalam itu.

160
00:07:11,420 --> 00:07:13,740
Kami akan memberi tumpuan lebih kepada
data-to-komponen sampingan.

161
00:07:13,740 --> 00:07:15,880
Dengan cara ini anda boleh membuat
sejuk, aplikasi web menyeronokkan.

162
00:07:15,880 --> 00:07:19,870
Ia tidak akan memberi kesan kepada dunia luar
buat masa ini, tetapi itu cerita lain.

163
00:07:19,870 --> 00:07:22,210
>> OK, jadi jika anda berada di sini
untuk seminar terakhir saya

164
00:07:22,210 --> 00:07:26,610
anda akan tahu bahawa semua kod untuk
ucapan hari ini akan menjadi pada URL ini

165
00:07:26,610 --> 00:07:29,320
di sini, maaf, URL ini di sini.

166
00:07:29,320 --> 00:07:32,730
Dan pada dasarnya kita akan pergi
melalui empat langkah, mungkin lima,

167
00:07:32,730 --> 00:07:33,510
mungkin tidak lima.

168
00:07:33,510 --> 00:07:37,300
Kami akan bergerak melalui empat langkah
membina sampel Bertindak balas app.

169
00:07:37,300 --> 00:07:39,550
Dan supaya semua kod sumber
untuk setiap langkah perjalanan

170
00:07:39,550 --> 00:07:42,216
akan menjadi di sini, jadi jika
anda ikuti bersama-sama di rumah,

171
00:07:42,216 --> 00:07:43,991
berasa bebas untuk membaca dengan teliti kod ini.

172
00:07:43,991 --> 00:07:46,740
Jika anda mengikuti bersama-sama di sini,
kita akan menunjukkan ia pada skrin,

173
00:07:46,740 --> 00:07:47,739
jadi jangan bimbang mengenainya.

174
00:07:47,739 --> 00:07:50,930
Tetapi jika anda berada di rumah, berasa
bebas untuk melawat laman web ini.

175
00:07:50,930 --> 00:07:56,400
Dan, Ya, anda akan dapat untuk mendapatkan
semua kod yang anda akan merasa perlu sini.

176
00:07:56,400 --> 00:08:01,380
Jadi ia adalah lembaran menipu yang baik juga
untuk pengembaraan masa depan anda dengan Bertindak balas.

177
00:08:01,380 --> 00:08:04,490
Sejuk, jadi jika semua orang yang di sini,
dan walaupun anda berada di rumah,

178
00:08:04,490 --> 00:08:11,580
tarik ke atas laman web ini, is.gd/cs50react,
tiada modal, tiada garis bawah, tidak ada apa-apa.

179
00:08:11,580 --> 00:08:15,849
>> Anda akan melihat halaman yang kelihatan
sedikit seperti ini.

180
00:08:15,849 --> 00:08:17,140
Ini adalah perkara yang dipanggil CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen adalah kerjasama yang
persekitaran pengekodan

182
00:08:20,030 --> 00:08:23,364
yang aku boleh menulis kod di sini, dan
ia akan dihantar secara automatik kepada anda.

183
00:08:23,364 --> 00:08:24,780
Dan dengan cara ini, saya boleh menulis kod.

184
00:08:24,780 --> 00:08:26,920
Saya boleh menjalankan kod sini.

185
00:08:26,920 --> 00:08:33,470
>> Untuk example-- dan jika ia reloads-- lihat,
Saya menjalankan kod JavaScript pada halaman

186
00:08:33,470 --> 00:08:36,390
di sini, dan IA AKAN
secara automatik menjadikan halaman web

187
00:08:36,390 --> 00:08:37,980
dengan kod JavaScript ini.

188
00:08:37,980 --> 00:08:40,039
Dan sebagainya ini adalah cara yang
untuk kita mencuba kod

189
00:08:40,039 --> 00:08:43,089
benar-benar cepat tanpa perlu menggunakan
ID kami atau menggunakan mesin tempatan

190
00:08:43,089 --> 00:08:44,290
atau apa sahaja.

191
00:08:44,290 --> 00:08:47,670
Ia adalah satu cara yang sangat cepat untuk anda untuk mockup
dan menguji pelbagai jenis kod.

192
00:08:47,670 --> 00:08:50,560
>> Jadi, saya akan mengambil
kod contoh, meletakkan ia di sini.

193
00:08:50,560 --> 00:08:52,374
Kami akan bekerja melaluinya.

194
00:08:52,374 --> 00:08:54,540
Dan jika anda di rumah, anda
boleh tarik sehingga ini juga.

195
00:08:54,540 --> 00:08:57,530
Dan saya telah memasang
Bertindak balas di sini, jadi anda boleh hanya

196
00:08:57,530 --> 00:09:00,770
menulis kod anda sendiri di sini, dan
mencubanya taman permainan anda sendiri.

197
00:09:00,770 --> 00:09:04,940
>> Ya, jika semua orang untuk
membuka pautan ini di sini.

198
00:09:04,940 --> 00:09:08,080
Tolong beri aku ibu jari
sekali anda mempunyai ia terbuka.

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

200
00:09:10,960 --> 00:09:13,770
Sejuk, sejuk sejuk.

201
00:09:13,770 --> 00:09:16,914
Tiada apa-apa di sini buat masa ini, tetapi
kami akan mengubah itu tidak lama lagi.

202
00:09:16,914 --> 00:09:21,250
>> OK, jadi Bertindak balas ialah JavaScript
perpustakaan, dan oleh itu,

203
00:09:21,250 --> 00:09:24,480
memerlukan pengetahuan JavaScript,
yang merupakan bahasa pengaturcaraan web.

204
00:09:24,480 --> 00:09:27,660
Dan ia digunakan untuk perkara-perkara lain
kini terlalu tetapi terutamanya web membangunkan

205
00:09:27,660 --> 00:09:32,040
bahasa, jadi jika anda tidak biasa dengan
itu, membaca laman web yang dipanggil JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Ianya indah.

207
00:09:32,700 --> 00:09:34,240
Anda boleh belajar JavaScript
dalam setengah jam.

208
00:09:34,240 --> 00:09:34,990
Ia adalah luar biasa.

209
00:09:34,990 --> 00:09:36,420
>> Jadi memberikan bacaan yang.

210
00:09:36,420 --> 00:09:39,960
Kami juga banyak HTML di sini kerana
kami mereka bentuk laman web sudah tentu.

211
00:09:39,960 --> 00:09:43,890
Jadi, jika anda tidak biasa dengan
HTML, lihat HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Saya rasa pembelajaran Bertindak balas ialah
juta kali lebih mudah jika anda sudah

213
00:09:46,520 --> 00:09:47,892
tahu blok bangunan.

214
00:09:47,892 --> 00:09:50,600
Jika anda mempunyai komponen, ia
mudah untuk membuat komponen yang lebih besar.

215
00:09:50,600 --> 00:09:51,860
Itulah Bertindak balas bahasa untuk anda.

216
00:09:51,860 --> 00:09:54,270
>> Jadi teruskan dan memberi
perkara-perkara ini membaca.

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

218
00:09:55,070 --> 00:09:57,440
Memberikan bacaan yang jika kamu
di rumah jika anda tidak

219
00:09:57,440 --> 00:10:00,794
biasa dengan HTML atau JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, jadi apa yang kita akan
lakukan ialah kita akan membuat

221
00:10:02,960 --> 00:10:06,470
aplikasi Belakang sangat asas menggunakan Bertindak balas.

222
00:10:06,470 --> 00:10:08,210
Kami akan mempunyai Belakang a.

223
00:10:08,210 --> 00:10:09,880
Anda boleh flip kad dan ke belakang.

224
00:10:09,880 --> 00:10:12,399
Dan kita juga akan mempunyai senarai
semua kad yang kita ada,

225
00:10:12,399 --> 00:10:14,190
dan jika kita rasa
bercita-cita tinggi, kita mungkin

226
00:10:14,190 --> 00:10:17,060
dapat bertukar-tukar antara
kereta dengan mengklik pada mereka.

227
00:10:17,060 --> 00:10:20,360
>> Tetapi ini adalah, yang terdedah anda
tulang, yang sangat mudah Bertindak balas app.

228
00:10:20,360 --> 00:10:22,560
Dan sebagainya ini sebenarnya
tidak remeh untuk melaksanakan,

229
00:10:22,560 --> 00:10:26,030
tetapi kita akan menunjukkan bahawa, jika anda melakukan
ini, ia adalah sangat, sangat mudah untuk melanjutkan

230
00:10:26,030 --> 00:10:27,680
jika orang lain membantu anda dengan itu.

231
00:10:27,680 --> 00:10:33,750
Jadi, kita akan melalui empat langkah
bermula dari awal untuk membina ini.

232
00:10:33,750 --> 00:10:36,740
>> OK, jadi empat langkah, kita akan
bermula dengan langkah pertama.

233
00:10:36,740 --> 00:10:39,790
Langkah pertama akan menjadi
membina komponen pertama anda.

234
00:10:39,790 --> 00:10:44,830
Seperti yang saya katakan sebelum ini, komponen dalam Bertindak balas
hanya satu elemen HTML pada steroid.

235
00:10:44,830 --> 00:10:49,660
Ia menyatakan HTML
dan beberapa tingkah laku, dan ia

236
00:10:49,660 --> 00:10:52,600
akan menentukan bagaimana orang
boleh berinteraksi dengannya bagaimana

237
00:10:52,600 --> 00:10:54,270
ia akan mempunyai keadaan dalaman.

238
00:10:54,270 --> 00:10:57,630
Seperti butang yang akan tahu seperti berapa banyak
kali ia telah diklik sebagai contoh,

239
00:10:57,630 --> 00:11:01,010
dan ia akan tahu bagaimana untuk meletakkan dirinya.

240
00:11:01,010 --> 00:11:04,430
>> Oleh itu, marilah kita pergi ke hadapan dan membina kami
Komponen pertama menggunakan JavaScript.

241
00:11:04,430 --> 00:11:09,711
Jadi, jika sintaks yang kelihatan pelik,
itu kerana ia jenis adalah.

242
00:11:09,711 --> 00:11:11,710
Jadi, sekali lagi, kita akan
untuk membuat pembolehubah yang dipanggil

243
00:11:11,710 --> 00:11:14,580
aplikasi menggunakan kata kunci yang menyewakan,
yang menjadikan pembolehubah,

244
00:11:14,580 --> 00:11:18,210
biarkan App sama React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Bertindak balas adalah perpustakaan dan mempunyai
yang mewujudkan fungsi kelas.

246
00:11:22,609 --> 00:11:24,400
Dan fungsi ini adalah
sedikit kod yang anda

247
00:11:24,400 --> 00:11:29,090
boleh gunakan untuk mewujudkan baru
jenis Bertindak balas komponen.

248
00:11:29,090 --> 00:11:32,780
Dan sebagainya React.createClass
menjadikan komponen,

249
00:11:32,780 --> 00:11:35,270
dan komponen ini akan
dapat melakukan barangan.

250
00:11:35,270 --> 00:11:40,460
Perkara utama yang boleh dilakukan adalah menjadikan
sesuatu, menjadikan sebagai fungsi.

251
00:11:40,460 --> 00:11:44,500
>> Sekali lagi, jika indeks ini tidak jelas kepada
anda, saya cadangkan anda pergi JS untuk kucing

252
00:11:44,500 --> 00:11:45,682
website saya.

253
00:11:45,682 --> 00:11:47,710
Adakah itu dizum dalam cukup baik?

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

255
00:11:48,490 --> 00:11:50,670
>> Jadi setiap keperluan komponen
mempunyai fungsi memberi.

256
00:11:50,670 --> 00:11:53,010
Yang menyebabkan fungsi berkata,
apa yang saya mencetak pada skrin?

257
00:11:53,010 --> 00:11:54,760
Tetapi sistem tersebut adalah
sia-sia jika tidak

258
00:11:54,760 --> 00:11:58,060
tahu apa yang perlu mencetak pada skrin, jadi
anda perlu mempunyai fungsi memberi.

259
00:11:58,060 --> 00:12:01,904
>> Jadi dalam hal memberi, anda
hanya perlu kembali beberapa HTML.

260
00:12:01,904 --> 00:12:03,820
Dan apa yang sejuk adalah bahawa
ada perkara yang dipanggil

261
00:12:03,820 --> 00:12:08,660
Membutuhkan, yang merupakan lanjutan daripada
JavaScript yang digunakan oleh bertindak balas.

262
00:12:08,660 --> 00:12:11,845
Ia membolehkan anda menulis HTML dalam
daripada anda JavaScript, yang

263
00:12:11,845 --> 00:12:13,970
bunyi jenis pelik apabila
anda mula berfikir tentang hal itu,

264
00:12:13,970 --> 00:12:15,553
tetapi ia membuat banyak akal selepas itu.

265
00:12:15,553 --> 00:12:17,430
Oleh itu, kita boleh melakukan ini.

266
00:12:17,430 --> 00:12:21,360
Jika anda biasa dengan HTML, saya tahu
kita mempunyai div dengan tujuan umum

267
00:12:21,360 --> 00:12:22,790
bekas untuk barangan.

268
00:12:22,790 --> 00:12:26,380
Kita boleh kembali div, dan di dalam
div ini, kita boleh meletakkan barangan.

269
00:12:26,380 --> 00:12:32,390
>> Katakan kita ingin menjadikan hanya
yang Belakang lurus-up untuk sekarang.

270
00:12:32,390 --> 00:12:34,890
Belakang, saya akan berkata,
akan mempunyai soalan dan jawapan.

271
00:12:34,890 --> 00:12:37,530
Jadi di dalam div ini, mari kita
mencetak perenggan

272
00:12:37,530 --> 00:12:42,155
yang mengatakan question-- Apakah
jawapan muktamad untuk hidup, alam semesta?

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

274
00:12:47,640 --> 00:12:50,345
Dan kemudian jawapannya adalah
akan menjadi, sudah tentu, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Yang tidak pernah datang dengan baik sama sekali.

277
00:12:59,730 --> 00:13:04,164
Ya, jadi pada dasarnya anda boleh benar-benar
menulis HTML dalam anda JavaScript.

278
00:13:04,164 --> 00:13:06,330
Dan ini akan menjadi
dicetak ke dalam skrin.

279
00:13:06,330 --> 00:13:08,250
Jadi mari kita mencubanya.

280
00:13:08,250 --> 00:13:09,520
>> Oleh itu, kita mempunyai komponen kami.

281
00:13:09,520 --> 00:13:12,210
Kita perlu memberitahu Bertindak balas untuk meletakkan
komponen pada skrin

282
00:13:12,210 --> 00:13:18,990
supaya React.render, jadi melihat bahawa kita
merawat aplikasi seperti apa-apa unsur lain.

283
00:13:18,990 --> 00:13:21,010
Kami menulis kerana ia adalah elemen HTML.

284
00:13:21,010 --> 00:13:25,100
Seperti daripada berkata seperti img
untuk imej atau p perenggan,

285
00:13:25,100 --> 00:13:28,120
anda menulis App, jadi App adalah
dilayan seperti elemen HTML.

286
00:13:28,120 --> 00:13:30,380
Seperti yang saya katakan sebelum ini, ia
elemen pada steroid.

287
00:13:30,380 --> 00:13:32,870
>> Jadi, anda boleh menjadikan App, dan anda
memberikan tempat untuk meletakkannya.

288
00:13:32,870 --> 00:13:37,170
Dan ini adalah bagaimana anda boleh
memberitahu ia di mana untuk meletakkan ia.

289
00:13:37,170 --> 00:13:46,200
Aku telah mendapat seorang div mudah pada
Laman dipanggil dengan ID atas laman,

290
00:13:46,200 --> 00:13:48,300
dan di mana yang
elemen akan pergi.

291
00:13:48,300 --> 00:13:49,841
>> Dan kami tidak akan berjalan dengan HTML.

292
00:13:49,841 --> 00:13:53,145
Pada dasarnya ini akan mendapat
diletakkan di dalam elemen halaman ini

293
00:13:53,145 --> 00:13:54,270
yang kita ada pada skrin.

294
00:13:54,270 --> 00:13:59,210
Jadi ia berjalan kod ini, dan ia menarik ini
perkara pada skrin, jadi di sini kita.

295
00:13:59,210 --> 00:14:01,770
Kami jadikan Bertindak balas komponen pertama kami.

296
00:14:01,770 --> 00:14:08,000
>> Jadi hanya sebagai recap, kita perlahan-lahan dibuat
jenis baru komponen, bukan?

297
00:14:08,000 --> 00:14:10,145
Itulah yang React.createClass.

298
00:14:10,145 --> 00:14:12,680
Dan dalam komponen itu, kami
diceritakannya apa yang perlu dilakukan.

299
00:14:12,680 --> 00:14:15,590
Apabila komponen ini adalah untuk
dicetak ke skrin,

300
00:14:15,590 --> 00:14:19,300
ia akan mencetak div dengan
dua perenggan di dalamnya.

301
00:14:19,300 --> 00:14:24,460
>> Dan apa yang kami lakukan, kami membuat aplikasi baru
menggunakan notasi sudut aplikasi kurungan.

302
00:14:24,460 --> 00:14:27,160
Kami diberitahu ia meletakkannya
dalam elemen halaman.

303
00:14:27,160 --> 00:14:29,867
Dan supaya apa yang saya lakukan, ia mewujudkan
aplikasi baru dari template itu.

304
00:14:29,867 --> 00:14:31,200
Dan kemudian saya diberitahu ia untuk menjadikannya.

305
00:14:31,200 --> 00:14:33,680
Oleh itu, ia berkata, OK, aplikasi,
apa yang perlu saya mencetak?

306
00:14:33,680 --> 00:14:36,970
App kata, pergi mencetak div a
dengan dua perenggan di dalamnya.

307
00:14:36,970 --> 00:14:40,420
Dan Voilà, ada div kami dengan
dua perenggan di dalamnya.

308
00:14:40,420 --> 00:14:43,180
Akal setakat ini?

309
00:14:43,180 --> 00:14:46,690
>> Jadi, sekali lagi, seluruh cabaran Bertindak balas
hanya mengetahui bagaimana untuk membuat komponen.

310
00:14:46,690 --> 00:14:48,500
Bagaimana untuk membuat
komponen bekerjasama.

311
00:14:48,500 --> 00:14:51,780
Sekarang kita telah dibuat pertama kami
komponen, mari kita kembali

312
00:14:51,780 --> 00:14:54,284
dan membuat komponen disesuaikan.

313
00:14:54,284 --> 00:14:56,700
Jadi, anda tahu bagaimana dalam HTML anda
boleh memberi kelas butang anda?

314
00:14:56,700 --> 00:14:59,146
Anda boleh memberi sauh anda href itu.

315
00:14:59,146 --> 00:15:00,770
Anda boleh memberi input anda jenis, bukan?

316
00:15:00,770 --> 00:15:04,740
Anda boleh memberi lebih adat
hartanah untuk semua unsur-unsur anda

317
00:15:04,740 --> 00:15:06,490
untuk menjadikannya lebih menarik.

318
00:15:06,490 --> 00:15:09,030
Dan kita sebenarnya boleh melakukan
perkara sama.

319
00:15:09,030 --> 00:15:17,500
>> Katakan kita mahu kami
aplikasi untuk pergi menyebabkan sebarang kad.

320
00:15:17,500 --> 00:15:19,630
Pada masa ini kami hanya
diberikan kad hardcoded.

321
00:15:19,630 --> 00:15:22,530
Kita tahu terdapat hanya satu
kad ia boleh lakukan, jadi kami

322
00:15:22,530 --> 00:15:25,960
akan cuba menukar ini kini begitu
bahawa kita hanya boleh memberikan beberapa kad.

323
00:15:25,960 --> 00:15:27,410
Ia akan mencetak kad.

324
00:15:27,410 --> 00:15:29,380
>> Anda patut mencuba dan membuat anda
komponen tujuan yang sangat umum.

325
00:15:29,380 --> 00:15:31,654
Jadi cara ini saya boleh e-mel
ini kawan saya dan menjadi seperti,

326
00:15:31,654 --> 00:15:33,820
apa Belakang anda mempunyai,
hanya makan ke sini,

327
00:15:33,820 --> 00:15:35,290
dan ia akan melakukannya dengan sendirinya.

328
00:15:35,290 --> 00:15:37,650
Anda boleh meletakkan lain
perkara dalam aplikasi anda sendiri.

329
00:15:37,650 --> 00:15:40,600
>> Tetapi pertama, mari kita memecahkan ini
kepada dua komponen,

330
00:15:40,600 --> 00:15:44,500
tetapi kita mahu untuk memisahkan kad
percetakan sebahagian dari bahagian aplikasi yang sebenar.

331
00:15:44,500 --> 00:15:46,660
Jadi apa yang boleh kita lakukan ialah kita
boleh menukar ini dari App

332
00:15:46,660 --> 00:15:51,300
untuk CardView, hanya
nama baru untuk aplikasi,

333
00:15:51,300 --> 00:15:54,450
dan kita boleh membuat yang baru
komponen dipanggil App,

334
00:15:54,450 --> 00:15:56,336
tidak boleh dikelirukan dengan App lama.

335
00:15:56,336 --> 00:16:00,730
Kami telah mendapat createClass,
dan seperti dalam HTML,

336
00:16:00,730 --> 00:16:03,590
anda boleh sarang Bertindak balas komponen
dalam satu sama lain.

337
00:16:03,590 --> 00:16:16,430
>> Jadi dalam fungsi menyebabkan ini,
fungsi pulangan CardView,

338
00:16:16,430 --> 00:16:18,234
dan ini adalah perkara yang sama.

339
00:16:18,234 --> 00:16:19,400
Lihat mengapa ia adalah perkara yang sama?

340
00:16:19,400 --> 00:16:22,590
Bukannya menjadikan hanya aplikasi yang
mempunyai div dan berpasangan di dalamnya,

341
00:16:22,590 --> 00:16:26,194
aplikasi itu menyebabkan CardView, dan
CardView telah menjadikan div dan ayat.

342
00:16:26,194 --> 00:16:29,110
Jadi ini adalah contoh pertama kami
unsur-unsur yang bersarang di dalam satu sama lain.

343
00:16:29,110 --> 00:16:32,177
Adakah ini masuk akal?

344
00:16:32,177 --> 00:16:33,760
Jadi, sekali lagi, kita mempunyai unsur CardView.

345
00:16:33,760 --> 00:16:37,250
Kami mempunyai unsur-unsur aplikasi
bahawa ia lebih besar daripada.

346
00:16:37,250 --> 00:16:40,990
>> OK, jadi kami mahu kami CardView-- jika anda
memberikan CardView baik kad tertentu,

347
00:16:40,990 --> 00:16:43,370
ia akan mencetak untuk anda, bukan?

348
00:16:43,370 --> 00:16:48,050
Jadi pertama, kita perlu membuat kad,
jadi mari kita membuat objek kad.

349
00:16:48,050 --> 00:17:02,930
Oleh itu, marilah kad saya equal--
jika anda semua biasa,

350
00:17:02,930 --> 00:17:05,260
ini hanya membuat notasi
membantah dalam JavaScript.

351
00:17:05,260 --> 00:17:09,280
Ia adalah jenis seperti struct
dalam C, jadi kami membuat kad,

352
00:17:09,280 --> 00:17:15,920
dan jadi sekarang kita boleh lulus kad ini sebagai
harta atau sebagai sifat dalam HTML

353
00:17:15,920 --> 00:17:17,290
istilah untuk aplikasi kami.

354
00:17:17,290 --> 00:17:20,210
Oleh itu, kita boleh melakukan ini, App
kad sama MyCard.

355
00:17:20,210 --> 00:17:23,200
>> Anda tahu bagaimana dalam input, yang anda lakukan
jenis input teks sama atau butang

356
00:17:23,200 --> 00:17:25,240
kelas bersamaan btn untuk bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Idea yang sama, App kad equals--
anda perlu meletakkan pendakap sini--

358
00:17:29,500 --> 00:17:33,830
Kad aplikasi sama MyCard, jadi ini
mengatakan kita mempunyai objek kad ini.

359
00:17:33,830 --> 00:17:39,149
Saya akan lulus sebagai
harta kepada komponen aplikasi.

360
00:17:39,149 --> 00:17:41,440
Dan komponen aplikasi ini akan
boleh mengakses dan melakukan

361
00:17:41,440 --> 00:17:43,580
perkara yang menarik dengan.

362
00:17:43,580 --> 00:17:47,650
>> Jadi aplikasi kami akan menjadi
diberikan kad, jadi buat masa ini,

363
00:17:47,650 --> 00:17:49,980
mari kita mempunyai aplikasi yang hanya memberikan
kad untuk CardView yang

364
00:17:49,980 --> 00:17:53,110
sendiri kerana seperti aplikasi tidak
akan tahu apa yang perlu dilakukan dengan ia,

365
00:17:53,110 --> 00:17:54,850
jadi kita hanya akan memberikan kepada CardView itu.

366
00:17:54,850 --> 00:18:00,050
Oleh itu, kita akan lulus ia yang
Cara yang sama, kad sama,

367
00:18:00,050 --> 00:18:05,426
dan sebagainya setiap komponen boleh mengakses
perkara-perkara yang telah diberikan kepadanya.

368
00:18:05,426 --> 00:18:07,800
Mereka boleh mengakses ciri-ciri
yang telah diberikan kepadanya

369
00:18:07,800 --> 00:18:09,470
menggunakan sintaks ini, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Jadi apa yang berlaku di sini adalah
anda mempunyai objek MyCard itu.

372
00:18:14,920 --> 00:18:18,250
Anda lulus ke dalam aplikasi
menggunakan App kad sama MyCard.

373
00:18:18,250 --> 00:18:21,420
Bahawa objek kad diberikan kepada aplikasi anda.

374
00:18:21,420 --> 00:18:24,400
Aplikasi ini boleh mengaksesnya
sebagai this.props.card.

375
00:18:24,400 --> 00:18:28,780
Ia adalah jenis seperti imej
mengetahui apa punca ia adalah.

376
00:18:28,780 --> 00:18:31,972
>> Aplikasi ini mengetahui apa yang ia kad
adalah, dan ia boleh melakukan barangan dengannya.

377
00:18:31,972 --> 00:18:32,930
Ia boleh melakukan pengiraan.

378
00:18:32,930 --> 00:18:35,290
Ia boleh membuat keputusan berdasarkan jauh daripada itu.

379
00:18:35,290 --> 00:18:39,950
>> Buat masa ini, saya akan lulus
this.props.card ke atas CardView.

380
00:18:39,950 --> 00:18:43,420
Akal setakat ini?

381
00:18:43,420 --> 00:18:45,210
Ia akan lebih masuk akal sekarang.

382
00:18:45,210 --> 00:18:46,990
>> OK, jadi sekarang kita berada di CardView.

383
00:18:46,990 --> 00:18:51,719
CardView kami, memandangkan kad, sekiranya
mencetak soalan dan jawapan itu.

384
00:18:51,719 --> 00:18:54,510
Pada masa ini kami hanya dicetak beberapa
soalan hardcoded jawab.

385
00:18:54,510 --> 00:18:57,720
Kita perlu memikirkan out-- kita perlu
untuk meminta kad yang mereka memberi kami

386
00:18:57,720 --> 00:19:01,360
apakah soalan dan jawapan, dan
kemudian mencetak ini keluar ke skrin.

387
00:19:01,360 --> 00:19:02,470
>> Oleh itu, kita boleh lakukan ini di sini.

388
00:19:02,470 --> 00:19:06,135
Dalam menjadikan begin-- pertama melakukan sama.

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

390
00:19:08,710 --> 00:19:13,050
Jadi apa yang kita lakukan di sini adalah kita tahu bahawa
kad itu diberikan kepada kita untuk harta,

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

392
00:19:13,580 --> 00:19:15,930
Ia diberikan kepada kita sebagai input.

393
00:19:15,930 --> 00:19:19,440
Seperti ia hampir seperti
hujah untuk fungsi.

394
00:19:19,440 --> 00:19:22,810
Kad ini adalah hujah
hampir ke CardView ini.

395
00:19:22,810 --> 00:19:25,239
>> Kami akan mengeluarkan itu, dan meletakkan
ia ke dalam soalan berubah-ubah.

396
00:19:25,239 --> 00:19:27,280
Pastikan jawapan yang pergi
kepada jawapan yang berubah-ubah.

397
00:19:27,280 --> 00:19:31,130
Menggesa bahawa kad untuk menjawab.

398
00:19:31,130 --> 00:19:35,072
Dan sekarang yang kita ada ini,
bukannya mencetak teks itu,

399
00:19:35,072 --> 00:19:37,030
kita akan mencetak
apa sahaja yang mereka berikan kepada kami.

400
00:19:37,030 --> 00:19:43,580
>> Jadi ini stuff-- jadi kita akan
untuk memadamkan Soalan Jawab.

401
00:19:43,580 --> 00:19:46,380
Mari kita lihat jika ia berfungsi.

402
00:19:46,380 --> 00:19:52,800
Sejuk, jadi mari kita melangkah melaluinya
sekali lagi hanya untuk memastikan.

403
00:19:52,800 --> 00:20:00,470
>> Jadi kad saya adalah objek kad, dan kami
memberikan kad ke aplikasi.

404
00:20:00,470 --> 00:20:04,790
Dan aplikasi yang akan mengambil
kad dan memberikannya kepada orang CardView.

405
00:20:04,790 --> 00:20:09,190
Dan CardView ini mengatakan, jika anda
memberi saya apa-apa objek Belakang,

406
00:20:09,190 --> 00:20:11,920
Saya akan mencetak soalan yang
dan jawapannya, bukan?

407
00:20:11,920 --> 00:20:14,590
>> Jadi apa yang saya boleh lakukan adalah saya boleh
menghantar kod ini, yang pertama

408
00:20:14,590 --> 00:20:16,580
seperti 10 baris kod saya, untuk kawan saya.

409
00:20:16,580 --> 00:20:18,820
Dia boleh menanamkan dalam
permohonan sendiri.

410
00:20:18,820 --> 00:20:27,200
Dan selama ia melakukan perkara yang sama,
seperti kad CardView sama ini,

411
00:20:27,200 --> 00:20:30,580
selama ia dicipta CardView yang
dan memberikannya maklumat yang betul,

412
00:20:30,580 --> 00:20:31,987
dia boleh menyebabkan kad sendiri.

413
00:20:31,987 --> 00:20:34,320
Dan jadi cara ini, ia adalah yang benar-benar
cara yang sejuk untuk anda untuk membina

414
00:20:34,320 --> 00:20:35,906
komponen yang digunakan antara satu sama lain, bukan?

415
00:20:35,906 --> 00:20:38,280
Kad ini, saya boleh menerbitkan
CardView ini di internet,

416
00:20:38,280 --> 00:20:39,790
dan orang-orang akan dapat menggunakannya.

417
00:20:39,790 --> 00:20:45,070
Jadi, pada asasnya, ia seperti salah satu daripada
fungsi standard di perpustakaan C.

418
00:20:45,070 --> 00:20:47,280
>> Ia adalah fungsi di mana
seseorang telah menulis.

419
00:20:47,280 --> 00:20:48,419
Anda memberikan input tertentu.

420
00:20:48,419 --> 00:20:49,710
Ia akan menghasilkan output tertentu.

421
00:20:49,710 --> 00:20:50,890
Anda tidak peduli bagaimana ia berfungsi secara dalaman.

422
00:20:50,890 --> 00:20:53,790
Selama anda memberikan hak
input, ia akan membuat output yang betul.

423
00:20:53,790 --> 00:20:57,850
>> Dan komponen yang boleh menjadi
memikirkan cara yang sama.

424
00:20:57,850 --> 00:21:00,280
CardView ini adalah seperti
fungsi perpustakaan.

425
00:21:00,280 --> 00:21:03,400
Jika anda memberikan beberapa kad
sebagai harta, IA AKAN

426
00:21:03,400 --> 00:21:05,095
mencetak kandungan kad itu.

427
00:21:05,095 --> 00:21:16,820
Seperti jika saya menukar kad saya ke
bukannya menjadi seperti apa yang 5 ditambah 37,

428
00:21:16,820 --> 00:21:19,210
ia akan mengemas kini dengan sewajarnya.

429
00:21:19,210 --> 00:21:21,955
Jadi hanya dengan menukar input,
ia mendapat output tertentu.

430
00:21:21,955 --> 00:21:24,830
Jadi, anda boleh berfikir komponen hampir
sebagai fungsi dengan cara ini, yang

431
00:21:24,830 --> 00:21:25,920
anda boleh meletakkan bersama-sama.

432
00:21:25,920 --> 00:21:29,440
Anda mendapatkan input, seperti CardView ini
sebagai input, anda akan mendapat output.

433
00:21:29,440 --> 00:21:31,900
Dalam kes ini, output HTML.

434
00:21:31,900 --> 00:21:34,404
Akal setakat ini?

435
00:21:34,404 --> 00:21:36,890
Sejuk, jadi sekali lagi, harta adalah
bagaimana anda boleh memberikan maklumat

436
00:21:36,890 --> 00:21:40,900
masuk dan keluar dari komponen.

437
00:21:40,900 --> 00:21:42,740
>> OK, jadi mari kita membuat ini
Perkara yang interaktif.

438
00:21:42,740 --> 00:21:44,450
Buat masa ini ia adalah jenis membosankan.

439
00:21:44,450 --> 00:21:45,520
Apa yang [didengar]?

440
00:21:45,520 --> 00:21:48,210
Anda boleh mencetak beberapa di luar,
tetapi itu semua ia boleh lakukan.

441
00:21:48,210 --> 00:21:51,550
>> Jadi mari kita kembali kepada
soalan lama hanya untuk sekarang.

442
00:21:51,550 --> 00:21:54,405
OK, jadi sekarang komponen ini
membosankan kerana semua yang mereka lakukan,

443
00:21:54,405 --> 00:21:55,030
mereka mendapat input.

444
00:21:55,030 --> 00:21:56,100
Mereka membuat output, bukan?

445
00:21:56,100 --> 00:21:57,049
Itulah jenis membosankan.

446
00:21:57,049 --> 00:21:59,090
Kami mahu kami
komponen untuk dapat mempunyai

447
00:21:59,090 --> 00:22:02,150
beberapa jenis keadaan dalaman,
seperti ingat sesuatu.

448
00:22:02,150 --> 00:22:05,320
>> Untuk Belakang, untuk
Sebagai contoh, jenis menyatakan maksud

449
00:22:05,320 --> 00:22:07,550
mungkin anda mahu
ingat untuk flashcard yang?

450
00:22:07,550 --> 00:22:09,740
Apa status sementara
mungkin anda mahu ingat

451
00:22:09,740 --> 00:22:12,491
yang flashcard dalam aplikasi Belakang?

452
00:22:12,491 --> 00:22:13,990
PENONTON: Sama ada ia telah dibalik?

453
00:22:13,990 --> 00:22:14,990
NEEL MEHTA: Ya, betul.

454
00:22:14,990 --> 00:22:17,665
Jadi, anda mungkin mahu menyimpan
mengesan adakah anda menghadapi atau tidak

455
00:22:17,665 --> 00:22:19,100
anda menghadap ke bawah pada kad.

456
00:22:19,100 --> 00:22:23,420
Di Facebook, sebagai contoh, anda akan
mahu ingat di mana dalam suapan berita

457
00:22:23,420 --> 00:22:25,870
adakah anda suka atau siapa profil
yang anda lakukan sekarang.

458
00:22:25,870 --> 00:22:30,127
>> Kepada Rasul, seperti apa yang teks anda
menaip dalam kotak input, bukan?

459
00:22:30,127 --> 00:22:31,710
Jika anda memuat semula halaman, ia akan hilang.

460
00:22:31,710 --> 00:22:32,793
Tetapi anda tidak benar-benar peduli.

461
00:22:32,793 --> 00:22:33,770
Ia hanya sementara.

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

463
00:22:34,548 --> 00:22:36,152
>> PENONTON: [didengar]

464
00:22:36,152 --> 00:22:38,360
NEEL MEHTA: Seperti kilat
kad, seperti anda boleh melihat

465
00:22:38,360 --> 00:22:40,290
sisi soalan atau bahagian jawapannya?

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

467
00:22:41,070 --> 00:22:43,270
>> NEEL MEHTA: Seperti yang
Belakang dua berat sebelah, bukan?

468
00:22:43,270 --> 00:22:46,370
Ya, jadi anda mahu
mempunyai idea ini sekarang

469
00:22:46,370 --> 00:22:50,370
Saya mempunyai ciri-ciri, yang seperti input,
tetapi negeri, yang sementara, uh,

470
00:22:50,370 --> 00:22:51,839
di mana anda berada di laman yang, bukan?

471
00:22:51,839 --> 00:22:54,380
Sekali lagi, saya katakan dalam Facebook
Rasulullah, saya mempunyai seperti yang orang

472
00:22:54,380 --> 00:22:56,550
anda lihat Facebook
atau siapa profil, bukan?

473
00:22:56,550 --> 00:22:58,030
>> Ini hanya sementara.

474
00:22:58,030 --> 00:23:01,200
Adalah penting untuk menunjukkan pengguna
apa yang sedang berlaku, tetapi semula halaman.

475
00:23:01,200 --> 00:23:02,250
Ia tidak benar-benar perkara itu.

476
00:23:02,250 --> 00:23:04,530
Jadi ia adalah keadaan sementara,
jadi kita semua ia negeri.

477
00:23:04,530 --> 00:23:06,250
>> Jadi, sekali lagi, ada negeri dan prop.

478
00:23:06,250 --> 00:23:09,084
Props adalah input yang diberikan
dari sumber data anda.

479
00:23:09,084 --> 00:23:10,250
Negeri adalah sama seperti mungkir.

480
00:23:10,250 --> 00:23:13,700
Ia sama seperti barangan yang
membuat perkara yang interaktif.

481
00:23:13,700 --> 00:23:17,720
>> Jadi dalam kita CardView-- mari kita
CardView-- supaya kami ia adalah baik.

482
00:23:17,720 --> 00:23:21,420
Apa yang kita akan lakukan di sini, kita akan
menyentuh CardView dan hanya CardView.

483
00:23:21,420 --> 00:23:25,105
Dan jadi kawan saya yang mendapat ini, mereka
tidak akan melihat apa-apa perbezaan.

484
00:23:25,105 --> 00:23:27,230
Mereka tidak akan mempunyai untuk menukar
mana-mana kod mereka sendiri,

485
00:23:27,230 --> 00:23:29,410
tetapi mereka akan melihat mereka
CardView mendapat souped.

486
00:23:29,410 --> 00:23:31,270
Itulah sebahagian yang baik tentang komponen.

487
00:23:31,270 --> 00:23:35,290
>> OK, jadi dalam CardView kami, mari kita cuba dan
mengesan sama ada kita fasa sehingga

488
00:23:35,290 --> 00:23:36,560
atau menghadap ke bawah.

489
00:23:36,560 --> 00:23:40,480
Dalam Bertindak balas kita melakukan ini dengan terlebih dahulu
menyatakan keadaan awal.

490
00:23:40,480 --> 00:23:42,070
Di manakah kad bermula?

491
00:23:42,070 --> 00:23:48,480
>> Jadi fungsi yang dipanggil getInitialState
berfungsi, dan kita kembali objek.

492
00:23:48,480 --> 00:23:53,310
Objek ini mengandungi beberapa negeri, dan
keadaan hanyalah pasangan kunci-nilai.

493
00:23:53,310 --> 00:23:56,950
Seperti dalam mengarahkan, anda mempunyai kunci dan
nilai, anda perlu seperti nama adalah rentetan.

494
00:23:56,950 --> 00:24:01,410
>> Dalam kes ini, katakan hadapan adalah benar.

495
00:24:01,410 --> 00:24:03,760
Ini mengatakan bahawa kita mempunyai sebuah negara.

496
00:24:03,760 --> 00:24:06,570
Salah satu komponen di negeri ini
adalah sifat dipanggil depan.

497
00:24:06,570 --> 00:24:09,649
[Didengar], jadi secara lalai,
kita berada di bahagian depan kad,

498
00:24:09,649 --> 00:24:11,440
dan kita boleh menukar ini
seperti yang kita flip kad.

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

500
00:24:13,380 --> 00:24:18,190
>> OK, jadi dalam memberi, sekarang, kita berada
menunjukkan soal jawab.

501
00:24:18,190 --> 00:24:20,860
Sekarang apa yang patut kita buat
adalah menunjukkan soalan

502
00:24:20,860 --> 00:24:24,370
jika kita berada di bahagian depan kad supaya
jawapannya adalah untuk bahagian belakang kad.

503
00:24:24,370 --> 00:24:26,850
Itulah sebabnya anda semua membuat
kad interaktif.

504
00:24:26,850 --> 00:24:28,100
Jadi mari kita cuba dan ini di sini.

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

506
00:24:31,600 --> 00:24:33,620
Well, pertama hanya membuat pembolehubah.

507
00:24:33,620 --> 00:24:37,790
Kita boleh bertanya sekarang this.state.front.

508
00:24:37,790 --> 00:24:42,010
Kami mengakses menyatakan kita yang sama
prop akses, jadi this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Jika kita depan, ketika itu teks
adalah this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Jika kita berada di hadapan
kad, kita akan cuba merebut

512
00:24:51,360 --> 00:24:52,485
soalan dari kad.

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

514
00:24:54,782 --> 00:24:57,240
Jika tidak, jika kita berada di belakang
kad, apa yang kita lakukan?

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

516
00:25:01,830 --> 00:25:02,750
>> PENONTON: Jawapannya?

517
00:25:02,750 --> 00:25:05,041
>> NEEL MEHTA: Ya, jadi teks
sama this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Tetapi jika anda perhatikan, kita menggunakan
negeri untuk membuat keputusan

520
00:25:10,930 --> 00:25:14,420
kerana sekarang komponen
akan kelihatan berbeza

521
00:25:14,420 --> 00:25:16,710
berdasarkan kira bagaimana berinteraksi dengannya.

522
00:25:16,710 --> 00:25:20,355
Jadi, daripada mencetak ini,
kita hanya akan mencetak teks.

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

524
00:25:25,270 --> 00:25:28,650
Sejuk, jadi sekarang, seperti yang anda lihat,
kita lihat sahaja soalan.

525
00:25:28,650 --> 00:25:37,720
Dan jika saya mengubah keadaan di sini secara manual
ke hadapan adalah palsu kita akan mendapat 42 kembali.

526
00:25:37,720 --> 00:25:39,720
>> Jadi, sekali lagi, komponen ini
mempunyai kerajaannya sendiri.

527
00:25:39,720 --> 00:25:43,440
Seperti butang yang tahu sama ada
ia telah ditekan atau tidak,

528
00:25:43,440 --> 00:25:46,080
Perkara ini yang tahu apa yang ada di
depan atau di belakang.

529
00:25:46,080 --> 00:25:48,320
Secara lalai, ia adalah di bahagian depan.

530
00:25:48,320 --> 00:25:50,840
Dan kemudian jika ia di bahagian depan,
kami akan mencetak soalan.

531
00:25:50,840 --> 00:25:53,106
Jika ia di belakang, kita akan
mencetak jawapannya.

532
00:25:53,106 --> 00:25:54,980
Jadi, sekali lagi, maklumat yang
diberikan adalah sama.

533
00:25:54,980 --> 00:25:59,090
Ia hanya kelihatan berbeza
berdasarkan bagaimana anda program itu.

534
00:25:59,090 --> 00:26:02,670
Jadi, sebagai contoh, Facebook Messenger,
walaupun anda mendapatkan sumber data yang sama,

535
00:26:02,670 --> 00:26:05,170
ia mungkin kelihatan berbeza
kerana negeri ini adalah berbeza.

536
00:26:05,170 --> 00:26:08,421
Anda sedang melihat
mesej orang yang berbeza ini.

537
00:26:08,421 --> 00:26:10,930
>> OK, jadi ini adalah semua baik dan
baik, tetapi kini apa yang sebenarnya

538
00:26:10,930 --> 00:26:15,940
menjadikan kita dapat berubah, sama ada
kad kami adalah depan atau belakang.

539
00:26:15,940 --> 00:26:19,010
Kita boleh melakukan ini dengan menambah flip
butang, butang untuk kad yang

540
00:26:19,010 --> 00:26:22,950
akan flip kad jika ia [didengar].

541
00:26:22,950 --> 00:26:31,770
Jadi mari kita menambah butang di sini, ini
butang, dan butang ini akan berkata flip.

542
00:26:31,770 --> 00:26:35,650
>> Dan sebagainya sekarang, ia
tidak berbuat apa-apa.

543
00:26:35,650 --> 00:26:37,075
Ia hanya kelihatan bagus.

544
00:26:37,075 --> 00:26:43,650
Apa yang boleh kita lakukan ialah kita boleh menambah satu klik
pengendali, onClick sama this.flip,

545
00:26:43,650 --> 00:26:44,820
dan kami akan menentukan flip kemudian.

546
00:26:44,820 --> 00:26:47,120
Tetapi pada dasarnya, onClick
adalah fungsi yang

547
00:26:47,120 --> 00:26:48,675
mendapat dipanggil apabila pengguna klik ia.

548
00:26:48,675 --> 00:26:52,330
>> Jadi butang akan tahu
apabila ia telah diklik.

549
00:26:52,330 --> 00:26:54,750
Pergi ia telah diklik,
ia akan flip kad.

550
00:26:54,750 --> 00:26:58,382
Ia adalah jenis seperti anda
penghantaran pizza lelaki.

551
00:26:58,382 --> 00:27:01,590
Anda seperti, baiklah, apabila seseorang
memanggil saya, saya akan menyampaikan pizza, bukan?

552
00:27:01,590 --> 00:27:03,420
>> Anda mendaftar pendengar ini.

553
00:27:03,420 --> 00:27:04,530
Anda mendengar untuk peristiwa.

554
00:27:04,530 --> 00:27:07,657
Anda dapat dipanggil, dan apabila
Sekiranya berlaku, anda melakukan sesuatu.

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

556
00:27:08,240 --> 00:27:11,480
Dalam kes ini, apabila anda
klik, anda flip kad.

557
00:27:11,480 --> 00:27:14,560
>> Dan dengan itu kita perlu menentukan
fungsi yang akan flip kad,

558
00:27:14,560 --> 00:27:17,930
jadi kami akan menulis hak yang
di sini, flip fungsi.

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

560
00:27:20,850 --> 00:27:23,680
Dan jadi apa yang anda fikir flip akan lakukan?

561
00:27:23,680 --> 00:27:27,180
Sekali lagi ini mendapat dipanggil apabila
kita klik butang flip.

562
00:27:27,180 --> 00:27:29,406
Apakah yang perlu fungsi flip lakukan?

563
00:27:29,406 --> 00:27:34,136
>> PENONTON: Tukar this.state.front
dari benar kepada palsu, palsu kepada benar.

564
00:27:34,136 --> 00:27:38,420
>> NEEL MEHTA: Ya, jadi mengambil apa sahaja
this.front is-- negeri depan.

565
00:27:38,420 --> 00:27:40,930
Mengambil negeri depan, jika
memang benar, membuat ia palsu.

566
00:27:40,930 --> 00:27:42,530
Jika ia palsu, yang benar, bukan?

567
00:27:42,530 --> 00:27:45,330
Jadi mari kita cuba itu.

568
00:27:45,330 --> 00:27:48,240
>> Anda tidak boleh mengubah keadaan
hanya dengan melakukan this.state.

569
00:27:48,240 --> 00:27:50,380
Anda tidak boleh melakukan ini.

570
00:27:50,380 --> 00:27:52,030
Anda tidak boleh berbuat demikian.

571
00:27:52,030 --> 00:27:55,810
Anda perlu menggunakan fungsi
dipanggil this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Jadi, anda boleh mengatakan this.setState hadapan
usus besar di mana ini, sekali lagi, seru

573
00:28:03,230 --> 00:28:04,330
titik bermakna sebaliknya.

574
00:28:04,330 --> 00:28:07,420
Saya rasa jika ini. state.front
adalah benar, ia akan bertukar palsu.

575
00:28:07,420 --> 00:28:09,170
Oleh itu, kita akan menetapkan negeri
dari benar palsu.

576
00:28:09,170 --> 00:28:11,430
Jika ia palsu, kita akan
menetapkan ia palsu kepada benar.

577
00:28:11,430 --> 00:28:17,210
>> Hanya melihat bahawa kita menetapkan dan mendapat sedikit
berbeza, dan jadi mari kita cuba ini.

578
00:28:17,210 --> 00:28:18,675
Bada bing, lihat ini.

579
00:28:18,675 --> 00:28:21,810
Butang flip akan kini
menukar bahagian depan ke belakang negeri.

580
00:28:21,810 --> 00:28:24,990
>> Dan jadi di sini adalah di mana anda melihat
sedikit sedikit keajaiban Bertindak balas.

581
00:28:24,990 --> 00:28:28,420
Seperti kita tidak pernah memberitahu ia ia untuk memberi semula.

582
00:28:28,420 --> 00:28:30,910
Kami tidak pernah diberitahu ia melukis semula apa-apa.

583
00:28:30,910 --> 00:28:32,630
Jika anda melakukan ini
tanpa Bertindak balas, anda akan

584
00:28:32,630 --> 00:28:34,588
telah supaya- suka apabila
butang flip diklik,

585
00:28:34,588 --> 00:28:37,290
anda akan perlu beritahu kepada
secara manual semula menyebabkan, bukan?

586
00:28:37,290 --> 00:28:43,050
>> Bertindak balas adalah benar-benar sejuk di dalam bahawa jika anda
memberikan keadaan tertentu dan hartanah,

587
00:28:43,050 --> 00:28:45,760
ia akan sentiasa memberi
perkara sama.

588
00:28:45,760 --> 00:28:48,690
Dan setelah kita pernah kita berubah
keadaan dan sifat-sifat,

589
00:28:48,690 --> 00:28:50,819
menjadikan semula bertindak balas hanya segala-galanya.

590
00:28:50,819 --> 00:28:52,860
Ia tahu bahawa ada
satu-sama-satu-menyurat

591
00:28:52,860 --> 00:28:57,270
antara kerajaan negeri dan parameter dan HTML.

592
00:28:57,270 --> 00:29:00,110
Dan setiap kali apabila salah seorang daripada mereka
perubahan dengan melalui keadaan yang ditetapkan,

593
00:29:00,110 --> 00:29:03,750
ia akan mengubah bagaimana
gaji dituliskan semula.

594
00:29:03,750 --> 00:29:06,650
Dan jadi pada dasarnya Bertindak balas adalah seperti
menunggu anda untuk berubah.

595
00:29:06,650 --> 00:29:09,870
>> Setiap kali ia mengubah sesuatu,
ia akan menyebabkan semula keseluruhan halaman.

596
00:29:09,870 --> 00:29:12,480
Dan jika ia kedengaran tidak cekap,
ia adalah kerana ia akan menjadi,

597
00:29:12,480 --> 00:29:15,050
tetapi bertindak balas menggunakan perkara yang
dipanggil Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
Daripada lukisan halaman secara langsung, ia
menyimpan pokok HTML maya dalam ingatan.

599
00:29:19,950 --> 00:29:23,620
>> Anda tahu, HTML adalah seperti pokok,
seperti struktur data hierarki.

600
00:29:23,620 --> 00:29:28,990
Ia menyimpan pokok palsu dalam ingatan,
dan setiap kali anda mengemaskini halaman,

601
00:29:28,990 --> 00:29:31,940
ia akan menarik palsu lain
pokok, dan ia akan mengira

602
00:29:31,940 --> 00:29:35,120
apa perubahan yang diperlukan untuk membuat
halaman membuat dua pokok yang sama.

603
00:29:35,120 --> 00:29:38,540
Jadi, pada asasnya, ia hampir
menjadikan semula banyak.

604
00:29:38,540 --> 00:29:41,540
Dan kemudian ia hanya suka mengubah
halaman dalam tweak sedikit seperti yang diperlukan,

605
00:29:41,540 --> 00:29:44,240
sehingga sangat, sangat, sangat cekap.

606
00:29:44,240 --> 00:29:46,970
>> Jadi, pada asasnya Bertindak balas akan
setiap kali anda menukar sesuatu,

607
00:29:46,970 --> 00:29:49,010
ia akan semula menyebabkan halaman yang hampir.

608
00:29:49,010 --> 00:29:52,830
Ia akan memikirkan apa yang perlu saya
berubah untuk membuat laman sebenar mencerminkan

609
00:29:52,830 --> 00:29:55,602
halaman maya, dan ia akan berbuat demikian.

610
00:29:55,602 --> 00:29:56,560
Itulah DOM maya.

611
00:29:56,560 --> 00:29:59,350
Ia adalah salah satu yang terbesar
ciri-ciri Bertindak balas.

612
00:29:59,350 --> 00:30:00,880
>> Adakah ini masuk akal?

613
00:30:00,880 --> 00:30:01,540
Ada soalan?

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

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

616
00:30:05,568 --> 00:30:08,969
>> PENONTON: Bagaimana
membandingkan masih MVC

617
00:30:08,969 --> 00:30:10,760
yang kita bercakap tentang
sebelum sumber seperti.

618
00:30:10,760 --> 00:30:13,527
>> NEEL MEHTA: Ya, soalan
adalah bagaimana ia dibandingkan dengan MVC?

619
00:30:13,527 --> 00:30:14,610
Anda ditanya mengenai sumber.

620
00:30:14,610 --> 00:30:16,445
Nah, mari kita bercakap tentang bagaimana ia berfungsi.

621
00:30:16,445 --> 00:30:18,190
>> Dalam MVC, anda akan mengemas kini model.

622
00:30:18,190 --> 00:30:20,560
Dalam kes ini kita akan mempunyai model kad.

623
00:30:20,560 --> 00:30:24,540
Pandangan ini akan mempunyai
butang flip, dan kawalan

624
00:30:24,540 --> 00:30:26,310
akan mempunyai fungsi flip.

625
00:30:26,310 --> 00:30:28,450
Jadi pandangan itu akan memberitahu
pengawal untuk flip flip.

626
00:30:28,450 --> 00:30:30,370
Flip akan memberitahu
model untuk berubah, bukan?

627
00:30:30,370 --> 00:30:33,915
>> Dan apabila anda melakukan MVC, anda
mendengar untuk model untuk berubah,

628
00:30:33,915 --> 00:30:37,150
dan anda semula menyebabkan pandangan yang sewajarnya.

629
00:30:37,150 --> 00:30:39,210
Atau anda hanya perlu suka
mempunyai pengawal.

630
00:30:39,210 --> 00:30:42,418
Tunggu model untuk berubah, dan kemudian
memilih dan memilih sebahagian daripada seperti benda yang

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

632
00:30:44,032 --> 00:30:45,740
Di sini kita mempunyai satu perkara,
tetapi dalam aplikasi besar,

633
00:30:45,740 --> 00:30:48,510
anda perlu suka ingat apa
perubahan di setiap tempat tunggal,

634
00:30:48,510 --> 00:30:50,290
supaya ia sedikit menjengkelkan.

635
00:30:50,290 --> 00:30:53,670
Dan sebagainya Bertindak balas adalah baik
kerana ia mempunyai Shadow Dom.

636
00:30:53,670 --> 00:30:56,040
Ia mampu untuk hanya
menulis semula perkara keseluruhan.

637
00:30:56,040 --> 00:30:58,680
Anda tidak perlu untuk terpilih
seperti meneka apa yang perlu dikemas kini.

638
00:30:58,680 --> 00:31:02,186
>> Di Facebook jika anda suka
mendapat mesej baru, di MVC,

639
00:31:02,186 --> 00:31:04,060
anda akan perlu ingat,
OK, mengubah perkara-perkara

640
00:31:04,060 --> 00:31:06,260
di bahagian atas
halaman, ikon mesej.

641
00:31:06,260 --> 00:31:08,290
Juga pop tetingkap baru di bahagian bawah.

642
00:31:08,290 --> 00:31:10,070
Juga membuat perkara yang baru dalam tetingkap itu.

643
00:31:10,070 --> 00:31:11,060
Juga memainkan bunyi.

644
00:31:11,060 --> 00:31:13,150
>> Itulah banyak barangan
keluar pada masa yang sama.

645
00:31:13,150 --> 00:31:15,320
Dan jadi jika anda tidak
mempunyai Shadow Dom, anda akan

646
00:31:15,320 --> 00:31:18,740
perlu berbuat demikian secara manual kerana
anda tidak boleh menghilangkan seluruh halaman.

647
00:31:18,740 --> 00:31:21,430
Anda tidak mampu, jadi anda perlu
untuk menukar setiap perkara secara manual,

648
00:31:21,430 --> 00:31:23,990
yang benar-benar menjengkelkan dalam MVC.

649
00:31:23,990 --> 00:31:27,640
>> Jadi, untuk menjadi
berjimat cermat, mereka terpilih

650
00:31:27,640 --> 00:31:30,750
mengemas kini halaman, iaitu
cekap, tetapi juga menjengkelkan.

651
00:31:30,750 --> 00:31:34,002
Dalam Bertindak balas, kerana Shadow
Dom, anda akan mendapat kedua-dua perkara secara percuma.

652
00:31:34,002 --> 00:31:35,710
Ia berkesan kerana
daripada Shadow Dom.

653
00:31:35,710 --> 00:31:37,210
Kesesakan mengemaskini halaman.

654
00:31:37,210 --> 00:31:40,292
Ia tidak melakukan manipulasi pokok itu.

655
00:31:40,292 --> 00:31:41,250
Anda mendapatkan kecekapan.

656
00:31:41,250 --> 00:31:45,420
Anda juga mendapat kemudahan penggunaan kerana
jika anda hanya menulis semula keseluruhan halaman,

657
00:31:45,420 --> 00:31:48,970
tetapi anda hanya tahu, faham, perkara-perkara
akan berada di halaman yang di suatu tempat.

658
00:31:48,970 --> 00:31:51,180
Ia mungkin berada di tempat yang berbeza, tetapi
ia akan berada di laman, kan?

659
00:31:51,180 --> 00:31:52,860
Jadi anda hanya diberikan semula
perkara yang keseluruhan hampir,

660
00:31:52,860 --> 00:31:55,540
dan anda mungkin membuat pasangan
perubahan ke halaman itu sendiri.

661
00:31:55,540 --> 00:31:57,850
>> Jadi, sekali lagi, dalam MVC anda
perlu memilih

662
00:31:57,850 --> 00:32:01,840
antara kemudahan penggunaan dan kecekapan,
dan Bertindak balas, anda akan mendapat kedua-duanya.

663
00:32:01,840 --> 00:32:04,020
Jadi ia adalah lebih baik.

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

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

666
00:32:06,676 --> 00:32:12,080
>> OK, jadi mari kita lihat mari kita bercakap
sedikit tentang langkah 4,

667
00:32:12,080 --> 00:32:14,740
bagaimana kita boleh menanamkan komponen.

668
00:32:14,740 --> 00:32:16,260
Oleh itu, kita mempunyai hak ini sekarang.

669
00:32:16,260 --> 00:32:19,420
Kami mempunyai butang sejuk kami sedikit.

670
00:32:19,420 --> 00:32:23,157
Kita boleh flip ia kembali dan
sebagainya, dan itu sahaja yang dilakukan.

671
00:32:23,157 --> 00:32:24,990
Katakan kita mahu
mempunyai komponen lain.

672
00:32:24,990 --> 00:32:28,730
Katakan aplikasi Belakang kami perlu
mengandungi senarai semua kad

673
00:32:28,730 --> 00:32:31,520
yang anda ada, jadi ini bermakna kita
harus mempunyai komponen lain.

674
00:32:31,520 --> 00:32:32,970
Yah, mungkin memanggilnya paparan senarai.

675
00:32:32,970 --> 00:32:36,200
Mari kita membuat paparan senarai yang
wujud bersama dengan CardView,

676
00:32:36,200 --> 00:32:39,680
dan ini paparan senarai dan CardView
akan suka kerja bersama-sama.

677
00:32:39,680 --> 00:32:43,190
Dan anda boleh menggabungkan mereka
untuk membuat aplikasi kami untuk anda.

678
00:32:43,190 --> 00:32:45,160
>> Jadi pertama, mari kita membuat
pasangan lebih kad betul.

679
00:32:45,160 --> 00:32:46,370
Katakan, apa kad?

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

681
00:32:49,619 --> 00:32:51,910
Dan hanya jadi saya tidak perlu
melahirkan anda dengan menaip dalam,

682
00:32:51,910 --> 00:32:53,410
Saya hanya akan menyalin dari sini.

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

684
00:33:01,664 --> 00:33:03,580
Dan jadi saya akan tidak
memberikan hanya satu kad.

685
00:33:03,580 --> 00:33:06,910
Saya akan memberikan pelbagai kad.

686
00:33:06,910 --> 00:33:10,240
Jadi pertama aplikasi
akan memecahkan buat masa ini.

687
00:33:10,240 --> 00:33:14,717
Baiklah, jadi kita akan membuat
ini mampu melakukan pelbagai kad.

688
00:33:14,717 --> 00:33:17,800
Jadi pertama, kita akan memberikan, tidak
hanya satu kad tetapi pelbagai kad,

689
00:33:17,800 --> 00:33:18,700
seperti senarai kad.

690
00:33:18,700 --> 00:33:20,980
Dan dalam kes ini, kami mempunyai tiga daripada mereka.

691
00:33:20,980 --> 00:33:27,280
>> Baiklah, jadi jadi aplikasi adalah
akan mendapat kad senarai,

692
00:33:27,280 --> 00:33:29,870
dan ia akan membuat keputusan yang
satu untuk menunjukkan kepada CardView itu.

693
00:33:29,870 --> 00:33:33,740
The CardView hanya boleh
menyebabkan satu kad, tetapi app

694
00:33:33,740 --> 00:33:37,610
mendapat senarai semua kad, bukan?

695
00:33:37,610 --> 00:33:40,820
>> Oleh itu, apabila anda memikirkan satu
kad untuk diberikan kepada CardView,

696
00:33:40,820 --> 00:33:44,660
bagaimana anda akan rasa anda mungkin boleh
untuk membuat keputusan yang tak kad

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

698
00:33:47,064 --> 00:33:49,980
Untuk memberi anda petunjuk, ia buat sementara waktu
Anda akan melihat kad tertentu.

699
00:33:49,980 --> 00:33:53,260
Jika anda memuat semula halaman, anda akan
hanya kembali kepada kad pertama.

700
00:33:53,260 --> 00:33:55,464
Itu OK kerana ia adalah sementara.

701
00:33:55,464 --> 00:33:56,630
Apa teknik yang boleh kita gunakan?

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

703
00:34:02,534 --> 00:34:08,760
>> PENONTON: Anda boleh membuat pembolehubah
jadi sama seperti anda mempunyai depan.

704
00:34:08,760 --> 00:34:11,989
Adakah ini benar, anda boleh
mempunyai kad semasa sama dengan 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL MEHTA: Ya, jadi kami
mahu mempunyai negeri, bukan?

706
00:34:14,150 --> 00:34:16,080
Anda akan menggunakan negeri dalam
komponen untuk memikirkan

707
00:34:16,080 --> 00:34:17,288
kad mana yang kita mahu untuk mendapatkan.

708
00:34:17,288 --> 00:34:19,290
Seperti kita mempunyai senarai
semua kad, kami akan

709
00:34:19,290 --> 00:34:21,630
menggunakan keadaan untuk memikirkan
salah satu kad yang pertama,

710
00:34:21,630 --> 00:34:23,710
kad kedua, kad ketiga, dan sebagainya.

711
00:34:23,710 --> 00:34:28,760
>> Jadi aplikasi supaya aplikasi akan mendapat
mempunyai fungsi getInitialState itu,

712
00:34:28,760 --> 00:34:35,020
fungsi pulangan getInitialState.

713
00:34:35,020 --> 00:34:39,929
Dan kita hanya akan berkata activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Jadi sekarang aplikasi kami mempunyai negeri itu sendiri.

715
00:34:42,889 --> 00:34:47,179
>> Dan sekarang pada memberi, untuk memikirkan
kad, mari kita pergi ke array

716
00:34:47,179 --> 00:34:49,969
dan merebut perkara yang pada indeks itu.

717
00:34:49,969 --> 00:34:53,580
Pilih kad this.props.cards sama
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Jadi seperti yang anda lihat di sini, prop dan
negeri ini benar-benar bekerja bersama-sama.

720
00:35:00,162 --> 00:35:08,990
Jadi sekarang kita mempunyai activeCard kami,
kita akan memanggilnya activeCard,

721
00:35:08,990 --> 00:35:10,470
dan mari kita lihat jika ia berfungsi.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, itu adalah satu kesilapan teks.

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, jadi sekarang kami kembali
di mana kami sebelum ini, bukan?

729
00:35:54,840 --> 00:35:57,100
Program lama yang sama kecuali
sekarang kita boleh menyokong

730
00:35:57,100 --> 00:35:59,390
senarai kad, bukan hanya satu kad.

731
00:35:59,390 --> 00:36:04,130
Dan kini, sekali lagi, jika kita mengubah
activeIndex, kita boleh pergi dari 0 hingga 1,

732
00:36:04,130 --> 00:36:07,330
dan sekarang bahawa kad kedua,
dan kemudian kami pergi ke 0.

733
00:36:07,330 --> 00:36:10,390
Jadi di sini adalah baru
souped-up versi kami.

734
00:36:10,390 --> 00:36:16,000
>> OK, jadi sekarang mari kita paparan senarai yang
menunjukkan semua kad dalam program anda,

735
00:36:16,000 --> 00:36:19,980
jadi kita akan membuat baru
komponen dipanggil ListView.

736
00:36:19,980 --> 00:36:22,155
Mari ListView sama react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Oleh itu, kita ingin menjadikan yang tidak tertib
senarai dengan item senarai untuk setiap kad.

739
00:36:38,800 --> 00:36:41,490
Dan dengan itu kita mempunyai sekumpulan kad.

740
00:36:41,490 --> 00:36:44,990
Kami mahu satu item senarai
untuk setiap kad, bukan?

741
00:36:44,990 --> 00:36:47,490
Kita boleh lakukan untuk gelung atau
sesuatu untuk membuat item senarai yang baru.

742
00:36:47,490 --> 00:36:50,522
Tetapi cara anda melakukannya dalam
Bertindak balas, menggunakan perkara yang dipanggil peta.

743
00:36:50,522 --> 00:36:57,150
Peta adalah alat atau fungsi yang anda gunakan
bahawa bagi setiap perkara, berjalan beberapa fungsi,

744
00:36:57,150 --> 00:36:59,510
mengambil nilai pulangan, dan
memberikan anda kembali itu.

745
00:36:59,510 --> 00:37:06,310
>> Jadi sebagai contoh, kami mempunyai array
1, 2, 3.map function-- dan ini

746
00:37:06,310 --> 00:37:12,120
adalah singkatan untuk yang
function-- x panah x masa x.

747
00:37:12,120 --> 00:37:16,110
Ini berkata, untuk setiap nombor
dalam 1, 2, 3, mengambilnya.

748
00:37:16,110 --> 00:37:17,800
Persegi, dan memberikan kembali.

749
00:37:17,800 --> 00:37:22,090
Jadi, apa yang anda berfikir 1,
2, 3.map x pergi ke x kali

750
00:37:22,090 --> 00:37:25,480
x memberikan anda kembali diberikan
fungsi ini

751
00:37:25,480 --> 00:37:27,680
dijalankan pada setiap elemen array itu.

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

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

754
00:37:32,190 --> 00:37:35,709
>> NEEL MEHTA: Ya, 1, 4, 9
kerana anda lakukan 1 kali 1.

755
00:37:35,709 --> 00:37:36,500
Yang memberikan anda satu.

756
00:37:36,500 --> 00:37:37,690
Itulah elemen pertama.

757
00:37:37,690 --> 00:37:38,530
>> 2 kali 2 adalah 4.

758
00:37:38,530 --> 00:37:39,570
Itulah elemen kedua.

759
00:37:39,570 --> 00:37:40,310
3 kali 3 adalah 9.

760
00:37:40,310 --> 00:37:41,540
Itulah elemen ketiga.

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

762
00:37:42,640 --> 00:37:45,015
Jadi peta mempunyai teknik yang anda
digunakan dalam pengaturcara berfungsi,

763
00:37:45,015 --> 00:37:48,090
gaya baru
pengaturcaraan untuk melakukan sesuatu

764
00:37:48,090 --> 00:37:50,500
untuk setiap elemen dalam senarai anda.

765
00:37:50,500 --> 00:37:51,970
Dan sebagainya ini bunyi biasa.

766
00:37:51,970 --> 00:37:53,370
Kami mempunyai senarai kad.

767
00:37:53,370 --> 00:37:56,860
Kami ingin mendapatkan item senarai bagi tiap-tiap
satu, jadi kita hanya akan menggunakan peta di sini.

768
00:37:56,860 --> 00:38:00,250
Kami akan berkata, mari setaraf senarai
this.props, kad, peta.

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

770
00:38:10,580 --> 00:38:15,070
>> Dan supaya diberikan kad, kami
akan menjana item senarai

771
00:38:15,070 --> 00:38:17,580
dengan kandungan sampingan yang kad itu.

772
00:38:17,580 --> 00:38:20,660
Mari kita hanya mengatakan bahawa kita mahu memberi
kad mempersoalkan supaya card.question.

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

774
00:38:24,990 --> 00:38:30,649
Jadi senarai ini mengandungi
pelbagai ini LI atau Perkara Senarai

775
00:38:30,649 --> 00:38:32,440
di mana ada satu senarai
item untuk setiap kad,

776
00:38:32,440 --> 00:38:35,150
dan yang mengandungi soalan kad itu.

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

778
00:38:37,640 --> 00:38:39,450
>> Sejuk, jadi sekarang mari kita
sebenarnya mencetak yang keluar.

779
00:38:39,450 --> 00:38:46,521
Oleh itu, kita akan kembali ul a.

780
00:38:46,521 --> 00:38:49,020
Di dalam senarai yang tidak tertib,
kita hanya akan melekat seluruh senarai

781
00:38:49,020 --> 00:38:49,890
yang mereka berikan kepada kami.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Baiklah, jadi sekarang ini
Paparan senarai kerja-kerja hanya mencari.

785
00:38:56,060 --> 00:38:59,842
Sebarang pertanyaan tentang pemandangan senarai?

786
00:38:59,842 --> 00:39:01,270
Anda mempunyai sekumpulan kad.

787
00:39:01,270 --> 00:39:02,800
Anda membuat item senarai bagi setiap kad.

788
00:39:02,800 --> 00:39:05,466
Dan anda memasukkannya ke dalam yang tidak tertib
senarai, dan anda memberi kembali.

789
00:39:05,466 --> 00:39:09,410
Jadi sekarang mari kita bertindak supaya kita menanamkan
dalam ini app kami,

790
00:39:09,410 --> 00:39:14,310
supaya kita boleh melakukan ini, paparan senarai.

791
00:39:14,310 --> 00:39:17,070
Apakah hujah yang kita lulus ke paparan senarai?

792
00:39:17,070 --> 00:39:18,320
Apakah sifat-sifat kita memberikan?

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

794
00:39:25,111 --> 00:39:26,860
Ingat, jika anda memberikan
ia sekumpulan kad,

795
00:39:26,860 --> 00:39:29,590
ia akan membuat senarai
melihat untuk mereka kad.

796
00:39:29,590 --> 00:39:32,267
Jadi apa yang kita akan lulus
di sini sebagai hujah?

797
00:39:32,267 --> 00:39:33,350
PENONTON: Senarai kad?

798
00:39:33,350 --> 00:39:37,130
NEEL MEHTA: Ya, jadi kad
sama this.props.cards, bukan?

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

800
00:39:39,850 --> 00:39:44,370
Dan jadi satu-satunya masalah
adalah bahawa anda hanya boleh

801
00:39:44,370 --> 00:39:48,600
bertukar satu elemen tahap teratas dalam memberi,
jadi anda perlu balut dalam div a.

802
00:39:48,600 --> 00:39:49,100
Itu pelik.

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

804
00:39:56,190 --> 00:39:57,530
Jadi mari kita lihat jika itu.

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

806
00:40:09,790 --> 00:40:10,560
Adakah ini berfungsi?

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

808
00:40:29,774 --> 00:40:31,030
>> Ya, di sana anda pergi.

809
00:40:31,030 --> 00:40:33,700
Jadi sekarang kita mempunyai senarai yang
kad di bahagian bawah,

810
00:40:33,700 --> 00:40:36,180
dan kemudian kita mempunyai kami
CardView dirinya di atas,

811
00:40:36,180 --> 00:40:40,486
dan yang akan flip antara
kedua-dua belah kad.

812
00:40:40,486 --> 00:40:42,610
Sekarang adakah itu masuk akal bagaimana saya melakukannya?

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

814
00:40:45,165 --> 00:40:46,790
Ya, jadi sekali lagi, kita mempunyai dua komponen.

815
00:40:46,790 --> 00:40:49,666
Cetakan Komponen pertama
keluar setiap kad dalam senarai.

816
00:40:49,666 --> 00:40:50,540
Itulah paparan senarai.

817
00:40:50,540 --> 00:40:54,770
Dan komponen kedua
mencetak hanya kad tersebut.

818
00:40:54,770 --> 00:40:58,840
Jika anda memberikan kad tertentu, ia akan mempunyai
mencetak maklumat mengenai kad yang

819
00:40:58,840 --> 00:41:01,870
dan membolehkan anda flip belakang dan sebagainya.

820
00:41:01,870 --> 00:41:05,850
>> Jadi, jika kita mahu, kita boleh cuba dan bercakap
tentang menambah beberapa ciri-ciri baru ini.

821
00:41:05,850 --> 00:41:09,482
Jika tidak, kita boleh bercakap sedikit lebih
tentang halaju reaktor,

822
00:41:09,482 --> 00:41:11,190
atau kita boleh menjawab
soalan yang anda mungkin mempunyai

823
00:41:11,190 --> 00:41:15,050
kerana ini adalah semua bahagian teras
daripada bertindak balas yang saya mahu bercakap tentang.

824
00:41:15,050 --> 00:41:16,540
Kita boleh pergi ke hadapan.

825
00:41:16,540 --> 00:41:17,590
Kita boleh menjawab soalan.

826
00:41:17,590 --> 00:41:18,560
Apa sahaja yang anda mahu.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> PENONTON: Bolehkah anda menggunakan
Membutuhkan dalam biasa JavaScript?

829
00:41:24,205 --> 00:41:27,150
Atau adakah sesuatu yang yang
datang dengan [didengar]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL MEHTA: Soalan ini adalah boleh
anda menggunakan membutuhkan dengan normal JavaScript?

831
00:41:30,760 --> 00:41:32,620
Jawapannya adalah ya.

832
00:41:32,620 --> 00:41:41,070
Membutuhkan hanya cara ia mengambil masa anda
JavaScript yang mempunyai HTML di dalamnya,

833
00:41:41,070 --> 00:41:44,215
dan ia menyusun ke dalam JavaScript yang
tidak mempunyai HTML di dalamnya.

834
00:41:44,215 --> 00:41:47,880
Jadi notis bahawa- jadi perhatikan di sini.

835
00:41:47,880 --> 00:41:50,820
Ini kelihatan seperti anda mempunyai seperti div
dan anda mempunyai barangan di dalamnya.

836
00:41:50,820 --> 00:41:54,970
>> Yang menghimpunkan untuk JavaScript yang
seperti menjana perkara yang sama.

837
00:41:54,970 --> 00:41:59,590
Saya rasa apa yang saya katakan ialah
Membutuhkan hanya sintaktik, seperti ia

838
00:41:59,590 --> 00:42:03,530
yang prapemproses untuk JavaScript banyak
seperti PHP adalah prapemproses untuk HTML.

839
00:42:03,530 --> 00:42:05,490
JSC adalah prapemproses yang
untuk JavaScript yang membolehkan

840
00:42:05,490 --> 00:42:12,970
anda meletakkan HTML bahagian dalam anda JavaScript.

841
00:42:12,970 --> 00:42:16,425
Dan jadi jika anda mempunyai pengubah yang betul
yang merupakan perkara yang dipanggil [didengar],

842
00:42:16,425 --> 00:42:17,300
yang akan mengubah.

843
00:42:17,300 --> 00:42:19,360
The prapemproses betul,
ia akan membolehkan anda berbuat demikian.

844
00:42:19,360 --> 00:42:20,235
>> PENONTON: [didengar]

845
00:42:20,235 --> 00:42:23,026
NEEL MEHTA: biasanya anda tidak perlukan
untuk meletakkan HTML dalam JavaScript

846
00:42:23,026 --> 00:42:24,110
melainkan jika perbuatan anda Bertindak balas.

847
00:42:24,110 --> 00:42:27,146
Tetapi anda boleh melakukannya juga.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> PENONTON: Saya rasa anda
menyifatkan Bertindak balas

850
00:42:29,353 --> 00:42:31,970
sebagai bahasa programing berfungsi.

851
00:42:31,970 --> 00:42:35,646
Kami telah belajar C dalam CS50.

852
00:42:35,646 --> 00:42:38,032
Apakah C juga bahasa berfungsi?

853
00:42:38,032 --> 00:42:39,990
NEEL MEHTA: Jadi soalan
adalah kira-kira berfungsi

854
00:42:39,990 --> 00:42:43,010
berbanding satu lagi perkara yang dipanggil
program penting atau prosedur.

855
00:42:43,010 --> 00:42:44,820
Ada dua jenis program popular.

856
00:42:44,820 --> 00:42:48,550
Satu dipanggil prosedur, yang
adalah tentang seperti arahan lakukan,

857
00:42:48,550 --> 00:42:51,510
dan satu berfungsi, yang semua
tentang mempunyai fungsi dan mempunyai

858
00:42:51,510 --> 00:42:52,930
input dan output daripada mereka.

859
00:42:52,930 --> 00:42:55,930
Bertindak balas adalah paradigma berfungsi.

860
00:42:55,930 --> 00:42:58,010
C ialah paradigma sangat prosedur.

861
00:42:58,010 --> 00:43:02,360
>> Dan sebagai contoh, C sebagai contoh,
anda tidak melakukan cara ini perisytiharan

862
00:43:02,360 --> 00:43:04,390
membuat program itu, bukan?

863
00:43:04,390 --> 00:43:06,826
Anda katakan, mencetak ini.

864
00:43:06,826 --> 00:43:07,950
Mengubah struktur data ini.

865
00:43:07,950 --> 00:43:08,530
Cetak halaman ini.

866
00:43:08,530 --> 00:43:10,160
Ia mengenai arahan.

867
00:43:10,160 --> 00:43:12,640
>> Dalam Bertindak balas, tidak ada
bahawa banyak arahan.

868
00:43:12,640 --> 00:43:15,145
Ia mengenai mempunyai
komponen yang anda meletakkan bersama-sama.

869
00:43:15,145 --> 00:43:16,300
Mereka seperti fungsi.

870
00:43:16,300 --> 00:43:26,360
Anda mempunyai seperti fungsi
dipanggil CardView,

871
00:43:26,360 --> 00:43:28,680
yang merupakan fungsi
yang mempunyai input, output,

872
00:43:28,680 --> 00:43:30,660
dan sebagainya Bertindak balas adalah semua
tentang falsafah ini

873
00:43:30,660 --> 00:43:32,700
kami dari having-- anda mempunyai data.

874
00:43:32,700 --> 00:43:34,910
Anda lulus melalui ini
algoritma, dan ia akan

875
00:43:34,910 --> 00:43:36,800
output HTML yang anda
hanya dicetak halaman,

876
00:43:36,800 --> 00:43:39,180
dan jadi anda perlu untuk
membinanya sekeping oleh sekeping.

877
00:43:39,180 --> 00:43:42,800
>> Jadi untuk menarik metafora dengan apa
Saya katakan sebelum ini, anda tahu bagaimana

878
00:43:42,800 --> 00:43:47,050
di Facebook jika anda mendapat mesej,
dan anda memilih apa bahagian untuk mengemas kini,

879
00:43:47,050 --> 00:43:47,882
itulah prosedur.

880
00:43:47,882 --> 00:43:48,840
Ia adalah penting, bukan?

881
00:43:48,840 --> 00:43:49,806
OK, saya mendapat mesej.

882
00:43:49,806 --> 00:43:50,930
Mari kita menukar akaun di sana.

883
00:43:50,930 --> 00:43:52,110
>> Mari kita pop tetingkap di sini.

884
00:43:52,110 --> 00:43:52,780
Mari kita menukar akaun di sana.

885
00:43:52,780 --> 00:43:53,700
Mari kita menarik ini di sini.

886
00:43:53,700 --> 00:43:55,220
Itulah pendekatan prosedur.

887
00:43:55,220 --> 00:44:00,240
>> Itulah yang perkara seperti sudut,
Boost, Tulang Belakang, rangka kerja yang lain digunakan.

888
00:44:00,240 --> 00:44:01,200
Bertindak balas berfungsi.

889
00:44:01,200 --> 00:44:03,324
Ia adalah cara yang sangat berbeza
berfikir tentang sesuatu.

890
00:44:03,324 --> 00:44:07,950
Ia mengambil idea ini mari kita
fungsi atau algoritma yang akan anda

891
00:44:07,950 --> 00:44:08,800
memberikan data.

892
00:44:08,800 --> 00:44:11,820
Ia akan meludah keluar apa yang ia
perlu, dan komputer

893
00:44:11,820 --> 00:44:13,490
akan menjaga berat keluar.

894
00:44:13,490 --> 00:44:15,890
Anda tidak mengendalikan sendiri.

895
00:44:15,890 --> 00:44:18,470
Adakah ini membuat sedikit rasa?

896
00:44:18,470 --> 00:44:18,970
Ya?

897
00:44:18,970 --> 00:44:24,180
>> PENONTON: Dalam bahasa berfungsi,
semua yang berlaku pada satu masa?

898
00:44:24,180 --> 00:44:26,800
>> NEEL MEHTA: Tiada, perkara yang berlaku dalam perintah.

899
00:44:26,800 --> 00:44:29,320
Seperti di sini masih ada
perintah, tetapi ia tidak

900
00:44:29,320 --> 00:44:32,390
berlaku dalam perintah seperti
memuji, perintah, arahan.

901
00:44:32,390 --> 00:44:36,459
Ia berlaku dalam susunan
fungsi memberikan anda output.

902
00:44:36,459 --> 00:44:37,750
Meletakkan ke dalam fungsi yang lain.

903
00:44:37,750 --> 00:44:39,550
Meletakkan bahawa kepada yang lain
fungsi, fungsi yang lain.

904
00:44:39,550 --> 00:44:41,470
>> Jika anda melakukan CS51, anda akan
belajar program berfungsi

905
00:44:41,470 --> 00:44:42,886
keluar sedikit skop ini.

906
00:44:42,886 --> 00:44:45,090
Tetapi pada dasarnya, apa yang membuat
Bertindak balas sejuk adalah bukan sahaja

907
00:44:45,090 --> 00:44:46,840
aliran data sehala
dan Dom maya,

908
00:44:46,840 --> 00:44:48,700
tetapi juga idea ini
pengaturcaraan berfungsi.

909
00:44:48,700 --> 00:44:51,720
Manakala program berfungsi adalah sangat mudah
untuk mengarang dan membuat barangan sejuk daripada,

910
00:44:51,720 --> 00:44:53,844
dan ia sangat mudah untuk berfikir
kira-kira dan alasan tentang.

911
00:44:53,844 --> 00:44:55,450
Jadi ia adalah satu lagi cabutan yang baik Bertindak balas.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Apa-apa soalan lagi?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Ya?

916
00:45:03,150 --> 00:45:06,840
>> PENONTON: Um, mengapa anda
menggunakan biarlah yang bertentangan dengan var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL MEHTA: Jadi persoalannya ialah
mengapa anda menggunakan biarkan bukannya var?

918
00:45:10,450 --> 00:45:13,220
Ini adalah perkara yang dipanggil
ES6 atau ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Ia adalah versi baru JavaScript.

920
00:45:15,820 --> 00:45:19,050
Ada sekumpulan sebab-sebab teknikal,
tetapi let adalah versi yang lebih baik daripada var.

921
00:45:19,050 --> 00:45:20,724
>> Ia adalah bagaimana anda mengisytiharkan pembolehubah.

922
00:45:20,724 --> 00:45:21,390
Anda boleh menggunakan membiarkan.

923
00:45:21,390 --> 00:45:22,140
Anda boleh menggunakan var.

924
00:45:22,140 --> 00:45:23,825
Let mempunyai sekumpulan teknikal
reasons-- anda boleh melihat mereka

925
00:45:23,825 --> 00:45:25,610
sehingga later-- mengapa ia adalah lebih baik.

926
00:45:25,610 --> 00:45:28,780
Pada asasnya, ES6 mempunyai beberapa nice
sintaks baru, beberapa ciri-ciri baru

927
00:45:28,780 --> 00:45:30,720
di atas JavaScript lama.

928
00:45:30,720 --> 00:45:32,782
>> Oleh itu, kita mempunyai seperti lima minit.

929
00:45:32,782 --> 00:45:34,990
Saya hanya mahu bercakap tentang
satu perkara yang lebih cepat nyata.

930
00:45:34,990 --> 00:45:36,450
Jika anda mempunyai sebarang pertanyaan,
mari kita bercakap mengenainya selepas ini.

931
00:45:36,450 --> 00:45:38,366
Tetapi hanya jadi ini mendapat
ditangkap pada kamera, saya hanya

932
00:45:38,366 --> 00:45:41,550
mahu bercakap sedikit tentang bagaimana anda
benar-benar menggunakan Bertindak balas dalam aplikasi anda.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Jika anda pergi di sini,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
ini adalah halaman rumah untuk Bertindak balas, dan
ia akan menunjukkan kepada anda bagaimana anda benar-benar menggunakan

936
00:46:03,320 --> 00:46:05,320
Bertindak balas dalam halaman anda.

937
00:46:05,320 --> 00:46:08,845
Pada asasnya, ia sedikit
rumit cuba untuk memasang Bertindak balas.

938
00:46:08,845 --> 00:46:12,300
Ia bukan semudah yang anda hanya seret
dan lepaskan JavaScript di sana.

939
00:46:12,300 --> 00:46:15,890
>> Anda perlu mempunyai pengubah anda
ditubuhkan, yang akan, seperti yang berlaku sebelum ini,

940
00:46:15,890 --> 00:46:18,120
menghidupkan membutuhkan anda ke
JavaScript normal.

941
00:46:18,120 --> 00:46:21,030
Anda perlu perkara yang akan mempunyai
menyusun anda ES6 normal.

942
00:46:21,030 --> 00:46:24,720
JavaScript ada banyak bergerak
bahagian yang anda perlu lakukan, jadi ada perkara yang

943
00:46:24,720 --> 00:46:27,200
dipanggil Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Dan ini adalah satu alat baris arahan yang boleh
membantu anda scaffold keluar Bertindak balas anda

945
00:46:31,110 --> 00:46:32,380
projek dengan mudah.

946
00:46:32,380 --> 00:46:38,660
>> Jadi, anda boleh membaca tentang perkara ini
kemudian, tetapi terdapat beberapa alat

947
00:46:38,660 --> 00:46:40,160
yang Yeoman ditawarkan.

948
00:46:40,160 --> 00:46:43,280
Mereka akan membolehkan anda membuat Bertindak balas yang
aplikasi dengan segala-galanya yang dibina.

949
00:46:43,280 --> 00:46:46,030
Seperti ia akan telah membina
dalam, komponen terbina dalam.

950
00:46:46,030 --> 00:46:47,880
Ia akan mempunyai pengubah anda terbina dalam.

951
00:46:47,880 --> 00:46:50,699
Mereka mempunyai banyak sejuk
barangan yang dibina secara automatik

952
00:46:50,699 --> 00:46:52,240
menggunakan perkara-perkara ini dipanggil penjana.

953
00:46:52,240 --> 00:46:54,620
>> Jadi membaca tentang perkara ini jika anda mahu.

954
00:46:54,620 --> 00:46:59,110
Hanya pergi pada Yeoman, Y-E-O-M-A-N, dan
anda boleh mencari penjana seperti ini.

955
00:46:59,110 --> 00:47:01,263
Dan dengan penjana seperti
ini, anda hanya suka satu

956
00:47:01,263 --> 00:47:03,010
adalah perintah garis pasangan menyuruh.

957
00:47:03,010 --> 00:47:05,530
Ia akan scaffold menjalankan satu
Bertindak balas keseluruhan aplikasi untuk anda.

958
00:47:05,530 --> 00:47:10,470
Ia akan mendapat semua paip manual,
dan pekerjaan kasar dilakukan untuk anda,

959
00:47:10,470 --> 00:47:13,010
dan ini adalah mengapa anda hanya memberi tumpuan
kepada hanya menulis dalam Bertindak balas.

960
00:47:13,010 --> 00:47:16,739
>> Jadi, pada asasnya membina
Bertindak balas app adalah nontrivial.

961
00:47:16,739 --> 00:47:19,530
Ia berwayar semua bersama-sama, tetapi ada
adalah alat yang akan melakukannya untuk anda.

962
00:47:19,530 --> 00:47:23,070
Jadi, jika anda ingin Bertindak balas yang
aplikasi, cuba lakukan dengan cara itu.

963
00:47:23,070 --> 00:47:26,360
Jika anda hanya mahu mencuba,
anda boleh cuba menggunakan CodePen ini

964
00:47:26,360 --> 00:47:28,550
kerana CodePen ini mempunyai
semua bertindak balas pendawaian.

965
00:47:28,550 --> 00:47:30,240
Saya telah melakukan semua kerja untuk anda sudah.

966
00:47:30,240 --> 00:47:34,610
>> Jadi, jika anda ingin seperti
pengeluaran untuk melepaskan Bertindak balas app,

967
00:47:34,610 --> 00:47:37,220
cuba salah satu penjana ini.

968
00:47:37,220 --> 00:47:40,240
Jika anda hanya mahu bermain
sekitar, ia sering bernilai hanya

969
00:47:40,240 --> 00:47:44,490
seperti cuba bermain-main di CodePen sini.

970
00:47:44,490 --> 00:47:45,470
Bunyi yang baik?

971
00:47:45,470 --> 00:47:45,970
Sejuk.

972
00:47:45,970 --> 00:47:47,890
>> Jadi itu sahaja yang saya ada.

973
00:47:47,890 --> 00:47:52,470
Sekali lagi, semua kod dan contoh-contoh yang
akan berada di laman web ini di sini.

974
00:47:52,470 --> 00:47:55,509
Jadi, sekali lagi, kita tidak bercakap
tentang banyak sintaks Bertindak balas,

975
00:47:55,509 --> 00:47:57,550
tetapi untuk mencari semua orang-orang
butir-butir kecil sintaksis,

976
00:47:57,550 --> 00:48:00,320
itu semua akan boleh didapati
di laman web ini di sini.

977
00:48:00,320 --> 00:48:02,660
>> Jadi saya akan mengesyorkan seperti
mengambil langkah pertama.

978
00:48:02,660 --> 00:48:06,277
Letakkanlah di dalam CodePen anda.

979
00:48:06,277 --> 00:48:08,110
Cuba berusaha untuk menjadikan
kepada langkah kedua.

980
00:48:08,110 --> 00:48:11,310
Ada Langkah keempat, dan hanya
melihat di mana anda dapat daripada itu.

981
00:48:11,310 --> 00:48:14,840
>> Lagi soalan, lihat
di halaman itu atau e-mel saya.

982
00:48:14,840 --> 00:48:16,490
Itu e-mel saya.

983
00:48:16,490 --> 00:48:19,885
Tetapi saya suka untuk membantu anda dengan mana-mana
soalan yang anda mungkin mempunyai kira-kira Bertindak balas.

984
00:48:19,885 --> 00:48:21,010
Jadi, yep, itu sahaja yang saya ada.

985
00:48:21,010 --> 00:48:23,410
Terima kasih semua kerana sudi
menonton atau untuk hadir.

986
00:48:23,410 --> 00:48:26,820
Dan saya akan mengambil apa-apa soalan
anda mungkin perlu selepas ini sekarang.

987
00:48:26,820 --> 00:48:29,140
Jadi terima kasih semua kerana menonton.

988
00:48:29,140 --> 00:48:31,270