1
00:00:00,000 --> 00:00:02,910
>> [MÜZİK OYUN]

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL MEHTA: İşte gidiyor.

4
00:00:07,275 --> 00:00:11,070
>> Eh, herkes, web hoşgeldiniz
ile geleceğin uygulamalar tepki.

5
00:00:11,070 --> 00:00:11,870
Bu CS50 olduğunu.

6
00:00:11,870 --> 00:00:12,930
Benim adım Neel olduğunu.

7
00:00:12,930 --> 00:00:17,689
Ben CS50 ve bir ikinci bir ta değilim
Harvard Koleji ve çok, çok az

8
00:00:17,689 --> 00:00:18,730
tutkulu bir web geliştirici.

9
00:00:18,730 --> 00:00:20,730
Yani çok heyecanlı değilim
Bugün size konuşuyor,

10
00:00:20,730 --> 00:00:24,550
Burada ya da evde olsanız
izlerken, yaklaşık yine hangi tepki

11
00:00:24,550 --> 00:00:27,270
Ben web uygulamaları, gelecekte dediği gibi.

12
00:00:27,270 --> 00:00:29,055
>> Yani tepki bir web çatısıdır.

13
00:00:29,055 --> 00:00:30,930
Ben oldum Ve söylüyorum
Burada bazı insanlar,

14
00:00:30,930 --> 00:00:33,400
Bir çerçeve bir olduğunu
kullanabileceğiniz araçları seti

15
00:00:33,400 --> 00:00:35,770
yapısı ve web uygulaması oluşturmak için.

16
00:00:35,770 --> 00:00:39,010
Ve web uygulamaları, yine web siteleri
Facebook gibi interaktif yönündedir,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, ne olursa olsun.

18
00:00:42,330 --> 00:00:45,590
>> Yani Facebook bir web çerçevesi
Bu Facebook tarafından geliştirilen

19
00:00:45,590 --> 00:00:48,060
tepki back-- birkaç yıldır.

20
00:00:48,060 --> 00:00:50,830
O zamandan beri kullanılan oldu
Mobil uygulamalar Facebook

21
00:00:50,830 --> 00:00:52,460
ve web uygulaması, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy başka bir şeydir
tepki belirgin erken benimseyen.

23
00:00:56,350 --> 00:00:58,630
>> Gerçekten alıyorum oldu
son derece popüler.

24
00:00:58,630 --> 00:01:03,420
Hiç Köşeli veya benzeri şeyler kullanıyorsanız
Omurga, bu ailenin özel bir,

25
00:01:03,420 --> 00:01:05,830
ama o zamandan beri çok var
Onların popülerlik geçmek.

26
00:01:05,830 --> 00:01:06,890
Bu sıcak yeni bir şey.

27
00:01:06,890 --> 00:01:09,590
O gerçekten çok büyük.

28
00:01:09,590 --> 00:01:13,470
>> Ve böylece tepki bir şekilde değil, sadece iyi
Bina arabirimleri için web framework.

29
00:01:13,470 --> 00:01:16,020
Bu web arayüzleri oluşturmak için iyi.

30
00:01:16,020 --> 00:01:18,350
Bir şey de var
denilen Yerli tepki hangi

31
00:01:18,350 --> 00:01:22,200
Eğer arabirimleri oluşturmak sağlar
Android ve iOS için

32
00:01:22,200 --> 00:01:26,390
Gelecekte belki diğer platformlarda
sadece aynı JavaScript kodunu kullanarak.

33
00:01:26,390 --> 00:01:31,130
Sen aynı kullanabilirsiniz
JavaScript kodu, web siteleri oluşturmak için

34
00:01:31,130 --> 00:01:33,040
Android uygulamaları ve iOS uygulamaları işlemek için.

35
00:01:33,040 --> 00:01:35,000
>> Bu çok, çok heyecan verici bir zaman.

36
00:01:35,000 --> 00:01:37,070
Bu gerçekten, gerçekten harika bir fırsat.

37
00:01:37,070 --> 00:01:42,020
Gerçekten evrensel bir web bulunuyor
arayüz geliştirme aracı,

38
00:01:42,020 --> 00:01:44,420
bu yüzden, bir çok, çok var:
Önemli olan bilmek.

39
00:01:44,420 --> 00:01:46,949
Ve, ben insanlara anlatmaya gibi
daha önce, bu, bence,

40
00:01:46,949 --> 00:01:48,990
biz nasıl değişecek
sonsuza web uygulamaları oluşturmak.

41
00:01:48,990 --> 00:01:55,820
Bu yüzden belki biraz abartma, ama ben
bunu bilmek için oldukça iyi bir şey olduğunu düşünüyorum.

42
00:01:55,820 --> 00:01:57,580
>> Tamam, bu yüzden tepki nedir?

43
00:01:57,580 --> 00:02:01,020
Tepki bir çerçeve yapabilirsiniz olduğunu
arabirimleri oluşturmak için kullanabilirsiniz.

44
00:02:01,020 --> 00:02:03,240
Bir arayüz, yine,
Sağ bir web sayfası?

45
00:02:03,240 --> 00:02:06,340
Yani burada Instagram.com var, kullanır tepki.

46
00:02:06,340 --> 00:02:08,740
>> Üzerine inşa edilmiştir tepki
bileşenlerin fikir.

47
00:02:08,740 --> 00:02:11,900
Bir bileşen, bir HTML
Steroid eleman,

48
00:02:11,900 --> 00:02:14,470
böylece bir HTML elemanı bir düğmeye gibidir.

49
00:02:14,470 --> 00:02:15,250
Bu bir paragraf var.

50
00:02:15,250 --> 00:02:17,500
Bu bir başlık değil mi?

51
00:02:17,500 --> 00:02:22,740
Ve Instagram bu kullanmak, ancak bu olacak
Ayrıca tepki bileşenlerini kullanacağız.

52
00:02:22,740 --> 00:02:25,740
>> Bileşenleridir React
souped-up HTML öğeleri

53
00:02:25,740 --> 00:02:28,100
kendi davranışlarını var
içlerindeki.

54
00:02:28,100 --> 00:02:31,800
Yani, bir örnek olarak, biz olabilir
Zaman elemanı, bir zaman bileşeni,

55
00:02:31,800 --> 00:02:34,095
bu gibi maddeleri de ihtiva edecektir
Zaman damgası, bilirsin

56
00:02:34,095 --> 00:02:37,170
bir profil bileşeni,
profil görüntüsünü içerecektir

57
00:02:37,170 --> 00:02:38,820
ve kişinin adı.

58
00:02:38,820 --> 00:02:42,930
Bu gibi sayaç var hangi
sever sayısı gibi sayabilir,

59
00:02:42,930 --> 00:02:45,610
bunu tıklarsanız ve bu olacak
sever sayısını artırmak.

60
00:02:45,610 --> 00:02:48,200
Bir bileşen bir olduğunu
HTML kodu demet o

61
00:02:48,200 --> 00:02:50,520
bazı işlevler vardır
bunun içinde tamamladı.

62
00:02:50,520 --> 00:02:53,770
Yani bir HTML elemanı gibi
steroid, ben daha önce de söylediğim gibi.

63
00:02:53,770 --> 00:02:56,270
Bu bileşenleri alabilir,
ve onları bir araya koyabilirsiniz

64
00:02:56,270 --> 00:02:59,060
olarak, yeni bileşenler yapmak
Bu durumda, bir post bileşeni,

65
00:02:59,060 --> 00:03:00,505
hangi tüm bu şeyler içerir.

66
00:03:00,505 --> 00:03:04,050
Bu, Profil Zaman içerecektir,
LikeCounter, belki açıklama

67
00:03:04,050 --> 00:03:06,100
ve belki de görüntü kendisi.

68
00:03:06,100 --> 00:03:10,810
Ve böylece web uygulamaları sadece alınarak inşa edilir
bileşenleri ve onları bir araya koyarak.

69
00:03:10,810 --> 00:03:15,620
Bir Instagram yem başka bir şey daha
mesajların bir grup birbiri ardına,

70
00:03:15,620 --> 00:03:19,032
Her mesaj, Zaman gibi içerdiği
Böylece, LikeCounter Profil ve.

71
00:03:19,032 --> 00:03:20,490
Bu tür bir ev inşa gibi.

72
00:03:20,490 --> 00:03:22,660
Sen inşa yok
yukarıdan aşağıya ev.

73
00:03:22,660 --> 00:03:24,960
Seni components-- almak
banyo gibi alır.

74
00:03:24,960 --> 00:03:28,320
Sen onları sopa bedroom-- almak
Birlikte ve yeni bir bileşeni var.

75
00:03:28,320 --> 00:03:29,760
Evin yeni bir parçası var.

76
00:03:29,760 --> 00:03:32,860
>> Böylece tüm etrafında inşa edilmiştir React
bileşenlerinin bu fikir

77
00:03:32,860 --> 00:03:36,600
bildirime ki, interaktif.

78
00:03:36,600 --> 00:03:39,650
Ne sadece söylemek gibi
profil, ve bu işler.

79
00:03:39,650 --> 00:03:40,600
Onlar composable vardır.

80
00:03:40,600 --> 00:03:43,880
Bir zaman ve bir profil alabilir, koymak
onları bir arada, daha iyi bir şey yapmak.

81
00:03:43,880 --> 00:03:47,770
Ve onlar eğer öyleyse, yeniden konum sen
Bir yazı için kaynak koduna sahip,

82
00:03:47,770 --> 00:03:49,440
O hiçbir yerinde embed olabilir.

83
00:03:49,440 --> 00:03:53,160
>> Bir Instagram gömebilirsiniz
Kendi web sitesinde bir şey.

84
00:03:53,160 --> 00:03:56,830
Facebook gömebilirsiniz, örneğin,
sürece kullandığı yanı sıra tepki.

85
00:03:56,830 --> 00:04:00,360
Yani bileşenler gerçekten, gerçekten, gerçekten
web güçlü yapı taşları

86
00:04:00,360 --> 00:04:04,180
Bu her yerde kullanılabilir ve konabilir
Birlikte yeni yapı taşlarını yapmak.

87
00:04:04,180 --> 00:04:07,159
Bu çok, çok var
üst düzey bakış.

88
00:04:07,159 --> 00:04:09,200
Yani, yine, varsa
herhangi bir noktada herhangi bir soru

89
00:04:09,200 --> 00:04:14,470
reaktörün, felsefesi hakkında
kodlama, beni durduramaz, ve bana bildirin.

90
00:04:14,470 --> 00:04:18,420
>> Tamam, bu yüzden dolayı serin tepki olduğunu
seyir için farklı bir yol vardır

91
00:04:18,420 --> 00:04:19,870
Web uygulamaları oluşturmak nasıl.

92
00:04:19,870 --> 00:04:23,620
Muhtemelen MVC, a duydum
modeli CS50 veya ne olursa olsun kontrol

93
00:04:23,620 --> 00:04:25,940
Kullanmak sondalama sınıfların diğer.

94
00:04:25,940 --> 00:04:29,000
Ve en çerçeveler vardır
MVC fikri etrafında inşa.

95
00:04:29,000 --> 00:04:30,410
React değildir.

96
00:04:30,410 --> 00:04:32,980
Fikri etrafında inşa edilmiştir tepki
tek yönlü veri akışı

97
00:04:32,980 --> 00:04:36,510
Burada bu grafik veya grafik tarafından görüldüğü gibi.

98
00:04:36,510 --> 00:04:38,260
>> Temelde, bir veri kaynağı var.

99
00:04:38,260 --> 00:04:42,380
Ve veri kaynağı karar verecek
nasıl bazı bileşenleri düzenlemek için.

100
00:04:42,380 --> 00:04:45,452
Ve bileşenler olacak
Sonra onlar değiştirdiğinizde,

101
00:04:45,452 --> 00:04:47,160
onlar söyleyecektir
Veri kaynağı değiştirmek için.

102
00:04:47,160 --> 00:04:49,350
>> Instagram kullanmak için
örnek aklınıza gelebilecek

103
00:04:49,350 --> 00:04:52,050
gibi yazılan nesnelerin bir listesi
Bir veritabanı veya bir şey.

104
00:04:52,050 --> 00:04:53,310
Veri That.

105
00:04:53,310 --> 00:04:57,600
Ve sonra bizim post bileşenleri
Bu verileri alacak,

106
00:04:57,600 --> 00:05:01,830
ve işlemek için bu verileri kullanmak
Ekranda bir şey.

107
00:05:01,830 --> 00:05:04,300
İşte ne ok
, bileşen veriden

108
00:05:04,300 --> 00:05:07,930
ve o aynı veri kullanılmıştır
parçalarını bir araya işlemek için.

109
00:05:07,930 --> 00:05:10,290
>> Facebook Messenger'da için
React olan örnek,

110
00:05:10,290 --> 00:05:13,410
Eğer bir liste olabilir
veri kaynağı olarak mesajlar.

111
00:05:13,410 --> 00:05:15,927
Ve bu değil kılacak
mesajlarının yalnızca liste

112
00:05:15,927 --> 00:05:17,510
ama aynı zamanda arkadaş listesi var.

113
00:05:17,510 --> 00:05:19,200
Sen okunmamış sayısını var.

114
00:05:19,200 --> 00:05:23,330
Belki de Facebook şeyi işlemek
Bu Facebook.com dibinde.

115
00:05:23,330 --> 00:05:25,610
Aynı veriler olan bir
Gerçeğin tek kaynak

116
00:05:25,610 --> 00:05:28,290
ve bir sürü neden olur
bileşenleri işlenecek.

117
00:05:28,290 --> 00:05:30,290
Ve ne zaman onlardan biri
bileşenleri değiştirilir

118
00:05:30,290 --> 00:05:32,320
geri gider ve
veri kaynağını değiştirir.

119
00:05:32,320 --> 00:05:33,460
>> Haklısınız, bir mesaj göndermek?

