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

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
>> Yah, semua orang, selamat datang untuk web
aplikasi masa depan dengan Bereaksi.

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
Aku TA untuk CS50 dan mahasiswa tahun kedua
di Harvard College dan sangat, sangat

8
00:00:17,689 --> 00:00:18,730
pengembang web bergairah.

9
00:00:18,730 --> 00:00:20,730
Jadi saya sangat menarik untuk
berbicara kepada Anda hari ini,

10
00:00:20,730 --> 00:00:24,550
apakah Anda berada di sini atau di rumah
menonton, sekitar Bereaksi, yang, 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 Bereaksi adalah kerangka web.

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

14
00:00:30,930 --> 00:00:33,400
kerangka hanya
set alat yang dapat digunakan

15
00:00:33,400 --> 00:00:35,770
struktur dan membangun aplikasi web Anda.

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

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

18
00:00:42,330 --> 00:00:45,590
>> Jadi Facebook adalah kerangka web
yang dikembangkan oleh Facebook

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

20
00:00:48,060 --> 00:00:50,830
Ini karena telah digunakan dalam
Facebook pada aplikasi mobile 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 lain
adopter awal menonjol dari Bereaksi.

23
00:00:56,350 --> 00:00:58,630
>> Ini benar-benar telah mendapatkan
sangat populer.

24
00:00:58,630 --> 00:01:03,420
Jika Anda pernah menggunakan hal-hal seperti sudut atau
Backbone, ini adalah dari keluarga yang sama,

25
00:01:03,420 --> 00:01:05,830
tetapi sejak jauh
melampaui popularitas mereka.

26
00:01:05,830 --> 00:01:06,890
Ini hal baru panas.

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

28
00:01:09,590 --> 00:01:13,470
>> Dan Bereaksi baik bukan hanya sebagai
kerangka web untuk antarmuka bangunan.

29
00:01:13,470 --> 00:01:16,020
Ini baik untuk membangun antarmuka web.

30
00:01:16,020 --> 00:01:18,350
Ada juga hal
disebut Bereaksi asli yang

31
00:01:18,350 --> 00:01:22,200
memungkinkan Anda membangun interface
untuk Android dan iOS

32
00:01:22,200 --> 00:01:26,390
dan platform mungkin lain di masa depan
hanya menggunakan kode JavaScript yang sama.

33
00:01:26,390 --> 00:01:31,130
Anda bisa menggunakan yang sama persis
Kode JavaScript untuk membuat website,

34
00:01:31,130 --> 00:01:33,040
untuk membuat aplikasi Android dan iOS apps.

35
00:01:33,040 --> 00:01:35,000
>> Ini waktu yang sangat, sangat menarik.

36
00:01:35,000 --> 00:01:37,070
Ini adalah kesempatan yang sangat, sangat keren.

37
00:01:37,070 --> 00:01:42,020
Ini benar-benar sebuah web yang universal
alat pengembangan antarmuka,

38
00:01:42,020 --> 00:01:44,420
jadi itu adalah sangat, sangat
Hal penting untuk mengetahui.

39
00:01:44,420 --> 00:01:46,949
Dan, seperti yang saya memberitahu orang-orang
sebelumnya, ini, saya pikir,

40
00:01:46,949 --> 00:01:48,990
akan mengubah cara kita
membangun aplikasi web selamanya.

41
00:01:48,990 --> 00:01:55,820
Jadi itu mungkin hiperbola sedikit, tapi aku
pikir itu hal yang cukup baik untuk tahu.

42
00:01:55,820 --> 00:01:57,580
>> OK, jadi apa Bereaksi?

43
00:01:57,580 --> 00:02:01,020
Bereaksi adalah kerangka Anda dapat
digunakan untuk membangun interface.

44
00:02:01,020 --> 00:02:03,240
Sebuah antarmuka adalah, sekali lagi,
halaman web, kan?

45
00:02:03,240 --> 00:02:06,340
Jadi, inilah Instagram.com, penggunaan React.

46
00:02:06,340 --> 00:02:08,740
>> Bereaksi dibangun pada
Ide 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
sehingga elemen HTML adalah seperti sebuah tombol.

49
00:02:14,470 --> 00:02:15,250
Ini sebuah paragraf.

50
00:02:15,250 --> 00:02:17,500
Ini header, kan?

51
00:02:17,500 --> 00:02:22,740
Dan Instagram akan menggunakan ini, tapi
juga akan menggunakan komponen dari Bereaksi.

52
00:02:22,740 --> 00:02:25,740
>> Bereaksi komponen
elemen HTML souped-up

53
00:02:25,740 --> 00:02:28,100
yang memiliki perilaku mereka sendiri
terkandung di dalamnya.

54
00:02:28,100 --> 00:02:31,800
Jadi, sebagai contoh, kita bisa memiliki
elemen waktu, komponen waktu,

55
00:02:31,800 --> 00:02:34,095
yang akan berisi seperti
cap waktu, Anda tahu,

56
00:02:34,095 --> 00:02:37,170
komponen profil yang
akan berisi gambar profil

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

58
00:02:38,820 --> 00:02:42,930
Hal ini dapat memiliki counter seperti yang
bisa menghitung seperti jumlah suka,

59
00:02:42,930 --> 00:02:45,610
dan jika Anda klik di atasnya, itu akan
meningkatkan jumlah orang seperti.

60
00:02:45,610 --> 00:02:48,200
Komponen adalah hanya
sekelompok kode HTML yang

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

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

63
00:02:53,770 --> 00:02:56,270
Anda dapat mengambil komponen-komponen ini,
dan Anda dapat menempatkan mereka bersama-sama

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

65
00:02:59,060 --> 00:03:00,505
yang berisi semua hal ini.

66
00:03:00,505 --> 00:03:04,050
Ini akan berisi Time, Profil,
LikeCounter, mungkin komentar

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

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

69
00:03:10,810 --> 00:03:15,620
Feed Instagram tidak lebih dari
sekelompok posting satu demi satu,

70
00:03:15,620 --> 00:03:19,032
setiap posting berisi seperti Waktu,
Profil, LikeCounter, dan sebagainya.

71
00:03:19,032 --> 00:03:20,490
Ini semacam seperti membangun rumah.

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

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

74
00:03:24,960 --> 00:03:28,320
Anda mengambil bedroom-- Anda tetap mereka
bersama-sama, dan Anda memiliki komponen baru.

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

76
00:03:29,760 --> 00:03:32,860
>> Jadi bereaksi adalah semua dibangun di sekitar
ide ini komponen yang

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

78
00:03:36,600 --> 00:03:39,650
Seperti Anda hanya mengatakan apa
profil, dan itu menjadikan itu.

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

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

81
00:03:43,880 --> 00:03:47,770
Dan mereka dapat digunakan kembali, jadi jika Anda
memiliki kode sumber untuk posting,

82
00:03:47,770 --> 00:03:49,440
Anda bisa menanamkan mana saja yang.

83
00:03:49,440 --> 00:03:53,160
>> Anda dapat menanamkan sebuah Instagram
hal di situs Anda sendiri.

84
00:03:53,160 --> 00:03:56,830
Anda dapat menanamkan di Facebook, misalnya,
asalkan menggunakan Bereaksi juga.

85
00:03:56,830 --> 00:04:00,360
Jadi komponen yang benar-benar, benar-benar, benar-benar
blok bangunan yang kuat dari web

86
00:04:00,360 --> 00:04:04,180
yang dapat digunakan di mana saja dan menempatkan
bersama-sama untuk membuat blok bangunan baru.

87
00:04:04,180 --> 00:04:07,159
Itu sangat, sangat
gambaran tingkat tinggi.

88
00:04:07,159 --> 00:04:09,200
Jadi, sekali lagi, jika Anda memiliki
pertanyaan pada setiap titik

89
00:04:09,200 --> 00:04:14,470
tentang filsafat reaktor,
coding, untuk menghentikan saya, dan biarkan aku tahu.

90
00:04:14,470 --> 00:04:18,420
>> OK, jadi bereaksi dingin karena
memiliki cara yang berbeda dalam memandang

91
00:04:18,420 --> 00:04:19,870
bagaimana Anda membangun aplikasi web.

92
00:04:19,870 --> 00:04:23,620
Anda mungkin pernah mendengar dari MVC, sebuah
Model Anda kontrol di CS50 atau apa pun

93
00:04:23,620 --> 00:04:25,940
lainnya menyelidik kelas yang Anda gunakan.

94
00:04:25,940 --> 00:04:29,000
Dan paling kerangka yang
dibangun di sekitar gagasan MVC.

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

96
00:04:30,410 --> 00:04:32,980
Bereaksi dibangun di sekitar gagasan
aliran data searah

97
00:04:32,980 --> 00:04:36,510
seperti yang terlihat oleh grafik atau grafis di sini.

98
00:04:36,510 --> 00:04:38,260
>> Pada dasarnya, Anda memiliki sumber data.

99
00:04:38,260 --> 00:04:42,380
Dan sumber data akan memutuskan
bagaimana lay out komponen-komponen tertentu.

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

101
00:04:45,452 --> 00:04:47,160
mereka akan memberitahu
sumber data untuk mengubah.

102
00:04:47,160 --> 00:04:49,350
>> Untuk menggunakan Instagram
Misalnya, Anda mungkin memiliki

103
00:04:49,350 --> 00:04:52,050
daftar posting benda seperti
dalam database atau sesuatu.

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

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

106
00:04:57,600 --> 00:05:01,830
dan menggunakan data itu untuk membuat
hal di layar.

107
00:05:01,830 --> 00:05:04,300
Itulah yang panah
dari data ke komponen,

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

109
00:05:07,930 --> 00:05:10,290
>> Di Facebook Messenger, untuk
Misalnya, yang Bereaksi,

110
00:05:10,290 --> 00:05:13,410
Anda mungkin memiliki daftar
pesan sebagai sumber data Anda.

111
00:05:13,410 --> 00:05:15,927
Dan itu akan membuat tidak
hanya daftar pesan

112
00:05:15,927 --> 00:05:17,510
tetapi juga daftar teman yang Anda miliki.

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

114
00:05:19,200 --> 00:05:23,330
Mungkin juga membuat hal Facebook
itu di bagian 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 setiap kali salah satu dari mereka
komponen berubah,

118
00:05:30,290 --> 00:05:32,320
itu akan kembali dan
mengubah sumber data.

119
00:05:32,320 --> 00:05:33,460
>> Anda mengirim pesan, kan?

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

121
00:05:34,780 --> 00:05:39,490
Anda membaca pesan Anda,
sehingga Anda mengatur belum dibaca dengan 0.

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

123
00:05:41,136 --> 00:05:44,010
Dan melihat bahwa semua ini dari satu
panah akan kembali ke data yang sama

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

125
00:05:47,662 --> 00:05:49,870
Anda tahu persis apa yang
Halaman ini akan terlihat seperti.

126
00:05:49,870 --> 00:05:50,700
Ini deterministik.

