1
00:00:00,000 --> 00:00:02,910
>> [За възпроизвеждане на музика]

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

3
00:00:04,850 --> 00:00:07,275
>> Нийл Мехта: Тук тя отива.

4
00:00:07,275 --> 00:00:11,070
>> Е, всички, добре дошли в уеб
приложения на бъдещето с реагират.

5
00:00:11,070 --> 00:00:11,870
Това е CS50.

6
00:00:11,870 --> 00:00:12,930
Моето име е Нийл.

7
00:00:12,930 --> 00:00:17,689
Аз съм TA за CS50 и второкурсник
в Харвардския колеж и много, много

8
00:00:17,689 --> 00:00:18,730
страстна уеб разработчик.

9
00:00:18,730 --> 00:00:20,730
Така че аз съм много вълнуващо да
да говоря с вас днес,

10
00:00:20,730 --> 00:00:24,550
независимо дали сте тук или у дома
гледане, за реагират, което е, отново

11
00:00:24,550 --> 00:00:27,270
както казах, бъдещето на уеб приложения.

12
00:00:27,270 --> 00:00:29,055
>> Така реагират е уеб рамка.

13
00:00:29,055 --> 00:00:30,930
И тъй като аз съм бил казвам
за някои хора тук,

14
00:00:30,930 --> 00:00:33,400
рамка е просто
набор от инструменти, можете да използвате

15
00:00:33,400 --> 00:00:35,770
за структуриране и изграждане на уеб приложението си.

16
00:00:35,770 --> 00:00:39,010
А уеб приложения са, отново, уеб сайтове
които са интерактивни, като Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, независимо.

18
00:00:42,330 --> 00:00:45,590
>> Така че Facebook е уеб рамка
който е разработен от Facebook

19
00:00:45,590 --> 00:00:48,060
няколко години back-- реагират е.

20
00:00:48,060 --> 00:00:50,830
Това е, тъй като е било използвано в
Facebook на своите мобилни приложения

21
00:00:50,830 --> 00:00:52,460
и уеб приложението, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy е друг
виден ранно осиновител на React.

23
00:00:56,350 --> 00:00:58,630
>> Това е наистина била получаване
изключително популярна.

24
00:00:58,630 --> 00:01:03,420
Ако някога използват неща като ъглови или
Опорна, това е на едно и също семейство,

25
00:01:03,420 --> 00:01:05,830
но оттогава досега
изпреварва тяхната популярност.

26
00:01:05,830 --> 00:01:06,890
Това е най-горещата нова нещо.

27
00:01:06,890 --> 00:01:09,590
Това е наистина, наистина огромен.

28
00:01:09,590 --> 00:01:13,470
>> И така React е добро не само като
уеб рамка за изграждане на интерфейси.

29
00:01:13,470 --> 00:01:16,020
Това е добре за изграждане на уеб интерфейси.

30
00:01:16,020 --> 00:01:18,350
Освен това има и нещо
наречено React Native които

31
00:01:18,350 --> 00:01:22,200
ви позволява да се изгради интерфейси
за Android и IOS

32
00:01:22,200 --> 00:01:26,390
а може би и други платформи в бъдеще
използвайки само една и съща JavaScript кода.

33
00:01:26,390 --> 00:01:31,130
Можете да използвате точно същото
JavaScript код, за да направи уеб сайтове,

34
00:01:31,130 --> 00:01:33,040
да направи Android приложения и IOS приложения.

35
00:01:33,040 --> 00:01:35,000
>> Това е много, много вълнуващо време.

36
00:01:35,000 --> 00:01:37,070
Това е наистина, наистина готино възможност.

37
00:01:37,070 --> 00:01:42,020
Това е наистина универсален уеб
инструмент за развитие интерфейс,

38
00:01:42,020 --> 00:01:44,420
така че това е един много, много
Важно е да знаете.

39
00:01:44,420 --> 00:01:46,949
И, както ми беше да казвам на хората
преди, това, мисля,

40
00:01:46,949 --> 00:01:48,990
няма да се промени начина, по който
изграждане на уеб приложения завинаги.

41
00:01:48,990 --> 00:01:55,820
Така че това е може би малко хипербола, но аз
Мисля, че е доста добро нещо, за да знам.

42
00:01:55,820 --> 00:01:57,580
>> ОК, така че това, което е React?

43
00:01:57,580 --> 00:02:01,020
Реагират е рамка можете да
използвате за изграждане на интерфейси.

44
00:02:01,020 --> 00:02:03,240
Интерфейс е отново
уеб страница, нали?

45
00:02:03,240 --> 00:02:06,340
Така че тук е Instagram.com, употреби реагира.

46
00:02:06,340 --> 00:02:08,740
>> Реагират е изградена въз основа на
идея на компоненти.

47
00:02:08,740 --> 00:02:11,900
Даден компонент е HTML
елемент на стероиди,

48
00:02:11,900 --> 00:02:14,470
така че един HTML елемент е като един бутон.

49
00:02:14,470 --> 00:02:15,250
Това е една точка.

50
00:02:15,250 --> 00:02:17,500
Това е удар с глава, нали?

51
00:02:17,500 --> 00:02:22,740
И Instagram ще ги използва, но това
ще използва компоненти на React.

52
00:02:22,740 --> 00:02:25,740
>> Реагират компоненти са
souped-нагоре HTML елементи

53
00:02:25,740 --> 00:02:28,100
че има собственото си поведение
съдържащи се в тях.

54
00:02:28,100 --> 00:02:31,800
Така че, като пример, бихме могли да имаме
елемент време, компонент време,

55
00:02:31,800 --> 00:02:34,095
който ще съдържа като
печата време, нали знаеш,

56
00:02:34,095 --> 00:02:37,170
нов профил компонент, който
ще съдържа изображение на профил

57
00:02:37,170 --> 00:02:38,820
и името на лицето.

58
00:02:38,820 --> 00:02:42,930
Тя може да има като брояч, който
може да се разчита като на броя харесвания,

59
00:02:42,930 --> 00:02:45,610
и ако щракнете върху нея, тя ще
увеличаване на броя на харесвания.

60
00:02:45,610 --> 00:02:48,200
Даден компонент е просто
куп HTML код, който

61
00:02:48,200 --> 00:02:50,520
има някои функции
увит в нея.

62
00:02:50,520 --> 00:02:53,770
Така че това е един HTML елемент като
на стероиди, както казах и преди.

63
00:02:53,770 --> 00:02:56,270
Можете да вземете тези компоненти,
и можете да ги съберете заедно

64
00:02:56,270 --> 00:02:59,060
да се правят нови компоненти, в
този случай, пост компонент,

65
00:02:59,060 --> 00:03:00,505
който съдържа всички тези неща.

66
00:03:00,505 --> 00:03:04,050
Тя ще съдържа Time, профил,
LikeCounter, може би коментара

67
00:03:04,050 --> 00:03:06,100
а може би и на самото изображение.

68
00:03:06,100 --> 00:03:10,810
И така уеб приложения са просто изградени чрез вземане
компоненти и пускането им заедно.

69
00:03:10,810 --> 00:03:15,620
Една емисия Instagram е нищо повече от
куп мнения едно след друго,

70
00:03:15,620 --> 00:03:19,032
всеки пост съдържа като Time,
Профил, LikeCounter, и така нататък.

71
00:03:19,032 --> 00:03:20,490
Това е нещо като строеж на къща.

72
00:03:20,490 --> 00:03:22,660
Вие не строят на
къща от горе на долу.

73
00:03:22,660 --> 00:03:24,960
Можете ви отнеме components--
вземе като банята.

74
00:03:24,960 --> 00:03:28,320
Ако вземеш под с вие ги придържате
заедно, а вие имате нов компонент.

75
00:03:28,320 --> 00:03:29,760
Имате нова част на къщата.

76
00:03:29,760 --> 00:03:32,860
>> Така че всички реагират е изградена около
тази идея за компоненти, които

77
00:03:32,860 --> 00:03:36,600
са интерактивни, които са декларативни.

78
00:03:36,600 --> 00:03:39,650
Както можете просто да кажа какво е
Профилът е, и това го прави.

79
00:03:39,650 --> 00:03:40,600
Те са composable.

80
00:03:40,600 --> 00:03:43,880
Можете да вземете време и профил, сложи
ги заедно, да направи нещо по-добро.

81
00:03:43,880 --> 00:03:47,770
И те са за многократна употреба, така че ако
имаме изходния код за определена длъжност,

82
00:03:47,770 --> 00:03:49,440
можете да вградите че навсякъде.

83
00:03:49,440 --> 00:03:53,160
>> Можете да вградите една Instagram
нещо на собствения си уебсайт.

84
00:03:53,160 --> 00:03:56,830
Можете да вградите в Facebook, например,
стига да използва реагира добре.

85
00:03:56,830 --> 00:04:00,360
Така компоненти са наистина, наистина, наистина
мощните строителни блокове на мрежата

86
00:04:00,360 --> 00:04:04,180
който може да се използва навсякъде и сложи
заедно, за да се правят нови строителни блокове.

87
00:04:04,180 --> 00:04:07,159
Това е много, много
високо ниво преглед.

88
00:04:07,159 --> 00:04:09,200
Така че, отново, ако имате
някакви въпроси във всяка точка

89
00:04:09,200 --> 00:04:14,470
за философията на реактора, на
кодиране, за да ме спре, и да ме уведомите.

90
00:04:14,470 --> 00:04:18,420
>> ОК, така че да реагира, тъй като тя е готино
има различен начин на възприемане

91
00:04:18,420 --> 00:04:19,870
как да изградите уеб приложения.

92
00:04:19,870 --> 00:04:23,620
Вероятно сте чували за MVC, а
модел можете да контролирате в CS50 или каквото

93
00:04:23,620 --> 00:04:25,940
друга сондиране класове, които използвате.

94
00:04:25,940 --> 00:04:29,000
И повечето рамки са
изградена около идеята за MVC.

95
00:04:29,000 --> 00:04:30,410
Реагират не е така.

96
00:04:30,410 --> 00:04:32,980
Реагират е изградена около идеята
еднопосочен поток от данни

97
00:04:32,980 --> 00:04:36,510
както се вижда от тази таблица или графика тук.

98
00:04:36,510 --> 00:04:38,260
>> По принцип, трябва да имате източник на данни.

99
00:04:38,260 --> 00:04:42,380
И източник на данни ще реши
как да изложи някои компоненти.

100
00:04:42,380 --> 00:04:45,452
И компонентите ще
тогава, когато те се променят,

101
00:04:45,452 --> 00:04:47,160
те ще разкаже
източник на данни, за да се промени.

102
00:04:47,160 --> 00:04:49,350
>> За да използвате Instagram
Например, може да се наложи

103
00:04:49,350 --> 00:04:52,050
списък на пощенските обекти като
в база данни или нещо такова.

104
00:04:52,050 --> 00:04:53,310
Че данните.

105
00:04:53,310 --> 00:04:57,600
И тогава нашите публикувайте компоненти
ще вземе, че данните,

106
00:04:57,600 --> 00:05:01,830
и да използват тези данни, за да направи
нещо на екрана.

107
00:05:01,830 --> 00:05:04,300
Това е, което стрелката
от данни да е компонент,

108
00:05:04,300 --> 00:05:07,930
и след това същата данни се използва
да се направи един куп компоненти.

109
00:05:07,930 --> 00:05:10,290
>> В Facebook Messenger, за
например, която е реагира

110
00:05:10,290 --> 00:05:13,410
възможно е да има списък на
съобщения като източник на данни.

111
00:05:13,410 --> 00:05:15,927
И това няма да направи
само списъка на съобщения

112
00:05:15,927 --> 00:05:17,510
но също така и в списъка на приятелите, които имате.

113
00:05:17,510 --> 00:05:19,200
Имате Броят непрочетени.

114
00:05:19,200 --> 00:05:23,330
Може също така да направи нещо, което Facebook
това е в дъното на Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Същите данни е
единствен източник на истината

116
00:05:25,610 --> 00:05:28,290
и че причинява много
компоненти да бъдат предоставени.

117
00:05:28,290 --> 00:05:30,290
И всеки път, когато един от тези,
компоненти се променили,

118
00:05:30,290 --> 00:05:32,320
той се връща и
променя източника на данни.

119
00:05:32,320 --> 00:05:33,460
>> Можете да изпратите съобщение, нали?

120
00:05:33,460 --> 00:05:34,780
Това променя източника на данни.