120
00:05:33,460 --> 00:05:34,780
Bu veri kaynağını değiştirir.

121
00:05:34,780 --> 00:05:39,490
Sen mesajları okumak,
böylece 0 okunmamış ayarlayın.

122
00:05:39,490 --> 00:05:41,136
Bu veri kaynağını değiştirir.

123
00:05:41,136 --> 00:05:44,010
Ve birinin bu olduğunu hiç fark
ok Aynı verilere geri dönüyor

124
00:05:44,010 --> 00:05:47,662
Kaynak, bilirsin, bu yüzden
Belirli bir veri seti göz önüne alındığında,

125
00:05:47,662 --> 00:05:49,870
Eğer tam olarak ne
sayfa gibi bakmaya gidiyor.

126
00:05:49,870 --> 00:05:50,700
Bu deterministik değil.

127
00:05:50,700 --> 00:05:53,451
Sen, verilen belirli verileri biliyorum ne
sayfa gibi bakmaya gidiyor.

128
00:05:53,451 --> 00:05:56,158
Bunu gidiyor nasıl tahmin edebilirsiniz
davranması ve nasıl gidiyor

129
00:05:56,158 --> 00:05:57,650
Onlar bir araya olduğunuzda çalışmak.

130
00:05:57,650 --> 00:06:00,410
>> Ve ben bir milyon bileşenleri olsaydı
Burada, doğru, aynı davranırdı?

131
00:06:00,410 --> 00:06:02,290
Eğer herhangi olmazdı
Garip bağlantıları.

132
00:06:02,290 --> 00:06:04,120
Bir veri milyon bileşenlerini render.

133
00:06:04,120 --> 00:06:06,879
Bir milyon bileşenleri olabilir
Geri dönüp verileri düzenleyin.

134
00:06:06,879 --> 00:06:07,920
Ve böylece bu çok güzel.

135
00:06:07,920 --> 00:06:10,870
Biz, composable inşa ediyoruz
Kolayca ölçeklenebilir web uygulamaları.

136
00:06:10,870 --> 00:06:13,150
>> Sen bir veri kaynağı,
Gerçeğin kaynağı.

137
00:06:13,150 --> 00:06:15,790
Bu sizin bileşenleri anlatır
nasıl sayfasını düzenlemek için,

138
00:06:15,790 --> 00:06:18,190
ve bileşenler olacak
etkileşim anlaştım.

139
00:06:18,190 --> 00:06:20,150
Ve onlar değiştirmek isterseniz
şeyler, sadece geri dönmek

140
00:06:20,150 --> 00:06:21,750
ve veri kaynağı değiştirmek için söyle.

141
00:06:21,750 --> 00:06:22,850
Mantıklı?

142
00:06:22,850 --> 00:06:26,010
Yani tepki tüm anlayışı hakkında
nasıl bir bileşen oluşturmak için

143
00:06:26,010 --> 00:06:29,540
ve bileşen nasıl
dış dünya ile etkileşim.

144
00:06:29,540 --> 00:06:31,850
>> Bileşen etkileşim yapma
dış dünya ile

145
00:06:31,850 --> 00:06:34,490
Başka bir teknolojiyi kullanır
adı Akı, burada

146
00:06:34,490 --> 00:06:36,872
bir çerçevedir
React üzerine ilave edildi.

147
00:06:36,872 --> 00:06:38,330
Biz bu konuda konuşmak için gitmiyoruz.

148
00:06:38,330 --> 00:06:42,990
Biz verilen hakkında daha fazla konuşacağız
Veri, nasıl bir bileşeni hale getirebilir?

149
00:06:42,990 --> 00:06:47,010
>> Ve böylece çünkü sen gerçekten iyidir tepki
İstediğiniz arka uç ile kullanabilirsiniz.

150
00:06:47,010 --> 00:06:50,480
Bir Python arka uç gibi varsa,
Python bazı verileri tükürmek eğer,

151
00:06:50,480 --> 00:06:51,610
Bunu hale getirebilir tepki.

152
00:06:51,610 --> 00:06:54,700
Hiç JS çıkışları ise
Verilerin, React sayılmaktadır.

153
00:06:54,700 --> 00:06:56,890
Ruby ile raylar
Veri, React sayılmaktadır.

154
00:06:56,890 --> 00:07:01,860
>> Yani tepki temelde bir web
bileşenleri ile bir ön uç view--

155
00:07:01,860 --> 00:07:03,910
herhangi bir veri kaynağı için.

156
00:07:03,910 --> 00:07:07,145
Ve böylece veri kaynağından gidiyor
bileşenleri tepki oldukça kolaydır.

157
00:07:07,145 --> 00:07:08,770
Başka bir yol gidiyor biraz daha zordur.

158
00:07:08,770 --> 00:07:10,462
Daha önce de bahsettiğim gibi bu Flux kullanır.

159
00:07:10,462 --> 00:07:11,420
Biz içine almazsınız.

160
00:07:11,420 --> 00:07:13,740
Biz daha fazla odaklanmak gerekir
veri için bileşenli tarafı.

161
00:07:13,740 --> 00:07:15,880
Yapabileceğiniz Bu şekilde
Serin, eğlenceli web uygulamaları.

162
00:07:15,880 --> 00:07:19,870
Bu dış dünyayı etkilemez
Şimdilik, ama bu başka bir hikaye.

163
00:07:19,870 --> 00:07:22,210
>> Tamam, eğer öyleyse burada olduğunu
benim son seminer için

164
00:07:22,210 --> 00:07:26,610
sizin için kod tüm bileceksiniz
Bugünün tartışma bu URL'de olacak

165
00:07:26,610 --> 00:07:29,320
Burada, üzgünüm, burada bu URL.

166
00:07:29,320 --> 00:07:32,730
Ve temelde biz gitmek için gidiyoruz
belki dört adımda, beş aracılığıyla,

167
00:07:32,730 --> 00:07:33,510
Muhtemelen değil beş.

168
00:07:33,510 --> 00:07:37,300
Biz dört adımlarında hareket edeceğiz
Bir örnek bina app tepki.

169
00:07:37,300 --> 00:07:39,550
Ve böylece tüm kaynak kodu
yolun her adımı için

170
00:07:39,550 --> 00:07:42,216
eğer öyleyse, burada olacak
Eğer evde birlikte takip ediyorsanız

171
00:07:42,216 --> 00:07:43,991
Bu kodu incelemek için çekinmeyin.

172
00:07:43,991 --> 00:07:46,740
Burada birlikte aşağıdaki ediyorsanız,
biz ekranda gösteriyor olacak

173
00:07:46,740 --> 00:07:47,739
yani bu konuda endişelenmeyin.

174
00:07:47,739 --> 00:07:50,930
Ama evde iseniz, hissediyorum
Bu web sitesini ziyaret etmek için ücretsiz.

175
00:07:50,930 --> 00:07:56,400
Ve, evet, sen almak gerekir
Hiç burada ihtiyacım olacağını tüm kodu.

176
00:07:56,400 --> 00:08:01,380
Bu yüzden iyi bir hile sac yanı var
ile gelecekteki macera için tepki.

177
00:08:01,380 --> 00:08:04,490
Serin, eğer öyleyse burada herkes,
ve evde olsanız bile,

178
00:08:04,490 --> 00:08:11,580
is.gd/cs50react, bu web sitesini yukarı çekin,
sermaye yok, çizgi, hiçbir şey.

179
00:08:11,580 --> 00:08:15,849
>> Sen görünen bir sayfa görürsünüz
Böyle biraz.

180
00:08:15,849 --> 00:08:17,140
Bu CodePen adında bir şeydir.

181
00:08:17,140 --> 00:08:20,030
CodePen işbirlikçi olduğunu
kodlama ortamı

182
00:08:20,030 --> 00:08:23,364
hangi ile ben burada kod yazmak ve olabilir
o size otomatik olarak gönderilir.

183
00:08:23,364 --> 00:08:24,780
Ve bu şekilde, ben kod yazabilirsiniz.

184
00:08:24,780 --> 00:08:26,920
Burada kod çalıştırabilir.

185
00:08:26,920 --> 00:08:33,470
>> Example-- için ve görmek reloads-- eğer,
Ben sayfada JavaScript kodunu koşuyorum

186
00:08:33,470 --> 00:08:36,390
Burada, ve olacak
otomatik olarak bir web sayfasını oluşturmak

187
00:08:36,390 --> 00:08:37,980
Bu JavaScript kodu ile.

188
00:08:37,980 --> 00:08:40,039
Ve böylece bu bir yoldur
Bize kodu denemek için

189
00:08:40,039 --> 00:08:43,089
kullanmak zorunda kalmadan gerçekten hızlı
Bizim kimlik veya yerel makine kullanmak

190
00:08:43,089 --> 00:08:44,290
ya da her neyse.

191
00:08:44,290 --> 00:08:47,670
Bu mockup için çok hızlı bir yoldur
ve kod farklı test.

192
00:08:47,670 --> 00:08:50,560
>> Yani alarak gidiyorum
Örnek kod, burada koyarak.

193
00:08:50,560 --> 00:08:52,374
Biz bunun üzerinden çalışan için gidiyoruz.

194
00:08:52,374 --> 00:08:54,540
Ve evde iseniz,
hem de bu kadar indirebiliriz.

195
00:08:54,540 --> 00:08:57,530
Ve ben zaten yükledim
Burada tepki böylece sadece can

196
00:08:57,530 --> 00:09:00,770
Buraya kendi kod yazmak ve
Kendi oyun alanı olarak deneyin.

197
00:09:00,770 --> 00:09:04,940
>> Evet, herkes eğer
Burada bu bağlantıyı açın.

198
00:09:04,940 --> 00:09:08,080
Bana bir başparmak verin
Eğer açık bir kez yukarı.

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

200
00:09:10,960 --> 00:09:13,770
Serin serin serin.

201
00:09:13,770 --> 00:09:16,914
Hiçbir şey, şimdi burada var ama
biz çok yakında değişecek.

202
00:09:16,914 --> 00:09:21,250
>> Tamam, bir JavaScript tepki
Kütüphane, ve bu şekilde,

203
00:09:21,250 --> 00:09:24,480
, JavaScript bilgi gerektirir
hangi web programlama dilidir.

204
00:09:24,480 --> 00:09:27,660
Ve diğer şeyler için kullanılan ediliyor
Artık çok ama öncelikle web geliştirme

205
00:09:27,660 --> 00:09:32,040
dil, sen Bilmediğiniz eğer öyleyse
bu, JSforCats.com adında bir site okuyun.

206
00:09:32,040 --> 00:09:32,700
Bu harika.

207
00:09:32,700 --> 00:09:34,240
Siz JavaScript öğrenebilirsiniz
yarım saat içinde.

208
00:09:34,240 --> 00:09:34,990
Bu inanılmaz.

209
00:09:34,990 --> 00:09:36,420
>> Yani bunu bir okuma verir.

210
00:09:36,420 --> 00:09:39,960
Biz de burada nedeniyle HTML bir sürü
Biz tabii ki web sayfalarını tasarlarken ediyoruz.

211
00:09:39,960 --> 00:09:43,890
Eğer aşina iseniz Yani
HTML, HTMLdog.com check out.

212
00:09:43,890 --> 00:09:46,520
Ben tepki bir olduğunu öğrenmek düşünüyorum
milyon kez daha kolay zaten eğer

213
00:09:46,520 --> 00:09:47,892
yapı taşlarını biliyorum.

214
00:09:47,892 --> 00:09:50,600
Eğer bileşenler varsa, bu kadar
kolay daha büyük bir bileşeni yapmak.

215
00:09:50,600 --> 00:09:51,860
Senin dilini tepki var.

216
00:09:51,860 --> 00:09:54,270
>> Şimdi git ve vermek
bunlar bir okuma.

217
00:09:54,270 --> 00:09:55,070
Bu videoyu duraklatma.

218
00:09:55,070 --> 00:09:57,440
Iseniz oa okuma ver
evde değilseniz

219
00:09:57,440 --> 00:10:00,794
HTML veya JavaScript aşina

220
00:10:00,794 --> 00:10:02,960
Tamam, bu yüzden biz gidiyoruz
yapmak, biz yapmak için gidiyoruz olduğunu

221
00:10:02,960 --> 00:10:06,470
tepki kullanarak çok temel bir Flashcard uygulaması.

222
00:10:06,470 --> 00:10:08,210
Biz bir flashcard için gidiyoruz.

223
00:10:08,210 --> 00:10:09,880
Sen ileri ve geri kart çevirebilirsiniz.

224
00:10:09,880 --> 00:10:12,399
Ve biz de bir liste olacak
Elimizdeki tüm kartlar,

225
00:10:12,399 --> 00:10:14,190
ve biz hissettiğiniz
hırslı, biz olabilir

226
00:10:14,190 --> 00:10:17,060
arasında geçiş yapabiliyor
üzerine tıklayarak arabalar.

227
00:10:17,060 --> 00:10:20,360
>> Ama bu çıplak olduğunu
kemikler, çok basit bir uygulama tepki.

228
00:10:20,360 --> 00:10:22,560
Ve böylece bu aslında
uygulamak için önemsiz değil,

229
00:10:22,560 --> 00:10:26,030
ama biz bunu yaparsanız, o göstermek için gidiyoruz
Bu, onu genişletmek için çok, çok kolay

230
00:10:26,030 --> 00:10:27,680
diğer insanlar size yardımcı olursa.

231
00:10:27,680 --> 00:10:33,750
Bu yüzden dört adım adım gidiyoruz
Sıfırdan başlayarak bu inşa etmek.

232
00:10:33,750 --> 00:10:36,740
>> Tamam, bu yüzden dört adım, yaparız
ilk adımla başlamak.

233
00:10:36,740 --> 00:10:39,790
İlk adım olacak
İlk bileşen bina.

