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
>> Нееля MEHTA: Вот он идет.

4
00:00:07,275 --> 00:00:11,070
>> Ну, все, добро пожаловать на веб
приложения в будущем с React.

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
Я ТА для 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
Хан Академия другой
видный рано усыновителя 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
>> И так хорошо реагировать не только как
веб-фреймворк для построения интерфейсов.

29
00:01:13,470 --> 00:01:16,020
Это хорошо для создания веб-интерфейсов.

30
00:01:16,020 --> 00:01:18,350
Там также вещь
Реагировать называется Родной которые

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

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
оказывать программы и приложения 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
>> Итак, то, что реагировать?

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, использования React.

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
>> Реагировать компоненты
форсированным 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
Это будет содержать время, профиля,
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
каждый пост содержит как время,
Профиль, 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
Вы берете bedroom-- вы придерживаетесь их
вместе, и у вас есть новый компонент.

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
Они компонуемы.

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, например,
тех пор, пока он использует React а.

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
Мы строим компонуемы,
легко масштабируемых веб-приложений.

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
использует другую технологию
Поток называется, что

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
>> И так реагировать действительно здорово, потому что вы
можете использовать его с любым задней части вы хотите.

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
данных, реагировать делает его.

153
00:06:54,700 --> 00:06:56,890
Рубин рельсам с
Данные, Реагировать делает его.

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
Это использует поток как я уже говорил раньше.

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
Вы будете знать, что весь код для
сегодняшняя беседа будет по этому адресу

165
00:07:26,610 --> 00:07:29,320
здесь, извините, этот адрес здесь.

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
Мы будем двигаться через четыре этапа
строительства образец Реагировать приложение.

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
Круто, так что если все, кто здесь,
и даже если вы находитесь дома,

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
очень быстро, без использования
наше удостоверение или использовать наш локальный компьютер

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
Прохладный, прохладно прохладно.

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
Я думаю, что изучение Реагировать является
миллион раз легче, если вы уже

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
Это Реагировать язык для вас.

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
очень простой флэш приложение, с помощью React.

222
00:10:06,470 --> 00:10:08,210
Мы собираемся, чтобы иметь флэш-карту.

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
Как я уже говорил раньше, составляющая в Реагировать
это просто 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
можно использовать для создания нового
тип Реагировать компонент.

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, я знаю,
у нас есть DIV с общего назначения

267
00:12:21,360 --> 00:12:22,790
контейнер для вещей.

268
00:12:22,790 --> 00:12:26,380
Мы можем вернуть DIV, а внутри
это DIV, мы можем положить вещи.

269
00:12:26,380 --> 00:12:32,390
>> Так что давайте говорить, что мы хотим, чтобы сделать просто
прямо-вверх флэш сейчас.

270
00:12:32,390 --> 00:12:34,890
Флэш, я бы сказал,
будет иметь вопрос и ответ.

271
00:12:34,890 --> 00:12:37,530
Так внутри этого DIV, давайте
распечатать пункт

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
Мы должны сказать Реагировать поставить
компонент на экране

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
Вы пишете приложение, так это приложение
относиться как к HTML элемента.

286
00:13:28,120 --> 00:13:30,380
Как я уже говорил раньше, это
элемент на стероидах.

287
00:13:30,380 --> 00:13:32,870
>> Таким образом, вы сделать приложение, и вы
дать ему место, чтобы поместить его.

288
00:13:32,870 --> 00:13:37,170
И это, как вы можете
сказать ему, где его поставить.

289
00:13:37,170 --> 00:13:46,200
Я создал простой DIV на
страница вызывается с 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
Мы сделали наш первый Реагировать компонент.

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
Так сказал, хорошо, приложение,
что я должен распечатать?

306
00:14:33,680 --> 00:14:36,970
App говорит, перейдите распечатать DIV
с двумя пунктами внутри него.

307
00:14:36,970 --> 00:14:40,420
И вуаля, есть наша DIV с
два абзаца внутри него.

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
все флэш у вас есть,
просто кормить его в здесь,

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
и мы можем сделать новый
компонент, называемый приложение,

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
Вы можете гнездо Реагировать компоненты
внутри друг друга.

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
Таким образом, мы можем сделать это, приложение
карта равна 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
Та же самая идея, приложение карты 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
Круто, так что давайте шаг через него
еще раз просто чтобы быть уверенным.

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, если вы
дать мне любой объект флэш,

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
Поэтому в основном, это как один из
Стандартные функции в библиотеке C.

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
Прохладный, так что опять, свойства
как вы можете передать информацию

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
>> Для флэш для
Например, какое государство

449
00:22:05,320 --> 00:22:07,550
может вы хотите, чтобы
запомнить на флэш?

450
00:22:07,550 --> 00:22:09,740
Что временный статус
может вы хотите, чтобы помнить

451
00:22:09,740 --> 00:22:12,491
для флэш в флэш приложение?

452
00:22:12,491 --> 00:22:13,990
АУДИТОРИЯ: Если это было отражено?