121
00:05:34,780 --> 00:05:39,490
Вие четете вашите съобщения,
така че можете да зададете непрочетено 0.

122
00:05:39,490 --> 00:05:41,136
Това променя източника на данни.

123
00:05:41,136 --> 00:05:44,010
И забележете, че всички от тях на една
стрелка връщаме към едни и същи данни

124
00:05:44,010 --> 00:05:47,662
източник, така че да знаете,
даден определен набор данни,

125
00:05:47,662 --> 00:05:49,870
Знаете ли, че точно това, което
страница ще изглежда така.

126
00:05:49,870 --> 00:05:50,700
Това е детерминирана.

127
00:05:50,700 --> 00:05:53,451
Знаеш ли, дадени на някои данни, това, което
страницата ще изглежда така.

128
00:05:53,451 --> 00:05:56,158
Можете да се предскаже как ще се
се държат и как се развиват нещата

129
00:05:56,158 --> 00:05:57,650
да работят, когато са взети заедно.

130
00:05:57,650 --> 00:06:00,410
>> И ако имах един милион компоненти
тук, че ще се държат еднакви, нали?

131
00:06:00,410 --> 00:06:02,290
Вие няма да има никакво
странни взаимовръзки.

132
00:06:02,290 --> 00:06:04,120
Един данни донесе един милион компоненти.

133
00:06:04,120 --> 00:06:06,879
Един милион компоненти могъл
върнете и да промените данните.

134
00:06:06,879 --> 00:06:07,920
И така, това е много хубаво.

135
00:06:07,920 --> 00:06:10,870
Строим composable,
лесно мащабируеми уеб приложения.

136
00:06:10,870 --> 00:06:13,150
>> Имате един източник на данни,
източник на истина.

137
00:06:13,150 --> 00:06:15,790
Това казва на вашите компоненти
как да се изложи на страницата,

138
00:06:15,790 --> 00:06:18,190
и компонентите ще
справят взаимодействие.

139
00:06:18,190 --> 00:06:20,150
И ако искат да се промени
неща, просто се върнете

140
00:06:20,150 --> 00:06:21,750
и кажи на източника на данни, за да се промени.

141
00:06:21,750 --> 00:06:22,850
Има смисъл?

142
00:06:22,850 --> 00:06:26,010
Така реагират е всичко за разбиране
как да се изгради компонент

143
00:06:26,010 --> 00:06:29,540
и как да направите вашия компонент
взаимодействат с външния свят.

144
00:06:29,540 --> 00:06:31,850
>> Осъществяване взаимодействат компонент
с външния свят

145
00:06:31,850 --> 00:06:34,490
използва друга технология
наречено Flux, които

146
00:06:34,490 --> 00:06:36,872
е рамка, която е
добавен на върха на React.

147
00:06:36,872 --> 00:06:38,330
Ние няма да говорим за това.

148
00:06:38,330 --> 00:06:42,990
Отиваме да говорим повече за, предвид
данни, как може да се направи компонент?

149
00:06:42,990 --> 00:06:47,010
>> И така React е наистина страхотно, защото вие
да го използвате с всяка задния край, който искате.

150
00:06:47,010 --> 00:06:50,480
Ако имате като задния край Python,
ако си Python може да изплюе някои данни,

151
00:06:50,480 --> 00:06:51,610
Реагират може да го направи.

152
00:06:51,610 --> 00:06:54,700
Ако са открити JS изходи
на данни, React го прави.

153
00:06:54,700 --> 00:06:56,890
Ruby релси с
данни, React го прави.

154
00:06:56,890 --> 00:07:01,860
>> Така реагират е в основата на уеб
view-- предния край с компоненти

155
00:07:01,860 --> 00:07:03,910
за някой източник на данни, каквато.

156
00:07:03,910 --> 00:07:07,145
И така, като се започне от източник на данни, за да
реагират компоненти е доста лесно.

157
00:07:07,145 --> 00:07:08,770
Отивате в другата посока е малко по-трудно.

158
00:07:08,770 --> 00:07:10,462
Това използва Flux както споменах преди.

159
00:07:10,462 --> 00:07:11,420
Ние няма да вляза в тази.

160
00:07:11,420 --> 00:07:13,740
Ние ще се съсредоточим повече върху
данни към компонент страна.

161
00:07:13,740 --> 00:07:15,880
По този начин можете да направите
готини, забавни уеб приложения.

162
00:07:15,880 --> 00:07:19,870
Това няма да се отрази на външния свят
за сега, но това е друга история.

163
00:07:19,870 --> 00:07:22,210
>> ОК, така че ако сте били тук
за последния ми семинар

164
00:07:22,210 --> 00:07:26,610
вие ще знаете, че целият код за
днешната беседа ще бъде в този URL

165
00:07:26,610 --> 00:07:29,320
тук, съжалявам, това URL тук.

166
00:07:29,320 --> 00:07:32,730
И в общи линии ние ще отидем
през четири стъпки, може би пет,

167
00:07:32,730 --> 00:07:33,510
вероятно не пет.

168
00:07:33,510 --> 00:07:37,300
Ние ще се движат през четири етапа
за изграждане на проба React ап.

169
00:07:37,300 --> 00:07:39,550
И така всички изходния код
за всяка стъпка от пътя

170
00:07:39,550 --> 00:07:42,216
ще бъде точно тук, така че ако
можете да започнете следващата заедно у дома,

171
00:07:42,216 --> 00:07:43,991
Чувствайте се свободни да чета този код.

172
00:07:43,991 --> 00:07:46,740
Ако след заедно тук,
ние ще го показва на екрана,

173
00:07:46,740 --> 00:07:47,739
така че не се притеснявайте за това.

174
00:07:47,739 --> 00:07:50,930
Но ако сте като у дома си, се чувстват
свободни да посетите този сайт.

175
00:07:50,930 --> 00:07:56,400
И, да, би трябвало да можете да получите
всички код, което някога ще трябва тук.

176
00:07:56,400 --> 00:08:01,380
Така че това е един добър мамят лист, както и
за бъдещите си приключения с React.

177
00:08:01,380 --> 00:08:04,490
Cool, така че ако всеки, който е тук,
и дори ако сте вкъщи,

178
00:08:04,490 --> 00:08:11,580
спра този сайт, is.gd/cs50react,
Не капитал, без долна черта, нито нищо.

179
00:08:11,580 --> 00:08:15,849
>> Вие ще видите страница, която изглежда
малко като този.

180
00:08:15,849 --> 00:08:17,140
Това е нещо, наречено CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen е съвместен
кодиране на околната среда

182
00:08:20,030 --> 00:08:23,364
с които мога да пиша код тук, и
той автоматично ще бъде изпратено до вас.

183
00:08:23,364 --> 00:08:24,780
И с този начин, мога да пиша код.

184
00:08:24,780 --> 00:08:26,920
Мога да тичам код тук.

185
00:08:26,920 --> 00:08:33,470
>> За example-- и ако reloads-- видите,
Бягам JavaScript код на страницата

186
00:08:33,470 --> 00:08:36,390
точно тук, и това ще
автоматично да направи уеб страница

187
00:08:36,390 --> 00:08:37,980
с този код JavaScript.

188
00:08:37,980 --> 00:08:40,039
И така, това е начин
за нас, за да изпробват код

189
00:08:40,039 --> 00:08:43,089
наистина бързо, без да се налага да ползвате
нашата ID или използвайте нашата локална машина

190
00:08:43,089 --> 00:08:44,290
или нещо такова.

191
00:08:44,290 --> 00:08:47,670
Това е един много бърз начин за вас да макет
и тествате различни видове код.

192
00:08:47,670 --> 00:08:50,560
>> Така че ще трябва да се вземат
Например код, извеждайки го тук.

193
00:08:50,560 --> 00:08:52,374
Отиваме да се работи през него.

194
00:08:52,374 --> 00:08:54,540
И ако сте вкъщи, можете
може да тегли тази, както добре.

195
00:08:54,540 --> 00:08:57,530
И аз вече сте инсталирали
Реагират тук, така че може просто

196
00:08:57,530 --> 00:09:00,770
напишете своя собствен код тук, и
го пробвам като свой собствен кът.

197
00:09:00,770 --> 00:09:04,940
>> Да, ако всеки да
отворят тази връзка тук.

198
00:09:04,940 --> 00:09:08,080
Моля, дайте ми палец
нагоре, след като сте я отвори.

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

200
00:09:10,960 --> 00:09:13,770
Cool, хладно готино.

201
00:09:13,770 --> 00:09:16,914
Тук няма нищо за сега, но
ние ще се промени, че много скоро.

202
00:09:16,914 --> 00:09:21,250
>> ОК, така реагират е JavaScript
библиотека, и като такива,

203
00:09:21,250 --> 00:09:24,480
изисква познаване на JavaScript,
който е езикът уеб програмиране.

204
00:09:24,480 --> 00:09:27,660
И това е да се използват за други неща
Сега също, но най-вече в интернет се развиват

205
00:09:27,660 --> 00:09:32,040
език, така че, ако не сте запознати с
че чете един сайт, наречен JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Чудесно е.

207
00:09:32,700 --> 00:09:34,240
Можете да научите JavaScript
след половин час.

208
00:09:34,240 --> 00:09:34,990
Това е невероятно.

209
00:09:34,990 --> 00:09:36,420
>> Така го дам за четене.

210
00:09:36,420 --> 00:09:39,960
Ние също е много HTML тук, защото
ние сме проектиране на уеб страници, разбира се.

211
00:09:39,960 --> 00:09:43,890
Така че, ако не сте запознати с
HTML, разгледайте HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Мисля, че ученето е React
милион пъти по-лесно, ако вече

213
00:09:46,520 --> 00:09:47,892
знаете градивните елементи.

214
00:09:47,892 --> 00:09:50,600
Ако имате компонентите, това е
лесно да се направи по-голяма компонент.

215
00:09:50,600 --> 00:09:51,860
Това е React език за вас.

216
00:09:51,860 --> 00:09:54,270
>> Така че продължавайте напред и да даде
тези неща за четене.

217
00:09:54,270 --> 00:09:55,070
Пауза това видео.

218
00:09:55,070 --> 00:09:57,440
Дай го на четене, ако сте
у дома, ако не сте

219
00:09:57,440 --> 00:10:00,794
запознати с HTML или JavaScript

220
00:10:00,794 --> 00:10:02,960
ОК, така че това, което ние ще
направите е да отиваме да се направи

221
00:10:02,960 --> 00:10:06,470
един много основен Flashcard ап използвайки React.

222
00:10:06,470 --> 00:10:08,210
Отиваме да имат Flashcard.

223
00:10:08,210 --> 00:10:09,880
Можете да обърнете картата назад и напред.

224
00:10:09,880 --> 00:10:12,399
И ние също ще имаме списък на
всички карти, които имаме,

225
00:10:12,399 --> 00:10:14,190
и ако ние се чувствате
амбициозни, за да бъдем

226
00:10:14,190 --> 00:10:17,060
можете да превключвате между
автомобили, като щракнете върху тях.

227
00:10:17,060 --> 00:10:20,360
>> Но това е, на вашия гола
кости, много просто реагират ап.

228
00:10:20,360 --> 00:10:22,560
И така, това е действително
не тривиално да изпълни,

229
00:10:22,560 --> 00:10:26,030
но ние ще покажем, че, ако го направите
това, че е много, много лесно да го удължи

230
00:10:26,030 --> 00:10:27,680
ако други хора да ви помогнат с това.

231
00:10:27,680 --> 00:10:33,750
Така че ние ще да мине през четири етапа
започва от нулата, за да се изгради тази.

232
00:10:33,750 --> 00:10:36,740
>> ОК, така че четирите стъпки, ние ще
започнем с първата стъпка.

233
00:10:36,740 --> 00:10:39,790
Първата стъпка ще бъде
изграждане на първата си компонент.

234
00:10:39,790 --> 00:10:44,830
Както казах и преди, компонент в React
е само един HTML елемент на стероиди.

235
00:10:44,830 --> 00:10:49,660
В него се посочва HTML
и някои поведение, и

236
00:10:49,660 --> 00:10:52,600
ще се уточни как хората
може да взаимодейства с него, как

237
00:10:52,600 --> 00:10:54,270
тя ще има вътрешно състояние.

238
00:10:54,270 --> 00:10:57,630
Подобно на един бутон ще знам като как мнозина
пъти това е било кликнато например,