127
00:05:50,700 --> 00:05:53,451
Anda tahu, mengingat data tertentu, apa
Halaman ini akan terlihat seperti.

128
00:05:53,451 --> 00:05:56,158
Anda dapat memprediksi bagaimana hal itu akan
berperilaku dan bagaimana hal tersebut terjadi

129
00:05:56,158 --> 00:05:57,650
bekerja ketika mereka disatukan.

130
00:05:57,650 --> 00:06:00,410
>> Dan jika aku punya satu juta komponen
di sini, itu akan berperilaku sama, kan?

131
00:06:00,410 --> 00:06:02,290
Anda tidak akan memiliki
interkoneksi aneh.

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

133
00:06:04,120 --> 00:06:06,879
Satu juta komponen bisa
kembali dan mengedit data.

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

135
00:06:07,920 --> 00:06:10,870
Kami sedang membangun composable,
mudah aplikasi web scalable.

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

137
00:06:13,150 --> 00:06:15,790
Yang menceritakan komponen Anda
bagaimana lay out halaman,

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

139
00:06:18,190 --> 00:06:20,150
Dan jika mereka ingin mengubah
hal, hanya kembali

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

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

142
00:06:22,850 --> 00:06:26,010
Jadi Bereaksi adalah semua tentang pemahaman
bagaimana membangun komponen

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

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

145
00:06:31,850 --> 00:06:34,490
menggunakan teknologi lain
disebut Flux, yang

146
00:06:34,490 --> 00:06:36,872
adalah kerangka yang
ditambahkan di atas Bereaksi.

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

148
00:06:38,330 --> 00:06:42,990
Kita akan berbicara lebih banyak tentang, mengingat
data, bagaimana Anda bisa membuat komponen?

149
00:06:42,990 --> 00:06:47,010
>> Dan Bereaksi benar-benar keren karena Anda
dapat menggunakannya dengan ujung belakang yang Anda inginkan.

150
00:06:47,010 --> 00:06:50,480
Jika Anda memiliki seperti back end Python,
jika Python Anda dapat meludahkan beberapa data,

151
00:06:50,480 --> 00:06:51,610
Bereaksi dapat membuat itu.

152
00:06:51,610 --> 00:06:54,700
Jika Anda tidak output JS
data, React menjadikan itu.

153
00:06:54,700 --> 00:06:56,890
Ruby rel dengan
data, React menjadikan itu.

154
00:06:56,890 --> 00:07:01,860
>> Jadi Bereaksi pada dasarnya adalah web
view-- front end dengan komponen

155
00:07:01,860 --> 00:07:03,910
untuk setiap sumber data apapun.

156
00:07:03,910 --> 00:07:07,145
Dan pergi dari sumber data ke
bereaksi komponen cukup mudah.

157
00:07:07,145 --> 00:07:08,770
Akan cara lain adalah sedikit lebih keras.

158
00:07:08,770 --> 00:07:10,462
Yang menggunakan Flux seperti yang saya sebutkan sebelumnya.

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 lebih fokus pada
Data-to-komponen sisi.

161
00:07:13,740 --> 00:07:15,880
Dengan cara ini Anda dapat membuat
keren, aplikasi web menyenangkan.

162
00:07:15,880 --> 00:07:19,870
Ini tidak akan mempengaruhi dunia luar
untuk saat ini, tapi 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 bahwa semua kode untuk
pembicaraan hari ini akan berada di 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
membangun sampel Bereaksi app.

169
00:07:37,300 --> 00:07:39,550
Dan sehingga semua kode sumber
untuk setiap langkah dari jalan

170
00:07:39,550 --> 00:07:42,216
akan ada di sini, jadi jika
Anda mengikuti bersama di rumah,

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

172
00:07:43,991 --> 00:07:46,740
Jika Anda mengikuti bersama di sini,
kita akan menunjukkan pada layar,

173
00:07:46,740 --> 00:07:47,739
jadi jangan khawatir tentang hal itu.

174
00:07:47,739 --> 00:07:50,930
Tetapi jika Anda berada di rumah, merasa
bebas untuk mengunjungi website ini.

175
00:07:50,930 --> 00:07:56,400
Dan, Ya, Anda harus bisa mendapatkan
semua kode Anda pernah butuhkan di sini.

176
00:07:56,400 --> 00:08:01,380
Jadi contekan baik juga
untuk petualangan masa depan Anda dengan Bereaksi.

177
00:08:01,380 --> 00:08:04,490
Keren, jadi jika semua orang yang ada di sini,
dan bahkan jika Anda di rumah,

178
00:08:04,490 --> 00:08:11,580
menarik website ini, is.gd/cs50react,
tanpa modal, tidak ada garis bawah, tidak ada apa-apa.

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

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

181
00:08:17,140 --> 00:08:20,030
CodePen adalah sebuah kolaborasi
coding lingkungan

182
00:08:20,030 --> 00:08:23,364
dengan yang saya dapat menulis kode di sini, dan
itu akan secara otomatis dikirimkan kepada Anda.

183
00:08:23,364 --> 00:08:24,780
Dan untuk cara ini, saya bisa menulis kode.

184
00:08:24,780 --> 00:08:26,920
Saya bisa menjalankan kode di sini.

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

186
00:08:33,470 --> 00:08:36,390
di sini, dan itu akan
otomatis membuat halaman web

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

188
00:08:37,980 --> 00:08:40,039
Dan jadi ini adalah cara
bagi kita untuk mencoba kode

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

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

191
00:08:44,290 --> 00:08:47,670
Ini adalah cara yang sangat cepat bagi Anda untuk mockup
dan menguji berbagai jenis kode.

192
00:08:47,670 --> 00:08:50,560
>> Jadi aku akan mengambil
contoh kode, meletakkan di sini.

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

194
00:08:52,374 --> 00:08:54,540
Dan jika Anda di rumah, Anda
dapat melakukan ini sampai juga.

195
00:08:54,540 --> 00:08:57,530
Dan saya sudah diinstal
Bereaksi sini, sehingga Anda bisa hanya

196
00:08:57,530 --> 00:09:00,770
menulis kode Anda sendiri di sini, dan
mencobanya sebagai taman bermain sendiri.

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

198
00:09:04,940 --> 00:09:08,080
Tolong beri saya jempol
setelah Anda memilikinya terbuka.

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

200
00:09:10,960 --> 00:09:13,770
Keren, keren keren.

201
00:09:13,770 --> 00:09:16,914
Tidak ada di sini untuk saat ini, tapi
kami akan mengubah itu segera.

202
00:09:16,914 --> 00:09:21,250
>> OK, jadi Bereaksi adalah JavaScript
perpustakaan, dan karena itu,

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

204
00:09:24,480 --> 00:09:27,660
Dan itu digunakan untuk hal-hal lain
sekarang juga, tapi terutama web mengembangkan

205
00:09:27,660 --> 00:09:32,040
bahasa, jadi jika Anda tidak terbiasa dengan
itu, membaca sebuah situs yang disebut JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Ini luar biasa.

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

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

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

210
00:09:36,420 --> 00:09:39,960
Kami juga banyak HTML sini karena
kita merancang halaman web tentu saja.

211
00:09:39,960 --> 00:09:43,890
Jadi jika Anda tidak terbiasa dengan
HTML, periksa HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Saya pikir belajar Bereaksi adalah
mudah juta kali sudah jika Anda

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

214
00:09:47,892 --> 00:09:50,600
Jika Anda memiliki komponen, itu
mudah untuk membuat komponen yang lebih besar.

215
00:09:50,600 --> 00:09:51,860
Itu Bereaksi bahasa untuk Anda.

216
00:09:51,860 --> 00:09:54,270
>> Jadi pergi ke depan dan memberikan
hal-hal ini dibaca.

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

218
00:09:55,070 --> 00:09:57,440
Berikan dibaca jika Anda
di rumah jika Anda tidak

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

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

221
00:10:02,960 --> 00:10:06,470
aplikasi flashcard sangat dasar menggunakan Bereaksi.

222
00:10:06,470 --> 00:10:08,210
Kita akan memiliki sebuah flashcard.

223
00:10:08,210 --> 00:10:09,880
Anda dapat flip kartu bolak-balik.

224
00:10:09,880 --> 00:10:12,399
Dan kami juga akan memiliki daftar
semua kartu yang kita miliki,

225
00:10:12,399 --> 00:10:14,190
dan jika kita merasa
ambisius, kita mungkin

226
00:10:14,190 --> 00:10:17,060
dapat beralih antara
mobil dengan mengklik pada mereka.

227
00:10:17,060 --> 00:10:20,360
>> Tapi ini, dari telanjang
tulang, sangat sederhana Bereaksi app.

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

229
00:10:22,560 --> 00:10:26,030
tapi kami akan menunjukkan bahwa, jika Anda melakukan
ini, itu sangat, sangat mudah untuk memperpanjang

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 pergi melalui empat langkah
mulai dari awal untuk membangun ini.

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

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

234
00:10:39,790 --> 00:10:44,830
Seperti yang saya katakan sebelumnya, komponen di Bereaksi
hanya sebuah elemen HTML pada steroid.

235
00:10:44,830 --> 00:10:49,660
Ini menentukan HTML
dan beberapa perilaku, dan

236
00:10:49,660 --> 00:10:52,600
akan menentukan bagaimana orang
dapat berinteraksi dengan itu bagaimana

237
00:10:52,600 --> 00:10:54,270
itu akan memiliki keadaan internal.

238
00:10:54,270 --> 00:10:57,630
Seperti tombol akan tahu seperti berapa banyak
kali itu sudah diklik misalnya,

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

240
00:11:01,010 --> 00:11:04,430
>> Jadi mari kita pergi ke depan dan membangun kami
Komponen pertama menggunakan JavaScript.

241
00:11:04,430 --> 00:11:09,711
Jadi jika sintaks terlihat aneh,
itu karena jenis ini.

242
00:11:09,711 --> 00:11:11,710
Jadi, sekali lagi, kita akan
untuk membuat sebuah variabel yang disebut

243
00:11:11,710 --> 00:11:14,580
app menggunakan kata kunci biarkan,
yang membuat variabel,

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

245
00:11:18,210 --> 00:11:22,609
>> Bereaksi adalah perpustakaan dan memiliki
yang membuat fungsi kelas.

246
00:11:22,609 --> 00:11:24,400
Dan fungsi ini
sedikit kode yang Anda

247
00:11:24,400 --> 00:11:29,090
dapat digunakan untuk membuat baru
jenis Bereaksi komponen.

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

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

250
00:11:35,270 --> 00:11:40,460
Hal utama yang dapat dilakukan adalah membuat
sesuatu, membuat sebagai fungsi.

251
00:11:40,460 --> 00:11:44,500
>> Sekali lagi, jika indeks ini tidak jelas untuk
Anda, saya sarankan Anda pergi di JS untuk kucing

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

253
00:11:45,682 --> 00:11:47,710
Apakah itu diperbesar cukup baik?

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