234
00:10:39,790 --> 00:10:44,830
Daha önce de söylediğim gibi, bir bileşeni tepki
steroidler, sadece bir HTML öğesidir.

235
00:10:44,830 --> 00:10:49,660
Bu HTML belirtir
ve bazı davranış ve

236
00:10:49,660 --> 00:10:52,600
insanlar nasıl belirleyecek
Bunun nasıl iletişim kurabilirim

237
00:10:52,600 --> 00:10:54,270
iç devleti olurdu.

238
00:10:54,270 --> 00:10:57,630
Bir düğme kaç gibi bilecek gibi
Zaman örneğin tıklandığında oldu,

239
00:10:57,630 --> 00:11:01,010
ve kendisini nasıl düzenleneceğini bilecek.

240
00:11:01,010 --> 00:11:04,430
>> O yüzden go ahead ve oluşsun bizim
JavaScript kullanarak birinci bileşen.

241
00:11:04,430 --> 00:11:09,711
Sözdizimi garip görünüyor Yani,
bu tür çünkü bu.

242
00:11:09,711 --> 00:11:11,710
Yani, yine, biz gidiyoruz
adı verilen bir değişken yapmak

243
00:11:11,710 --> 00:11:14,580
Uygulamaya kelime izin kullanarak,
hangi bir değişken yapar,

244
00:11:14,580 --> 00:11:18,210
App eşit React.createClass edelim.

245
00:11:18,210 --> 00:11:22,609
>> Tepki bir kütüphane vardır ve
sınıf işlevi oluşturun.

246
00:11:22,609 --> 00:11:24,400
Bu işlevi
kod biraz size

247
00:11:24,400 --> 00:11:29,090
Yeni oluşturmak için kullanabilirsiniz
bileşeni tepki türü.

248
00:11:29,090 --> 00:11:32,780
Ve böylece React.createClass
Bir bileşen yapar

249
00:11:32,780 --> 00:11:35,270
ve bu bileşen olacak
şeyler yapmak mümkün.

250
00:11:35,270 --> 00:11:40,460
Yapabildiği en önemli şey olduğunu kılmak
bir şey, bir fonksiyon olarak işlemek.

251
00:11:40,460 --> 00:11:44,500
>> Yine, bu endeks için açık değilse
, seni Kediler için JS gitmek öneririz

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

253
00:11:45,682 --> 00:11:47,710
Yeterince iyi yakınlaştırıldığında?

254
00:11:47,710 --> 00:11:48,490
Güzel.

255
00:11:48,490 --> 00:11:50,670
>> Böylece her bileşen ihtiyacı
render işlevi var.

256
00:11:50,670 --> 00:11:53,010
Hale işlevi diyor
Ekranda ne yazdırırım?

257
00:11:53,010 --> 00:11:54,760
Ama bileşen
bunları yapmazsa işe yaramaz

258
00:11:54,760 --> 00:11:58,060
bu yüzden, ekranda ne yazdırmak için biliyorum
Eğer bir hale işlevi olması gerekir.

259
00:11:58,060 --> 00:12:01,904
>> Size bir şey vermek Yani
Sadece bazı HTML dönmek gerekiyor.

260
00:12:01,904 --> 00:12:03,820
Ve serin olduğunu
denen bir şey var

261
00:12:03,820 --> 00:12:08,660
Bir uzantısı JSX,
Tarafından kullanılan JavaScript tepki.

262
00:12:08,660 --> 00:12:11,845
Bu içeride HTML yazmak diyelim
senin JavaScript, hangi

263
00:12:11,845 --> 00:12:13,970
zaman garip tür sesler
İlk düşün,

264
00:12:13,970 --> 00:12:15,553
ama sonradan anlamda bir çok yapar.

265
00:12:15,553 --> 00:12:17,430
Yani biz bunu yapabilirsiniz.

266
00:12:17,430 --> 00:12:21,360
HTML aşina iseniz, biliyorum
Biz genel amaç bir div var

267
00:12:21,360 --> 00:12:22,790
şeyler için kap.

268
00:12:22,790 --> 00:12:26,380
Biz içeride bir div dönmek edebilirsiniz
Bu div, biz bir şeyler koyabilirsiniz.

269
00:12:26,380 --> 00:12:32,390
>> Yani biz sadece işlemek istiyoruz diyelim
Şimdilik düz-up flashcard.

270
00:12:32,390 --> 00:12:34,890
Flashcard, ben söyleyebilirim
Bir soru-cevap olacaktır.

271
00:12:34,890 --> 00:12:37,530
Yani bu div içinde, diyelim
bir paragraf çıktı

272
00:12:37,530 --> 00:12:42,155
Bu nedir sorum diyor
yaşam için nihai bir cevap, evren?

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

274
00:12:47,640 --> 00:12:50,345
Ve sonra cevap
42, tabii ki, olacak.

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

276
00:12:56,880 --> 00:12:59,730
>> Bu hiç de iyi gelmedi.

277
00:12:59,730 --> 00:13:04,164
Evet, temelde gerçekten can
senin JavaScript içinde HTML yazmak.

278
00:13:04,164 --> 00:13:06,330
Ve bu olacak
Ekranın içine basılmış.

279
00:13:06,330 --> 00:13:08,250
Öyleyse bunu deneyelim.

280
00:13:08,250 --> 00:13:09,520
>> Bu yüzden bizim bileşeni var.

281
00:13:09,520 --> 00:13:12,210
Biz koymak React söylemek gerekir
Ekranda bileşeni

282
00:13:12,210 --> 00:13:18,990
Böylece React.render, bu fark, biz
Başka eleman gibi app davranın.

283
00:13:18,990 --> 00:13:21,010
Bir HTML öğesi olarak biz bunu yazmak.

284
00:13:21,010 --> 00:13:25,100
Yerine img gibi söyleyerek gibi
Paragraf görüntü veya p,

285
00:13:25,100 --> 00:13:28,120
App yüzden, App bilgileri
HTML elemanı gibi muamele.

286
00:13:28,120 --> 00:13:30,380
Daha önce söylediğim gibi, bu kadar
steroid bir eleman.

287
00:13:30,380 --> 00:13:32,870
>> Yani App işlemek ve
bunu koymak için bir yer verir.

288
00:13:32,870 --> 00:13:37,170
Ve bu nasıl yapabilirsiniz olduğunu
nereye koymak için bunu söylemek.

289
00:13:37,170 --> 00:13:46,200
Ben basit bir div oluşturduk
Sayfanın bir kimlikle denilen sayfa,

290
00:13:46,200 --> 00:13:48,300
ve bu nerede
eleman gidecek.

291
00:13:48,300 --> 00:13:49,841
>> Ve biz HTML ile çalıştırmak için gitmiyoruz.

292
00:13:49,841 --> 00:13:53,145
Temelde bu almak için gidiyor
Bu sayfa öğesinin içine koymak

293
00:13:53,145 --> 00:13:54,270
Biz ekranda olması.

294
00:13:54,270 --> 00:13:59,210
Yani bu kod çalışır ve bu çizer
Ekranda bir şey, bu yüzden buradayız.

295
00:13:59,210 --> 00:14:01,770
Biz bizim ilk tepki bileşen yaptık.

296
00:14:01,770 --> 00:14:08,000
>> Yani sadece bir recap olarak, biz nazikçe yapılan
bileşeninin yeni bir tür, değil mi?

297
00:14:08,000 --> 00:14:10,145
Bu ne React.createClass var.

298
00:14:10,145 --> 00:14:12,680
Ve bu bileşende, biz
o ne yapması gerektiğini söyledim.

299
00:14:12,680 --> 00:14:15,590
Her bu bileşen için
ekrana basılacak,

300
00:14:15,590 --> 00:14:19,300
o div ile yazdırılır
bunun içinde iki paragraf.

301
00:14:19,300 --> 00:14:24,460
>> Ve ne yaptığını, biz yeni bir uygulama yapılmış
açılı ayraç app gösterimi kullanılarak.

302
00:14:24,460 --> 00:14:27,160
Biz bunu koymak için söyledim
sayfa öğesi içinde.

303
00:14:27,160 --> 00:14:29,867
Ve bu yüzden ben ne yaptım, yarattığı
Bu şablondan yeni bir uygulama.

304
00:14:29,867 --> 00:14:31,200
Ve sonra ben bunu işlemek için söyledim.

305
00:14:31,200 --> 00:14:33,680
Bu yüzden, söz konusu tamam, uygulama,
Ne çıktı ki?

306
00:14:33,680 --> 00:14:36,970
App, bir div çıktı gidip diyor
bunun içinde iki paragraf ile.

307
00:14:36,970 --> 00:14:40,420
Ve işte, bizim div var
bunun içinde iki paragraf.

308
00:14:40,420 --> 00:14:43,180
Şimdiye kadar mantıklı?

309
00:14:43,180 --> 00:14:46,690
>> Yani, yine, bütün meydan tepki
Sadece bileşenlerin nasıl bilmektir.

310
00:14:46,690 --> 00:14:48,500
Nasıl yapılır
bileşenler birlikte çalışır.

311
00:14:48,500 --> 00:14:51,780
Şimdi ilk yaptık
bileşeni, geri dönelim

312
00:14:51,780 --> 00:14:54,284
ve bileşenler özelleştirilebilir olun.

313
00:14:54,284 --> 00:14:56,700
Yani HTML nasıl biliyorum
senin düğmeleri sınıfları verebilir?

314
00:14:56,700 --> 00:14:59,146
Sen çapa href verebilir.

315
00:14:59,146 --> 00:15:00,770
Haklısınız, sizin girişleri bir tür verebilir?

316
00:15:00,770 --> 00:15:04,740
Daha özel verebilir
senin elemanların tüm özellikleri

317
00:15:04,740 --> 00:15:06,490
daha ilginç hale getirmek için.

318
00:15:06,490 --> 00:15:09,030
Ve biz aslında yapabiliriz
aynı şey.

319
00:15:09,030 --> 00:15:17,500
>> Yani istediğimiz diyelim bizim
app herhangi bir kart hale gitmek için.

320
00:15:17,500 --> 00:15:19,630
Şu anda biz sadece
kodlanmış kart render.

321
00:15:19,630 --> 00:15:22,530
Biz sadece bir tane var biliyorum
Kart yapabilirim, bu yüzden sen

322
00:15:22,530 --> 00:15:25,960
Deneyin ve şimdi bu değişecek
Biz sadece bazı kart verebilir.

323
00:15:25,960 --> 00:15:27,410
Bu kartı basalım.

324
00:15:27,410 --> 00:15:29,380
>> Denemek ve yapmak gerektiğini sizin
bileşenleri çok genel amaçlı.

325
00:15:29,380 --> 00:15:31,654
Yani bu şekilde ben e-posta olabilir
Bu benim arkadaşım ve gibi olmak,

326
00:15:31,654 --> 00:15:33,820
Eğer varsa ne flashcard,
Sadece burada içine yem,

327
00:15:33,820 --> 00:15:35,290
ve kendisi bunu yapacağız.

328
00:15:35,290 --> 00:15:37,650
Diğer koyabilirsiniz
Kendi app şeyler.

329
00:15:37,650 --> 00:15:40,600
>> Ama önce, bu yıkalım
iki bileşenden içine,

330
00:15:40,600 --> 00:15:44,500
ama biz Kartı ayırmak istiyoruz
Gerçek uygulama kısmından baskı parçası.

331
00:15:44,500 --> 00:15:46,660
Yani biz yapabiliriz ne olduğunu
App değiştirebilirsiniz

332
00:15:46,660 --> 00:15:51,300
CardView için bir
uygulaması için yeni isim,

333
00:15:51,300 --> 00:15:54,450
ve yeni bir yapabilirsiniz
bileşeni, App denilen

334
00:15:54,450 --> 00:15:56,336
Eski App ile karıştırılmamalıdır.

335
00:15:56,336 --> 00:16:00,730
Biz createClass var,
ve HTML gibi,

336
00:16:00,730 --> 00:16:03,590
Eğer yuva bileşenlerini tepki olabilir
birbirlerinin içine.

337
00:16:03,590 --> 00:16:16,430
>> Bu hale işlevinde Yani
işlev dönüş CardView,

338
00:16:16,430 --> 00:16:18,234
ve bu aynı şeydir.

339
00:16:18,234 --> 00:16:19,400
Aynı şey neden görüyor musun?

340
00:16:19,400 --> 00:16:22,590
Bunun yerine sadece app render ki
, bunun içinde div ve eşleştirme vardır

341
00:16:22,590 --> 00:16:26,194
App CardView işler ve
CardView div ve paragraf vermektedir.

342
00:16:26,194 --> 00:16:29,110
Yani bu bizim ilk örneğidir
birbirinden içindeki geçme elemanlarının.

343
00:16:29,110 --> 00:16:32,177
bu mantıklı mı?

344
00:16:32,177 --> 00:16:33,760
Yani, yine, bir CardView öğesi var.

345
00:16:33,760 --> 00:16:37,250
Biz app öğeleri
o daha büyük olduğunu.

346
00:16:37,250 --> 00:16:40,990
>> Tamam, bu yüzden istediğimiz bizim CardView-- eğer
İyi bir CardView belli kartı vermek,

347
00:16:40,990 --> 00:16:43,370
Doğru, sizin için basalım?

348
00:16:43,370 --> 00:16:48,050
Yani ilk, biz bir kart yapmak gerekir,
bu yüzden bir kart nesne yapalım.

349
00:16:48,050 --> 00:17:02,930
Yani kartımı izin equal--
Eğer tüm tanıdık iseniz,

350
00:17:02,930 --> 00:17:05,260
Bu sadece gösterim yapma olduğunu
JavaScript nesne.

351
00:17:05,260 --> 00:17:09,280
Bu bir yapı gibi bir şey
C, bu yüzden, bir kart yaptı