239
00:10:57,630 --> 00:11:01,010
и той ще знае как да се изложи.

240
00:11:01,010 --> 00:11:04,430
>> Така че нека да вървим напред и да градим
Първият компонент се използва JavaScript.

241
00:11:04,430 --> 00:11:09,711
Така че, ако синтаксисът изглежда странно,
това е, защото тя е вид.

242
00:11:09,711 --> 00:11:11,710
Така че, отново, отиваме
да се направи променлива, наречена

243
00:11:11,710 --> 00:11:14,580
ап помощта на ключовата дума нека,
което прави променлива,

244
00:11:14,580 --> 00:11:18,210
нека App равно React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Реагират е библиотека и има
Създаване функция клас.

246
00:11:22,609 --> 00:11:24,400
И тази функция е
малко код, който

247
00:11:24,400 --> 00:11:29,090
може да се използва за създаване на нова
тип React компонент.

248
00:11:29,090 --> 00:11:32,780
И така React.createClass
прави компонент,

249
00:11:32,780 --> 00:11:35,270
и този компонент ще
да може да прави такива неща.

250
00:11:35,270 --> 00:11:40,460
Основното, което той може да направи, е да направи
нещо, направи като функция.

251
00:11:40,460 --> 00:11:44,500
>> Отново, ако този индекс не е очевидно за
вие, препоръчвам ви да отидете на JS за котки

252
00:11:44,500 --> 00:11:45,682
и да го проверите.

253
00:11:45,682 --> 00:11:47,710
Е, че увеличени в достатъчно добре?

254
00:11:47,710 --> 00:11:48,490
Готино.

255
00:11:48,490 --> 00:11:50,670
>> Така че всеки компонент нужди
да има направят функция.

256
00:11:50,670 --> 00:11:53,010
Направи Функцията казва,
това, което мога да се отпечата на екрана?

257
00:11:53,010 --> 00:11:54,760
Но компонент е
безполезна, ако това не е така

258
00:11:54,760 --> 00:11:58,060
знае какво да се отпечата на екрана, така че
вие трябва да имате направи функция.

259
00:11:58,060 --> 00:12:01,904
>> Така че в нещо рендера, вие
просто трябва да се върнат някои HTML.

260
00:12:01,904 --> 00:12:03,820
И това, което е готино е, че
има нещо, наречено

261
00:12:03,820 --> 00:12:08,660
JSX, което е разширение на
JavaScript който се използва от реагира.

262
00:12:08,660 --> 00:12:11,845
Той нека да пишете HTML вътре
на вашия JavaScript, които

263
00:12:11,845 --> 00:12:13,970
Звучи странно, когато вид
първо мисля за това,

264
00:12:13,970 --> 00:12:15,553
но го прави много смисъл след това.

265
00:12:15,553 --> 00:12:17,430
Така че можем да направим това.

266
00:12:17,430 --> 00:12:21,360
Ако сте запознати с HTML, знам,
имаме Разделения с общо предназначение

267
00:12:21,360 --> 00:12:22,790
контейнер за такива неща.

268
00:12:22,790 --> 00:12:26,380
Ние може да се върне на Разделения, и отвътре
Разделения това, можем да сложим неща.

269
00:12:26,380 --> 00:12:32,390
>> Така че нека да кажем, ние искаме да се направи само
прав-нагоре Flashcard за сега.

270
00:12:32,390 --> 00:12:34,890
The Flashcard, бих казал,
ще имам един въпрос и отговор.

271
00:12:34,890 --> 00:12:37,530
Така че в този Разделения, нека
разпечатате един параграф

272
00:12:37,530 --> 00:12:42,155
която казва question-- Каква е
Крайната отговор на живота, вселената?

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

274
00:12:47,640 --> 00:12:50,345
И тогава отговорът е
щеше да бъде, разбира се, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Това не излезе добре на всички.

277
00:12:59,730 --> 00:13:04,164
Да, така че основно се може наистина
напиши HTML във вашия JavaScript.

278
00:13:04,164 --> 00:13:06,330
И това ще бъде
отпечатани в екрана.

279
00:13:06,330 --> 00:13:08,250
Така че нека да го изпробвате.

280
00:13:08,250 --> 00:13:09,520
>> Така че ние имаме свой компонент.

281
00:13:09,520 --> 00:13:12,210
Трябва да кажа, React да се сложи
компонента на екрана

282
00:13:12,210 --> 00:13:18,990
така React.render, така че забележите, че ние
лечение на ап като всеки друг елемент.

283
00:13:18,990 --> 00:13:21,010
Ние ще го напиша, тъй като е един HTML елемент.

284
00:13:21,010 --> 00:13:25,100
Като вместо да каже подобно IMG
за изображение или р за параграф,

285
00:13:25,100 --> 00:13:28,120
пишете App, така App е
третира като HTML елемент.

286
00:13:28,120 --> 00:13:30,380
Както казах и преди, това е
елемент на стероиди.

287
00:13:30,380 --> 00:13:32,870
>> Така че ви окажа App, и вие
тя даде място, за да го сложи.

288
00:13:32,870 --> 00:13:37,170
И това е как можете да
го каже къде да го сложи.

289
00:13:37,170 --> 00:13:46,200
Аз създадох една проста Разделения относно
страница, наречена с ID на страницата,

290
00:13:46,200 --> 00:13:48,300
и това е, когато
елемент ще отида.

291
00:13:48,300 --> 00:13:49,841
>> И ние няма да работи с HTML.

292
00:13:49,841 --> 00:13:53,145
Основно това ще се получи,
сложат на тази страница елемент

293
00:13:53,145 --> 00:13:54,270
че имаме на екрана.

294
00:13:54,270 --> 00:13:59,210
Така че той работи този код и го насочва тази
нещо на екрана, така че тук сме.

295
00:13:59,210 --> 00:14:01,770
Ние направихме първата ни React компонент.

296
00:14:01,770 --> 00:14:08,000
>> Така че просто като една рекапитулация, ние внимателно изработени
нов тип компонент, нали?

297
00:14:08,000 --> 00:14:10,145
Това е, което React.createClass.

298
00:14:10,145 --> 00:14:12,680
И в този компонент, ние
той каза какво да направи.

299
00:14:12,680 --> 00:14:15,590
Всеки път, когато този компонент е да се
се отпечатва върху екрана,

300
00:14:15,590 --> 00:14:19,300
тя ще разпечатате на DIV с
двата параграфа вътре в него.

301
00:14:19,300 --> 00:14:24,460
>> И това, което направихме, направихме ново приложение
използвайки наколонените ъгъл скоба ап.

302
00:14:24,460 --> 00:14:27,160
Ние го казал да го сложи
вътре елемент в страницата.

303
00:14:27,160 --> 00:14:29,867
И така, какво съм направил, го е създал
ново приложение от този шаблон.

304
00:14:29,867 --> 00:14:31,200
И тогава аз го казах, за да го направят.

305
00:14:31,200 --> 00:14:33,680
Така че тя каза, OK, ап,
какво трябва да разпечатате?

306
00:14:33,680 --> 00:14:36,970
App казва, отидете отпечатате Разделения
с две точки вътре в него.

307
00:14:36,970 --> 00:14:40,420
И готово, там е нашата Разделения с
две точки вътре в него.

308
00:14:40,420 --> 00:14:43,180
Направи смисъл досега?

309
00:14:43,180 --> 00:14:46,690
>> Така че, отново, че целият предизвикателството да реагират
е просто не знаят как да направят компоненти.

310
00:14:46,690 --> 00:14:48,500
Как да направим
компоненти работят заедно.

311
00:14:48,500 --> 00:14:51,780
Сега, след като сме направили първата ни
компонент, нека се върнем

312
00:14:51,780 --> 00:14:54,284
и да направи компоненти персонализация.

313
00:14:54,284 --> 00:14:56,700
Така ли как в HTML ви
да дадете на вашите бутони класове?

314
00:14:56,700 --> 00:14:59,146
Можете да дадете на вашите котви на Href.

315
00:14:59,146 --> 00:15:00,770
Можете да дадете на вашите входове тип, нали?

316
00:15:00,770 --> 00:15:04,740
Можете да дадете повече обичай
свойства на всичките си елементи

317
00:15:04,740 --> 00:15:06,490
да стане по-интересно.

318
00:15:06,490 --> 00:15:09,030
И ние всъщност може да направи
точно същото нещо.

319
00:15:09,030 --> 00:15:17,500
>> Така че нека да кажем, ние искаме нашата
приложение, за да отида да направи всяка карта.

320
00:15:17,500 --> 00:15:19,630
Точно сега ние просто
постановено по кодиран карта.

321
00:15:19,630 --> 00:15:22,530
Знаем, че има само един
картон той може да направи, така че сме

322
00:15:22,530 --> 00:15:25,960
Ще се опитам и да промени това сега така
че ние можем просто да даде някаква карта.

323
00:15:25,960 --> 00:15:27,410
Тя ще разпечатате картата.

324
00:15:27,410 --> 00:15:29,380
>> Би трябвало да се опита и да направи своя
компоненти много общо предназначение.

325
00:15:29,380 --> 00:15:31,654
Така че по този начин мога да приятел
това ми е приятел и ще бъда като,

326
00:15:31,654 --> 00:15:33,820
независимо Flashcard имате,
Просто я храня в тук,

327
00:15:33,820 --> 00:15:35,290
и това ще го направя сам по себе си.

328
00:15:35,290 --> 00:15:37,650
Можете да поставите друг
нещата в собствения си апартамент.

329
00:15:37,650 --> 00:15:40,600
>> Но първо, нека да се разбие
на две части,

330
00:15:40,600 --> 00:15:44,500
но ние искаме да се разделят на картата
печат част от действителната ап част.

331
00:15:44,500 --> 00:15:46,660
И така, какво можем да направим ние е
можете да промените това от App

332
00:15:46,660 --> 00:15:51,300
да CardView, просто
ново име на приложението,

333
00:15:51,300 --> 00:15:54,450
и ние можем да направим нова
компонент, наречен App,

334
00:15:54,450 --> 00:15:56,336
да не се бърка със стария App.

335
00:15:56,336 --> 00:16:00,730
Имаме най-createClass,
и като в HTML,

336
00:16:00,730 --> 00:16:03,590
можете да гнездят React компоненти
в един от друг.

337
00:16:03,590 --> 00:16:16,430
>> Така че в този оказва функция,
връщане от функция CardView,

338
00:16:16,430 --> 00:16:18,234
и това е точно същото нещо.

339
00:16:18,234 --> 00:16:19,400
Вижте защо това е едно и също нещо?

340
00:16:19,400 --> 00:16:22,590
Вместо да прави само ап, че
има DIV и сдвояването вътре в него,

341
00:16:22,590 --> 00:16:26,194
ап прави CardView, и
CardView прави DIV и алинея.

342
00:16:26,194 --> 00:16:29,110
Така че това е първият ни пример за
гнездене елементи вътре един от друг.

343
00:16:29,110 --> 00:16:32,177
Това прави ли смисъл?

344
00:16:32,177 --> 00:16:33,760
Така че, отново, ние имаме елемент CardView.

345
00:16:33,760 --> 00:16:37,250
Имаме ап елементи
че е по-голям от.

346
00:16:37,250 --> 00:16:40,990
>> ОК, така че ние искаме нашата CardView-- ако
даде добра CardView определена карта,

347
00:16:40,990 --> 00:16:43,370
той ще отпечата за вас, нали?

348
00:16:43,370 --> 00:16:48,050
Така че на първо място, ние трябва да направим карта,
така че нека да се направи обект карта.

349
00:16:48,050 --> 00:17:02,930
Така че нека ми карта equal--
ако сте запознати,

350
00:17:02,930 --> 00:17:05,260
това е само нотация вземане
възражение в JavaScript.

351
00:17:05,260 --> 00:17:09,280
Това е нещо като структура на
в C, така че ние направихме една карта,

352
00:17:09,280 --> 00:17:15,920
и така сега можем да преминат тази карта като
имот или като атрибут в HTML

353
00:17:15,920 --> 00:17:17,290
терминология в нашия ап.

354
00:17:17,290 --> 00:17:20,210
Така че можем да направим това, App
карта равнява myCard.

355
00:17:20,210 --> 00:17:23,200
>> Знаеш ли как на входа, което правите
Тип на входния равнява на текст или бутон