255
00:11:48,490 --> 00:11:50,670
>> Jadi setiap kebutuhan komponen
memiliki fungsi render.

256
00:11:50,670 --> 00:11:53,010
Render fungsi mengatakan,
apa yang harus saya mencetak di layar?

257
00:11:53,010 --> 00:11:54,760
Tapi komponen adalah
berguna jika tidak

258
00:11:54,760 --> 00:11:58,060
tahu apa yang harus mencetak pada layar, sehingga
Anda harus memiliki fungsi render.

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

260
00:12:01,904 --> 00:12:03,820
Dan apa yang keren adalah bahwa
ada hal yang disebut

261
00:12:03,820 --> 00:12:08,660
BEJ, yang merupakan perluasan dari
JavaScript yang digunakan oleh bereaksi.

262
00:12:08,660 --> 00:12:11,845
Ini memungkinkan anda menulis HTML dalam
Anda JavaScript, yang

263
00:12:11,845 --> 00:12:13,970
Kedengarannya agak aneh ketika
Anda pertama kali berpikir tentang hal ini,

264
00:12:13,970 --> 00:12:15,553
tapi itu membuat banyak akal sesudahnya.

265
00:12:15,553 --> 00:12:17,430
Jadi kita bisa melakukan ini.

266
00:12:17,430 --> 00:12:21,360
Jika Anda akrab dengan HTML, saya tahu
kita memiliki div dengan tujuan umum

267
00:12:21,360 --> 00:12:22,790
wadah untuk hal-hal.

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

269
00:12:26,380 --> 00:12:32,390
>> Jadi katakanlah kita ingin membuat hanya
flashcard lurus-up untuk saat ini.

270
00:12:32,390 --> 00:12:34,890
Flashcard, saya akan mengatakan,
akan memiliki pertanyaan dan jawaban.

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

272
00:12:37,530 --> 00:12:42,155
yang mengatakan question-- Apa
jawaban utama untuk hidup, alam semesta?

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

274
00:12:47,640 --> 00:12:50,345
Dan maka jawabannya adalah
akan, tentu saja, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Itu tidak datang sama sekali.

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

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

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

280
00:13:08,250 --> 00:13:09,520
>> Jadi kita memiliki komponen kami.

281
00:13:09,520 --> 00:13:12,210
Kita perlu memberitahu Bereaksi untuk menempatkan
komponen pada layar

282
00:13:12,210 --> 00:13:18,990
sehingga React.render, sehingga melihat bahwa kita
memperlakukan aplikasi seperti unsur lainnya.

283
00:13:18,990 --> 00:13:21,010
Kami menulis seperti itu elemen HTML.

284
00:13:21,010 --> 00:13:25,100
Seperti bukannya mengatakan seperti img
untuk gambar atau p untuk paragraf,

285
00:13:25,100 --> 00:13:28,120
Anda menulis App, sehingga App
diperlakukan seperti elemen HTML.

286
00:13:28,120 --> 00:13:30,380
Seperti yang saya katakan sebelumnya, itu
elemen pada steroid.

287
00:13:30,380 --> 00:13:32,870
>> Jadi Anda membuat App, dan Anda
memberikan tempat untuk meletakkannya.

288
00:13:32,870 --> 00:13:37,170
Dan ini adalah bagaimana Anda dapat
mengatakan itu di mana untuk meletakkannya.

289
00:13:37,170 --> 00:13:46,200
Saya telah menciptakan sebuah div sederhana pada
Halaman disebut dengan ID halaman,

290
00:13:46,200 --> 00:13:48,300
dan di situlah
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 mendapatkan
menempatkan dalam elemen halaman

293
00:13:53,145 --> 00:13:54,270
yang kita miliki di layar.

294
00:13:54,270 --> 00:13:59,210
Sehingga berjalan kode ini, dan itu menarik ini
Hal di layar, jadi di sini kita.

295
00:13:59,210 --> 00:14:01,770
Kami telah membuat pertama Bereaksi komponen kami.

296
00:14:01,770 --> 00:14:08,000
>> Jadi hanya sebagai rekap, kita lembut membuat
tipe baru komponen, kan?

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
diberitahu itu apa yang harus dilakukan.

299
00:14:12,680 --> 00:14:15,590
Setiap kali komponen ini adalah untuk
dicetak ke layar,

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

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

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

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

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

305
00:14:31,200 --> 00:14:33,680
Jadi katanya, OK, aplikasi,
apa yang harus saya mencetak?

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

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

308
00:14:40,420 --> 00:14:43,180
Masuk akal sejauh ini?

309
00:14:43,180 --> 00:14:46,690
>> Jadi, sekali lagi, seluruh tantangan Bereaksi
hanya mengetahui bagaimana membuat komponen.

310
00:14:46,690 --> 00:14:48,500
Cara membuat
komponen bekerja sama.

311
00:14:48,500 --> 00:14:51,780
Sekarang kita telah membuat kami pertama
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
dapat memberikan kelas tombol Anda?

314
00:14:56,700 --> 00:14:59,146
Anda dapat memberikan jangkar Anda href.

315
00:14:59,146 --> 00:15:00,770
Anda dapat memberikan masukan Anda tipe, kan?

316
00:15:00,770 --> 00:15:04,740
Anda dapat memberikan lebih kustom
properti untuk semua elemen Anda

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

318
00:15:06,490 --> 00:15:09,030
Dan kita benar-benar bisa melakukan
hal yang sama persis.

319
00:15:09,030 --> 00:15:17,500
>> Jadi katakanlah kita ingin kami
app untuk pergi membuat kartu apapun.

320
00:15:17,500 --> 00:15:19,630
Saat ini kami hanya
diberikan kartu hardcoded.

321
00:15:19,630 --> 00:15:22,530
Kita tahu hanya ada satu
kartu yang dapat dilakukan, jadi kita

322
00:15:22,530 --> 00:15:25,960
akan mencoba dan mengubah ini sekarang jadi
bahwa kita hanya dapat memberikan beberapa kartu.

323
00:15:25,960 --> 00:15:27,410
Ini akan mencetak kartu.

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

325
00:15:29,380 --> 00:15:31,654
Jadi cara ini saya bisa email
ini teman saya dan menjadi seperti,

326
00:15:31,654 --> 00:15:33,820
flashcard apa pun yang Anda miliki,
hanya memberi makan ke sini,

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

328
00:15:35,290 --> 00:15:37,650
Anda dapat menempatkan lainnya
hal dalam aplikasi Anda sendiri.

329
00:15:37,650 --> 00:15:40,600
>> Tapi pertama-tama, mari kita istirahat ini
menjadi dua komponen,

330
00:15:40,600 --> 00:15:44,500
tapi kami ingin memisahkan kartu
pencetakan bagian dari bagian aplikasi yang sebenarnya.

331
00:15:44,500 --> 00:15:46,660
Jadi apa yang bisa kita lakukan adalah kita
dapat mengubah 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 kami dapat membuat baru
komponen yang disebut App,

334
00:15:54,450 --> 00:15:56,336
tidak menjadi bingung dengan App tua.

335
00:15:56,336 --> 00:16:00,730
Kami punya createClass,
dan seperti di HTML,

336
00:16:00,730 --> 00:16:03,590
Anda dapat sarang Bereaksi komponen
dalam satu sama lain.

337
00:16:03,590 --> 00:16:16,430
>> Jadi dalam membuat fungsi ini,
Fungsi CardView kembali,

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

339
00:16:18,234 --> 00:16:19,400
Melihat mengapa hal itu hal yang sama?

340
00:16:19,400 --> 00:16:22,590
Alih-alih render hanya aplikasi yang
memiliki div dan pasangan di dalamnya,

341
00:16:22,590 --> 00:16:26,194
app merender CardView, dan
CardView membuat div dan ayat.

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

343
00:16:29,110 --> 00:16:32,177
Apakah itu masuk akal?

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

345
00:16:33,760 --> 00:16:37,250
Kami memiliki elemen app
bahwa itu lebih besar dari.

346
00:16:37,250 --> 00:16:40,990
>> OK, jadi kami ingin kami CardView-- jika Anda
memberikan kartu tertentu yang CardView baik,

347
00:16:40,990 --> 00:16:43,370
itu akan mencetak untuk Anda, kan?

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

349
00:16:48,050 --> 00:17:02,930
Jadi biarkan kartu saya equal--
jika Anda semua kenal,

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

351
00:17:05,260 --> 00:17:09,280
Ini semacam seperti struct
di C, jadi kami membuat kartu,

352
00:17:09,280 --> 00:17:15,920
dan jadi sekarang kita bisa lewat kartu ini sebagai
properti atau sebagai atribut dalam HTML

353
00:17:15,920 --> 00:17:17,290
terminologi untuk aplikasi kita.

354
00:17:17,290 --> 00:17:20,210
Jadi kita bisa melakukan ini, App
kartu sama Mycard.

355
00:17:20,210 --> 00:17:23,200
>> Anda tahu bagaimana input, Anda lakukan
input type sama teks atau tombol

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

357
00:17:25,240 --> 00:17:29,500
Ide yang sama, kartu App equals--
Anda harus menempatkan kawat gigi sini-

358
00:17:29,500 --> 00:17:33,830
Kartu App sama Mycard, jadi ini
mengatakan kita memiliki objek kartu ini.

359
00:17:33,830 --> 00:17:39,149
Aku akan lulus sebagai
properti untuk komponen aplikasi.

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

361
00:17:41,440 --> 00:17:43,580
hal menarik dengan itu.

362
00:17:43,580 --> 00:17:47,650
>> Jadi aplikasi kita akan menjadi
diberikan kartu, jadi untuk sekarang,

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

364
00:17:49,980 --> 00:17:53,110
sendiri karena seperti app tidak
akan tahu apa yang harus dilakukan dengan itu,

365
00:17:53,110 --> 00:17:54,850
jadi kami hanya akan memberikannya kepada CardView tersebut.

366
00:17:54,850 --> 00:18:00,050
Jadi kita akan lulus dalam
cara yang sama, kartu sama,

367
00:18:00,050 --> 00:18:05,426
dan sehingga setiap komponen dapat mengakses
hal-hal yang telah diberikan kepadanya.

368
00:18:05,426 --> 00:18:07,800
Mereka dapat mengakses properti
yang telah diberikan untuk itu

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 terjadi di sini adalah
Anda memiliki objek Mycard.

372
00:18:14,920 --> 00:18:18,250
Anda lulus ke app
menggunakan kartu App sama Mycard.

373
00:18:18,250 --> 00:18:21,420
Bahwa objek kartu diberikan kepada aplikasi Anda.

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

375
00:18:24,400 --> 00:18:28,780
Ini semacam seperti gambar
tahu apa itu sumber.

376
00:18:28,780 --> 00:18:31,972
>> Aplikasi ini tahu apa itu kartu
adalah, dan dapat melakukan hal-hal dengan itu.

377
00:18:31,972 --> 00:18:32,930
Hal ini dapat melakukan perhitungan.

378
00:18:32,930 --> 00:18:35,290
Hal ini dapat membuat keputusan berdasarkan dari itu.