453
00:22:13,990 --> 00:22:14,990
Нееля MEHTA: Да, верно.

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
Нееля MEHTA: Как вспышка
карта, как вы можете видеть

465
00:22:38,360 --> 00:22:40,290
сторона вопрос или сбоку ответ?

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

467
00:22:41,070 --> 00:22:43,270
>> Нееля MEHTA: Как и
двусторонний флэш-карту, верно?

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
Посланник, у меня есть, как человек, который

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 получил новоиспеченным до.

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
В Реагировать мы делаем это сначала
задания начального состояния.

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
Мы обращаемся к констатировать же мы
реквизит доступа, так 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
>> Нееля MEHTA: Да, так текст
равна 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
Круто, так что теперь, как видите,
мы видим только вопрос.

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
>> Нееля MEHTA: Да, так взять все, что
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
Бада Бинг, посмотрите на это.

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
Если вы делаете это
без Реагировать, вы бы

584
00:28:32,630 --> 00:28:34,588
уже, целью которых любят, когда их
флип кнопка нажата,

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
И так в основном, как реагировать
ждет вас, чтобы измениться.

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
но реагировать использует вещь
называется Shadow 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
Поэтому в основном, это практически
Re-оказывает много.

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
Это виртуальный ДОМ.

611
00:29:56,560 --> 00:29:59,350
Это один из крупнейших
особенности React.

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
>> Нееля MEHTA: Да, вопрос
как она соотносится с 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
будет иметь функцию Flip.

625
00:30:26,310 --> 00:30:28,450
Таким образом, вид будет рассказать
Контроллер перевернуть сальто.

626
00:30:28,450 --> 00:30:30,370
Флип бы рассказать
Модель изменить, верно?

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
И так приятно Реагировать
потому что он имеет Shadow 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
вам придется запомнить,
ОК, изменить то, что

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
В Реагировать, из-за тени
Дом, вы получаете обе вещи бесплатно.

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
Твердое вещество.

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
Скажем, наша флэш приложение должно
содержать список всех карт

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
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
>> Нееля MEHTA: Да, поэтому мы
хотят иметь государство, верно?

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
Ах.

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

728
00:35:51,420 --> 00:35:54,840
>> Круто, да, так что теперь мы вернулись
туда, где мы были раньше, не так ли?

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
Так вот новый
форсированным версии нашего.

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
Square, и вернуть его обратно.

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
>> Нееля MEHTA: Да, 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
Так этот список содержит
Массив Ли или элементов списка

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
>> Круто, так что теперь давайте
на самом деле, что из печати.

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
Нееля MEHTA: Да, так карточек
равна 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
>> Нееля MEHTA: Вопрос в том,
Вы используете 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
Это выглядит, как у вас, как DIV
и у вас есть вещи внутри него.

836
00:41:50,820 --> 00:41:54,970
>> Это компилирует-код, который
как генерирует то же самое.

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
Нееля MEHTA: Обычно вам не нужно
положить HTML внутри JavaScript

846
00:42:23,026 --> 00:42:24,110
если ваш делать не реагировать.

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
>> АУДИТОРИЯ: Я думаю, что вы
описал Реагировать

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
Нееля MEHTA: Таким образом, вопрос
о функциональной

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
Реагировать является функциональным парадигма.

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
>> В Реагировать, нет
что многие команды.

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
ОК, я получил сообщение.

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, Магистральная, другие механизмы использовать.

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
>> Нееля MEHTA: Нет, вещи в порядке.

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
поток данных в одну сторону
и виртуальный дом,

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
>> АУДИТОРИЯ: Хм, почему бы вам
использовать пусть, в отличие от вар?

917
00:45:06,840 --> 00:45:10,450
>> Нееля MEHTA: Таким образом, вопрос
почему вы используете пусть вместо вар?

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
Там куча техническим причинам,
но пусть это лучше версия вар.

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
Вы можете использовать вар.

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
это домашняя страница Реагировать, и
он покажет вам, как вы на самом деле использовать

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.io.

944
00:46:27,200 --> 00:46:31,110
И это инструмент командной строки, который будет
помочь вам эшафот свой Реагировать

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
что старшина предлагает.

948
00:46:40,160 --> 00:46:43,280
Они позволяют создать Реагировать
Приложение всем построен в.

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-М-А-Н, и
вы можете найти, как эти генераторы.

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
Это будет эшафот из
Вся Реагировать приложение для вас.

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
>> Так в основном построения
Реагировать приложение нетривиально.

961
00:47:16,739 --> 00:47:19,530
Это проводной вместе, но
инструменты, которые сделаю это для вас.

962
00:47:19,530 --> 00:47:23,070
Так что, если вы хотите, чтобы сделать Реагировать
Приложение, попробуйте делать это таким образом.

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
>> Так что, если вы хотите, чтобы подобно
Производство выпустить Реагировать приложение,

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
Так, опять же, мы не говорили
о многом синтаксис Реагировать,

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
Но я хотел бы помочь вам с любой
вопросы, вы, возможно, о React.

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