356
00:17:23,200 --> 00:17:25,240
клас се равнява BTN за фърмуера ,?

357
00:17:25,240 --> 00:17:29,500
Същата идея, App карта equals--
сте се погрижили да сложи скоби here--

358
00:17:29,500 --> 00:17:33,830
App карта равнява myCard, така че това
казва, че ние имаме тази карта обект.

359
00:17:33,830 --> 00:17:39,149
Отивам да го давате като
собственост на ап компонент.

360
00:17:39,149 --> 00:17:41,440
И това приложение компонент ще
да бъде в състояние за достъп до нея и да направя

361
00:17:41,440 --> 00:17:43,580
интересни неща с него.

362
00:17:43,580 --> 00:17:47,650
>> Така че нашата ап ще бъде
дадена карта, така че за сега,

363
00:17:47,650 --> 00:17:49,980
нека да има ап просто да даде
Картата на CardView

364
00:17:49,980 --> 00:17:53,110
себе си, защото като приложението не е
ще знам какво да правя с него,

365
00:17:53,110 --> 00:17:54,850
така че ние просто ще го даде на CardView.

366
00:17:54,850 --> 00:18:00,050
Така че ние ще го мине
същия начин, картон равни,

367
00:18:00,050 --> 00:18:05,426
и така всеки компонент може да получите достъп до
неща, които са му дадени.

368
00:18:05,426 --> 00:18:07,800
Те имат достъп до свойствата
че да се даде на това

369
00:18:07,800 --> 00:18:09,470
използвайки този синтаксис, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Така че това, което се случва тук, е
имате myCard обекта.

372
00:18:14,920 --> 00:18:18,250
Можете да го премине в ап
използване на App карта равнява myCard.

373
00:18:18,250 --> 00:18:21,420
Това картон обект се дава на приложението си.

374
00:18:21,420 --> 00:18:24,400
Приложението може да получите достъп до него
като this.props.card.

375
00:18:24,400 --> 00:18:28,780
Това е нещо като образ
знае какво е това е източник.

376
00:18:28,780 --> 00:18:31,972
>> Това приложение не знае за какво става картон
е, и той може да направи неща с него.

377
00:18:31,972 --> 00:18:32,930
Той може да направи изчисления.

378
00:18:32,930 --> 00:18:35,290
Той може да взема решения, основаващи се на разстояние от него.

379
00:18:35,290 --> 00:18:39,950
>> За сега, щях да мине
this.props.card върху CardView.

380
00:18:39,950 --> 00:18:43,420
Направи смисъл досега?

381
00:18:43,420 --> 00:18:45,210
Той ще има повече смисъл сега.

382
00:18:45,210 --> 00:18:46,990
>> ОК, така че сега сме в CardView.

383
00:18:46,990 --> 00:18:51,719
Нашата CardView, предвид на картата, трябва
разпечатате своя въпрос и отговор.

384
00:18:51,719 --> 00:18:54,510
Точно сега ние просто отпечатва някои
твърдокодирани въпроси и отговори.

385
00:18:54,510 --> 00:18:57,720
Ние трябва да разбера out-- ние нужда
да поиска от картата, която те ни дадоха

386
00:18:57,720 --> 00:19:01,360
какъв е въпроса и отговора, и
след това да отпечатате тази навън в екрана.

387
00:19:01,360 --> 00:19:02,470
>> Така че можем да направим това тук.

388
00:19:02,470 --> 00:19:06,135
В направят begin-- първата направя равни.

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

390
00:19:08,710 --> 00:19:13,050
Така че това, което правим тук, е, че ние знаем,
картите са ни дадени на имот,

391
00:19:13,050 --> 00:19:13,580
нали?

392
00:19:13,580 --> 00:19:15,930
Той е дал на нас като вход.

393
00:19:15,930 --> 00:19:19,440
Подобно на това е почти като
доводите на функция.

394
00:19:19,440 --> 00:19:22,810
Картата е аргумент
почти до този CardView.

395
00:19:22,810 --> 00:19:25,239
>> Ние ще извлече, че и сложи
то в променлива въпрос.

396
00:19:25,239 --> 00:19:27,280
Уверете се, че отговорът му мина
на променливата отговор.

397
00:19:27,280 --> 00:19:31,130
Подканва тази карта, за да се отговори.

398
00:19:31,130 --> 00:19:35,072
И сега, когато имаме тези,
вместо да отпечатате този текст,

399
00:19:35,072 --> 00:19:37,030
отиваме да разпечатате
каквото и да ни даде.

400
00:19:37,030 --> 00:19:43,580
>> Така че това stuff-- така че ние отиваме
да се изнеса Въпрос Отговор.

401
00:19:43,580 --> 00:19:46,380
Да видим дали това работи.

402
00:19:46,380 --> 00:19:52,800
Cool, така че нека да се оттегли през него
още един път, само за да бъде сигурен.

403
00:19:52,800 --> 00:20:00,470
>> Така че моята карта е обект карта, и ние
се даде на тази карта, за да ап.

404
00:20:00,470 --> 00:20:04,790
А на приложението ще отнеме на
картон и да го даде на CardView.

405
00:20:04,790 --> 00:20:09,190
И това CardView казва, ако
дайте ми някакъв Flashcard обект,

406
00:20:09,190 --> 00:20:11,920
Ще разпечатате си въпрос
и неговия отговор, нали?

407
00:20:11,920 --> 00:20:14,590
>> Така че това, което можех да направя, е мога да
изпрати този код, първият

408
00:20:14,590 --> 00:20:16,580
като 10 линии на моя код, за моя приятел.

409
00:20:16,580 --> 00:20:18,820
Можеше да го вградите в
собствената си кандидатура.

410
00:20:18,820 --> 00:20:27,200
И толкова дълго, колкото той направи същото нещо,
като CardView карта равнява това,

411
00:20:27,200 --> 00:20:30,580
толкова дълго, колкото той създава CardView
и го даде правилната информация,

412
00:20:30,580 --> 00:20:31,987
той може да направи своя собствена карта.

413
00:20:31,987 --> 00:20:34,320
И така, по този начин, това е наистина
готин начин за вас да се изгради

414
00:20:34,320 --> 00:20:35,906
компоненти, които използват един на друг, нали?

415
00:20:35,906 --> 00:20:38,280
Тази карта, мога да публикувам
това CardView в интернет,

416
00:20:38,280 --> 00:20:39,790
и хората ще могат да го използват.

417
00:20:39,790 --> 00:20:45,070
Така че основно, това е като един от най-
стандартните функции в библиотеката С.

418
00:20:45,070 --> 00:20:47,280
>> Това е функция, където
някой го е написал.

419
00:20:47,280 --> 00:20:48,419
Даваш определен вход.

420
00:20:48,419 --> 00:20:49,710
Тя ще произвежда определен изход.

421
00:20:49,710 --> 00:20:50,890
Не ме интересува как работи вътрешно.

422
00:20:50,890 --> 00:20:53,790
Стига да му се даде правото
вход, ще направят правилния изход.

423
00:20:53,790 --> 00:20:57,850
>> И един компонент може да бъде
мисли по същия начин.

424
00:20:57,850 --> 00:21:00,280
Това е като CardView
функция библиотека.

425
00:21:00,280 --> 00:21:03,400
Ако го даде някаква карта
като свойство, тя ще

426
00:21:03,400 --> 00:21:05,095
отпечатате съдържанието на тази карта.

427
00:21:05,095 --> 00:21:16,820
Подобно, ако сменя картата ми да
вместо да бъде като това, което е 5 плюс 37,

428
00:21:16,820 --> 00:21:19,210
тя ще се актуализира съответно.

429
00:21:19,210 --> 00:21:21,955
Така че просто чрез промяна на входа,
той получава определен изход.

430
00:21:21,955 --> 00:21:24,830
Така че можете да мислите за компоненти почти
като функции по този начин, което

431
00:21:24,830 --> 00:21:25,920
можете да сложите заедно.

432
00:21:25,920 --> 00:21:29,440
Можете да получите вход, като този CardView
като вход, можете да получите на изхода.

433
00:21:29,440 --> 00:21:31,900
В този случай, изход е HTML.

434
00:21:31,900 --> 00:21:34,404
Направи смисъл досега?

435
00:21:34,404 --> 00:21:36,890
Cool, така че отново, имоти са
как можете да подадете информация

436
00:21:36,890 --> 00:21:40,900
за и от компоненти.

437
00:21:40,900 --> 00:21:42,740
>> ОК, така че нека да направим този
нещо интерактивно.

438
00:21:42,740 --> 00:21:44,450
Точно сега това е вид скучно.

439
00:21:44,450 --> 00:21:45,520
Какво е [недоловим]?

440
00:21:45,520 --> 00:21:48,210
Можете да отпечатате някои от,
но това е всичко, той може да направи.

441
00:21:48,210 --> 00:21:51,550
>> Така че нека да се върнем към
стар въпрос просто за сега.

442
00:21:51,550 --> 00:21:54,405
ОК, така че в момента тези компоненти
са скучни, защото всичко, което правят,

443
00:21:54,405 --> 00:21:55,030
те ще получат вход.

444
00:21:55,030 --> 00:21:56,100
Те правят изход, нали?

445
00:21:56,100 --> 00:21:57,049
Това е вид скучно.

446
00:21:57,049 --> 00:21:59,090
Ние искаме да имаме
компоненти, за да бъдат в състояние да имат

447
00:21:59,090 --> 00:22:02,150
някакво вътрешно състояние,
като си спомня нещо.

448
00:22:02,150 --> 00:22:05,320
>> За Flashcard за
Например, какъв вид държавна

449
00:22:05,320 --> 00:22:07,550
може да искате да
не забравяйте за Flashcard?

450
00:22:07,550 --> 00:22:09,740
Какво временен статут
може да искате да си припомните

451
00:22:09,740 --> 00:22:12,491
за Flashcard в Flashcard приложение?

452
00:22:12,491 --> 00:22:13,990
АУДИТОРИЯ: Дали това е било копна?

453
00:22:13,990 --> 00:22:14,990
Нийл Мета: Да, точно така.

454
00:22:14,990 --> 00:22:17,665
Така че може да искате да запазите
следите са изправени нагоре или са

455
00:22:17,665 --> 00:22:19,100
сте с лице надолу върху картата.

456
00:22:19,100 --> 00:22:23,420
На Facebook, например, бихте
искам да си спомням, когато в храната новини

457
00:22:23,420 --> 00:22:25,870
Ако сте искали или кой профил
правиш точно сега.

458
00:22:25,870 --> 00:22:30,127
>> На Messenger, като това, което текст
напишете в полето за въвеждане, нали?

459
00:22:30,127 --> 00:22:31,710
Ако обнови страницата, тя си отива.

460
00:22:31,710 --> 00:22:32,793
Но ти не ми пука.

461
00:22:32,793 --> 00:22:33,770
Това е просто временно.

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

463
00:22:34,548 --> 00:22:36,152
>> АУДИТОРИЯ: [недоловим]

464
00:22:36,152 --> 00:22:38,360
Нийл Мехта: Подобно на флаш
карта, като можете да се видим

465
00:22:38,360 --> 00:22:40,290
страна на въпрос или страната на отговор?

466
00:22:40,290 --> 00:22:41,070
>> АУДИТОРИЯ: OK.

467
00:22:41,070 --> 00:22:43,270
>> Нийл Мехта: Като
две едностранно Flashcard, нали?

468
00:22:43,270 --> 00:22:46,370
Да, така че искам да
имат тази идея за сега

469
00:22:46,370 --> 00:22:50,370
Имам имоти, което е като входове,
но състояние, което е временно, ъ-ъ,

470
00:22:50,370 --> 00:22:51,839
къде се намирате на страницата, нали?

471
00:22:51,839 --> 00:22:54,380
Отново, аз казах в Facebook
Messenger, имам подобни, които човек

472
00:22:54,380 --> 00:22:56,550
който преглеждате Facebook
или кой е профил, нали?

473
00:22:56,550 --> 00:22:58,030
>> Това е само временно.

474
00:22:58,030 --> 00:23:01,200
Важно е да се покаже на потребителя
какво се случва, но обнови страницата.

475
00:23:01,200 --> 00:23:02,250
Това няма значение.

476
00:23:02,250 --> 00:23:04,530
Така че това е временно състояние,
така че ние всички го държава.

477
00:23:04,530 --> 00:23:06,250
>> Така че, отново, там е държавна и реквизит.