379
00:18:35,290 --> 00:18:39,950
>> Untuk saat ini, aku akan lulus
this.props.card ke CardView.

380
00:18:39,950 --> 00:18:43,420
Masuk akal sejauh ini?

381
00:18:43,420 --> 00:18:45,210
Itu 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, mengingat kartu, harus
mencetak pertanyaan dan jawaban.

384
00:18:51,719 --> 00:18:54,510
Saat ini kami hanya dicetak beberapa
pertanyaan dan jawaban hardcoded.

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

386
00:18:57,720 --> 00:19:01,360
apa adalah pertanyaan dan jawaban, dan
kemudian mencetak ini ke layar.

387
00:19:01,360 --> 00:19:02,470
>> Jadi kita bisa melakukan ini di sini.

388
00:19:02,470 --> 00:19:06,135
Dalam membuat begin-- pertama lakukan 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 bahwa
kartu diberikan kita untuk properti,

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

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

393
00:19:15,930 --> 00:19:19,440
Seperti itu hampir seperti
argumen ke fungsi.

394
00:19:19,440 --> 00:19:22,810
Kartu ini argumen
hampir CardView ini.

395
00:19:22,810 --> 00:19:25,239
>> Kami akan mengambil itu, dan menempatkan
menjadi pertanyaan variabel.

396
00:19:25,239 --> 00:19:27,280
Pastikan jawabannya pergi
untuk jawaban variabel.

397
00:19:27,280 --> 00:19:31,130
Anjuran kartu untuk menjawab.

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

399
00:19:35,072 --> 00:19:37,030
kita akan mencetak
apa pun yang mereka memberi kami.

400
00:19:37,030 --> 00:19:43,580
>> Jadi ini stuff-- sehingga kita akan
untuk memadamkan Pertanyaan Jawaban.

401
00:19:43,580 --> 00:19:46,380
Mari kita lihat apakah ini bekerja.

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

403
00:19:52,800 --> 00:20:00,470
>> Jadi kartu saya adalah objek kartu, dan kami
memberikan kartu untuk app.

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

405
00:20:04,790 --> 00:20:09,190
Dan CardView ini mengatakan, jika Anda
memberi saya benda flashcard,

406
00:20:09,190 --> 00:20:11,920
Saya akan mencetak pertanyaan nya
dan jawabannya, kan?

407
00:20:11,920 --> 00:20:14,590
>> Jadi apa yang bisa saya lakukan adalah saya bisa
kirim kode ini, pertama

408
00:20:14,590 --> 00:20:16,580
seperti 10 baris kode saya, teman saya.

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

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

411
00:20:27,200 --> 00:20:30,580
selama ia menciptakan CardView yang
dan memberikannya informasi yang tepat,

412
00:20:30,580 --> 00:20:31,987
dia bisa membuat kartu sendiri.

413
00:20:31,987 --> 00:20:34,320
Dan cara ini, itu benar-benar
cara keren bagi Anda untuk membangun

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

415
00:20:35,906 --> 00:20:38,280
Kartu ini, saya bisa 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 dasarnya, ini seperti salah satu
fungsi standar di perpustakaan C.

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

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

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

421
00:20:49,710 --> 00:20:50,890
Anda tidak peduli bagaimana cara kerjanya secara internal.

422
00:20:50,890 --> 00:20:53,790
Selama Anda memberikan hak
masukan, itu akan membuat output yang tepat.

423
00:20:53,790 --> 00:20:57,850
>> Dan komponen dapat
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 kartu
sebagai properti, itu akan

426
00:21:03,400 --> 00:21:05,095
mencetak isi dari kartu itu.

427
00:21:05,095 --> 00:21:16,820
Seperti jika saya mengganti kartu saya untuk
bukannya menjadi seperti apa adalah 5 ditambah 37,

428
00:21:16,820 --> 00:21:19,210
itu akan memperbarui sesuai.

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

430
00:21:21,955 --> 00:21:24,830
Jadi Anda bisa memikirkan komponen hampir
sebagai fungsi dengan cara ini, yang

431
00:21:24,830 --> 00:21:25,920
Anda dapat menempatkan bersama-sama.

432
00:21:25,920 --> 00:21:29,440
Anda mendapatkan masukan, seperti CardView ini
sebagai masukan, Anda mendapatkan output.

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

434
00:21:31,900 --> 00:21:34,404
Masuk akal sejauh ini?

435
00:21:34,404 --> 00:21:36,890
Keren, jadi sekali lagi, sifat yang
bagaimana Anda dapat menyampaikan informasi

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
Hal interaktif.

438
00:21:42,740 --> 00:21:44,450
Sekarang itu agak membosankan.

439
00:21:44,450 --> 00:21:45,520
Apa [tidak terdengar]?

440
00:21:45,520 --> 00:21:48,210
Anda dapat mencetak beberapa keluar,
tapi itu semua yang dapat dilakukan.

441
00:21:48,210 --> 00:21:51,550
>> Jadi mari kita kembali ke
pertanyaan lama hanya untuk saat ini.

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

443
00:21:54,405 --> 00:21:55,030
mereka mendapatkan masukan.

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

445
00:21:56,100 --> 00:21:57,049
Itu agak membosankan.

446
00:21:57,049 --> 00:21:59,090
Kami ingin memiliki kita
komponen untuk dapat memiliki

447
00:21:59,090 --> 00:22:02,150
semacam keadaan internal,
seperti mengingat sesuatu.

448
00:22:02,150 --> 00:22:05,320
>> Untuk flashcard, karena
Misalnya, seperti apa negara

449
00:22:05,320 --> 00:22:07,550
Anda mungkin ingin
ingat untuk flashcard sebuah?

450
00:22:07,550 --> 00:22:09,740
Apa Status sementara
Anda mungkin ingin mengingat

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

452
00:22:12,491 --> 00:22:13,990
AUDIENCE: Apakah itu sudah membalik?

453
00:22:13,990 --> 00:22:14,990
NEEL Mehta: Ya, benar.

454
00:22:14,990 --> 00:22:17,665
Jadi, Anda mungkin ingin menyimpan
track yang Anda hadapi atau yang

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

456
00:22:19,100 --> 00:22:23,420
Di Facebook, misalnya, Anda akan
ingin mengingat di mana di feed berita

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

458
00:22:25,870 --> 00:22:30,127
>> Pada Messenger, seperti apa teks yang
ketik di kotak input, kan?

459
00:22:30,127 --> 00:22:31,710
Jika Anda me-refresh halaman, itu pergi.

460
00:22:31,710 --> 00:22:32,793
Tapi Anda tidak benar-benar peduli.

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

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

463
00:22:34,548 --> 00:22:36,152
>> AUDIENCE: [tidak terdengar]

464
00:22:36,152 --> 00:22:38,360
NEEL Mehta: Seperti sekejap
kartu, seperti Anda dapat melihat

465
00:22:38,360 --> 00:22:40,290
sisi pertanyaan atau sisi jawaban?

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

467
00:22:41,070 --> 00:22:43,270
>> NEEL Mehta: Seperti
dua sisi flashcard, kan?

468
00:22:43,270 --> 00:22:46,370
Ya, sehingga Anda ingin
punya ide ini dari sekarang

469
00:22:46,370 --> 00:22:50,370
Saya memiliki sifat, yang seperti input,
tapi negara, yang bersifat sementara, eh,

470
00:22:50,370 --> 00:22:51,839
di mana Anda berada pada halaman, kan?

471
00:22:51,839 --> 00:22:54,380
Sekali lagi, saya mengatakan di Facebook
Messenger, saya harus seperti yang orang

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

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

474
00:22:58,030 --> 00:23:01,200
Sangat penting untuk menunjukkan pengguna
apa yang terjadi, tapi refresh halaman.

475
00:23:01,200 --> 00:23:02,250
Itu tidak terlalu penting.

476
00:23:02,250 --> 00:23:04,530
Jadi negara sementara,
jadi kita semua negara itu.

477
00:23:04,530 --> 00:23:06,250
>> Jadi, sekali lagi, ada negara dan alat peraga.

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

479
00:23:09,084 --> 00:23:10,250
Negara adalah seperti default.

480
00:23:10,250 --> 00:23:13,700
Ini seperti hal-hal yang
membuat hal interaktif.

481
00:23:13,700 --> 00:23:17,720
>> Jadi dalam kami CardView-- mari kita
kami CardView-- jadi itu bagus.

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

483
00:23:21,420 --> 00:23:25,105
Dan jadi teman saya yang punya ini, mereka
tidak akan melihat perbedaan.

484
00:23:25,105 --> 00:23:27,230
Mereka tidak akan harus mengubah
setiap kode mereka sendiri,

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

486
00:23:29,410 --> 00:23:31,270
Itu bagian yang bagus tentang komponen.

487
00:23:31,270 --> 00:23:35,290
>> OK, jadi di CardView kami, mari kita coba dan
melacak apakah kita fase up

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

489
00:23:36,560 --> 00:23:40,480
Dalam Bereaksi kita melakukan ini dengan pertama-tama
menentukan keadaan awal.

490
00:23:40,480 --> 00:23:42,070
Mana kartu dimulai?

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

492
00:23:48,480 --> 00:23:53,310
Objek ini berisi beberapa negara, dan
negara hanya sepasang kunci-nilai.

493
00:23:53,310 --> 00:23:56,950
Seperti di instruksikan, Anda memiliki kunci dan
nilai, Anda memiliki seperti nama adalah sebuah string.

494
00:23:56,950 --> 00:24:01,410
>> Dalam hal ini, katakanlah depan benar.

495
00:24:01,410 --> 00:24:03,760
Ini mengatakan bahwa kita memiliki negara.

496
00:24:03,760 --> 00:24:06,570
Salah satu komponen dari negara
adalah atribut yang disebut depan.

497
00:24:06,570 --> 00:24:09,649
[Tidak terdengar], sehingga secara default,
kita berada di depan kartu,

498
00:24:09,649 --> 00:24:11,440
dan kita dapat mengubah ini
seperti yang kita membalik kartu.

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

500
00:24:13,380 --> 00:24:18,190
>> OK, jadi di render, sekarang, kami
menampilkan pertanyaan dan jawaban.

501
00:24:18,190 --> 00:24:20,860
Sekarang apa yang harus kita lakukan
adalah menunjukkan pertanyaan

502
00:24:20,860 --> 00:24:24,370
jika kita berada di bagian depan kartu sehingga
jawabannya adalah untuk belakang kartu.

503
00:24:24,370 --> 00:24:26,850
Itulah mengapa Anda semua membuat
kartu interaktif.

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

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

506
00:24:31,600 --> 00:24:33,620
Yah, pertama hanya membuat variabel.

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

508
00:24:37,790 --> 00:24:42,010
Kita mengakses menyatakan kita sama
alat peraga akses, sehingga this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Jika kita depan, maka 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 depan
kartu, kita akan mencoba dan ambil