352
00:17:09,280 --> 00:17:15,920
ve şimdi biz bu kartı iletebilirsiniz
Bir mal veya HTML bir nitelik olarak

353
00:17:15,920 --> 00:17:17,290
Bizim app terminoloji.

354
00:17:17,290 --> 00:17:20,210
Yani biz bu App yapabilirsiniz
Kart MyCard eşittir.

355
00:17:20,210 --> 00:17:23,200
>> Siz giriş yapmanız biliyorum
Giriş tipi metin veya düğme eşittir

356
00:17:23,200 --> 00:17:25,240
sınıf bootstrap için btn eşittir ,?

357
00:17:25,240 --> 00:17:29,500
Aynı fikir App kart equals--
Diş teli koymak zorundasın var--

358
00:17:29,500 --> 00:17:33,830
Uygulama kartı MyCard eşittir, bu nedenle bu
Biz bu kart nesne var diyor.

359
00:17:33,830 --> 00:17:39,149
Ben olarak geçmek için gidiyorum
Uygulamaya bileşeni özelliği.

360
00:17:39,149 --> 00:17:41,440
Ve bu uygulama bileşeni olacak
erişmek mümkün olacak ve do

361
00:17:41,440 --> 00:17:43,580
onunla ilginç şeyler.

362
00:17:43,580 --> 00:17:47,650
>> Yani bizim app olacak
Bir kart verilir, şimdi bu yüzden,

363
00:17:47,650 --> 00:17:49,980
Sadece vermek en app atalım
CardView kart

364
00:17:49,980 --> 00:17:53,110
kendisi uygulama değildir çünkü gibi
onunla ne yapacağını bilecek,

365
00:17:53,110 --> 00:17:54,850
böylece biz sadece CardView veririm.

366
00:17:54,850 --> 00:18:00,050
Yani biz bunu geçmek olacak
Aynı şekilde, kart, eşittir

367
00:18:00,050 --> 00:18:05,426
ve böylece her bir bileşen erişebilirsiniz
kendisine verilmiştir şeyler.

368
00:18:05,426 --> 00:18:07,800
Onlar özelliklerine erişebilirsiniz
bunun için verilmiştir

369
00:18:07,800 --> 00:18:09,470
this.props.card, bu sözdizimini kullanarak.

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

371
00:18:12,010 --> 00:18:14,920
>> Peki burada olduğunu olmuyor
Eğer MyCard nesnesi var.

372
00:18:14,920 --> 00:18:18,250
Sen app içine geçmesi
App kartı kullanarak MyCard eşittir.

373
00:18:18,250 --> 00:18:21,420
Bu kart nesnesi app verilir.

374
00:18:21,420 --> 00:18:24,400
App erişebilirsiniz
this.props.card olarak.

375
00:18:24,400 --> 00:18:28,780
Bir görüntünün gibi bir şey
's kaynak ne olduğunu bilir.

376
00:18:28,780 --> 00:18:31,972
>> Bu uygulama bu kart ne bilir
olduğunu ve onunla bir şeyler yapabilirsiniz.

377
00:18:31,972 --> 00:18:32,930
Bu hesaplamalar yapabilir.

378
00:18:32,930 --> 00:18:35,290
O kapalı dayalı kararlar verebilirsiniz.

379
00:18:35,290 --> 00:18:39,950
>> Şimdilik, ben geçmek gidiyordu
CardView üzerine this.props.card.

380
00:18:39,950 --> 00:18:43,420
Şimdiye kadar mantıklı?

381
00:18:43,420 --> 00:18:45,210
Şimdi daha mantıklı olacak.

382
00:18:45,210 --> 00:18:46,990
>> Tamam, şimdi biz CardView konum.

383
00:18:46,990 --> 00:18:51,719
Kart verilir Bizim CardView, gerektiği
onun soru-cevap çıktı.

384
00:18:51,719 --> 00:18:54,510
Şu anda biz sadece dışarı basılmış bazı
kodlanmış soruları ve cevapları.

385
00:18:54,510 --> 00:18:57,720
Biz ihtiyacımız konrtol anlamaya ihtiyacımız var
Onlar bize verdi kartı sormak için

386
00:18:57,720 --> 00:19:01,360
Ne soru ve cevap ve
sonra ekranın içine bu çıktı.

387
00:19:01,360 --> 00:19:02,470
>> Yani biz burada yapabiliriz.

388
00:19:02,470 --> 00:19:06,135
İlk eşit yapmak begin-- kılıyor.

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

390
00:19:08,710 --> 00:19:13,050
Peki biz burada yapıyoruz biz biliyorum
kartları, bir özellik bize verilen

391
00:19:13,050 --> 00:19:13,580
sağ?

392
00:19:13,580 --> 00:19:15,930
Bir girdi olarak bize verdi.

393
00:19:15,930 --> 00:19:19,440
Neredeyse gibi gibi
bir işleve argümanlar.

394
00:19:19,440 --> 00:19:22,810
Kart bir argümandır
Neredeyse bu CardView için.

395
00:19:22,810 --> 00:19:25,239
>> Biz ayıklamak ve koyacağım
değişken soru.

396
00:19:25,239 --> 00:19:27,280
Emin olun gitti cevap
Değişken cevap.

397
00:19:27,280 --> 00:19:31,130
Kart cevap olduğunu sorar.

398
00:19:31,130 --> 00:19:35,072
Ve şimdi bu var,
bunun yerine metni baskı,

399
00:19:35,072 --> 00:19:37,030
Biz yazdırmak için gidiyoruz
ne olursa olsun onlar bize verdi.

400
00:19:37,030 --> 00:19:43,580
>> Yani bu yüzden gidiyoruz stuff--
Soru Cevap söndürmek için.

401
00:19:43,580 --> 00:19:46,380
Bu işe yararsa görelim.

402
00:19:46,380 --> 00:19:52,800
Serin, bu yüzden bu kadar çekilsin
bir kez daha emin olmak için.

403
00:19:52,800 --> 00:20:00,470
>> Yani benim kartı kartı nesnedir ve biz
app bu kartı veriyoruz.

404
00:20:00,470 --> 00:20:04,790
Ve uygulaması sürecekse
Kart ve CardView vermek.

405
00:20:04,790 --> 00:20:09,190
Ve bu CardView eğer diyor
Bana herhangi bir flashcard nesnesini vermek

406
00:20:09,190 --> 00:20:11,920
Ben onun soru çıktısını edeceğiz
ve cevap, değil mi?

407
00:20:11,920 --> 00:20:14,590
>> Yani ne yapabilirim ben yapabilirsiniz olduğunu
İlk bu kodu göndermek

408
00:20:14,590 --> 00:20:16,580
Arkadaşıma kodumu 10 hatları gibi.

409
00:20:16,580 --> 00:20:18,820
Onu gömmek olabilir
Kendi uygulama.

410
00:20:18,820 --> 00:20:27,200
Ve yine aynı şeyi yaptı sürece,
, CardView kartı bu eşittir gibi

411
00:20:27,200 --> 00:20:30,580
O CardView yarattığı sürece
ve ona doğru bilgi verdi,

412
00:20:30,580 --> 00:20:31,987
kendi kartını hale getirebilir.

413
00:20:31,987 --> 00:20:34,320
Ve böylece bu şekilde, o gerçekten var
inşa etmek için serin bir yol

414
00:20:34,320 --> 00:20:35,906
Doğru, birbirini kullanımı bileşenler?

415
00:20:35,906 --> 00:20:38,280
Bu kart, ben yayınlamak olabilir
internette bu CardView,

416
00:20:38,280 --> 00:20:39,790
ve insanlar bunu kullanmak mümkün olacaktır.

417
00:20:39,790 --> 00:20:45,070
Yani temelde, bu biri gibi
C kütüphanesinde standart fonksiyonlar.

418
00:20:45,070 --> 00:20:47,280
>> Bu bir fonksiyon nerede
birisi onu yazmıştır.

419
00:20:47,280 --> 00:20:48,419
Belirli bir giriş vermek.

420
00:20:48,419 --> 00:20:49,710
Belli bir çıktı üretmek gerekir.

421
00:20:49,710 --> 00:20:50,890
Bunu nasıl çalıştığı hakkında umurumda değil.

422
00:20:50,890 --> 00:20:53,790
Sürece bunu hakkı vermek gibi
girişi, doğru çıktı yapacağız.

423
00:20:53,790 --> 00:20:57,850
>> Ve bileşeni olabilir
Aynı şekilde düşündüm.

424
00:20:57,850 --> 00:21:00,280
Bu CardView gibi
Bir kütüphane fonksiyonu.

425
00:21:00,280 --> 00:21:03,400
Bunu biraz kart verirseniz
bir özellik olarak, bu olacak

426
00:21:03,400 --> 00:21:05,095
Bu kartın içeriğini yazdırabilirsiniz.

427
00:21:05,095 --> 00:21:16,820
Ben kartımı değiştirirsem gibi
Bunun yerine 5 artı 37 ne gibi,

428
00:21:16,820 --> 00:21:19,210
buna göre güncellenir.

429
00:21:19,210 --> 00:21:21,955
Dolayısıyla, sadece giriş değiştirerek,
belli bir çıkış olur.

430
00:21:21,955 --> 00:21:24,830
Yani neredeyse bileşenlerin aklınıza gelebilecek
bu şekilde fonksiyonları gibi olduğu

431
00:21:24,830 --> 00:21:25,920
Birlikte koyabilirsiniz.

432
00:21:25,920 --> 00:21:29,440
Bu CardView gibi girdi olsun
girdi olarak, çıktıyı olsun.

433
00:21:29,440 --> 00:21:31,900
Bu durumda, çıkış HTML.

434
00:21:31,900 --> 00:21:34,404
Şimdiye kadar mantıklı?

435
00:21:34,404 --> 00:21:36,890
Serin, bu yüzden daha özelliklerdir
Eğer bilgi aktarmak nasıl

436
00:21:36,890 --> 00:21:40,900
içine ve bileşenleri dışında.

437
00:21:40,900 --> 00:21:42,740
>> Tamam, bu yüzden bu yapalım
şey interaktif.

438
00:21:42,740 --> 00:21:44,450
Şu anda bu sıkıcı tür.

439
00:21:44,450 --> 00:21:45,520
[Inaudible] nedir?

440
00:21:45,520 --> 00:21:48,210
Sen, bazı yazdırabilirsiniz
ama bu yapabileceğimiz tek şey.

441
00:21:48,210 --> 00:21:51,550
>> Yani en geri dönelim
Şimdilik sadece eski bir soru.

442
00:21:51,550 --> 00:21:54,405
Tamam, şimdi bu bileşenler
hepsi çünkü sıkıcı,

443
00:21:54,405 --> 00:21:55,030
onlar girdi olsun.

444
00:21:55,030 --> 00:21:56,100
Onlar çıkış tamam mı?

445
00:21:56,100 --> 00:21:57,049
Bu sıkıcı türüdür.

446
00:21:57,049 --> 00:21:59,090
Bizim sahip olmak istiyorum
bileşenleri için mümkün

447
00:21:59,090 --> 00:22:02,150
İç devletinin bir çeşit
gibi bir şey hatırlıyorum.

448
00:22:02,150 --> 00:22:05,320
>> Bir flashcard için için
Devletin örneği ne tür

449
00:22:05,320 --> 00:22:07,550
Eğer isteyebilirsiniz
Bir flashcard için hatırlıyor musun?

450
00:22:07,550 --> 00:22:09,740
Ne geçici statü
hatırlamak isteyebilirsiniz

451
00:22:09,740 --> 00:22:12,491
Bir Flashcard app bir flashcard için?

452
00:22:12,491 --> 00:22:13,990
HEDEF KİTLE: Bu çevirdi oldu İster?

453
00:22:13,990 --> 00:22:14,990
NEEL MEHTA: sağ, evet.

454
00:22:14,990 --> 00:22:17,665
Yani tutmak isteyebilirsiniz
iz yukarı yüz veya are

455
00:22:17,665 --> 00:22:19,100
Eğer kartta yüz aşağı.

456
00:22:19,100 --> 00:22:23,420
Facebook, örneğin, sen-cekti
news feed nerede hatırlamak istediğiniz

457
00:22:23,420 --> 00:22:25,870
Sizi ya da profil kim ister
Şu anda yapıyoruz.

458
00:22:25,870 --> 00:22:30,127
>> Messenger, On ne metin sizi gibi
Doğru, giriş kutusuna yazın?

459
00:22:30,127 --> 00:22:31,710
Sayfayı yenilemeniz, o gider.

460
00:22:31,710 --> 00:22:32,793
Ama gerçekten umrumda değil.

461
00:22:32,793 --> 00:22:33,770
Bu sadece geçici.

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

463
00:22:34,548 --> 00:22:36,152
>> HEDEF KİTLE: [duyulamaz]

464
00:22:36,152 --> 00:22:38,360
NEEL MEHTA: bir flaş gibi
Kart, gördüğünüz olabilir gibi

465
00:22:38,360 --> 00:22:40,290
Soru tarafı veya cevap tarafı?

466
00:22:40,290 --> 00:22:41,070
>> HEDEF KİTLE: Tamam.

467
00:22:41,070 --> 00:22:43,270
>> NEEL MEHTA: Like a
Doğru, flashcard iki taraflı?

468
00:22:43,270 --> 00:22:46,370
Evet, bu yüzden istediğiniz
şimdi bu fikrim yok

469
00:22:46,370 --> 00:22:50,370
Ben, girişler gibi olan özelliklere sahip
ama ah, geçici devlet,

470
00:22:50,370 --> 00:22:51,839
sayfada nerede, değil mi?

471
00:22:51,839 --> 00:22:54,380
Yine, ben Facebook dedi
Messenger, hangi kişinin gibi var

472
00:22:54,380 --> 00:22:56,550
Eğer Facebook inceliyorsunuz
ya da kim haklı, profil değil mi?

473
00:22:56,550 --> 00:22:58,030
>> Bu geçicidir.