478
00:23:06,250 --> 00:23:09,084
Подпори е даден вход
от вашия източник на данни.

479
00:23:09,084 --> 00:23:10,250
Членка е точно като по подразбиране.

480
00:23:10,250 --> 00:23:13,700
Това е точно като неща, които
прави нещо интерактивно.

481
00:23:13,700 --> 00:23:17,720
>> Така че в нашия CardView-- нека да има
нашата CardView-- така че е хубаво.

482
00:23:17,720 --> 00:23:21,420
Това, което ние ще направим тук, отиваме
да се докоснат CardView и само CardView.

483
00:23:21,420 --> 00:23:25,105
И така, моят приятел, който имам това, те
няма да забележите никаква разлика.

484
00:23:25,105 --> 00:23:27,230
Те не би трябвало да се промени
всеки от своя собствен код,

485
00:23:27,230 --> 00:23:29,410
но те ще видят
CardView имам souped до.

486
00:23:29,410 --> 00:23:31,270
Това е хубава част за компоненти.

487
00:23:31,270 --> 00:23:35,290
>> ОК, така че в нашата CardView, нека се опитаме и
следите дали ние постепенно нагоре

488
00:23:35,290 --> 00:23:36,560
или с лице надолу.

489
00:23:36,560 --> 00:23:40,480
В React правим това, като първо
определяне на първоначалното състояние.

490
00:23:40,480 --> 00:23:42,070
Къде се започне картата?

491
00:23:42,070 --> 00:23:48,480
>> Така че да е функция, наречена getInitialState
функционира, и ние се върне един обект.

492
00:23:48,480 --> 00:23:53,310
Този обект съдържа някаква държава, и
състояние е само една двойка ключ-стойност.

493
00:23:53,310 --> 00:23:56,950
Както и в инструктират, че имате ключ и
стойност, имате подобно име е низ.

494
00:23:56,950 --> 00:24:01,410
>> В този случай, нека да кажем пред е вярно.

495
00:24:01,410 --> 00:24:03,760
Това се казва, че имаме държава.

496
00:24:03,760 --> 00:24:06,570
Един от компонентите на държавата
е атрибут наречен предната.

497
00:24:06,570 --> 00:24:09,649
[Недоловим], така че по подразбиране,
ние сме в предната част на картата,

498
00:24:09,649 --> 00:24:11,440
и ние можем да променим това
тъй като ние флип картата.

499
00:24:11,440 --> 00:24:13,380
Има смисъл?

500
00:24:13,380 --> 00:24:18,190
>> ОК, така че в окаже, точно сега, ние сме
показващ въпроса и отговора.

501
00:24:18,190 --> 00:24:20,860
Сега какво трябва да правим
се покаже на въпроса

502
00:24:20,860 --> 00:24:24,370
ако сме на предната страна на картата, така че
отговорът е за гърба на картата.

503
00:24:24,370 --> 00:24:26,850
Ето защо всичко, което направи
картата с интерактивно.

504
00:24:26,850 --> 00:24:28,100
Така че нека да се опитаме и да това тук.

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

506
00:24:31,600 --> 00:24:33,620
Ами, първо просто се променлива.

507
00:24:33,620 --> 00:24:37,790
Ние можем да попитам сега this.state.front.

508
00:24:37,790 --> 00:24:42,010
Ние достъп заявя същото WE
подпори за достъп, така this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Ако сме отпред, след това текстово
е this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Ако сме на предната част на
карта, ние ще се опитаме да вземете

512
00:24:51,360 --> 00:24:52,485
въпроса от картата.

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

514
00:24:54,782 --> 00:24:57,240
В противен случай, ако сме на гърба
на картата, какво ще правим?

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

516
00:25:01,830 --> 00:25:02,750
>> АУДИТОРИЯ: Отговорът?

517
00:25:02,750 --> 00:25:05,041
>> Нийл Мета: Да, така текст
равнява this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Но ако забележите, че използваме
държавата да вземе решение

520
00:25:10,930 --> 00:25:14,420
защото сега компонента
ще изглежда различно

521
00:25:14,420 --> 00:25:16,710
на базата на разстояние как те си взаимодействат с него.

522
00:25:16,710 --> 00:25:20,355
Така че, вместо да отпечатате това,
ние просто ще разпечатате текста.

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

524
00:25:25,270 --> 00:25:28,650
Cool, така че сега, както виждате,
ние виждаме само въпроса.

525
00:25:28,650 --> 00:25:37,720
И ако мога да променя състоянието тук ръчно
до предния е фалшива получаваме 42 назад.

526
00:25:37,720 --> 00:25:39,720
>> Така че, отново, този компонент
има своя собствена държава.

527
00:25:39,720 --> 00:25:43,440
Подобно на един бутон знае дали
това е било пресовано или не,

528
00:25:43,440 --> 00:25:46,080
това нещо не знае какво е
отпред или на гърба.

529
00:25:46,080 --> 00:25:48,320
По подразбиране това е в предната част.

530
00:25:48,320 --> 00:25:50,840
И тогава, ако това е в предната част,
ние ще изведем въпроса.

531
00:25:50,840 --> 00:25:53,106
Ако това е на гърба, ние ще
разпечатате отговора.

532
00:25:53,106 --> 00:25:54,980
Така, отново, информацията
дадена е същото.

533
00:25:54,980 --> 00:25:59,090
Той просто изглежда по различен начин
въз основа на това как можете да го програмирате.

534
00:25:59,090 --> 00:26:02,670
Така, например, Facebook Messenger,
дори и да получите един и същ източник на данни,

535
00:26:02,670 --> 00:26:05,170
тя може да изглежда различно
защото държавата е различна.

536
00:26:05,170 --> 00:26:08,421
Ти гледаш на по-
съобщение различен човек.

537
00:26:08,421 --> 00:26:10,930
>> ОК, така че всичко това е добре и
добро, но сега какво е всъщност

538
00:26:10,930 --> 00:26:15,940
да ни направи способни да се промени, независимо дали
нашата карта е напред или назад.

539
00:26:15,940 --> 00:26:19,010
Ние можем да направим това, чрез добавяне на флип
бутон, бутон за картата, която

540
00:26:19,010 --> 00:26:22,950
ще флип картата, ако това е [недоловим].

541
00:26:22,950 --> 00:26:31,770
Така че нека да добавите бутон тук, това
бутон, а този бутон ще каже флип.

542
00:26:31,770 --> 00:26:35,650
>> И така, точно сега, тя
не направи нищо.

543
00:26:35,650 --> 00:26:37,075
Той просто изглежда добре.

544
00:26:37,075 --> 00:26:43,650
Какво можем да направим, е да можем да добавим едно кликване
манипулатор, OnClick равнява this.flip,

545
00:26:43,650 --> 00:26:44,820
и ние ще определи флип-късно.

546
00:26:44,820 --> 00:26:47,120
Но общо взето, OnClick
е функция, която

547
00:26:47,120 --> 00:26:48,675
получава нарича, когато потребителят щракне.

548
00:26:48,675 --> 00:26:52,330
>> Така бутона ще знаете
когато това е било кликнато.

549
00:26:52,330 --> 00:26:54,750
Отиде това е било кликнато,
тя ще флип картата.

550
00:26:54,750 --> 00:26:58,382
Това е нещо като вашия
доставка на пица момче.

551
00:26:58,382 --> 00:27:01,590
Ти си като, добре, когато някой
призовава мен, аз ще достави пица, нали?

552
00:27:01,590 --> 00:27:03,420
>> Можете да се регистрирате по този слушател.

553
00:27:03,420 --> 00:27:04,530
Можете да слушате за дадено събитие.

554
00:27:04,530 --> 00:27:07,657
Можете да се нарича, и когато
събитие се случи, може да направим нещо.

555
00:27:07,657 --> 00:27:08,240
Можете да получите пица.

556
00:27:08,240 --> 00:27:11,480
В този случай, когато сте
кликнали, флип картата.

557
00:27:11,480 --> 00:27:14,560
>> И така, ние трябва да се определят по-
функция, която ще се обърне на картата,

558
00:27:14,560 --> 00:27:17,930
така че ние ще напиша това право
Оттук флип функция.

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

560
00:27:20,850 --> 00:27:23,680
И така, какво мислиш флип ще правим?

561
00:27:23,680 --> 00:27:27,180
Отново това стане, когато нарича
ние щракнете върху бутона флип.

562
00:27:27,180 --> 00:27:29,406
Какво трябва да направи функция капакът?

563
00:27:29,406 --> 00:27:34,136
>> АУДИТОРИЯ: Промени this.state.front
от верни на фалшиви, неверни да е вярно.

564
00:27:34,136 --> 00:27:38,420
>> Нийл Мета: Да, така предприемат всички
this.front is-- предната състояние е.

565
00:27:38,420 --> 00:27:40,930
Вземи пред държавата, ако
това е вярно, да я направи фалшиво.

566
00:27:40,930 --> 00:27:42,530
Ако това е фалшиво, да я вярно, нали?

567
00:27:42,530 --> 00:27:45,330
Така че нека да се опитаме това.

568
00:27:45,330 --> 00:27:48,240
>> Вие не можете да променяте състояние
само чрез правене this.state.

569
00:27:48,240 --> 00:27:50,380
Вие не можете да направите това.

570
00:27:50,380 --> 00:27:52,030
Вие не може да направи това.

571
00:27:52,030 --> 00:27:55,810
Трябва да използвате функция
наречено this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Така че може да се каже this.setState предната
дебелото черво, където това, отново, възклицанието

573
00:28:03,230 --> 00:28:04,330
точка означава обратното.

574
00:28:04,330 --> 00:28:07,420
Предполагам, че ако това. state.front
е вярно, то ще се превърне фалшива.

575
00:28:07,420 --> 00:28:09,170
Така че ние ще определи държавата
от верни на невярна.

576
00:28:09,170 --> 00:28:11,430
Ако това е фалшиво, ние ще
го настроите фалшива да е вярно.

577
00:28:11,430 --> 00:28:17,210
>> Само забележете, че ние се създаде и да получите малко по-
по различен начин, и така нека се опитаме това.

578
00:28:17,210 --> 00:28:18,675
Bada Бинг, виж това.

579
00:28:18,675 --> 00:28:21,810
Бутонът за флип сега ще
превключите отпред назад състояние.

580
00:28:21,810 --> 00:28:24,990
>> И така, тук е мястото, където можете да видите
малко от магията на React.

581
00:28:24,990 --> 00:28:28,420
Както ние никога не го каза тя отново да направи.

582
00:28:28,420 --> 00:28:30,910
Ние никога не каза, че преначертае нищо.

583
00:28:30,910 --> 00:28:32,630
Ако правите това
без React, щеше

584
00:28:32,630 --> 00:28:34,588
са to-- харесва, когато
Бутон флип е щракване,

585
00:28:34,588 --> 00:28:37,290
ще трябва да го кажа, за да
ръчно повторно направи, нали?

586
00:28:37,290 --> 00:28:43,050
>> Реагират е наистина страхотно с това, че ако
тя даде определено състояние и свойства,

587
00:28:43,050 --> 00:28:45,760
тя винаги ще въздаде
точно същото нещо.

588
00:28:45,760 --> 00:28:48,690
И така, когато ние някога сме се промени
състоянието и свойствата,

589
00:28:48,690 --> 00:28:50,819
реагират просто отново прави цялото нещо.

590
00:28:50,819 --> 00:28:52,860
Той знае, че има
едно към едно кореспонденция

591
00:28:52,860 --> 00:28:57,270
между държавата и параметър и HTML.

592
00:28:57,270 --> 00:29:00,110
Така че, когато една от тези
промени, като в резултат на комплекс състояние,

593
00:29:00,110 --> 00:29:03,750
тя ще промени начина, по който
заплащането е повторно постановеното.

594
00:29:03,750 --> 00:29:06,650
И така, в общи линии е като React
Очакваме ви да се промени.

595
00:29:06,650 --> 00:29:09,870
>> Всеки път, когато тя се променя нещо,
той ще направи отново цялата страница.

596
00:29:09,870 --> 00:29:12,480
И ако това звучи неефективна,
това е, защото това би било,

597
00:29:12,480 --> 00:29:15,050
но реагира използва нещо
нарича сянка DOM.

598
00:29:15,050 --> 00:29:19,950
Вместо изготвянето на страницата директно, тя
поддържа виртуална HTML дърво в паметта.