512
00:24:51,360 --> 00:24:52,485
pertanyaan dari kartu.

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
kartu, apa yang kita lakukan?

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

516
00:25:01,830 --> 00:25:02,750
>> AUDIENCE: Jawabannya?

517
00:25:02,750 --> 00:25:05,041
>> NEEL Mehta: Yep, sehingga 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
negara untuk membuat keputusan

520
00:25:10,930 --> 00:25:14,420
karena sekarang komponen
akan terlihat berbeda

521
00:25:14,420 --> 00:25:16,710
didasarkan dari bagaimana berinteraksi dengan itu.

522
00:25:16,710 --> 00:25:20,355
Jadi, bukannya 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
Keren, jadi sekarang, seperti yang Anda lihat,
kita hanya melihat pertanyaan.

525
00:25:28,650 --> 00:25:37,720
Dan jika saya mengubah keadaan di sini secara manual
untuk depan adalah palsu kita mendapatkan 42 kembali.

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

527
00:25:39,720 --> 00:25:43,440
Seperti tombol yang tahu apakah
itu sudah ditekan atau tidak,

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

529
00:25:46,080 --> 00:25:48,320
Secara default, itu di bagian depan.

530
00:25:48,320 --> 00:25:50,840
Dan kemudian jika itu di bagian depan,
kami akan mencetak pertanyaan.

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

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

533
00:25:54,980 --> 00:25:59,090
Itu hanya tampak berbeda
didasarkan pada bagaimana Anda program ini.

534
00:25:59,090 --> 00:26:02,670
Jadi, misalnya, Facebook Messenger,
bahkan jika Anda mendapatkan sumber data yang sama,

535
00:26:02,670 --> 00:26:05,170
mungkin terlihat berbeda
karena negara berbeda.

536
00:26:05,170 --> 00:26:08,421
Anda sedang melihat sebuah
Pesan orang yang berbeda.

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

538
00:26:10,930 --> 00:26:15,940
membuat kita mampu mengubah, apakah
kartu kami adalah depan atau belakang.

539
00:26:15,940 --> 00:26:19,010
Kita dapat melakukan ini dengan menambahkan flip
tombol, tombol untuk kartu yang

540
00:26:19,010 --> 00:26:22,950
akan flip kartu jika itu [tidak terdengar].

541
00:26:22,950 --> 00:26:31,770
Jadi mari kita tambahkan sebuah tombol di sini, ini
tombol, dan tombol ini akan mengatakan sandal.

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

543
00:26:35,650 --> 00:26:37,075
Itu hanya terlihat bagus.

544
00:26:37,075 --> 00:26:43,650
Apa yang bisa kita lakukan adalah kita dapat menambahkan satu klik
handler, onClick sama this.flip,

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

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

547
00:26:47,120 --> 00:26:48,675
dipanggil ketika pengguna mengklik itu.

548
00:26:48,675 --> 00:26:52,330
>> Jadi tombol akan tahu
ketika itu sudah diklik.

549
00:26:52,330 --> 00:26:54,750
Pergi itu sudah diklik,
itu akan membalik kartu.

550
00:26:54,750 --> 00:26:58,382
Ini semacam seperti Anda
Orang pengiriman pizza.

551
00:26:58,382 --> 00:27:01,590
Kau seperti, baiklah, setiap kali seseorang
memanggil saya, saya akan memberikan pizza, kan?

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

553
00:27:03,420 --> 00:27:04,530
Anda mendengarkan untuk sebuah event.

554
00:27:04,530 --> 00:27:07,657
Anda dipanggil, dan ketika
Acara yang terjadi, 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 hal ini, ketika Anda
diklik, Anda flip kartu.

557
00:27:11,480 --> 00:27:14,560
>> Dan jadi kita perlu mendefinisikan
fungsi yang akan membalik kartu,

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

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

560
00:27:20,850 --> 00:27:23,680
Dan apa yang Anda pikir sandal akan lakukan?

561
00:27:23,680 --> 00:27:27,180
Sekali lagi ini dipanggil ketika
kita klik tombol sandal.

562
00:27:27,180 --> 00:27:29,406
Apa yang harus fungsi sandal lakukan?

563
00:27:29,406 --> 00:27:34,136
>> AUDIENCE: Ganti this.state.front
dari benar menjadi false, false ke true.

564
00:27:34,136 --> 00:27:38,420
>> NEEL Mehta: Yep, sehingga mengambil apa pun
this.front is-- negara depan.

565
00:27:38,420 --> 00:27:40,930
Ambil keadaan depan, jika
itu benar, membuatnya palsu.

566
00:27:40,930 --> 00:27:42,530
Jika itu palsu, membuatnya benar, kan?

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

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

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

570
00:27:50,380 --> 00:27:52,030
Anda tidak bisa melakukan itu.

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

572
00:27:55,810 --> 00:28:03,230
>> Jadi Anda bisa mengatakan this.setState depan
usus di mana ini, sekali lagi, seru

573
00:28:03,230 --> 00:28:04,330
Titik berarti sebaliknya.

574
00:28:04,330 --> 00:28:07,420
Saya kira jika ini. state.front
benar, itu akan berubah palsu.

575
00:28:07,420 --> 00:28:09,170
Jadi kita akan mengatur negara
dari benar menjadi false.

576
00:28:09,170 --> 00:28:11,430
Jika itu salah, kami akan
set false ke true.

577
00:28:11,430 --> 00:28:17,210
>> Hanya melihat bahwa kami menetapkan dan mendapatkan sedikit
berbeda, dan jadi mari kita coba ini.

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

579
00:28:18,675 --> 00:28:21,810
Tombol Flip sekarang akan
mengganti depan ke belakang negara.

580
00:28:21,810 --> 00:28:24,990
>> Dan di sinilah Anda melihat
sedikit dari keajaiban Bereaksi.

581
00:28:24,990 --> 00:28:28,420
Seperti kami tidak pernah diberitahu untuk membuat ulang.

582
00:28:28,420 --> 00:28:30,910
Kami tidak pernah diberitahu itu redraw apa-apa.

583
00:28:30,910 --> 00:28:32,630
Jika Anda melakukan ini
tanpa Bereaksi, Anda akan

584
00:28:32,630 --> 00:28:34,588
telah to-- seperti ketika
tombol sandal diklik,

585
00:28:34,588 --> 00:28:37,290
Anda harus memberitahu ke
manual kembali membuat, kan?

586
00:28:37,290 --> 00:28:43,050
>> Bereaksi benar-benar dingin di bahwa jika Anda
memberikan negara dan sifat tertentu,

587
00:28:43,050 --> 00:28:45,760
itu akan selalu membuat
hal yang sama persis.

588
00:28:45,760 --> 00:28:48,690
Dan jadi ketika kita pernah kita mengubah
negara dan properti,

589
00:28:48,690 --> 00:28:50,819
bereaksi hanya kembali membuat seluruh hal.

590
00:28:50,819 --> 00:28:52,860
Ia tahu bahwa ada
satu-ke-satu korespondensi

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

592
00:28:57,270 --> 00:29:00,110
Jadi, setiap kali salah satu dari mereka
perubahan dengan melalui negara set,

593
00:29:00,110 --> 00:29:03,750
itu akan mengubah bagaimana
pay diberikan-ulang.

594
00:29:03,750 --> 00:29:06,650
Dan jadi pada dasarnya Bereaksi seperti
menunggu Anda untuk mengubah.

595
00:29:06,650 --> 00:29:09,870
>> Setiap kali perubahan sesuatu,
itu akan membuat-ulang seluruh halaman.

596
00:29:09,870 --> 00:29:12,480
Dan jika kedengarannya tidak efisien,
itu karena itu akan menjadi,

597
00:29:12,480 --> 00:29:15,050
tapi bereaksi menggunakan hal
disebut Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
Alih-alih menggambar halaman langsung,
membuat pohon HTML virtual dalam memori.

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

600
00:29:23,620 --> 00:29:28,990
Ini membuat pohon palsu di memori,
dan setiap kali Anda memperbarui halaman,

601
00:29:28,990 --> 00:29:31,940
itu akan menarik palsu lain
pohon, dan itu akan menghitung

602
00:29:31,940 --> 00:29:35,120
apa mengubahnya perlu membuat
Halaman untuk membuat dua pohon yang sama.

603
00:29:35,120 --> 00:29:38,540
Jadi pada dasarnya, itu hampir
re-membuat banyak.

604
00:29:38,540 --> 00:29:41,540
Dan kemudian hanya suka perubahan
Halaman di tweak kecil yang diperlukan,

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

606
00:29:44,240 --> 00:29:46,970
>> Jadi pada dasarnya Bereaksi akan
setiap kali Anda mengubah sesuatu,

607
00:29:46,970 --> 00:29:49,010
itu akan kembali membuat halaman virtual.

608
00:29:49,010 --> 00:29:52,830
Ini akan mencari tahu apa yang harus saya
mengubah untuk membuat halaman yang sebenarnya mencerminkan

609
00:29:52,830 --> 00:29:55,602
halaman virtual, dan akan melakukannya.

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

611
00:29:56,560 --> 00:29:59,350
Ini salah satu yang terbesar
fitur Bereaksi.

612
00:29:59,350 --> 00:30:00,880
>> Apakah itu masuk akal?

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

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
>> AUDIENCE: Bagaimana
membandingkan masih MVC

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

618
00:30:10,760 --> 00:30:13,527
>> NEEL Mehta: Ya, pertanyaan
adalah bagaimana cara dibandingkan dengan MVC?

619
00:30:13,527 --> 00:30:14,610
Anda bertanya tentang sumber daya.

620
00:30:14,610 --> 00:30:16,445
Nah, mari kita bicara tentang bagaimana fungsinya.

621
00:30:16,445 --> 00:30:18,190
>> Dalam MVC, Anda akan memperbarui model.

622
00:30:18,190 --> 00:30:20,560
Dalam hal ini kita akan memiliki model kartu.

623
00:30:20,560 --> 00:30:24,540
Pandangan akan memiliki
tombol lain, dan kontrol

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

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

626
00:30:28,450 --> 00:30:30,370
Flip akan memberitahu
Model untuk mengubah, kan?

627
00:30:30,370 --> 00:30:33,915
>> Dan ketika Anda melakukan MVC, Anda
mendengarkan model untuk mengubah,

628
00:30:33,915 --> 00:30:37,150
dan Anda kembali membuat tampilan yang sesuai.

629
00:30:37,150 --> 00:30:39,210
Atau Anda hanya harus seperti
memiliki controller.

630
00:30:39,210 --> 00:30:42,418
Tunggu model untuk mengubah, dan kemudian
mengambil dan memilih bagian dari seperti hal

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

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

633
00:30:45,740 --> 00:30:48,510
Anda harus seperti mengingat apa
perubahan di setiap tempat tunggal,

634
00:30:48,510 --> 00:30:50,290
sehingga sedikit mengganggu.

635
00:30:50,290 --> 00:30:53,670
Dan Bereaksi bagus
karena memiliki bayangan Dom.