474
00:22:58,030 --> 00:23:01,200
Bu kullanıcıyı göstermek önemlidir
neler oluyor, ancak sayfayı yenileyin oluyor.

475
00:23:01,200 --> 00:23:02,250
Bu gerçekten önemli değil.

476
00:23:02,250 --> 00:23:04,530
Bu yüzden, geçici devlet var
bu yüzden hepimiz devlet.

477
00:23:04,530 --> 00:23:06,250
>> Yani, yine, devlet ve sahne var.

478
00:23:06,250 --> 00:23:09,084
Dikmeler giriş yapılırsa
veri kaynağından.

479
00:23:09,084 --> 00:23:10,250
Devlet sadece varsayılan gibidir.

480
00:23:10,250 --> 00:23:13,700
Sadece şeyler gibi olduğunu
şey interaktif hale getirir.

481
00:23:13,700 --> 00:23:17,720
>> Yani bizim CardView-- en atalım
Bizim CardView-- güzel oldu.

482
00:23:17,720 --> 00:23:21,420
Burada yapacağımız şey, biz gidiyoruz
CardView ve sadece CardView dokunun.

483
00:23:21,420 --> 00:23:25,105
Ve böylece arkadaşım bu onlar kim var
herhangi bir fark olmaz.

484
00:23:25,105 --> 00:23:27,230
Onlar değiştirmek zorunda olmazdı
kendi kodunu herhangi

485
00:23:27,230 --> 00:23:29,410
ama onlar görmek istiyorum onların
CardView kadar souped var.

486
00:23:29,410 --> 00:23:31,270
Bu bileşenler hakkında güzel bir parçası.

487
00:23:31,270 --> 00:23:35,290
>> Tamam, bizim CardView yüzden, deneyelim ve
biz aşamalı konum olsun takip

488
00:23:35,290 --> 00:23:36,560
veya yüz aşağı.

489
00:23:36,560 --> 00:23:40,480
Tepki biz öncelikle bunu
İlk devlet belirterek.

490
00:23:40,480 --> 00:23:42,070
Nerede kart başlıyor?

491
00:23:42,070 --> 00:23:48,480
>> Yani getInitialState adında bir işlevi olabilir
işlev ve biz bir nesne döndürür.

492
00:23:48,480 --> 00:23:53,310
Bu nesne, bazı devlet içerir ve
Bir devlet, sadece bir anahtar-değer çifti.

493
00:23:53,310 --> 00:23:56,950
Kullanabilmesidir gibi, bir anahtar ve bir var
adı bir dize gibi değeri var.

494
00:23:56,950 --> 00:24:01,410
>> Bu durumda, ön doğrudur diyelim.

495
00:24:01,410 --> 00:24:03,760
Bu bir devlet olduğunu söylüyor.

496
00:24:03,760 --> 00:24:06,570
Devletin bir bileşeni
Ön adı verilen bir niteliktir.

497
00:24:06,570 --> 00:24:09,649
[Duyulamaz], varsayılan olarak bu yüzden,
Biz kartın ön konum,

498
00:24:09,649 --> 00:24:11,440
ve biz bunu değiştirebilirsiniz
biz kartı çevirin.

499
00:24:11,440 --> 00:24:13,380
Mantıklı?

500
00:24:13,380 --> 00:24:18,190
>> Tamam, şu anda, biz konum hale
soru-cevap gösteren.

501
00:24:18,190 --> 00:24:20,860
Şimdi ne yapmalıyım
soru göstermek olduğunu

502
00:24:20,860 --> 00:24:24,370
Biz kartın ön iseniz yani
Cevap kartın arkasında içindir.

503
00:24:24,370 --> 00:24:26,850
Tüm yapmak yüzden
Kart interaktif.

504
00:24:26,850 --> 00:24:28,100
Yani bu burada deneyelim.

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

506
00:24:31,600 --> 00:24:33,620
Peki, ilk sadece bir değişken yapın.

507
00:24:33,620 --> 00:24:37,790
Biz this.state.front Şimdi sorabilirsiniz.

508
00:24:37,790 --> 00:24:42,010
Aynı biz devlet erişmek
erişim sahne, yani this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Biz ön iseniz, sonra metin
this.props.card.question olduğunu.

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

511
00:24:48,777 --> 00:24:51,360
Biz önündeki iseniz
Kart, biz denemek ve kapmak için gidiyoruz

512
00:24:51,360 --> 00:24:52,485
Karttan bir soru.

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

514
00:24:54,782 --> 00:24:57,240
Aksi takdirde, arka yüzünde iseniz
Kartın, biz ne yapacağız?

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

516
00:25:01,830 --> 00:25:02,750
>> HEDEF KİTLE: Cevap?

517
00:25:02,750 --> 00:25:05,041
>> NEEL MEHTA: Evet, böylece metin
this.props.card.answer eşittir.

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

519
00:25:08,472 --> 00:25:10,930
Eğer dikkat ederseniz Ama biz kullanıyoruz
Devlet bir karar

520
00:25:10,930 --> 00:25:14,420
Şimdi bileşeni nedeniyle
farklı görünecektir

521
00:25:14,420 --> 00:25:16,710
Bu onunla nasıl etkileşimde kapalı tabanlı.

522
00:25:16,710 --> 00:25:20,355
Bunun yerine, bu yazdırmanın
Biz sadece metin yazdırmak olacak.

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

524
00:25:25,270 --> 00:25:28,650
Serin, şimdi çok, gördüğünüz gibi,
biz sadece soruya bakınız.

525
00:25:28,650 --> 00:25:37,720
Ve ben burada manuel durumunu değiştirmek durumunda
Ön yanlıştır biz 42 geri almak.

526
00:25:37,720 --> 00:25:39,720
>> Yani, yine, bu bileşen
kendi devletini vardır.

527
00:25:39,720 --> 00:25:43,440
Bir düğme olmadığını bilir gibi
o, basılı veya oldu

528
00:25:43,440 --> 00:25:46,080
bu şey ne olduğunu bilir
ön ya da arka yüzünde.

529
00:25:46,080 --> 00:25:48,320
Varsayılan olarak, ön yüzünde bulunuyor.

530
00:25:48,320 --> 00:25:50,840
Ve sonra önünde ise,
Biz soruyu basalım.

531
00:25:50,840 --> 00:25:53,106
O arka yüzünde ise, biz olacak
cevabı çıktı.

532
00:25:53,106 --> 00:25:54,980
Yani, yine, bilgi
verilen ile aynıdır.

533
00:25:54,980 --> 00:25:59,090
Sadece farklı görünüyor
Eğer programlamak nasıl dayalı.

534
00:25:59,090 --> 00:26:02,670
Yani, örneğin, Facebook Messenger,
Aynı veri kaynağını almak bile,

535
00:26:02,670 --> 00:26:05,170
farklı görünebilir
Devlet farklı olduğu için.

536
00:26:05,170 --> 00:26:08,421
Bir bakıyoruz
Farklı kişinin mesajı.

537
00:26:08,421 --> 00:26:10,930
>> Tamam, bu nedenle bu tüm iyi ve
iyi, ama şimdi ne aslında

538
00:26:10,930 --> 00:26:15,940
olsun, değiştirmek bize mümkün yapmak
bizim kart ön ya da geri döndü.

539
00:26:15,940 --> 00:26:19,010
Biz bir flip ekleyerek yapabilirsiniz
düğmesine karta bir düğme o

540
00:26:19,010 --> 00:26:22,950
o [duyulamaz] eğer kart çevirmek olacaktır.

541
00:26:22,950 --> 00:26:31,770
Yani burada, bu bir düğme ekleyelim
düğme ve bu düğme çevirme diyecekler.

542
00:26:31,770 --> 00:26:35,650
>> Ve böylece şimdi, o
hiçbir şey yapmaz.

543
00:26:35,650 --> 00:26:37,075
Sadece güzel görünüyor.

544
00:26:37,075 --> 00:26:43,650
Ne yapabiliriz biz bir tık ekleyebilirsiniz olduğunu
işleyici, onClick, this.flip eşittir

545
00:26:43,650 --> 00:26:44,820
ve daha sonra kapağı tanımlamak gerekir.

546
00:26:44,820 --> 00:26:47,120
Ama temelde, onClick
bir fonksiyonu olduğunu

547
00:26:47,120 --> 00:26:48,675
Kullanıcı tıklattığında çağrılır.

548
00:26:48,675 --> 00:26:52,330
>> Yani düğme bilecek
o tıklandığında ne zaman.

549
00:26:52,330 --> 00:26:54,750
O tıklandığında oldu gitti,
o kart çevirmek olacaktır.

550
00:26:54,750 --> 00:26:58,382
Bu sizin gibi bir tür
pizza dağıtım adam.

551
00:26:58,382 --> 00:27:01,590
Sen gibi tüm haklısın zaman birileri
Birazdan, pizza teslim edeceğiz, beni çağırıyor?

552
00:27:01,590 --> 00:27:03,420
>> Bu dinleyici kayıt.

553
00:27:03,420 --> 00:27:04,530
Sen bir olayı dinlemek.

554
00:27:04,530 --> 00:27:07,657
Sen denir ve ne zaman olsun
Olay bir şeyler olur.

555
00:27:07,657 --> 00:27:08,240
Pizza olsun.

556
00:27:08,240 --> 00:27:11,480
Bu durumda, ne zaman sen
tıklandığında, kartın çevirin.

557
00:27:11,480 --> 00:27:14,560
>> Ve böylece biz tanımlamanız gerekir
kart çevirmek olacak fonksiyonu,

558
00:27:14,560 --> 00:27:17,930
bu yüzden biz bu hakkı yazacağım
Burada, fonksiyonu çevirin.

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

560
00:27:20,850 --> 00:27:23,680
Ve böylece çevirme ne yapacak sizce?

561
00:27:23,680 --> 00:27:27,180
Yine bu zaman çağrılan
biz flip düğmesini tıklatın.

562
00:27:27,180 --> 00:27:29,406
Fonksiyon çevirme ne yapmalıyım?

563
00:27:29,406 --> 00:27:34,136
>> HEDEF KİTLE: Değişim this.state.front
true gelen true false false.

564
00:27:34,136 --> 00:27:38,420
>> NEEL MEHTA: Evet, bu yüzden ne olursa olsun almak
this.front ön devlettir bu--.

565
00:27:38,420 --> 00:27:40,930
Eğer ön devleti alın
o yanlış yapmak, doğru.

566
00:27:40,930 --> 00:27:42,530
False ise, sağ, doğru yapmak?

567
00:27:42,530 --> 00:27:45,330
Yani o deneyelim.

568
00:27:45,330 --> 00:27:48,240
>> Sen devlet değiştiremezsiniz
Sadece this.state yaparak.

569
00:27:48,240 --> 00:27:50,380
Bunu yapamazsın.

570
00:27:50,380 --> 00:27:52,030
Bunu yapamazsın.

571
00:27:52,030 --> 00:27:55,810
Sen bir işlevi kullanmak zorunda
this.setState denir.

572
00:27:55,810 --> 00:28:03,230
>> Yani this.setState ön söyleyebiliriz
Kolon Bu yerde, yine, ünlem

573
00:28:03,230 --> 00:28:04,330
nokta tersi anlamına gelir.

574
00:28:04,330 --> 00:28:07,420
Ben eğer bu sanırım. state.front
doğrudur, yanlış döneceğiz.

575
00:28:07,420 --> 00:28:09,170
Bu yüzden devlet olarak atayacağız
true gelen false.

576
00:28:09,170 --> 00:28:11,430
False ise, biz olacak
true false olarak ayarlayın.

577
00:28:11,430 --> 00:28:17,210
>> Sadece biz kurmak ve biraz olsun fark
farklı ve bu yüzden bunu deneyelim.

578
00:28:17,210 --> 00:28:18,675
Bada bing, şuna bak.

579
00:28:18,675 --> 00:28:21,810
Flip düğmesi artık olacak
devlet önden arkaya geçin.

580
00:28:21,810 --> 00:28:24,990
>> Eğer gördüğünüz Ve böylece burada
tepki ve büyü biraz.

581
00:28:24,990 --> 00:28:28,420
Biz söylemedi gibi yeniden işlemek için.

582
00:28:28,420 --> 00:28:30,910
Biz bir şey yeniden çizmek söylemedim.

583
00:28:30,910 --> 00:28:32,630
Bunu yapıyorsanız
Tepki vermeden, şimdi etsen

584
00:28:32,630 --> 00:28:34,588
ne zaman aşağıdaki amaçlara gibi var
çevirme düğmesi tıklandığında

585
00:28:34,588 --> 00:28:37,290
Eğer bunu söylemek zorundayız
El Sağ, re-render?

586
00:28:37,290 --> 00:28:43,050
>> Gerçekten serin olduğunu tepki olduğunu eğer
oa belli devlet ve özellikleri vermek,

587
00:28:43,050 --> 00:28:45,760
her zaman verecek
aynı şey.

588
00:28:45,760 --> 00:28:48,690
Ve böylece biz hiç değiştirdiğinizde
Devlet ve özellikleri,

589
00:28:48,690 --> 00:28:50,819
tepki, sadece her şeyi yeniden oluşturur.

590
00:28:50,819 --> 00:28:52,860
Bu bir var olduğunu bilir
Bire bir yazışma

591
00:28:52,860 --> 00:28:57,270
devlet ve parametre ve HTML arasındadır.

592
00:28:57,270 --> 00:29:00,110
Peki ne zaman bu ya
Bir dizi devlet aracılığıyla tarafından değişiklikler

593
00:29:00,110 --> 00:29:03,750
o nasıl değişeceğini
ödeme yeniden oluşturulur.

594
00:29:03,750 --> 00:29:06,650
Ve böylece temelde tepki gibi
Değiştirmek için bekliyorum.