599
00:29:19,950 --> 00:29:23,620
>> Знаеш ли, HTML е като дърво,
като йерархична структура на данните.

600
00:29:23,620 --> 00:29:28,990
Той запазва фалшив дърво в паметта,
и всеки път, когато се актуализира на страницата,

601
00:29:28,990 --> 00:29:31,940
тя ще привлече още един фалшив
дърво, и това ще се изчисли

602
00:29:31,940 --> 00:29:35,120
това, което се промени е необходимо да се направи
страница, за да се направят две дървета, равен.

603
00:29:35,120 --> 00:29:38,540
Така че основно, това на практика
повторното прави много.

604
00:29:38,540 --> 00:29:41,540
И тогава той само искал променя
страницата на малки ощипвам, ако е необходимо,

605
00:29:41,540 --> 00:29:44,240
така че това е много, много, много ефективен.

606
00:29:44,240 --> 00:29:46,970
>> Така че основно ще реагират
всеки път, когато се промени нещо,

607
00:29:46,970 --> 00:29:49,010
той ще направи отново на страницата на практика.

608
00:29:49,010 --> 00:29:52,830
Ще разбера какво ми е необходимо, за да
променя, за да отрази реалната страница

609
00:29:52,830 --> 00:29:55,602
виртуалната страница, и това ще го направя.

610
00:29:55,602 --> 00:29:56,560
Това е виртуален DOM.

611
00:29:56,560 --> 00:29:59,350
Това е един от най-големите
Гостите на реагирате.

612
00:29:59,350 --> 00:30:00,880
>> Това прави ли смисъл?

613
00:30:00,880 --> 00:30:01,540
Някакви въпроси?

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

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

616
00:30:05,568 --> 00:30:08,969
>> АУДИТОРИЯ: Как действа
сравни все още на MVC

617
00:30:08,969 --> 00:30:10,760
че ние говорихме за
преди като ресурси.

618
00:30:10,760 --> 00:30:13,527
>> Нийл Мета: Да, въпросът
е как се сравнява с MVC?

619
00:30:13,527 --> 00:30:14,610
Можете попита за ресурси.

620
00:30:14,610 --> 00:30:16,445
Ами, нека да поговорим за това как тя функционира.

621
00:30:16,445 --> 00:30:18,190
>> В MVC, ще актуализира модела.

622
00:30:18,190 --> 00:30:20,560
В този случай ние ще трябва модел карта.

623
00:30:20,560 --> 00:30:24,540
Гледката ще има
флип бутон и контрола

624
00:30:24,540 --> 00:30:26,310
ще има функцията флип.

625
00:30:26,310 --> 00:30:28,450
Така че гледката ще разкаже
контролер, за да флип флип.

626
00:30:28,450 --> 00:30:30,370
Flip ще разкаже
модел, за да се промени, нали?

627
00:30:30,370 --> 00:30:33,915
>> И така, когато правиш едно MVC, вие
слушате за модела да се промени,

628
00:30:33,915 --> 00:30:37,150
и можете отново да направят гледката по съответния начин.

629
00:30:37,150 --> 00:30:39,210
Или просто трябва да се харесва
Трябва контролера.

630
00:30:39,210 --> 00:30:42,418
Изчакайте моделът да се промени, а след това
изберат част от подобно нещо

631
00:30:42,418 --> 00:30:44,032
да се промени.

632
00:30:44,032 --> 00:30:45,740
Тук имаме едно нещо,
но в един голям апартамент,

633
00:30:45,740 --> 00:30:48,510
вие трябва да си спомните какво харесва
промяната във всяко едно място,

634
00:30:48,510 --> 00:30:50,290
така че е малко досадно.

635
00:30:50,290 --> 00:30:53,670
И така React е хубаво
защото има сянка Dom.

636
00:30:53,670 --> 00:30:56,040
Тя може да си позволи да просто
пренапише цялото нещо.

637
00:30:56,040 --> 00:30:58,680
Вие не трябва да селективно
като предполагам какво да се актуализира.

638
00:30:58,680 --> 00:31:02,186
>> На Facebook, ако ви харесва
получите ново съобщение, в MVC,

639
00:31:02,186 --> 00:31:04,060
ще трябва да се помни,
OK, променя нещата

640
00:31:04,060 --> 00:31:06,260
в горната част на
страница, иконата на съобщение.

641
00:31:06,260 --> 00:31:08,290
Също така се появи нов прозорец в долната част.

642
00:31:08,290 --> 00:31:10,070
Също така се нещо ново в този прозорец.

643
00:31:10,070 --> 00:31:11,060
Също така играе звук.

644
00:31:11,060 --> 00:31:13,150
>> Това е много неща
излиза по същото време.

645
00:31:13,150 --> 00:31:15,320
И така, ако не го направите
има сянка Dom, щеше

646
00:31:15,320 --> 00:31:18,740
Трябва да направите това ръчно, защото
вие не можете да се отървете от цялата страница.

647
00:31:18,740 --> 00:31:21,430
Вие не можете да си позволите да, така че трябва
да промени всяко нещо ръчно,

648
00:31:21,430 --> 00:31:23,990
което е много досадно в MVC.

649
00:31:23,990 --> 00:31:27,640
>> Така че, за да бъде
пестеливи, те селективно

650
00:31:27,640 --> 00:31:30,750
актуализиране на страницата, което е
ефективност, но също така и досадно.

651
00:31:30,750 --> 00:31:34,002
В реагират, защото на Сянката
Dom, можете да получите и двете неща безплатно.

652
00:31:34,002 --> 00:31:35,710
Това е ефективен, защото
на сянка Dom.

653
00:31:35,710 --> 00:31:37,210
Запушването е актуализиране на страницата.

654
00:31:37,210 --> 00:31:40,292
Това не прави манипулацията на дърво.

655
00:31:40,292 --> 00:31:41,250
Можете да получите на ефективността.

656
00:31:41,250 --> 00:31:45,420
Можете също така да получите лекотата на използване, тъй като
ако просто пренапише цялата страница,

657
00:31:45,420 --> 00:31:48,970
но просто знам, всичко е наред, нещата
ще бъдат на страницата някъде.

658
00:31:48,970 --> 00:31:51,180
То може да бъде на различно място, но
тя ще бъде по страницата, нали?

659
00:31:51,180 --> 00:31:52,860
Така че просто повторно постановеното
цялото нещо на практика,

660
00:31:52,860 --> 00:31:55,540
и може да се направят няколко
промени в самата страница.

661
00:31:55,540 --> 00:31:57,850
>> Така че, отново, в MVC ви
ще трябва да избират

662
00:31:57,850 --> 00:32:01,840
между лекота на използване и ефективност,
и реагират, можете да получите и двете.

663
00:32:01,840 --> 00:32:04,020
Така че е по-добре.

664
00:32:04,020 --> 00:32:05,220
Има смисъл?

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

666
00:32:06,676 --> 00:32:12,080
>> ОК, така че нека да видим нека да поговорим
малко за стъпка 4,

667
00:32:12,080 --> 00:32:14,740
как можем да вградите компоненти.

668
00:32:14,740 --> 00:32:16,260
Така че ние имаме това точно сега.

669
00:32:16,260 --> 00:32:19,420
Ние разполагаме със готино малко бутон.

670
00:32:19,420 --> 00:32:23,157
Можем да го обърнете назад и
напред, и това е всичко го прави.

671
00:32:23,157 --> 00:32:24,990
Да кажем, че искаме да
има друг компонент.

672
00:32:24,990 --> 00:32:28,730
Да кажем, че нашата Flashcard ап трябва
съдържа списък с всички карти

673
00:32:28,730 --> 00:32:31,520
че имате, така че означава, че ние
трябва да има друг компонент.

674
00:32:31,520 --> 00:32:32,970
Е, може би го наричат ​​списъчен изглед.

675
00:32:32,970 --> 00:32:36,200
Нека да направим оглед списък, който
съжителства с CardView,

676
00:32:36,200 --> 00:32:39,680
и този списък оглед и CardView
ще искали да работим заедно.

677
00:32:39,680 --> 00:32:43,190
И вие можете да ги комбинирате
да направим нашата ап за вас.

678
00:32:43,190 --> 00:32:45,160
>> Така че на първо място, нека да се направи
полето още няколко карти.

679
00:32:45,160 --> 00:32:46,370
Да кажем, че, какви карти?

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

681
00:32:49,619 --> 00:32:51,910
И точно затова не трябва да се
ви отегчавам с него пишете в,

682
00:32:51,910 --> 00:32:53,410
Аз съм просто ще го копирате от тук.

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

684
00:33:01,664 --> 00:33:03,580
И така, аз отивам да не
тя даде само една карта.

685
00:33:03,580 --> 00:33:06,910
Отивам да го дам един набор от карти.

686
00:33:06,910 --> 00:33:10,240
Така че първите приложения
ще прекъсне за сега.

687
00:33:10,240 --> 00:33:14,717
Добре, така че ние ще направим
това състояние да се справят няколко карти.

688
00:33:14,717 --> 00:33:17,800
Така че на първо място, ние ще го дам, не
само една карта, но масив от карти,

689
00:33:17,800 --> 00:33:18,700
като списък с карти.

690
00:33:18,700 --> 00:33:20,980
И в този случай, ние имаме три от тях.

691
00:33:20,980 --> 00:33:27,280
>> Добре де, толкова приложение е
ще получите списък карти,

692
00:33:27,280 --> 00:33:29,870
и това ще реши кои
един да покажат на CardView.

693
00:33:29,870 --> 00:33:33,740
The CardView може само
направи една карта, но ап

694
00:33:33,740 --> 00:33:37,610
получава списък с всички карти, нали?

695
00:33:37,610 --> 00:33:40,820
>> Така че, когато разбера едно
карта, за да дам на CardView,

696
00:33:40,820 --> 00:33:44,660
как бихте Предполагам, че може да сте в състояние
да вземе решение за това кои карти

697
00:33:44,660 --> 00:33:47,064
да покажа?

698
00:33:47,064 --> 00:33:49,980
За да ви дам един намек, че е временно
Ще бъдат гледане определена карта.

699
00:33:49,980 --> 00:33:53,260
Ако обнови страницата, ще
Просто се върнете към първата карта.

700
00:33:53,260 --> 00:33:55,464
Това е добре, защото това е временно.

701
00:33:55,464 --> 00:33:56,630
Каква техника може да използваме?

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

703
00:34:02,534 --> 00:34:08,760
>> АУДИТОРИЯ: Можете да направите променлива
така както сте имали предната.

704
00:34:08,760 --> 00:34:11,989
Вярно ли е това, бихте могли
има ток карта е равно на 1?

705
00:34:11,989 --> 00:34:14,150
>> Нийл Мета: Да, така че ние
искате да имате състояние, нали?

706
00:34:14,150 --> 00:34:16,080
Можете да използвате членка в
компонент, за да разбера

707
00:34:16,080 --> 00:34:17,288
коя карта искаме да стигнем.

708
00:34:17,288 --> 00:34:19,290
Като имаме списък на
всички карти, ние ще

709
00:34:19,290 --> 00:34:21,630
използвате състояние да разбера
една от първата карта,

710
00:34:21,630 --> 00:34:23,710
втора карта, трета карта, и така нататък.

711
00:34:23,710 --> 00:34:28,760
>> Така че един апартамент, така че един апартамент ще получите
имат функцията getInitialState,

712
00:34:28,760 --> 00:34:35,020
getInitialState връщане от функция.

713
00:34:35,020 --> 00:34:39,929
И ние просто ще кажа, activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Така че сега нашата ап има свой състояние.

715
00:34:42,889 --> 00:34:47,179
>> И така нататък направи, за да разбера
карта, нека просто да отидете на масива

716
00:34:47,179 --> 00:34:49,969
и вземете нещо в този форум.

717
00:34:49,969 --> 00:34:53,580
Изберете карти равни this.props.cards
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Така че, както виждате тук, реквизита и
държавата действително работят заедно.

720
00:35:00,162 --> 00:35:08,990
Така че сега ние имаме свой activeCard,
ние ще го наричаме activeCard,

721
00:35:08,990 --> 00:35:10,470
и нека да видим дали това работи.

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

723
00:35:20,320 --> 00:35:20,820
[Недоловим]

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

725
00:35:41,504 --> 00:35:44,900
>> О, това е текст грешка.

726
00:35:44,900 --> 00:35:45,400
Ah.