636
00:30:53,670 --> 00:30:56,040
Hal mampu untuk hanya
menulis ulang seluruh hal.

637
00:30:56,040 --> 00:30:58,680
Anda tidak harus selektif
seperti menebak apa untuk memperbarui.

638
00:30:58,680 --> 00:31:02,186
>> Di Facebook jika Anda suka
mendapatkan pesan baru, di MVC,

639
00:31:02,186 --> 00:31:04,060
Anda harus ingat,
OK, mengubah hal-hal

640
00:31:04,060 --> 00:31:06,260
di atas
Halaman, ikon pesan.

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

642
00:31:08,290 --> 00:31:10,070
Juga membuat hal baru di jendela itu.

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

644
00:31:11,060 --> 00:31:13,150
>> Itu banyak hal
akan keluar pada waktu yang sama.

645
00:31:13,150 --> 00:31:15,320
Dan jadi jika Anda tidak
memiliki Bayangan Dom, Anda akan

646
00:31:15,320 --> 00:31:18,740
harus melakukannya secara manual karena
Anda tidak bisa menyingkirkan seluruh halaman.

647
00:31:18,740 --> 00:31:21,430
Anda tidak mampu untuk, sehingga Anda memiliki
untuk mengubah setiap hal secara manual,

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

649
00:31:23,990 --> 00:31:27,640
>> Jadi agar
hemat, mereka selektif

650
00:31:27,640 --> 00:31:30,750
memperbarui halaman, yang
efisien, tetapi juga mengganggu.

651
00:31:30,750 --> 00:31:34,002
Dalam Bereaksi, karena Shadow
Dom, Anda mendapatkan kedua hal secara gratis.

652
00:31:34,002 --> 00:31:35,710
Ini efisien karena
dari Shadow Dom.

653
00:31:35,710 --> 00:31:37,210
Kemacetan memperbarui halaman.

654
00:31:37,210 --> 00:31:40,292
Itu tidak melakukan manipulasi pohon.

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

656
00:31:41,250 --> 00:31:45,420
Anda juga mendapatkan kemudahan penggunaan karena
jika Anda hanya menulis ulang seluruh halaman,

657
00:31:45,420 --> 00:31:48,970
tapi Anda hanya tahu, apa-apa, hal
akan berada di halaman suatu tempat.

658
00:31:48,970 --> 00:31:51,180
Mungkin di tempat yang berbeda, tapi
itu akan berada di halaman, kan?

659
00:31:51,180 --> 00:31:52,860
Jadi Anda hanya kembali diberikan-
seluruh hal hampir,

660
00:31:52,860 --> 00:31:55,540
dan Anda mungkin membuat beberapa
perubahan pada halaman itu sendiri.

661
00:31:55,540 --> 00:31:57,850
>> Jadi, sekali lagi, di MVC Anda
harus memilih

662
00:31:57,850 --> 00:32:01,840
antara kemudahan penggunaan dan efisiensi,
dan Bereaksi, Anda mendapatkan keduanya.

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

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

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

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

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

668
00:32:14,740 --> 00:32:16,260
Jadi kita memiliki hak ini sekarang.

669
00:32:16,260 --> 00:32:19,420
Kami memiliki tombol kecil yang dingin kami.

670
00:32:19,420 --> 00:32:23,157
Kami dapat flip kembali dan
sebagainya, dan itu semua hal ini.

671
00:32:23,157 --> 00:32:24,990
Katakanlah kita ingin
memiliki komponen lain.

672
00:32:24,990 --> 00:32:28,730
Katakanlah aplikasi flashcard kami harus
berisi daftar semua kartu

673
00:32:28,730 --> 00:32:31,520
yang Anda miliki, sehingga berarti kita
harus memiliki komponen lain.

674
00:32:31,520 --> 00:32:32,970
Yah, mungkin menyebutnya tampilan daftar.

675
00:32:32,970 --> 00:32:36,200
Mari kita membuat tampilan daftar yang
berdampingan dengan CardView,

676
00:32:36,200 --> 00:32:39,680
dan ini tampilan daftar dan CardView
akan seperti bekerja sama.

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

678
00:32:43,190 --> 00:32:45,160
>> Jadi pertama, mari kita membuat
beberapa lebih kartu yang tepat.

679
00:32:45,160 --> 00:32:46,370
Mari mengatakan, apa kartu?

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

681
00:32:49,619 --> 00:32:51,910
Dan hanya jadi saya tidak perlu
Anda bosan dengan mengetik di,

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

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

684
00:33:01,664 --> 00:33:03,580
Dan aku akan tidak
memberikan hanya satu kartu.

685
00:33:03,580 --> 00:33:06,910
Aku akan memberikan sebuah array kartu.

686
00:33:06,910 --> 00:33:10,240
Jadi pertama aplikasi
akan mematahkan untuk saat ini.

687
00:33:10,240 --> 00:33:14,717
Baiklah, jadi kita akan membuat
ini mampu menangani beberapa kartu.

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

689
00:33:17,800 --> 00:33:18,700
seperti daftar kartu.

690
00:33:18,700 --> 00:33:20,980
Dan dalam hal ini, kami memiliki tiga dari mereka.

691
00:33:20,980 --> 00:33:27,280
>> Baiklah, jadi begitu aplikasi ini
akan mendapatkan kartu daftar,

692
00:33:27,280 --> 00:33:29,870
dan itu akan menentukan
satu untuk menunjukkan kepada CardView tersebut.

693
00:33:29,870 --> 00:33:33,740
The CardView hanya dapat
membuat satu kartu, tapi app

694
00:33:33,740 --> 00:33:37,610
mendapat daftar semua kartu, kan?

695
00:33:37,610 --> 00:33:40,820
>> Jadi, ketika Anda mencari tahu satu
kartu untuk diberikan kepada CardView,

696
00:33:40,820 --> 00:33:44,660
bagaimana Anda akan kira Anda mungkin dapat
untuk membuat keputusan tentang yang kartu

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

698
00:33:47,064 --> 00:33:49,980
Untuk memberikan petunjuk, itu sementara
Anda akan melihat kartu tertentu.

699
00:33:49,980 --> 00:33:53,260
Jika Anda me-refresh halaman, Anda akan
hanya kembali ke kartu pertama.

700
00:33:53,260 --> 00:33:55,464
Itu OK karena itu sementara.

701
00:33:55,464 --> 00:33:56,630
Teknik apa yang kita gunakan?

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

703
00:34:02,534 --> 00:34:08,760
>> AUDIENCE: Anda bisa membuat sebuah variabel
jadi hanya seperti Anda memiliki depan.

704
00:34:08,760 --> 00:34:11,989
Apakah ini benar, Anda bisa
memiliki kartu saat sama dengan 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL Mehta: Ya, jadi kita
ingin memiliki negara, kan?

706
00:34:14,150 --> 00:34:16,080
Anda akan menggunakan negara dalam
komponen untuk mencari tahu

707
00:34:16,080 --> 00:34:17,288
yang kartu kita ingin mendapatkan.

708
00:34:17,288 --> 00:34:19,290
Seperti kita memiliki daftar
semua kartu, kami akan

709
00:34:19,290 --> 00:34:21,630
menggunakan negara untuk mencari tahu
salah satu kartu pertama,

710
00:34:21,630 --> 00:34:23,710
kartu kedua, kartu ketiga, dan seterusnya.

711
00:34:23,710 --> 00:34:28,760
>> Jadi sebuah aplikasi sehingga aplikasi akan mendapatkan
memiliki fungsi getInitialState,

712
00:34:28,760 --> 00:34:35,020
Fungsi getInitialState kembali.

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

714
00:34:39,929 --> 00:34:42,889
Jadi sekarang app kami memiliki itu negara sendiri.

715
00:34:42,889 --> 00:34:47,179
>> Dan sebagainya sekarang membuat, untuk mencari tahu
kartu, mari kita pergi ke array

716
00:34:47,179 --> 00:34:49,969
dan ambil hal pada indeks itu.

717
00:34:49,969 --> 00:34:53,580
Pilih kartu 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, alat peraga dan
negara benar-benar bekerja bersama-sama.

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

721
00:35:08,990 --> 00:35:10,470
dan mari kita lihat apakah ini bekerja.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, itu adalah kesalahan 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
>> Keren, ya, jadi sekarang kami kembali
ke tempat kami sebelumnya, kan?

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

730
00:35:57,100 --> 00:35:59,390
daftar kartu, bukan hanya satu kartu.

731
00:35:59,390 --> 00:36:04,130
Dan sekarang, sekali lagi, jika kita mengubah
activeIndex, kita bisa pergi dari 0 ke 1,

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

733
00:36:07,330 --> 00:36:10,390
Jadi, inilah yang baru
souped-up versi kami.

734
00:36:10,390 --> 00:36:16,000
>> OK, jadi sekarang mari kita memiliki pandangan daftar yang
menunjukkan semua kartu dalam program Anda,

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

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

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

738
00:36:32,890 --> 00:36:38,800
Jadi kita ingin membuat sebuah unordered
daftar dengan item daftar untuk setiap kartu.

739
00:36:38,800 --> 00:36:41,490
Dan jadi kami memiliki banyak kartu.

740
00:36:41,490 --> 00:36:44,990
Kami ingin satu item daftar
untuk setiap kartu, kan?

741
00:36:44,990 --> 00:36:47,490
Kita bisa melakukan untuk loop atau
sesuatu untuk membuat daftar item baru.

742
00:36:47,490 --> 00:36:50,522
Tapi cara Anda melakukannya di
Bereaksi, menggunakan sesuatu yang disebut peta.

743
00:36:50,522 --> 00:36:57,150
Peta merupakan alat atau fungsi yang Anda gunakan
bahwa untuk setiap item, berjalan beberapa fungsi,

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

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

746
00:37:06,310 --> 00:37:12,120
adalah istilah untuk
function-- x panah x kali x.

747
00:37:12,120 --> 00:37:16,110
Ini mengatakan, untuk setiap nomor
dalam 1, 2, 3, bawa.

748
00:37:16,110 --> 00:37:17,800
Persegi itu, dan mengembalikannya.

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

750
00:37:22,090 --> 00:37:25,480
x memberi Anda kembali diberikan
bahwa fungsi ini

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

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

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

754
00:37:32,190 --> 00:37:35,709
>> NEEL Mehta: Yep, 1, 4, 9
karena Anda lakukan 1 kali 1.

755
00:37:35,709 --> 00:37:36,500
Yang memberikan 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
Itu 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
Itu elemen ketiga.

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

762
00:37:42,640 --> 00:37:45,015
Jadi peta memiliki teknik Anda
gunakan dalam programmer fungsional,

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

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

765
00:37:50,500 --> 00:37:51,970
Dan jadi ini terdengar akrab.

766
00:37:51,970 --> 00:37:53,370
Kami memiliki daftar kartu.

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

768
00:37:56,860 --> 00:38:00,250
Kita akan mengatakan, biarkan daftar equals
this.props, kartu, peta.

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