595
00:29:06,650 --> 00:29:09,870
>> Ne zaman bir şey değiştirir,
o sayfanın tamamını re-render edeceğiz.

596
00:29:09,870 --> 00:29:12,480
Ve verimsiz sesler ise,
olurdu, çünkü var

597
00:29:12,480 --> 00:29:15,050
ama tepki bir şey kullanır
Bir Gölge DOM denir.

598
00:29:15,050 --> 00:29:19,950
Bunun yerine, doğrudan sayfa çizim, onu
bellekte sanal HTML ağacı tutar.

599
00:29:19,950 --> 00:29:23,620
>> Biliyor musun, HTML bir ağaç gibidir,
hiyerarşik bir veri yapısı gibi.

600
00:29:23,620 --> 00:29:28,990
Bu, bellekte sahte ağaç tutar
ve sayfayı güncellemek zaman,

601
00:29:28,990 --> 00:29:31,940
Başka bir sahte çekersiniz
ağaç ve hesaplarız

602
00:29:31,940 --> 00:29:35,120
ne yapmak gerekiyor değiştirmek
sayfa iki ağaç eşit hale getirmek için.

603
00:29:35,120 --> 00:29:38,540
Yani temelde, neredeyse
Çok yeniden oluşturur.

604
00:29:38,540 --> 00:29:41,540
Ve sonra sadece gibi değişiklikleri
küçük tweaks sayfa gerektiği gibi,

605
00:29:41,540 --> 00:29:44,240
bu yüzden çok, çok, çok etkili.

606
00:29:44,240 --> 00:29:46,970
>> Yani temelde tepki olacak
ne zaman bir şey değiştirmek,

607
00:29:46,970 --> 00:29:49,010
o yeniden işlemek neredeyse sayfa olacak.

608
00:29:49,010 --> 00:29:52,830
Ben ne ihtiyacım var anlamaya edeceğiz
Gerçek sayfa yansıtacak yapmak için değiştirmek

609
00:29:52,830 --> 00:29:55,602
Sanal sayfa ve o yapacağız.

610
00:29:55,602 --> 00:29:56,560
Bu sanal DOM var.

611
00:29:56,560 --> 00:29:59,350
En büyük biri
özellikleri React.

612
00:29:59,350 --> 00:30:00,880
>> bu mantıklı mı?

613
00:30:00,880 --> 00:30:01,540
Sorusu olan?

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

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

616
00:30:05,568 --> 00:30:08,969
>> HEDEF KİTLE: Nasıl
MVC hala karşılaştırmak

617
00:30:08,969 --> 00:30:10,760
Konuştuğumuz o
gibi kaynakların daha önce.

618
00:30:10,760 --> 00:30:13,527
>> NEEL MEHTA: Evet, soru
o MVC farkı nedir nasıl?

619
00:30:13,527 --> 00:30:14,610
Sen kaynaklar hakkında sordu.

620
00:30:14,610 --> 00:30:16,445
Peki, bunun nasıl işlediğini bahsedelim.

621
00:30:16,445 --> 00:30:18,190
>> MVC, modeli güncellemek istiyorum.

622
00:30:18,190 --> 00:30:20,560
Bu durumda biz bir kart modeli olurdu.

623
00:30:20,560 --> 00:30:24,540
Görünüm olurdu
çevirme düğmesi ve kontrol

624
00:30:24,540 --> 00:30:26,310
Flip işleve sahip olacaktır.

625
00:30:26,310 --> 00:30:28,450
Yani görünümü söylerdim
Kontrolör çevirme çevirmek için.

626
00:30:28,450 --> 00:30:30,370
Kapak söylerdim
değiştirmek için model değil mi?

627
00:30:30,370 --> 00:30:33,915
>> Ve böylece bir MVC sen, ne zaman
Model değiştirmek için dinlemek,

628
00:30:33,915 --> 00:30:37,150
ve re-render buna görünümü.

629
00:30:37,150 --> 00:30:39,210
Ya da sadece beğenmek zorunda
denetleyicisi vardır.

630
00:30:39,210 --> 00:30:42,418
Daha sonra modeli değiştirmek için bekleyin ve
almak ve bir şey gibi bir kısmını seçmek

631
00:30:42,418 --> 00:30:44,032
değişmek.

632
00:30:44,032 --> 00:30:45,740
Burada bir şey var,
ama büyük bir app,

633
00:30:45,740 --> 00:30:48,510
Ne hatırlamak beğenmek zorunda
her yerde değişim,

634
00:30:48,510 --> 00:30:50,290
bu yüzden biraz sinir bozucu.

635
00:30:50,290 --> 00:30:53,670
Ve çok güzel tepki
Bir Gölge Dom çünkü.

636
00:30:53,670 --> 00:30:56,040
Sadece gelemez
tüm şey yeniden.

637
00:30:56,040 --> 00:30:58,680
Sen seçici zorunda değilsiniz
gibi güncellemek için sanırım.

638
00:30:58,680 --> 00:31:02,186
>> Facebook isterseniz
MVC, yeni bir mesaj almak,

639
00:31:02,186 --> 00:31:04,060
Eğer hatırlamak zorundayız
Tamam, bir şeyleri değiştirmek

640
00:31:04,060 --> 00:31:06,260
üstündeki
sayfa, mesaj simgesi.

641
00:31:06,260 --> 00:31:08,290
Ayrıca altta yeni bir pencere açılır.

642
00:31:08,290 --> 00:31:10,070
Ayrıca bu pencerede yeni bir şey yapmak.

643
00:31:10,070 --> 00:31:11,060
Ayrıca bir ses.

644
00:31:11,060 --> 00:31:13,150
>> O bir sürü şey var
Aynı anda dışarı gidiyor.

645
00:31:13,150 --> 00:31:15,320
Ve değil mi eğer öyleyse
Bir Gölge Dom var, şimdi etsen

646
00:31:15,320 --> 00:31:18,740
Bu elle çünkü yapmak zorunda
Eğer bütün sayfanın kurtulmak olamaz.

647
00:31:18,740 --> 00:31:21,430
Sen göze alamaz, bu yüzden var
elle her şeyi değiştirmek için,

648
00:31:21,430 --> 00:31:23,990
hangi MVC gerçekten can sıkıcı bir durum.

649
00:31:23,990 --> 00:31:27,640
>> Yani sipariş olmak
tutumlu selektif

650
00:31:27,640 --> 00:31:30,750
olan sayfasını güncellemek
verimli, ama aynı zamanda sinir bozucu.

651
00:31:30,750 --> 00:31:34,002
Çünkü Gölge, React
Dom, ücretsiz hem de bir şeyler olsun.

652
00:31:34,002 --> 00:31:35,710
Bu verimli çünkü
Gölge Dom.

653
00:31:35,710 --> 00:31:37,210
Darboğaz sayfasını güncelliyor.

654
00:31:37,210 --> 00:31:40,292
Bu ağaç işleme yapmıyor.

655
00:31:40,292 --> 00:31:41,250
Sen verim almak.

656
00:31:41,250 --> 00:31:45,420
Ayrıca kullanım kolaylığı nedeniyle olsun
Sadece sayfanın tamamını yeniden eğer,

657
00:31:45,420 --> 00:31:48,970
ama sadece, tamam, şeyleri biliyorum
yerde sayfada olacak.

658
00:31:48,970 --> 00:31:51,180
Bu farklı bir yerde olabilir, ama
doğru, sayfada olacak?

659
00:31:51,180 --> 00:31:52,860
Yani sadece re-render
Tüm şey neredeyse,

660
00:31:52,860 --> 00:31:55,540
ve bir çift yapmak olabilir
Sayfanın kendisi değişir.

661
00:31:55,540 --> 00:31:57,850
>> Yani, yine, MVC sen
seçmek zorunda kalacak

662
00:31:57,850 --> 00:32:01,840
Kullanım ve verimlilik kolaylığı arasında,
ve her ikisi de olsun, tepki.

663
00:32:01,840 --> 00:32:04,020
Yani daha iyi.

664
00:32:04,020 --> 00:32:05,220
Mantıklı?

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

666
00:32:06,676 --> 00:32:12,080
>> Tamam, öyleyse konuşalım bakalım
4. adımda hakkında biraz,

667
00:32:12,080 --> 00:32:14,740
nasıl bileşenleri gömebilirsiniz.

668
00:32:14,740 --> 00:32:16,260
Yani biz şimdi bu hakka sahiptir.

669
00:32:16,260 --> 00:32:19,420
Biz bizim serin küçük düğme var.

670
00:32:19,420 --> 00:32:23,157
Onu geri çevirebilirsiniz ve
ileri ve bu öyle hepsi bu.

671
00:32:23,157 --> 00:32:24,990
En biz istiyoruz diyelim
Başka bir bileşeni var.

672
00:32:24,990 --> 00:32:28,730
En bizim Flashcard uygulaması gerekir diyelim
tüm kartların listesini içerir

673
00:32:28,730 --> 00:32:31,520
Eğer varsa, böylece biz anlamı
Başka bir bileşen olmalıdır.

674
00:32:31,520 --> 00:32:32,970
Eh, belki liste görünümü diyoruz.

675
00:32:32,970 --> 00:32:36,200
En bir liste görünümü yapalım o
CardView coexists,

676
00:32:36,200 --> 00:32:39,680
ve bu liste görünümü ve CardView
Birlikte çalışmayı gibi olacak.

677
00:32:39,680 --> 00:32:43,190
Ve bunları birleştirebilirsiniz
Sizin için, bizim uygulama yapmak.

678
00:32:43,190 --> 00:32:45,160
>> Yani ilk, en bir yapalım
Birkaç kart daha doğru.

679
00:32:45,160 --> 00:32:46,370
Diyelim ki, neyi kartlar?

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

681
00:32:49,619 --> 00:32:51,910
Ve sadece bu yüzden gerek yok
Bunu yazarak ile delik size,

682
00:32:51,910 --> 00:32:53,410
Ben sadece buradan kopyalamak için gidiyorum.

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

684
00:33:01,664 --> 00:33:03,580
Ve bu yüzden değil gidiyorum
o sadece bir kart verir.

685
00:33:03,580 --> 00:33:06,910
Ben o kartların bir dizi vereceğim.

686
00:33:06,910 --> 00:33:10,240
Bu yüzden ilk uygulamalar
Şimdilik kıracağız.

687
00:33:10,240 --> 00:33:14,717
Pekala, biz yapmak için gidiyoruz
Bu mümkün birden fazla kart işlemek için.

688
00:33:14,717 --> 00:33:17,800
Yani ilk, biz bunu vermek değil gidiyoruz
Sadece bir kart ama kartların bir dizi,

689
00:33:17,800 --> 00:33:18,700
kartların bir listesi gibi.

690
00:33:18,700 --> 00:33:20,980
Ve bu durumda, biz üçü var.

691
00:33:20,980 --> 00:33:27,280
>> Pekala, app öylesine
Bir liste kartlarını almak için gidiyoruz,

692
00:33:27,280 --> 00:33:29,870
ve karar için gidiyor hangi
tek CardView göstermek için.

693
00:33:29,870 --> 00:33:33,740
CardView can sadece
bir kart, ancak uygulamayı işlemek

694
00:33:33,740 --> 00:33:37,610
Tamam, kartların bir listesini alır?

695
00:33:37,610 --> 00:33:40,820
>> Yani bir anlamaya zaman
Kart, CardView vermek

696
00:33:40,820 --> 00:33:44,660
Eğer mümkün olabilir tahmin ediyorum nasıl
Bir karar vermek hangi kartı hakkında

697
00:33:44,660 --> 00:33:47,064
göstermek için?

698
00:33:47,064 --> 00:33:49,980
Size bir ipucu vermek gerekirse, geçici değil
Belirli bir kart inceleyen olacak.

699
00:33:49,980 --> 00:33:53,260
Sayfayı yenilemeniz ederseniz, olacak
sadece geri ilk kartı gidin.

700
00:33:53,260 --> 00:33:55,464
Geçici çünkü Tamam.

701
00:33:55,464 --> 00:33:56,630
Ne tekniği kullanabilir?

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

703
00:34:02,534 --> 00:34:08,760
>> HEDEF KİTLE: Bir değişken yapabilirdiniz
böylece ön vardı gibi.

704
00:34:08,760 --> 00:34:11,989
Bu doğru mudur, sen-ebil
Geçerli kart 1 eşittir var?

705
00:34:11,989 --> 00:34:14,150
>> NEEL MEHTA: Evet, biz bu yüzden
Doğru, devlet olmasını istiyor musunuz?

706
00:34:14,150 --> 00:34:16,080
Siz devleti kullanmak istiyorsunuz
bileşen anlamaya

707
00:34:16,080 --> 00:34:17,288
hangi kartı biz almak istiyoruz.

708
00:34:17,288 --> 00:34:19,290
Gibi biz bir listesi var
Tüm kartlar, yaparız

709
00:34:19,290 --> 00:34:21,630
anlamaya devleti kullanın
İlk kartın bir,

710
00:34:21,630 --> 00:34:23,710
böylece ikinci kart, üçüncü kart ve.

711
00:34:23,710 --> 00:34:28,760
>> Yani bir uygulama böylece app alacak
, getInitialState işlevi vardır

712
00:34:28,760 --> 00:34:35,020
getInitialState fonksiyon dönüş.

713
00:34:35,020 --> 00:34:39,929
Ve biz sadece activeIndex 0 söylerim.

714
00:34:39,929 --> 00:34:42,889
Yani şimdi bizim app o kendi devlet vardır.

715
00:34:42,889 --> 00:34:47,179
>> Ve böylece şimdi anlamaya render
Bir kart, Sadece diziye gidelim

716
00:34:47,179 --> 00:34:49,969
ve bu endeks de bir şey kapmak.

717
00:34:49,969 --> 00:34:53,580
Seç kart eşit this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Burada gördüğünüz gibi Yani, sahne ve
Devlet aslında birlikte çalışır.