727
00:35:45,400 --> 00:35:51,420

728
00:35:51,420 --> 00:35:54,840
>> Cool, да, така че сега бяхме отново
там, където бяхме преди, нали?

729
00:35:54,840 --> 00:35:57,100
Същата стара програма освен
Сега можем да подкрепим

730
00:35:57,100 --> 00:35:59,390
списък с карти, а не само една карта.

731
00:35:59,390 --> 00:36:04,130
И сега, отново, ако променим
activeIndex, можем да отидем 0-1,

732
00:36:04,130 --> 00:36:07,330
и сега, че втората карта,
и след това отидохме до 0.

733
00:36:07,330 --> 00:36:10,390
Така че тук е ново
souped-нагоре версия на нашия.

734
00:36:10,390 --> 00:36:16,000
>> ОК, така че сега нека да има списъчен изглед, че
показва всички карти от вашата програма,

735
00:36:16,000 --> 00:36:19,980
така че ние ще се направи нов
компонент, наречен ListView.

736
00:36:19,980 --> 00:36:22,155
Нека ListView равнява react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Така че ние искаме да оказват неподреден
списък със списък елемент за всяка карта.

739
00:36:38,800 --> 00:36:41,490
И така, ние имаме един куп карти.

740
00:36:41,490 --> 00:36:44,990
Искаме един елемент от списъка
за всяка карта, нали?

741
00:36:44,990 --> 00:36:47,490
Бихме могли да направим за линия или
нещо да се направи нов елемент от списъка.

742
00:36:47,490 --> 00:36:50,522
Но начина, по който го направи в
Реагират, използвайте нещо, наречено карта.

743
00:36:50,522 --> 00:36:57,150
Карта е инструмент или функция използвате
че за всеки елемент, тече някаква функция,

744
00:36:57,150 --> 00:36:59,510
отнема върнатата стойност, и
дава, че обратно.

745
00:36:59,510 --> 00:37:06,310
>> Така, като пример, ние имаме масива
1, 2, 3.map function-- и тази

746
00:37:06,310 --> 00:37:12,120
е съкращение за
function-- х стрелки х пъти х.

747
00:37:12,120 --> 00:37:16,110
Това се казва, за всеки номер
в 1, 2, 3, вземете я.

748
00:37:16,110 --> 00:37:17,800
Тя квадрат, и го върна.

749
00:37:17,800 --> 00:37:22,090
И така, какво мислиш 1,
2, 3.map х отива на х пъти

750
00:37:22,090 --> 00:37:25,480
х ви дава обратно дадена
че тази функция е

751
00:37:25,480 --> 00:37:27,680
работи на всеки елемент от този масив.

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

753
00:37:30,837 --> 00:37:32,190
>> АУДИТОРИЯ: 1, 4 9?

754
00:37:32,190 --> 00:37:35,709
>> Нийл Мета: Да, 1, 4, 9,
защото ти направя 1 пъти 1.

755
00:37:35,709 --> 00:37:36,500
Това дава една.

756
00:37:36,500 --> 00:37:37,690
Това е първият елемент.

757
00:37:37,690 --> 00:37:38,530
>> 2 пъти 2 е 4.

758
00:37:38,530 --> 00:37:39,570
Това е втори елемент.

759
00:37:39,570 --> 00:37:40,310
3 пъти 3 е 9.

760
00:37:40,310 --> 00:37:41,540
Това е трети елемент.

761
00:37:41,540 --> 00:37:42,640
Има смисъл?

762
00:37:42,640 --> 00:37:45,015
Така че картата има ли техника
използвате във функционалните програмисти,

763
00:37:45,015 --> 00:37:48,090
новия стил на
програмиране, за да се направи нещо

764
00:37:48,090 --> 00:37:50,500
на всеки елемент в списъка си.

765
00:37:50,500 --> 00:37:51,970
И така, това звучи познато.

766
00:37:51,970 --> 00:37:53,370
Имаме списък с карти.

767
00:37:53,370 --> 00:37:56,860
Искаме да получите списък елемент за всеки
един, така че ние ще се използва само на картата тук.

768
00:37:56,860 --> 00:38:00,250
Ще кажа, нека списък равни
this.props, карти, карта.

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

770
00:38:10,580 --> 00:38:15,070
>> И така даде карта, ние сме
ще генерира елемент от списъка

771
00:38:15,070 --> 00:38:17,580
с тази карта е съдържанието му страна.

772
00:38:17,580 --> 00:38:20,660
Нека просто кажем, ние искаме да дадем на
картите разпитват така card.question.

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

774
00:38:24,990 --> 00:38:30,649
Така че този списък съдържа
масив от LI или Списък артикули

775
00:38:30,649 --> 00:38:32,440
където има един списък
точка, за всяка карта,

776
00:38:32,440 --> 00:38:35,150
и който съдържа въпроса на карти.

777
00:38:35,150 --> 00:38:37,640
Има смисъл?

778
00:38:37,640 --> 00:38:39,450
>> Cool, затова нека сега
всъщност отпечатате, че навън.

779
00:38:39,450 --> 00:38:46,521
Така че ние ще се върне на ул.

780
00:38:46,521 --> 00:38:49,020
Вътре, че неподреден списък,
ние просто ще остана целия списък

781
00:38:49,020 --> 00:38:49,890
че те ни дадоха.

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

783
00:38:52,851 --> 00:38:53,350
Готино.

784
00:38:53,350 --> 00:38:56,060
>> Добре, така че сега това
списък разглеждате произведения просто намери.

785
00:38:56,060 --> 00:38:59,842
Всякакви въпроси за изгледа на списъка?

786
00:38:59,842 --> 00:39:01,270
Имате куп карти.

787
00:39:01,270 --> 00:39:02,800
Можете да направите точка от списъка за всяка карта.

788
00:39:02,800 --> 00:39:05,466
А ти ги сложи вътре неподреден
списък, а ти го върна.

789
00:39:05,466 --> 00:39:09,410
Така че сега нека да действа, за да сме вграждане
това вътре в нашата ап,

790
00:39:09,410 --> 00:39:14,310
така че можем да направим това, списъчен изглед.

791
00:39:14,310 --> 00:39:17,070
Какво аргумент можем да преминат към списъка изглед?

792
00:39:17,070 --> 00:39:18,320
Какви качества трябва да му дам?

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

794
00:39:25,111 --> 00:39:26,860
Не забравяйте, че ако ви дам
тя куп карти,

795
00:39:26,860 --> 00:39:29,590
той ще направи списъка
видите за тези карти.

796
00:39:29,590 --> 00:39:32,267
И така, какво ще минаваме
тук като аргумент?

797
00:39:32,267 --> 00:39:33,350
АУДИТОРИЯ: списък на карти?

798
00:39:33,350 --> 00:39:37,130
Нийл Мета: Да, така карти
равнява this.props.cards, нали?

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

800
00:39:39,850 --> 00:39:44,370
И така, единственият проблем
е само, че можете да

801
00:39:44,370 --> 00:39:48,600
Оказа един от високо ниво елемент оказва,
така сте се погрижили да го увийте в Разделение.

802
00:39:48,600 --> 00:39:49,100
Това е странно.

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

804
00:39:56,190 --> 00:39:57,530
Така че нека да видим дали това.

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

806
00:40:09,790 --> 00:40:10,560
Ли това, че работи?

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

808
00:40:29,774 --> 00:40:31,030
>> Да, там ще отида.

809
00:40:31,030 --> 00:40:33,700
Така че сега ние имаме списък
на карти в долната част,

810
00:40:33,700 --> 00:40:36,180
и след това ние разполагаме със
Самата CardView на върха,

811
00:40:36,180 --> 00:40:40,486
и че ще флип между
от двете страни на картата.

812
00:40:40,486 --> 00:40:42,610
Сега не, че има смисъл, как го направих?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Да, така отново, ние имаме два компонента.

815
00:40:46,790 --> 00:40:49,666
Отпечатъците първия компонент
от всяка карта в списъка.

816
00:40:49,666 --> 00:40:50,540
Това е изгледа на списъка.

817
00:40:50,540 --> 00:40:54,770
И вторият компонент
отпечатва само тази карта.

818
00:40:54,770 --> 00:40:58,840
Ако му се даде определена карта, тя ще
разпечатате информация за тази карта

819
00:40:58,840 --> 00:41:01,870
и да ви позволи да обърнете назад и напред.

820
00:41:01,870 --> 00:41:05,850
>> Така че, ако искаме, можем да се опитаме и да поговорим
за добавянето на някои нови функции към това.

821
00:41:05,850 --> 00:41:09,482
В противен случай можем да говорим малко по-
за на скоростта на реактор,

822
00:41:09,482 --> 00:41:11,190
или можем да отговорим
въпроси, които може да имат

823
00:41:11,190 --> 00:41:15,050
защото те са всички основни части
на реагиране, че искам да говорим.

824
00:41:15,050 --> 00:41:16,540
Ние можем да вървим напред.

825
00:41:16,540 --> 00:41:17,590
Можем да отговаря на въпроси.

826
00:41:17,590 --> 00:41:18,560
Каквото искаш.

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

828
00:41:21,694 --> 00:41:24,205
>> АУДИТОРИЯ: Можете ли да използвате
JSX в нормален JavaScript?

829
00:41:24,205 --> 00:41:27,150
Или това е нещо, което
дойде с [недоловим]?

830
00:41:27,150 --> 00:41:30,760
>> Нийл Мехта: Въпросът е консерва
използвате JSX с нормална JavaScript?

831
00:41:30,760 --> 00:41:32,620
Отговорът е да.

832
00:41:32,620 --> 00:41:41,070
JSX е просто начин да го вземе от Вашето
JavaScript, че има HTML вътре в него,

833
00:41:41,070 --> 00:41:44,215
и той съставя в JavaScript, че
не разполага с HTML вътре в него.

834
00:41:44,215 --> 00:41:47,880
Така че забележите that-- така забележите тук.

835
00:41:47,880 --> 00:41:50,820
Това прилича ли харесват Разделения
и имате неща вътре в него.

836
00:41:50,820 --> 00:41:54,970
>> Това компилира до JavaScript, че
като генерира едно и също нещо.

837
00:41:54,970 --> 00:41:59,590
Предполагам, че това, което искам да кажа е, че
JSX е само синтактична, като това е

838
00:41:59,590 --> 00:42:03,530
препроцесор за JavaScript много
като PHP е Препроцесор за HTML.

839
00:42:03,530 --> 00:42:05,490
АД е Препроцесор
за JavaScript, който ви позволява

840
00:42:05,490 --> 00:42:12,970
поставите HTML вътрешността на вашия JavaScript.

841
00:42:12,970 --> 00:42:16,425
И така, ако имате право трансформатора
което е нещо, наречено [недоловим],

842
00:42:16,425 --> 00:42:17,300
която ще преобрази.

843
00:42:17,300 --> 00:42:19,360
Дясната Препроцесорът,
тя ще ви позволи да направите това.

844
00:42:19,360 --> 00:42:20,235
>> АУДИТОРИЯ: [недоловим]

845
00:42:20,235 --> 00:42:23,026
Нийл Мехта: Обикновено не е нужно
да се сложи HTML вътрешността на JavaScript

846
00:42:23,026 --> 00:42:24,110
освен ако не е твое дело React.

847
00:42:24,110 --> 00:42:27,146
Но вие може да го направи така или иначе.

848
00:42:27,146 --> 00:42:27,645
Да?

849
00:42:27,645 --> 00:42:29,353
>> АУДИТОРИЯ: I смятате
бе описано React

850
00:42:29,353 --> 00:42:31,970
като функционален език за програмиране.

851
00:42:31,970 --> 00:42:35,646
Ние сме били обучение C в CS50.

852
00:42:35,646 --> 00:42:38,032
Е С и функционална език?

853
00:42:38,032 --> 00:42:39,990
Нийл Мехта: Така че въпросът
е около функционална

854
00:42:39,990 --> 00:42:43,010
спрямо друго нещо, наречено
Наложително или процедурно програмиране.

855
00:42:43,010 --> 00:42:44,820
Има два вида програми популярни.

856
00:42:44,820 --> 00:42:48,550
Един нарича процедурно, които
е за всички, като правят команди,

857
00:42:48,550 --> 00:42:51,510
и един е функционален, който е всичко
за да се налага функции и имащи

858
00:42:51,510 --> 00:42:52,930
вход и изход от тях.