770
00:38:10,580 --> 00:38:15,070
>> Dan diberikan kartu, kami
akan menghasilkan daftar item

771
00:38:15,070 --> 00:38:17,580
dengan kartu isi sisi itu.

772
00:38:17,580 --> 00:38:20,660
Mari kita katakan kita ingin memberikan
kartu mempertanyakan sehingga card.question.

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

774
00:38:24,990 --> 00:38:30,649
Jadi daftar ini berisi
array LI atau Daftar Produk

775
00:38:30,649 --> 00:38:32,440
di mana ada satu daftar
Item untuk setiap kartu,

776
00:38:32,440 --> 00:38:35,150
dan yang berisi pertanyaan kartu.

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

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

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

780
00:38:46,521 --> 00:38:49,020
Dalam yang daftar unordered,
kita hanya akan tetap seluruh daftar

781
00:38:49,020 --> 00:38:49,890
bahwa mereka memberi kami.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Baiklah, jadi sekarang ini
tampilan daftar bekerja hanya menemukan.

785
00:38:56,060 --> 00:38:59,842
Pertanyaan tentang tampilan daftar?

786
00:38:59,842 --> 00:39:01,270
Anda memiliki banyak kartu.

787
00:39:01,270 --> 00:39:02,800
Anda membuat daftar item untuk setiap kartu.

788
00:39:02,800 --> 00:39:05,466
Dan Anda menempatkan mereka dalam sebuah unordered
daftar, dan Anda memberikannya kembali.

789
00:39:05,466 --> 00:39:09,410
Jadi sekarang mari kita bertindak sehingga kita menanamkan
dalam hal ini dari aplikasi kita,

790
00:39:09,410 --> 00:39:14,310
sehingga kami bisa melakukan ini, tampilan daftar.

791
00:39:14,310 --> 00:39:17,070
Apa argumen yang kita lolos ke tampilan daftar?

792
00:39:17,070 --> 00:39:18,320
Sifat apa yang kita berikan?

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

794
00:39:25,111 --> 00:39:26,860
Ingat, jika Anda memberikan
itu sekelompok kartu,

795
00:39:26,860 --> 00:39:29,590
itu akan membuat daftar
melihat untuk kartu-kartu.

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

797
00:39:32,267 --> 00:39:33,350
AUDIENCE: Sebuah daftar kartu?

798
00:39:33,350 --> 00:39:37,130
NEEL Mehta: Ya, jadi kartu
sama this.props.cards, kan?

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

800
00:39:39,850 --> 00:39:44,370
Dan jadi satu-satunya masalah
adalah bahwa Anda hanya dapat

801
00:39:44,370 --> 00:39:48,600
ternyata salah satu elemen tingkat atas di render,
sehingga Anda harus membungkusnya di div.

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

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
Jadi mari kita lihat apakah itu.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Apakah itu bekerja?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Yap, di sana Anda pergi.

809
00:40:31,030 --> 00:40:33,700
Jadi sekarang kami memiliki daftar
kartu di bagian bawah,

810
00:40:33,700 --> 00:40:36,180
dan kemudian kita memiliki kita
CardView sendiri di atas,

811
00:40:36,180 --> 00:40:40,486
dan yang akan flip antara
dua sisi kartu.

812
00:40:40,486 --> 00:40:42,610
Sekarang apakah 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 memiliki dua komponen.

815
00:40:46,790 --> 00:40:49,666
Komponen pertama cetakan
setiap kartu dalam daftar.

816
00:40:49,666 --> 00:40:50,540
Itulah tampilan daftar.

817
00:40:50,540 --> 00:40:54,770
Dan komponen kedua
mencetak hanya kartu itu.

818
00:40:54,770 --> 00:40:58,840
Jika Anda memberikan kartu tertentu, itu akan
mencetak informasi tentang kartu yang

819
00:40:58,840 --> 00:41:01,870
dan membiarkan Anda flip bolak-balik.

820
00:41:01,870 --> 00:41:05,850
>> Jadi jika kita ingin, kita dapat mencoba dan bicara
tentang menambahkan beberapa fitur baru ini.

821
00:41:05,850 --> 00:41:09,482
Kalau tidak, kita bisa berbicara sedikit lebih
tentang dari kecepatan reaktor,

822
00:41:09,482 --> 00:41:11,190
atau kita bisa menjawab
pertanyaan yang mungkin Anda miliki

823
00:41:11,190 --> 00:41:15,050
karena ini adalah semua bagian inti
dari bereaksi bahwa saya ingin berbicara tentang.

824
00:41:15,050 --> 00:41:16,540
Kita bisa pergi ke depan.

825
00:41:16,540 --> 00:41:17,590
Kita bisa menjawab pertanyaan-pertanyaan.

826
00:41:17,590 --> 00:41:18,560
Apapun yang kamu mau.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> AUDIENCE: Dapatkah Anda menggunakan
BEJ di yang normal JavaScript?

829
00:41:24,205 --> 00:41:27,150
Atau sesuatu yang yang
datang dengan [tak terdengar]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL Mehta: Pertanyaannya adalah kaleng
Anda menggunakan BEJ dengan yang normal JavaScript?

831
00:41:30,760 --> 00:41:32,620
Jawabannya adalah ya.

832
00:41:32,620 --> 00:41:41,070
BEJ adalah hanya cara yang dibutuhkan Anda
JavaScript yang memiliki HTML di dalamnya,

833
00:41:41,070 --> 00:41:44,215
dan mengkompilasi ke JavaScript yang
tidak memiliki HTML di dalamnya.

834
00:41:44,215 --> 00:41:47,880
Jadi melihat itu-- begitu melihat di sini.

835
00:41:47,880 --> 00:41:50,820
Ini tampak seperti Anda memiliki seperti div
dan Anda memiliki barang-barang di dalamnya.

836
00:41:50,820 --> 00:41:54,970
>> Yang mengkompilasi ke JavaScript yang
seperti menghasilkan hal yang sama.

837
00:41:54,970 --> 00:41:59,590
Saya kira apa yang saya katakan adalah bahwa
BEJ hanya sintaksis, seperti itu

838
00:41:59,590 --> 00:42:03,530
preprocessor untuk JavaScript banyak
seperti PHP adalah preprocessor untuk HTML.

839
00:42:03,530 --> 00:42:05,490
JSC adalah preprocessor
untuk JavaScript yang memungkinkan

840
00:42:05,490 --> 00:42:12,970
Anda menempatkan HTML dalam Anda JavaScript.

841
00:42:12,970 --> 00:42:16,425
Dan jadi jika Anda memiliki transformator yang tepat
yang merupakan hal yang disebut [tidak terdengar],

842
00:42:16,425 --> 00:42:17,300
yang akan mengubah.

843
00:42:17,300 --> 00:42:19,360
Preprocessor tepat,
itu akan membiarkan Anda melakukan itu.

844
00:42:19,360 --> 00:42:20,235
>> AUDIENCE: [tidak terdengar]

845
00:42:20,235 --> 00:42:23,026
NEEL Mehta: Biasanya Anda tidak perlu
untuk menempatkan HTML dalam JavaScript

846
00:42:23,026 --> 00:42:24,110
kecuali anda lakukan Bereaksi.

847
00:42:24,110 --> 00:42:27,146
Tapi Anda bisa melakukannya pula.

848
00:42:27,146 --> 00:42:27,645
Ya?

849
00:42:27,645 --> 00:42:29,353
>> AUDIENCE: Saya pikir Anda
telah dijelaskan Bereaksi

850
00:42:29,353 --> 00:42:31,970
sebagai bahasa pemrograman fungsional.

851
00:42:31,970 --> 00:42:35,646
Kami telah belajar C di CS50.

852
00:42:35,646 --> 00:42:38,032
Apakah C juga bahasa fungsional?

853
00:42:38,032 --> 00:42:39,990
NEEL Mehta: Jadi pertanyaannya
adalah tentang fungsional

854
00:42:39,990 --> 00:42:43,010
dibandingkan hal lain yang disebut
imperatif atau prosedural pemrograman.

855
00:42:43,010 --> 00:42:44,820
Ada dua jenis program populer.

856
00:42:44,820 --> 00:42:48,550
Satu disebut prosedural, yang
adalah semua tentang seperti melakukan perintah,

857
00:42:48,550 --> 00:42:51,510
dan satu fungsional, yang semua
tentang memiliki fungsi dan memiliki

858
00:42:51,510 --> 00:42:52,930
input dan output dari mereka.

859
00:42:52,930 --> 00:42:55,930
Bereaksi adalah paradigma fungsional.

860
00:42:55,930 --> 00:42:58,010
C adalah paradigma yang sangat prosedural.

861
00:42:58,010 --> 00:43:02,360
>> Dan sebagai contoh, C misalnya,
Anda tidak melakukan cara deklaratif ini

862
00:43:02,360 --> 00:43:04,390
pembuatan program, kan?

863
00:43:04,390 --> 00:43:06,826
Anda harus mengatakan, mencetak ini.

864
00:43:06,826 --> 00:43:07,950
Mengubah struktur data.

865
00:43:07,950 --> 00:43:08,530
Cetak ini.

866
00:43:08,530 --> 00:43:10,160
Ini semua tentang perintah.

867
00:43:10,160 --> 00:43:12,640
>> Dalam Bereaksi, tidak ada
bahwa banyak perintah.

868
00:43:12,640 --> 00:43:15,145
Ini semua tentang memiliki
komponen Anda menempatkan bersama-sama.

869
00:43:15,145 --> 00:43:16,300
Mereka seperti fungsi.

870
00:43:16,300 --> 00:43:26,360
Anda memiliki fungsi seperti
disebut CardView,

871
00:43:26,360 --> 00:43:28,680
yang merupakan fungsi
yang memiliki input, output,

872
00:43:28,680 --> 00:43:30,660
dan Bereaksi semua
tentang filosofi ini

873
00:43:30,660 --> 00:43:32,700
kami dari having-- Anda memiliki data.

874
00:43:32,700 --> 00:43:34,910
Anda lulus melalui ini
algoritma, dan itu 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 sehingga Anda harus
membangunnya sepotong demi sepotong.

877
00:43:39,180 --> 00:43:42,800
>> Jadi untuk menarik sebuah metafora untuk apa
Saya katakan sebelumnya, Anda tahu bagaimana

878
00:43:42,800 --> 00:43:47,050
di Facebook jika Anda mendapatkan pesan,
dan Anda memilih bagian apa untuk memperbarui,

879
00:43:47,050 --> 00:43:47,882
itu prosedural.

880
00:43:47,882 --> 00:43:48,840
Ini penting, kan?

881
00:43:48,840 --> 00:43:49,806
OK, saya mendapat pesan.

882
00:43:49,806 --> 00:43:50,930
Mari kita mengubah account di sana.

883
00:43:50,930 --> 00:43:52,110
>> Mari pop jendela di sini.

884
00:43:52,110 --> 00:43:52,780
Mari kita mengubah account 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
Itu pendekatan prosedural.