720
00:35:00,162 --> 00:35:08,990
Yani şimdi bizim activeCard var,
Biz bunu activeCard arayacağım

721
00:35:08,990 --> 00:35:10,470
ve bu işler bakalım.

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

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

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, bu metin hata oldu.

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
>> Serin, evet, şimdi biz geri olduğumuzu
Daha önce nerede kalmıştık, doğru mu?

729
00:35:54,840 --> 00:35:57,100
Dışında aynı eski program
şimdi biz destek olabilir

730
00:35:57,100 --> 00:35:59,390
kartların bir listesini değil, sadece bir kart.

731
00:35:59,390 --> 00:36:04,130
Ve şimdi, yine, biz değiştirirseniz
activeIndex, biz 0'dan 1'e gidebilirsiniz

732
00:36:04,130 --> 00:36:07,330
ve şimdi ikinci kart,
ve sonra 0'a gittik.

733
00:36:07,330 --> 00:36:10,390
Yani burada bir yeni
fişekler kızımız sürümü.

734
00:36:10,390 --> 00:36:16,000
>> Tamam, şimdi en liste görünümü var izin vermenizi
, programınızda tüm kartları gösterir

735
00:36:16,000 --> 00:36:19,980
bu yüzden yeni yapacağız
bileşeni ListView denir.

736
00:36:19,980 --> 00:36:22,155
Liste görünümü react.createClass eşittir olsun.

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

738
00:36:32,890 --> 00:36:38,800
Bu yüzden sırasız işlemek istiyorum
Her kart için bir liste öğesinin ile liste.

739
00:36:38,800 --> 00:36:41,490
Ve böylece biz kartların bir grup var.

740
00:36:41,490 --> 00:36:44,990
Biz bir liste öğesi istiyorum
Her kart için, değil mi?

741
00:36:44,990 --> 00:36:47,490
Biz döngü için yapabileceği veya
bir şey, yeni bir liste öğesi yapmak.

742
00:36:47,490 --> 00:36:50,522
Ama yolu bunu yapmak
Tepki harita denen bir şey kullanın.

743
00:36:50,522 --> 00:36:57,150
Harita bir araç veya kullandığınız bir işlevdir
her madde için, bazı fonksiyon çalışır,

744
00:36:57,150 --> 00:36:59,510
dönüş değeri alır ve
Sana bu geri verir.

745
00:36:59,510 --> 00:37:06,310
>> Örnek olarak, biz dizi var So
1, 2, 3.Map function-- ve

746
00:37:06,310 --> 00:37:12,120
Bir için steno olan
function-- x ok x kez x.

747
00:37:12,120 --> 00:37:16,110
Bu, her numara için diyor
1, 2, 3, al.

748
00:37:16,110 --> 00:37:17,800
Bunu kare ve onu geri ver.

749
00:37:17,800 --> 00:37:22,090
Yani 1 sizce,
2, 3.Map x x kere geçer

750
00:37:22,090 --> 00:37:25,480
x geri verilir verir
Bu fonksiyonu olduğunu

751
00:37:25,480 --> 00:37:27,680
Bu dizinin her eleman çalıştırmak.

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

753
00:37:30,837 --> 00:37:32,190
>> İZLEYİCİ: 1, 4 9?

754
00:37:32,190 --> 00:37:35,709
>> NEEL MEHTA: Evet, 1, 4, 9
Eğer 1 kez 1 çünkü.

755
00:37:35,709 --> 00:37:36,500
Bu size bir tane verir.

756
00:37:36,500 --> 00:37:37,690
Bu ilk unsur var.

757
00:37:37,690 --> 00:37:38,530
>> 2 kez 2 4'tür.

758
00:37:38,530 --> 00:37:39,570
Bu, ikinci bir unsur var.

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

760
00:37:40,310 --> 00:37:41,540
Bu üçüncü unsur var.

761
00:37:41,540 --> 00:37:42,640
Mantıklı?

762
00:37:42,640 --> 00:37:45,015
Yani harita bir teknik size sahip
Fonksiyonel programcılar kullanmak,

763
00:37:45,015 --> 00:37:48,090
yeni stil
bir şeyler yapmak için programlama

764
00:37:48,090 --> 00:37:50,500
listenizde her elemana.

765
00:37:50,500 --> 00:37:51,970
Ve böylece bu tanıdık geliyor.

766
00:37:51,970 --> 00:37:53,370
Biz kartların bir listesi var.

767
00:37:53,370 --> 00:37:56,860
Her bir liste öğesini almak istiyorum
biri, böylece biz sadece burada haritayı kullanacağız.

768
00:37:56,860 --> 00:38:00,250
Biz liste eşittir izin söyleyeceğim
this.props, kartları, harita.

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

770
00:38:10,580 --> 00:38:15,070
>> Ve böylece biz konum, bir kart verilir
Bir liste öğesini oluşturmak için gidiyor

771
00:38:15,070 --> 00:38:17,580
Bunun o kartın içeriğini tarafı.

772
00:38:17,580 --> 00:38:20,660
Sadece biz vermek istiyoruz diyelim
Kartlar yüzden card.question soru.

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

774
00:38:24,990 --> 00:38:30,649
Yani bu liste içeren bir
LI ya da Liste Öğeler dizisi

775
00:38:30,649 --> 00:38:32,440
Nerede bir tane liste var
Her kart için kalemi,

776
00:38:32,440 --> 00:38:35,150
ve bu kartlar soruyu içerir.

777
00:38:35,150 --> 00:38:37,640
Mantıklı?

778
00:38:37,640 --> 00:38:39,450
>> Serin, şimdi atalım
aslında bu çıktı.

779
00:38:39,450 --> 00:38:46,521
Yani biz bir ul dönecektir.

780
00:38:46,521 --> 00:38:49,020
Bu sırasız listeye içinde,
biz sadece tüm listeyi sopa

781
00:38:49,020 --> 00:38:49,890
Onlar bize verdi.

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

783
00:38:52,851 --> 00:38:53,350
Güzel.

784
00:38:53,350 --> 00:38:56,060
>> Pekâlâ, şimdi bu
Liste görünümü sadece bulmak çalışır.

785
00:38:56,060 --> 00:38:59,842
Liste görünümü hakkında herhangi bir sorunuz?

786
00:38:59,842 --> 00:39:01,270
Sen kartların bir grup var.

787
00:39:01,270 --> 00:39:02,800
Her kart için bir liste öğesi yapmak.

788
00:39:02,800 --> 00:39:05,466
Ve sırasız içine koydu
Liste ve bunu geri vermek.

789
00:39:05,466 --> 00:39:09,410
Yani şimdi o kadar biz gömmek hareket edelim
Bizim app bu iç,

790
00:39:09,410 --> 00:39:14,310
bu yüzden, liste görünümü yapabilirsiniz.

791
00:39:14,310 --> 00:39:17,070
Ne argüman biz görünümü listelemek için geçmek?

792
00:39:17,070 --> 00:39:18,320
Ne özellikleri bunu veriyorsunuz?

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

794
00:39:25,111 --> 00:39:26,860
Eğer verirsen Unutmayın
bu kartların bir demet

795
00:39:26,860 --> 00:39:29,590
bu liste yapacağız
Bu kartları için görüntüleyin.

796
00:39:29,590 --> 00:39:32,267
Peki ne biz geçerdi
Burada argüman olarak?

797
00:39:32,267 --> 00:39:33,350
HEDEF KİTLE: kartların listesi?

798
00:39:33,350 --> 00:39:37,130
NEEL MEHTA: Evet, kart yüzden
Doğru, this.props.cards eşittir?

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

800
00:39:39,850 --> 00:39:44,370
Ve böylece tek sorun
Bu sadece can olduğunu

801
00:39:44,370 --> 00:39:48,600
render bir üst düzey elemanı döndü
böylece bir div kaydırmak için var.

802
00:39:48,600 --> 00:39:49,100
Bu garip.

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

804
00:39:56,190 --> 00:39:57,530
Yani eğer görelim.

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

806
00:40:09,790 --> 00:40:10,560
Bu çalışıyor mu?

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

808
00:40:29,774 --> 00:40:31,030
>> Evet, oraya gitmek.

809
00:40:31,030 --> 00:40:33,700
Yani şimdi bir liste var
altındaki kart,

810
00:40:33,700 --> 00:40:36,180
ve sonra bizim var
Üst kendini CardView,

811
00:40:36,180 --> 00:40:40,486
ve bu arasındaki çevirmek olacaktır
Kartın iki taraf.

812
00:40:40,486 --> 00:40:42,610
Şimdi bunu nasıl yaptığını o mantıklı mı?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Evet, bu yüzden yine biz iki bileşeni vardır.

815
00:40:46,790 --> 00:40:49,666
Birinci bileşen baskılar
dışarı listedeki her kart.

816
00:40:49,666 --> 00:40:50,540
Bu liste görünümü var.

817
00:40:50,540 --> 00:40:54,770
Ve ikinci bileşen,
sadece bu kart yazdırır.

818
00:40:54,770 --> 00:40:58,840
Bunu belli bir kart verirseniz, o olacak
bu kart hakkında bilgi yazdırmak

819
00:40:58,840 --> 00:41:01,870
ve ileri ve geri çevirmek edelim.

820
00:41:01,870 --> 00:41:05,850
>> İstersek biz denemek ve tartışma böylece
Bu bazı yeni özellikler ekleme hakkında.

821
00:41:05,850 --> 00:41:09,482
Aksi takdirde biz biraz daha konuşabiliriz
reaktörün hızının yaklaşık,

822
00:41:09,482 --> 00:41:11,190
ya da biz cevap verebilir
sorular aklınıza gelebilecek

823
00:41:11,190 --> 00:41:15,050
Çünkü bu çekirdek parçaları tümü
ben hakkında konuşmak istiyorum tepki.

824
00:41:15,050 --> 00:41:16,540
Biz devam edebilir.

825
00:41:16,540 --> 00:41:17,590
Biz sorulara cevap verebilir.

826
00:41:17,590 --> 00:41:18,560
Ne istersen.

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

828
00:41:21,694 --> 00:41:24,205
>> HEDEF KİTLE: Eğer kullanabilir miyim
Normal JavaScript JSX?

829
00:41:24,205 --> 00:41:27,150
Ya da bu bir şey olduğunu
[duyulamaz] ile geldi?

830
00:41:27,150 --> 00:41:30,760
>> NEEL MEHTA: Soru kutu olduğunu
Normal JavaScript JSX kullanabilir miyim?

831
00:41:30,760 --> 00:41:32,620
Cevabı evet.

832
00:41:32,620 --> 00:41:41,070
JSX sadece bir yolu sizin yanınızdaki sürer
Bunun içinde HTML sahiptir JavaScript,

833
00:41:41,070 --> 00:41:44,215
ve JavaScript içine derler
bunun içinde HTML yoktur.

834
00:41:44,215 --> 00:41:47,880
Yani bu yüzden burada dikkat ki- dikkat edin.

835
00:41:47,880 --> 00:41:50,820
Eğer div gibi var gibi görünüyor bu
ve bunun içinde şeyler var.

836
00:41:50,820 --> 00:41:54,970
>> Bu JavaScript derler
gibi aynı şeyi üretir.

837
00:41:54,970 --> 00:41:59,590
Ben ne söylüyorum olduğunu tahmin
Bu gibi JSX, sadece sözdizimsel olduğunu

838
00:41:59,590 --> 00:42:03,530
JavaScript için bir önişlemci çok
PHP gibi HTML bir önişlemci olduğunu.

839
00:42:03,530 --> 00:42:05,490
JSC önişlemci olduğunu
JavaScript bu sağlar

840
00:42:05,490 --> 00:42:12,970
Eğer JavaScript içine HTML koydu.

841
00:42:12,970 --> 00:42:16,425
Ve böylece doğru trafo varsa
hangi [duyulamaz] adında bir şeydir,

842
00:42:16,425 --> 00:42:17,300
hangi dönüştürecek.

843
00:42:17,300 --> 00:42:19,360
Doğru önişlemci,
Eğer bunu izin vereceğim.

844
00:42:19,360 --> 00:42:20,235
>> HEDEF KİTLE: [duyulamaz]

845
00:42:20,235 --> 00:42:23,026
NEEL MEHTA: Genellikle gerekmez
JavaScript içine HTML koymak

846
00:42:23,026 --> 00:42:24,110
senin suçum sürece tepki.

847
00:42:24,110 --> 00:42:27,146
Ama yine de bunu yapabilirsiniz.

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

849
00:42:27,645 --> 00:42:29,353
>> İZLEYİCİ: Seni düşünüyorum
tepki tarif etmişti

850
00:42:29,353 --> 00:42:31,970
fonksiyonel programlama dili olarak.

851
00:42:31,970 --> 00:42:35,646
Biz CS50 içinde C öğrenme oldum.

852
00:42:35,646 --> 00:42:38,032
C de işlevsel bir dil midir?

853
00:42:38,032 --> 00:42:39,990
NEEL MEHTA: Yani soru
Fonksiyonel hakkında

854
00:42:39,990 --> 00:42:43,010
olarak adlandırılan başka bir şey karşısında
zorunlu ya da prosedürel programlama.

855
00:42:43,010 --> 00:42:44,820
Popüler programlar iki tür var.

856
00:42:44,820 --> 00:42:48,550
Bir usul denir ki
Tüm yapıyor komutları gibi hakkında

857
00:42:48,550 --> 00:42:51,510
ve bir diğeri ise, tüm işlevsel,
fonksiyonlara sahip ve sahip hakkında

858
00:42:51,510 --> 00:42:52,930
giriş ve bu çıkış.

859
00:42:52,930 --> 00:42:55,930
Tepki fonksiyonel paradigma.

860
00:42:55,930 --> 00:42:58,010
C derece usul paradigma.

