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 вер?

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 раз 4 лютага.

758
00:37:38,530 --> 00:37:39,570
Гэта другі элемент.

759
00:37:39,570 --> 00:37:40,310
3 разоў 3 верасень.

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