887
00:43:55,220 --> 00:44:00,240
>> Itulah hal-hal yang seperti sudut,
Boost, Backbone, kerangka kerja lainnya digunakan.

888
00:44:00,240 --> 00:44:01,200
Bereaksi fungsional.

889
00:44:01,200 --> 00:44:03,324
Ini adalah cara yang sangat berbeda
berpikir tentang hal-hal.

890
00:44:03,324 --> 00:44:07,950
Dibutuhkan ide 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
Ini akan memuntahkan apa
seharusnya, dan komputer

893
00:44:11,820 --> 00:44:13,490
akan mengurus menimbang.

894
00:44:13,490 --> 00:44:15,890
Anda tidak menangani sendiri.

895
00:44:15,890 --> 00:44:18,470
Apakah yang membuat sedikit akal?

896
00:44:18,470 --> 00:44:18,970
Ya?

897
00:44:18,970 --> 00:44:24,180
>> AUDIENCE: Dalam bahasa fungsional,
segala sesuatu yang terjadi sekaligus?

898
00:44:24,180 --> 00:44:26,800
>> NEEL Mehta: Tidak, hal-hal terjadi dalam urutan.

899
00:44:26,800 --> 00:44:29,320
Seperti di sini masih ada
memesan, tapi tidak

900
00:44:29,320 --> 00:44:32,390
terjadi dalam urutan seperti
memuji, perintah, perintah.

901
00:44:32,390 --> 00:44:36,459
Hal ini terjadi dalam urutan
Fungsi memberikan output.

902
00:44:36,459 --> 00:44:37,750
Memasukkan ke dalam fungsi lain.

903
00:44:37,750 --> 00:44:39,550
Menempatkan bahwa ke lain
fungsi, fungsi lain.

904
00:44:39,550 --> 00:44:41,470
>> Jika Anda melakukannya CS51, Anda akan
belajar program fungsional

905
00:44:41,470 --> 00:44:42,886
keluar sedikit dari lingkup ini.

906
00:44:42,886 --> 00:44:45,090
Tapi pada dasarnya, apa yang membuat
Bereaksi dingin tidak hanya

907
00:44:45,090 --> 00:44:46,840
aliran data satu arah
dan virtual Dom,

908
00:44:46,840 --> 00:44:48,700
tetapi juga ini ide
pemrograman fungsional.

909
00:44:48,700 --> 00:44:51,720
Dan pemrograman fungsional sangat mudah
untuk menyusun dan membuat hal-hal keren dari,

910
00:44:51,720 --> 00:44:53,844
dan itu sangat mudah untuk berpikir
tentang dan alasan tentang.

911
00:44:53,844 --> 00:44:55,450
Jadi imbang lagi baik dari Bereaksi.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Ada pertanyaan 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
>> AUDIENCE: Um, mengapa Anda
menggunakan membiarkan sebagai lawan var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL Mehta: Jadi pertanyaannya adalah
mengapa Anda menggunakan biarkan bukannya var?

918
00:45:10,450 --> 00:45:13,220
Ini adalah hal yang disebut
ES6 atau ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Ini adalah versi baru dari JavaScript.

920
00:45:15,820 --> 00:45:19,050
Ada sekelompok alasan teknis,
tapi membiarkan adalah versi yang lebih baik dari var.

921
00:45:19,050 --> 00:45:20,724
>> Ini adalah bagaimana Anda mendeklarasikan variabel.

922
00:45:20,724 --> 00:45:21,390
Anda dapat menggunakan membiarkan.

923
00:45:21,390 --> 00:45:22,140
Anda dapat menggunakan var.

924
00:45:22,140 --> 00:45:23,825
Let memiliki banyak teknis
reasons-- dapat Anda melihat mereka

925
00:45:23,825 --> 00:45:25,610
up later-- mengapa lebih baik.

926
00:45:25,610 --> 00:45:28,780
Pada dasarnya, ES6 memiliki beberapa nice
sintaks baru, beberapa fitur baru

927
00:45:28,780 --> 00:45:30,720
di atas JavaScript tua.

928
00:45:30,720 --> 00:45:32,782
>> Jadi kita harus seperti lima menit.

929
00:45:32,782 --> 00:45:34,990
Aku hanya ingin berbicara tentang
satu hal lagi sangat cepat.

930
00:45:34,990 --> 00:45:36,450
Jika Anda memiliki pertanyaan,
mari kita bicara tentang hal itu setelah ini.

931
00:45:36,450 --> 00:45:38,366
Tapi hanya jadi ini mendapat
tertangkap kamera, saya hanya

932
00:45:38,366 --> 00:45:41,550
ingin berbicara sedikit tentang bagaimana Anda
benar-benar menggunakan Bereaksi 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 Bereaksi, dan
itu akan menunjukkan bagaimana Anda benar-benar menggunakan

936
00:46:03,320 --> 00:46:05,320
Bereaksi halaman Anda.

937
00:46:05,320 --> 00:46:08,845
Pada dasarnya, itu sedikit
rumit mencoba untuk menginstal Bereaksi.

938
00:46:08,845 --> 00:46:12,300
Ini tidak semudah yang Anda hanya drag
dan menjatuhkan JavaScript di sana.

939
00:46:12,300 --> 00:46:15,890
>> Anda harus memiliki transformator Anda
mengatur, yang akan, seperti yang terjadi sebelumnya,

940
00:46:15,890 --> 00:46:18,120
mengubah BEJ Anda ke
JavaScript normal.

941
00:46:18,120 --> 00:46:21,030
Anda harus hal yang akan
mengkompilasi Anda ES6 normal.

942
00:46:21,030 --> 00:46:24,720
JavaScript ada banyak bergerak
bagian yang harus Anda lakukan, jadi ada hal

943
00:46:24,720 --> 00:46:27,200
disebut Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Dan ini adalah alat baris perintah yang akan
membantu Anda keluar perancah Anda Bereaksi

945
00:46:31,110 --> 00:46:32,380
proyek dengan mudah.

946
00:46:32,380 --> 00:46:38,660
>> Sehingga Anda dapat membaca tentang ini
kemudian, tetapi ada beberapa alat

947
00:46:38,660 --> 00:46:40,160
yang Yeoman menawarkan.

948
00:46:40,160 --> 00:46:43,280
Mereka akan membiarkan Anda membuat Bereaksi
app dengan segala sesuatu yang dibangun di.

949
00:46:43,280 --> 00:46:46,030
Seperti itu akan telah membangun
di, komponen dibangun di.

950
00:46:46,030 --> 00:46:47,880
Ini akan memiliki transformator Anda dibangun di.

951
00:46:47,880 --> 00:46:50,699
Mereka memiliki banyak keren
hal dibangun secara otomatis

952
00:46:50,699 --> 00:46:52,240
menggunakan hal-hal ini disebut generator.

953
00:46:52,240 --> 00:46:54,620
>> Jadi membaca tentang ini jika Anda suka.

954
00:46:54,620 --> 00:46:59,110
Hanya pergi pada Yeoman, Y-E-O-M-A-N, dan
Anda dapat menemukan generator seperti ini.

955
00:46:59,110 --> 00:47:01,263
Dan dengan generator seperti
ini, Anda hanya ingin satu

956
00:47:01,263 --> 00:47:03,010
adalah baris perintah beberapa perintah.

957
00:47:03,010 --> 00:47:05,530
Ini akan perancah keluar
Seluruh Bereaksi aplikasi untuk Anda.

958
00:47:05,530 --> 00:47:10,470
Ini akan mendapatkan semua pipa manual,
dan pekerjaan kasar dilakukan untuk Anda,

959
00:47:10,470 --> 00:47:13,010
dan ini adalah mengapa Anda hanya fokus
pada hanya menulis di Bereaksi.

960
00:47:13,010 --> 00:47:16,739
>> Jadi pada dasarnya membangun
Bereaksi app adalah trivial.

961
00:47:16,739 --> 00:47:19,530
Ini kabel 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 membuat Bereaksi
app, cobalah melakukannya dengan cara itu.

963
00:47:23,070 --> 00:47:26,360
Jika Anda hanya ingin bereksperimen,
Anda dapat mencoba menggunakan CodePen ini

964
00:47:26,360 --> 00:47:28,550
karena CodePen ini memiliki
semua bereaksi kabel.

965
00:47:28,550 --> 00:47:30,240
Saya sudah melakukan semua pekerjaan untuk Anda sudah.

966
00:47:30,240 --> 00:47:34,610
>> Jadi jika Anda ingin membuat seperti
produksi untuk melepaskan Bereaksi aplikasi,

967
00:47:34,610 --> 00:47:37,220
mencoba salah satu generator ini.

968
00:47:37,220 --> 00:47:40,240
Jika Anda hanya ingin bermain
sekitar, hal ini sering layak hanya

969
00:47:40,240 --> 00:47:44,490
seperti mencoba bermain-main di CodePen sini.

970
00:47:44,490 --> 00:47:45,470
Kedengarannya bagus?

971
00:47:45,470 --> 00:47:45,970
Keren.

972
00:47:45,970 --> 00:47:47,890
>> Jadi itu yang saya miliki.

973
00:47:47,890 --> 00:47:52,470
Sekali lagi, semua kode dan contoh yang
akan berada di situs ini di sini.

974
00:47:52,470 --> 00:47:55,509
Jadi, sekali lagi, kami tidak berbicara
tentang banyak sintaks Bereaksi,

975
00:47:55,509 --> 00:47:57,550
tapi untuk menemukan semua orang
sedikit rincian sintaksis,

976
00:47:57,550 --> 00:48:00,320
itu semua akan tersedia
di website ini di sini.

977
00:48:00,320 --> 00:48:02,660
>> Jadi saya akan merekomendasikan seperti
mengambil langkah pertama.

978
00:48:02,660 --> 00:48:06,277
Memasukkannya ke dalam CodePen Anda.

979
00:48:06,277 --> 00:48:08,110
Coba mengerjakan pembuatan
untuk langkah kedua.

980
00:48:08,110 --> 00:48:11,310
Ada langkah keempat, dan hanya
melihat di mana Anda dapatkan dari itu.

981
00:48:11,310 --> 00:48:14,840
>> Pertanyaan lagi, periksa
halaman itu atau email saya.

982
00:48:14,840 --> 00:48:16,490
Itu email saya.

983
00:48:16,490 --> 00:48:19,885
Tapi saya akan senang untuk membantu Anda dengan
pertanyaan yang mungkin Anda miliki tentang Bereaksi.

984
00:48:19,885 --> 00:48:21,010
Jadi, ya, itu yang saya miliki.

985
00:48:21,010 --> 00:48:23,410
Terima kasih banyak untuk
menonton atau untuk menghadiri.

986
00:48:23,410 --> 00:48:26,820
Dan aku akan mengambil pertanyaan
Anda mungkin memiliki setelah ini sekarang.

987
00:48:26,820 --> 00:48:29,140
Jadi terima kasih semua untuk menonton.

988
00:48:29,140 --> 00:48:31,270