861
00:42:58,010 --> 00:43:02,360
>> Ve bir örnek olarak, örneğin, Cı-
Bu bildirime şekilde yapmazsanız

862
00:43:02,360 --> 00:43:04,390
program yapma, değil mi?

863
00:43:04,390 --> 00:43:06,826
Sen söylemek zorunda, bu yazdırın.

864
00:43:06,826 --> 00:43:07,950
Bu veri yapısını değiştirin.

865
00:43:07,950 --> 00:43:08,530
Bu yazdırın.

866
00:43:08,530 --> 00:43:10,160
Tüm komutlar hakkında.

867
00:43:10,160 --> 00:43:12,640
>> Tepki olarak, orada değil
birçok komutlar.

868
00:43:12,640 --> 00:43:15,145
Bu sahip tüm hakkında
bileşenleri bir araya koymak.

869
00:43:15,145 --> 00:43:16,300
Onlar fonksiyonları gibiler.

870
00:43:16,300 --> 00:43:26,360
Bir işlevi gibi var
CardView denilen

871
00:43:26,360 --> 00:43:28,680
hangi bir fonksiyonudur
Bu, giriş, çıkış vardır

872
00:43:28,680 --> 00:43:30,660
ve bu nedenle tepki hepsi
Bu felsefe ile ilgili

873
00:43:30,660 --> 00:43:32,700
Eğer veri var having-- bize.

874
00:43:32,700 --> 00:43:34,910
Bunu geçirin
Algoritma ve edeceğiz

875
00:43:34,910 --> 00:43:36,800
Çıktı HTML size
Sadece sayfa basılmış,

876
00:43:36,800 --> 00:43:39,180
ve böylece var
o parça parça inşa.

877
00:43:39,180 --> 00:43:42,800
>> Yani bir metafor çizmek ne
Daha önce söylediğim, sen nasıl

878
00:43:42,800 --> 00:43:47,050
Facebook size bir ileti alırsanız
ve güncellemek ne parçaları seçmek,

879
00:43:47,050 --> 00:43:47,882
Bu usul var.

880
00:43:47,882 --> 00:43:48,840
Bu doğru, zorunluluk değil mi?

881
00:43:48,840 --> 00:43:49,806
Tamam, ben bir mesaj aldım.

882
00:43:49,806 --> 00:43:50,930
Orada hesabını değiştirelim.

883
00:43:50,930 --> 00:43:52,110
>> Burada bir pencere açılır edelim.

884
00:43:52,110 --> 00:43:52,780
Orada hesabını değiştirelim.

885
00:43:52,780 --> 00:43:53,700
Burada bu çizelim.

886
00:43:53,700 --> 00:43:55,220
Bu bir usul yaklaşım.

887
00:43:55,220 --> 00:44:00,240
>> Yani, Eğik gibi ne şeyler var
Boost, Omurga, diğer çerçeveler kullanın.

888
00:44:00,240 --> 00:44:01,200
Tepki işlevseldir.

889
00:44:01,200 --> 00:44:03,324
Bu çok farklı bir yolu
bir şeyleri düşünüyordum.

890
00:44:03,324 --> 00:44:07,950
Bu en atalım bu fikri alır
işlevleri veya olacak algoritmalar

891
00:44:07,950 --> 00:44:08,800
o veri vermek.

892
00:44:08,800 --> 00:44:11,820
O tükürmek ne yapacaksınız o
Bilgisayar olmalı ve

893
00:44:11,820 --> 00:44:13,490
dışarı ağırlığında ilgilenir.

894
00:44:13,490 --> 00:44:15,890
Bunu kendiniz idare yoktur.

895
00:44:15,890 --> 00:44:18,470
Bu anlamda biraz yapar mı?

896
00:44:18,470 --> 00:44:18,970
Evet?

897
00:44:18,970 --> 00:44:24,180
>> HEDEF KİTLE: işlevsel bir dil olarak,
Her şey bir kez olur?

898
00:44:24,180 --> 00:44:26,800
>> NEEL MEHTA: Hayır, işler sırayla olur.

899
00:44:26,800 --> 00:44:29,320
Burada gibi hala orada
sipariş, ama öyle değil

900
00:44:29,320 --> 00:44:32,390
gibi sırayla gerçekleşmesi
komut, komut övmek.

901
00:44:32,390 --> 00:44:36,459
Bu sırasına olur
fonksiyonu çıkış verir.

902
00:44:36,459 --> 00:44:37,750
Başka bir işlevin içine koyun.

903
00:44:37,750 --> 00:44:39,550
Başka içine koy
fonksiyonu, başka bir işlev.

904
00:44:39,550 --> 00:44:41,470
>> Eğer CS51 yaparsanız, olacak
Fonksiyonel programları öğrenmek

905
00:44:41,470 --> 00:44:42,886
Bu kapsam biraz dışarı.

906
00:44:42,886 --> 00:44:45,090
Ama temelde ne yapar
React serin değil sadece

907
00:44:45,090 --> 00:44:46,840
tek yönlü veri akışı
ve sanal Dom,

908
00:44:46,840 --> 00:44:48,700
ancak, aynı zamanda, bu fikri
fonksiyonel programlama.

909
00:44:48,700 --> 00:44:51,720
Ve fonksiyonel programlama çok kolay
oluşturmak ve dışarı güzel şeyler yapmak için,

910
00:44:51,720 --> 00:44:53,844
ve düşünmek için çok kolay
hakkında ve yaklaşık sebebi.

911
00:44:53,844 --> 00:44:55,450
Yani tepki başka iyi beraberlik var.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Herhangi bir başka soru?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Evet?

916
00:45:03,150 --> 00:45:06,840
>> HEDEF KİTLE: Um, neden olur
var aksine izin kullanmak?

917
00:45:06,840 --> 00:45:10,450
>> NEEL MEHTA: Yani soru
Neden var yerine izin kullanabilirim?

918
00:45:10,450 --> 00:45:13,220
Bu adında bir şeydir
ES6 veya ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Bu JavaScript yeni sürümü.

920
00:45:15,820 --> 00:45:19,050
Teknik nedenlerden bir grup var,
ama let var daha iyi bir versiyonu.

921
00:45:19,050 --> 00:45:20,724
>> Eğer değişkenler bildirmek nasıl bu kadar.

922
00:45:20,724 --> 00:45:21,390
Siz izin kullanabilirsiniz.

923
00:45:21,390 --> 00:45:22,140
Sen var kullanmak olabilir.

924
00:45:22,140 --> 00:45:23,825
Let teknik bir grup var
Onları bakabilirsiniz reasons--

925
00:45:23,825 --> 00:45:25,610
daha iyi neden için later-- kadar.

926
00:45:25,610 --> 00:45:28,780
Temelde, ES6 bazı güzel vardır
yeni sözdizimi, bazı yeni özellikler

927
00:45:28,780 --> 00:45:30,720
Eski JavaScript üstünde.

928
00:45:30,720 --> 00:45:32,782
>> Yani biz beş dakika gibi var.

929
00:45:32,782 --> 00:45:34,990
Ben sadece konuşmak istedim
bir şey daha gerçek hızlı.

930
00:45:34,990 --> 00:45:36,450
Herhangi bir sorunuz olsaydı,
Şimdi bu konuda daha sonra konuşalım.

931
00:45:36,450 --> 00:45:38,366
Ama sadece bu yüzden bu gets
kameraya yakalandı, ben sadece

932
00:45:38,366 --> 00:45:41,550
Size nasıl hakkında biraz konuşmak istiyorum
aslında apps tepki kullanın.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Burada sen gitmek,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
Bu tepki ana sayfası ve
o aslında nasıl kullandığınızı size göstereceğim

936
00:46:03,320 --> 00:46:05,320
Sayfalarınıza tepki.

937
00:46:05,320 --> 00:46:08,845
Temelde, biraz var
karmaşık Tepki yüklemeye çalışıyorum.

938
00:46:08,845 --> 00:46:12,300
Sadece sürüklerken O kadar kolay değil
ve orada bir JavaScript bırakın.

939
00:46:12,300 --> 00:46:15,890
>> Sen trafo olması
Daha önce olduğu gibi, hangi olacak kurmak,

940
00:46:15,890 --> 00:46:18,120
içine JSX çevirmek
Normal JavaScript.

941
00:46:18,120 --> 00:46:21,030
Bunu edeceğiz şey var
Eğer normal ES6 derlemek.

942
00:46:21,030 --> 00:46:24,720
Javascript hareketli bir sürü var
parça yapmanız gereken, bu nedenle bir şey var

943
00:46:24,720 --> 00:46:27,200
Yeoman, Yeoman.io denir.

944
00:46:27,200 --> 00:46:31,110
Ve bu bir komut satırı aracı olduğunu edeceğiz olduğunu
Eğer sizin yanınızdaki tepki dışarı scaffold yardım

945
00:46:31,110 --> 00:46:32,380
Kolayca projeler.

946
00:46:32,380 --> 00:46:38,660
>> Yani bu konuda okuyabilirsiniz
Daha sonra, ancak bazı araçlar vardır

947
00:46:38,660 --> 00:46:40,160
Yeoman sunduğu.

948
00:46:40,160 --> 00:46:43,280
Onlar tepki oluşturmak izin vereceğim
yerleşik her şeyi ile app.

949
00:46:43,280 --> 00:46:46,030
O inşa edeceğiz gibi
bileşenleri içinde yerleşik.

950
00:46:46,030 --> 00:46:47,880
Bu sizin trafo inşa gerekecek.

951
00:46:47,880 --> 00:46:50,699
Serin bir şey var
şeyler otomatik yerleşik

952
00:46:50,699 --> 00:46:52,240
jeneratörler denilen bu şeyleri kullanarak.

953
00:46:52,240 --> 00:46:54,620
>> İsterseniz Yani bu konuda okumak.

954
00:46:54,620 --> 00:46:59,110
Sadece Yeoman, Y-E-O-M-A-N, ve gitmek
Bu gibi jeneratörleri bulabilirsiniz.

955
00:46:59,110 --> 00:47:01,263
Ve benzeri jeneratörler ile
Bu, sadece bir tane ister

956
00:47:01,263 --> 00:47:03,010
Birkaç komut satırı komutları olduğunu.

957
00:47:03,010 --> 00:47:05,530
Bir dışarı scaffold edeceğiz
Tüm sizin için app tepki.

958
00:47:05,530 --> 00:47:10,470
Tüm manuel borulama alırsınız,
ve homurtu iş, sizin için yapılır

959
00:47:10,470 --> 00:47:13,010
ve bu sadece odak neden
sadece yazmaya tepki.

960
00:47:13,010 --> 00:47:16,739
>> Yani temelde bina
Uygulamaya nontrivial tepki.

961
00:47:16,739 --> 00:47:19,530
Bu arada kablolu, ama var orada
Senin için yapacağım araçlardır.

962
00:47:19,530 --> 00:47:23,070
Eğer yapmak istiyorsanız bir tepki Yani
app, bu şekilde yapmaya çalışın.

963
00:47:23,070 --> 00:47:26,360
Eğer sadece deney yapmak isterseniz,
Bu CodePen kullanmayı da deneyebilirsiniz

964
00:47:26,360 --> 00:47:28,550
Bu CodePen çünkü
tüm kablolama tepki.

965
00:47:28,550 --> 00:47:30,240
Ben zaten sizin için tüm çalışmaları yaptık.

966
00:47:30,240 --> 00:47:34,610
>> Eğer böyle yapmak istiyorsanız Yani
Üretim uygulaması tepki serbest bırakmak için,

967
00:47:34,610 --> 00:47:37,220
Bu jeneratörlerin birini deneyin.

968
00:47:37,220 --> 00:47:40,240
Sadece oynamak istiyorsanız
etrafında, çoğu zaman sadece değer

969
00:47:40,240 --> 00:47:44,490
Burada CodePen etrafında oynamaya çalışın.

970
00:47:44,490 --> 00:47:45,470
Kulağa hoş gelmek?

971
00:47:45,470 --> 00:47:45,970
Güzel.

972
00:47:45,970 --> 00:47:47,890
>> Yani ben hepsi bu.

973
00:47:47,890 --> 00:47:52,470
Yine, tüm kod ve örnekler
Burada bu web sitesinde olacak.

974
00:47:52,470 --> 00:47:55,509
Yani, yine, biz konuşmadık
yaklaşık tepki çok sözdizimi,

975
00:47:55,509 --> 00:47:57,550
ancak tüm bu bulmak için
Biraz sözdizimsel ayrıntılar,

976
00:47:57,550 --> 00:48:00,320
tüm mevcut olacak
Burada bu sitede.

977
00:48:00,320 --> 00:48:02,660
>> Yani böyle tavsiye ederim
ilk adımı atmak.

978
00:48:02,660 --> 00:48:06,277
Senin CodePen koydu.

979
00:48:06,277 --> 00:48:08,110
Yapmaya çalışıyor deneyin
ikinci adıma.

980
00:48:08,110 --> 00:48:11,310
Orada dördüncü adım, sadece
Bunu elde nerede görmek.

981
00:48:11,310 --> 00:48:14,840
>> Herhangi bir başka soru, çek
ya bu sayfada dışarı bana e-posta.

982
00:48:14,840 --> 00:48:16,490
O benim e-posta var.

983
00:48:16,490 --> 00:48:19,885
Ama herhangi size yardım etmek isterdim
hakkında olabilir sorular tepki.

984
00:48:19,885 --> 00:48:21,010
Yani, evet, ben var hepsi bu.

985
00:48:21,010 --> 00:48:23,410
Çok için teşekkür ederiz
izlerken ya da katılıyor için.

986
00:48:23,410 --> 00:48:26,820
Ve ben herhangi bir soru alacağım
Şimdi bundan sonra olabilir.

987
00:48:26,820 --> 00:48:29,140
Yani izlemek için hepinize teşekkür ederim.

988
00:48:29,140 --> 00:48:31,270