859
00:42:52,930 --> 00:42:55,930
React е функционална парадигма.

860
00:42:55,930 --> 00:42:58,010
С е много процедурно парадигма.

861
00:42:58,010 --> 00:43:02,360
>> И като пример, например С,
вие не направите това декларативен начин

862
00:43:02,360 --> 00:43:04,390
на вземане на програмата, нали?

863
00:43:04,390 --> 00:43:06,826
Трябва да се каже, Разпечатайте.

864
00:43:06,826 --> 00:43:07,950
Променете тази структура на данните.

865
00:43:07,950 --> 00:43:08,530
Печат.

866
00:43:08,530 --> 00:43:10,160
Това е всичко за команди.

867
00:43:10,160 --> 00:43:12,640
>> В React, там не е
че много команди.

868
00:43:12,640 --> 00:43:15,145
Това е всичко за имащ
компонентите, които, взети заедно.

869
00:43:15,145 --> 00:43:16,300
Те са като функции.

870
00:43:16,300 --> 00:43:26,360
Имате като функция
наречено CardView,

871
00:43:26,360 --> 00:43:28,680
който е функция
който има вход, изход,

872
00:43:28,680 --> 00:43:30,660
и така е всички реагират
за тази философия

873
00:43:30,660 --> 00:43:32,700
ни на having-- имате данни.

874
00:43:32,700 --> 00:43:34,910
Можете да го премине през този
алгоритъм, и това ще

875
00:43:34,910 --> 00:43:36,800
изход HTML, че сте
Просто отпечатана на страницата,

876
00:43:36,800 --> 00:43:39,180
и затова трябва да
го изградим парче по парче.

877
00:43:39,180 --> 00:43:42,800
>> Така че, за да се направи една метафора на това, което
Казах и преди, знаете как

878
00:43:42,800 --> 00:43:47,050
на Facebook, ако получите съобщение,
и да изберете кои части да се актуализира,

879
00:43:47,050 --> 00:43:47,882
това е процедурно.

880
00:43:47,882 --> 00:43:48,840
Това е наложително, нали?

881
00:43:48,840 --> 00:43:49,806
OK, аз получих съобщение.

882
00:43:49,806 --> 00:43:50,930
Нека да променим сметка там.

883
00:43:50,930 --> 00:43:52,110
>> Нека да се появи прозорец тук.

884
00:43:52,110 --> 00:43:52,780
Нека да променим сметка там.

885
00:43:52,780 --> 00:43:53,700
Нека да се направи това тук.

886
00:43:53,700 --> 00:43:55,220
Това е процедурен подход.

887
00:43:55,220 --> 00:44:00,240
>> Това е, което неща като ъглови,
Boost, Backbone, други рамки използват.

888
00:44:00,240 --> 00:44:01,200
Реагират е функционален.

889
00:44:01,200 --> 00:44:03,324
Това е много по-различен начин
на мислене за нещата.

890
00:44:03,324 --> 00:44:07,950
Това отнема тази идея за нека да има
функции или алгоритми, които ще ви

891
00:44:07,950 --> 00:44:08,800
тя даде данни.

892
00:44:08,800 --> 00:44:11,820
Тя ще изплюе какво
трябва да бъде, и компютъра

893
00:44:11,820 --> 00:44:13,490
ще се грижи за претегляне.

894
00:44:13,490 --> 00:44:15,890
Вие не се справя сам.

895
00:44:15,890 --> 00:44:18,470
Това прави ли малко смисъл?

896
00:44:18,470 --> 00:44:18,970
Да?

897
00:44:18,970 --> 00:44:24,180
>> АУДИТОРИЯ: В функционален език,
всичко се случва наведнъж?

898
00:44:24,180 --> 00:44:26,800
>> Нийл Мета: Не, нещата да се случват в ред.

899
00:44:26,800 --> 00:44:29,320
Както тук има още
поръчка, но това не е така

900
00:44:29,320 --> 00:44:32,390
да се случи по ред на подобно
Поздравявам, команда, команда.

901
00:44:32,390 --> 00:44:36,459
Това се случва по реда на
функция дава изход.

902
00:44:36,459 --> 00:44:37,750
Поставете това в друга функция.

903
00:44:37,750 --> 00:44:39,550
Сложете че в друг
функция, друга функция.

904
00:44:39,550 --> 00:44:41,470
>> Ако го направите CS51, ще
научите функционални програми

905
00:44:41,470 --> 00:44:42,886
малко извън обхвата на това.

906
00:44:42,886 --> 00:44:45,090
Но в общи линии, това, което прави
Реагират готино е не само

907
00:44:45,090 --> 00:44:46,840
потокът еднопосочен данни
и виртуалния Dom,

908
00:44:46,840 --> 00:44:48,700
но и тази идея за
функционално програмиране.

909
00:44:48,700 --> 00:44:51,720
И функционално програмиране е много лесно
да композира и да направи готини неща от,

910
00:44:51,720 --> 00:44:53,844
и това е много лесно да се мисли
около и причина за.

911
00:44:53,844 --> 00:44:55,450
Така че това е още един добър жребий на React.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Всякакви други въпроси?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Да?

916
00:45:03,150 --> 00:45:06,840
>> АУДИТОРИЯ: Хм, защо да ви
ползване нека, за разлика от Var?

917
00:45:06,840 --> 00:45:10,450
>> Нийл Мехта: Така че въпросът е
защо се използва нека вместо вар?

918
00:45:10,450 --> 00:45:13,220
Това е нещо, наречено
ES6 или ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Това е най-новата версия на JavaScript.

920
00:45:15,820 --> 00:45:19,050
Има един куп технически причини,
Но нека е по-добра версия на Var.

921
00:45:19,050 --> 00:45:20,724
>> Това е начина, по който декларира променливи.

922
00:45:20,724 --> 00:45:21,390
Можете да използвате нека.

923
00:45:21,390 --> 00:45:22,140
Можете да използвате Var.

924
00:45:22,140 --> 00:45:23,825
Нека има куп технически
reasons-- можете да ги гледам

925
00:45:23,825 --> 00:45:25,610
до later-- защо е по-добре.

926
00:45:25,610 --> 00:45:28,780
По принцип, ES6 има някой хубав
Новият синтаксис, някои нови функции

927
00:45:28,780 --> 00:45:30,720
на върха на старата JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Така че ние имаме като пет минути.

929
00:45:32,782 --> 00:45:34,990
Аз просто исках да говоря за
още едно нещо наистина бързо.

930
00:45:34,990 --> 00:45:36,450
Ако сте имали някакви въпроси,
нека да говорим за нея, след това.

931
00:45:36,450 --> 00:45:38,366
Но просто така се получава това
уловен от камера, аз просто

932
00:45:38,366 --> 00:45:41,550
Искам да поговорим малко за това как можете
действително използват реагират в своите приложения.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Ако отидете тук,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
това е началната страница на React, и
тя ще ви покажа как можете реално да използва

936
00:46:03,320 --> 00:46:05,320
Реагират в страниците си.

937
00:46:05,320 --> 00:46:08,845
По принцип, това е малко
сложно опитвате да инсталирате React.

938
00:46:08,845 --> 00:46:12,300
Това не е толкова лесно, колкото ти просто плъзнете
и пуснете JavaScript там.

939
00:46:12,300 --> 00:46:15,890
>> Вие трябва да имате свой трансформатор
създаден, който ще, както преди,

940
00:46:15,890 --> 00:46:18,120
превърнете в JSX
нормалната JavaScript.

941
00:46:18,120 --> 00:46:21,030
Трябва да сте нещо, което ще
съставят ви ES6 към нормалното.

942
00:46:21,030 --> 00:46:24,720
JavaScript има много на движещи
части което трябва да направите, така че има нещо

943
00:46:24,720 --> 00:46:27,200
наречено Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
И това е инструмент на командния ред, че ще
да ви помогне да скеле вашето React

945
00:46:31,110 --> 00:46:32,380
проекти лесно.

946
00:46:32,380 --> 00:46:38,660
>> Така че можете да прочетете за това
по-късно, но има някои инструменти

947
00:46:38,660 --> 00:46:40,160
че Yeoman предлага.

948
00:46:40,160 --> 00:46:43,280
Те ще ви позволи да създадете React
ап с всичко построен инча

949
00:46:43,280 --> 00:46:46,030
Подобно на това ще са изградили
в, компоненти построен инча

950
00:46:46,030 --> 00:46:47,880
Той ще трябва трансформатор построен инча

951
00:46:47,880 --> 00:46:50,699
Те имат много готин
неща, построена през автоматично

952
00:46:50,699 --> 00:46:52,240
използването на тези неща, наречени генератори.

953
00:46:52,240 --> 00:46:54,620
>> Така че прочетете за това, ако ви харесва.

954
00:46:54,620 --> 00:46:59,110
Просто отидете на Yeoman, Y-E-O-M-A-N, и
можете да намерите генератори като тези.

955
00:46:59,110 --> 00:47:01,263
И с генератори като
тези, можете просто искал един

956
00:47:01,263 --> 00:47:03,010
е няколко команди команди.

957
00:47:03,010 --> 00:47:05,530
Той ще извърши скеле
Цялата React ап за вас.

958
00:47:05,530 --> 00:47:10,470
Ще получите цялата ръчна тръбите,
и грухтене работа за вас,

959
00:47:10,470 --> 00:47:13,010
и това е причината да просто да се съсредоточи
само на писане в React.

960
00:47:13,010 --> 00:47:16,739
>> Така че основно изграждане на
Реагират приложение е nontrivial.

961
00:47:16,739 --> 00:47:19,530
Той е свързан всички заедно, но има
са инструменти, които ще го направя за теб.

962
00:47:19,530 --> 00:47:23,070
Така че, ако искате да направите React
ап, опитайте се да го прави по този начин.

963
00:47:23,070 --> 00:47:26,360
Ако просто искате да експериментирате,
можете да се опитате да използвате това CodePen

964
00:47:26,360 --> 00:47:28,550
поради това има CodePen
всички реагират окабеляване.

965
00:47:28,550 --> 00:47:30,240
Аз бях направил цялата работа за вас вече.

966
00:47:30,240 --> 00:47:34,610
>> Така че, ако искате да направите като
производството, за да освободите React ап,

967
00:47:34,610 --> 00:47:37,220
опитайте една от тези генератори.

968
00:47:37,220 --> 00:47:40,240
Ако просто искате да играете
наоколо, това е често струва само

969
00:47:40,240 --> 00:47:44,490
като се опитам да си поиграете на CodePen тук.

970
00:47:44,490 --> 00:47:45,470
Звучат добре?

971
00:47:45,470 --> 00:47:45,970
Готино.

972
00:47:45,970 --> 00:47:47,890
>> Така че това е всичко, което имам.

973
00:47:47,890 --> 00:47:52,470
Отново, всички код и примери са
щеше да бъде на този сайт тук.

974
00:47:52,470 --> 00:47:55,509
Така че, отново, ние говорим не
за много по синтаксис на React,

975
00:47:55,509 --> 00:47:57,550
но, за да намерите всички онези,
малки детайли, синтактични

976
00:47:57,550 --> 00:48:00,320
всичко това е ще бъде на разположение
В този сайт тук.

977
00:48:00,320 --> 00:48:02,660
>> Така че бих препоръчал като
направи първата стъпка.

978
00:48:02,660 --> 00:48:06,277
Сложете го в своя CodePen.

979
00:48:06,277 --> 00:48:08,110
Опитайте работи по вземане
да втория етап.

980
00:48:08,110 --> 00:48:11,310
Има и четвърти етап, и просто
виж където можете да получите от това.

981
00:48:11,310 --> 00:48:14,840
>> Всякакви други въпроси, за бележки
, че на страницата или да ми пишете.

982
00:48:14,840 --> 00:48:16,490
Това е моят имейл.

983
00:48:16,490 --> 00:48:19,885
Но бих искал да ви помогне с всякаква
въпроси, които може да имат около реагира.

984
00:48:19,885 --> 00:48:21,010
Така че, да, това е всичко, което имам.

985
00:48:21,010 --> 00:48:23,410
Благодаря на всички ви много за
гледане или за посещаване.

986
00:48:23,410 --> 00:48:26,820
И аз ще взема някакви въпроси
може да се наложи след това сега.

987
00:48:26,820 --> 00:48:29,140
Така че благодаря на всички ви за гледане.

988
00:48:29,140 --> 00:48:31,270