1
00:00:00,000 --> 00:00:02,910
>> [MUSIC CHƠI]

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

3
00:00:04,850 --> 00:00:07,275
>> Neel Mehta: Ở đây nó đi.

4
00:00:07,275 --> 00:00:11,070
>> Vâng, tất cả mọi người, chào mừng bạn đến web
ứng dụng của tương lai với phản ứng lại.

5
00:00:11,070 --> 00:00:11,870
Đây là CS50.

6
00:00:11,870 --> 00:00:12,930
Tên tôi là Neel.

7
00:00:12,930 --> 00:00:17,689
Tôi là một kỹ thuật cho CS50 và một sinh viên năm hai
tại trường Cao đẳng và rất, rất Harvard

8
00:00:17,689 --> 00:00:18,730
nhà phát triển web đam mê.

9
00:00:18,730 --> 00:00:20,730
Vì vậy, tôi rất thú vị để
được nói chuyện với bạn ngày hôm nay,

10
00:00:20,730 --> 00:00:24,550
cho dù bạn đang ở đây hay ở nhà
xem, về phản ứng lại, đó là, một lần nữa

11
00:00:24,550 --> 00:00:27,270
như tôi đã nói, tương lai của các ứng dụng web.

12
00:00:27,270 --> 00:00:29,055
>> Vì vậy, phản ứng lại là một khuôn khổ web.

13
00:00:29,055 --> 00:00:30,930
Và như tôi đã nói
để một số người dân ở đây,

14
00:00:30,930 --> 00:00:33,400
một khuôn khổ chỉ là một
thiết lập các công cụ bạn có thể sử dụng

15
00:00:33,400 --> 00:00:35,770
để cấu trúc và xây dựng ứng dụng web của bạn.

16
00:00:35,770 --> 00:00:39,010
Và các ứng dụng web là, một lần nữa, các trang web
có tính tương tác như Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, bất cứ điều gì.

18
00:00:42,330 --> 00:00:45,590
>> Vì vậy, Facebook là một khuôn khổ web
được phát triển bởi Facebook

19
00:00:45,590 --> 00:00:48,060
một vài năm back-- Phản ứng là.

20
00:00:48,060 --> 00:00:50,830
Nó cũng được sử dụng trong
Facebook trên các ứng dụng di động của họ

21
00:00:50,830 --> 00:00:52,460
và các ứng dụng web, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy là một
nhận nuôi con nuôi nổi tiếng ban đầu của phản ứng lại.

23
00:00:56,350 --> 00:00:58,630
>> Nó thực sự đã nhận được
cực kỳ phổ biến.

24
00:00:58,630 --> 00:01:03,420
Nếu bạn đã từng sử dụng những thứ như góc hoặc
Xương sống, đây là của cùng một gia đình,

25
00:01:03,420 --> 00:01:05,830
nhưng nó có từ xa
vượt nổi tiếng của họ.

26
00:01:05,830 --> 00:01:06,890
Đó là điều mới nóng.

27
00:01:06,890 --> 00:01:09,590
Nó thực sự, thực sự rất lớn.

28
00:01:09,590 --> 00:01:13,470
>> Và do đó, phản ứng lại là tốt không chỉ là một
khung web cho các giao diện tòa nhà.

29
00:01:13,470 --> 00:01:16,020
Nó là tốt để xây dựng các giao diện web.

30
00:01:16,020 --> 00:01:18,350
Có còn là một điều
Phản ứng đó gọi là Native

31
00:01:18,350 --> 00:01:22,200
cho phép bạn xây dựng các giao diện
cho Android và iOS

32
00:01:22,200 --> 00:01:26,390
và các nền tảng có thể khác trong tương lai
chỉ sử dụng mã JavaScript cùng.

33
00:01:26,390 --> 00:01:31,130
Bạn có thể sử dụng chính xác cùng
Mã JavaScript để render các trang web,

34
00:01:31,130 --> 00:01:33,040
để vẽ lại các ứng dụng Android và iOS.

35
00:01:33,040 --> 00:01:35,000
>> Đó là một thời gian rất, rất thú vị.

36
00:01:35,000 --> 00:01:37,070
Đó là một cơ hội thực sự, thực sự mát mẻ.

37
00:01:37,070 --> 00:01:42,020
Nó thực sự là một web phổ
công cụ phát triển giao diện,

38
00:01:42,020 --> 00:01:44,420
vì vậy nó là rất, rất
Điều quan trọng cần biết.

39
00:01:44,420 --> 00:01:46,949
Và, như tôi đã nói với mọi người
trước, điều này, tôi nghĩ rằng,

40
00:01:46,949 --> 00:01:48,990
là sẽ thay đổi cách chúng tôi
xây dựng các ứng dụng web mãi mãi.

41
00:01:48,990 --> 00:01:55,820
Vì vậy, nó có thể là một sự cường điệu chút, nhưng tôi
nghĩ rằng đó là một điều khá tốt để biết.

42
00:01:55,820 --> 00:01:57,580
>> OK, vì vậy những gì là phản ứng lại?

43
00:01:57,580 --> 00:02:01,020
Phản ứng là một khuôn khổ bạn có thể
sử dụng để xây dựng các giao diện.

44
00:02:01,020 --> 00:02:03,240
Một giao diện là, một lần nữa,
một trang web, phải không?

45
00:02:03,240 --> 00:02:06,340
Vì vậy, đây là Instagram.com, sử dụng phản ứng lại.

46
00:02:06,340 --> 00:02:08,740
>> Phản ứng được xây dựng trên
ý tưởng của các thành phần.

47
00:02:08,740 --> 00:02:11,900
Một thành phần là một HTML
yếu tố trên steroid,

48
00:02:11,900 --> 00:02:14,470
vì vậy một phần tử HTML là giống như một nút.

49
00:02:14,470 --> 00:02:15,250
Đó là một đoạn văn.

50
00:02:15,250 --> 00:02:17,500
Đó là một tiêu đề, phải không?

51
00:02:17,500 --> 00:02:22,740
Và Instagram sẽ sử dụng chúng, nhưng nó
cũng sẽ sử dụng các thành phần của phản ứng lại.

52
00:02:22,740 --> 00:02:25,740
>> Phản ứng thành phần là
các yếu tố HTML được cải tiến

53
00:02:25,740 --> 00:02:28,100
có hành vi của mình
chứa trong chúng.

54
00:02:28,100 --> 00:02:31,800
Vì vậy, như một ví dụ, chúng ta có thể có
một yếu tố thời gian, một phần thời gian,

55
00:02:31,800 --> 00:02:34,095
trong đó sẽ chứa như
tem thời gian, bạn đã biết,

56
00:02:34,095 --> 00:02:37,170
một thành phần hồ sơ mà
sẽ chứa các hình ảnh hồ sơ cá nhân

57
00:02:37,170 --> 00:02:38,820
và tên của người đó.

58
00:02:38,820 --> 00:02:42,930
Nó có thể có một truy cập như thế, mà
có thể đếm được như số lượng thích,

59
00:02:42,930 --> 00:02:45,610
và nếu bạn click vào nó, nó sẽ thấy
tăng số lượng thích.

60
00:02:45,610 --> 00:02:48,200
Một thành phần chỉ là một
bó của mã HTML

61
00:02:48,200 --> 00:02:50,520
có một số chức năng
bọc bên trong của nó.

62
00:02:50,520 --> 00:02:53,770
Vì vậy, nó giống như một thành phần của HTML
trên steroid, như tôi đã nói trước đây.

63
00:02:53,770 --> 00:02:56,270
Bạn có thể lấy các thành phần này,
và bạn có thể đặt chúng lại với nhau

64
00:02:56,270 --> 00:02:59,060
để làm cho các thành phần mới, trong
trường hợp này, một phần bài viết,

65
00:02:59,060 --> 00:03:00,505
trong đó có chứa tất cả các công cụ này.

66
00:03:00,505 --> 00:03:04,050
Nó sẽ chứa thời gian, hồ sơ,
LikeCounter, có thể bình luận

67
00:03:04,050 --> 00:03:06,100
và có lẽ hình ảnh bản thân.

68
00:03:06,100 --> 00:03:10,810
Và do đó, các ứng dụng web được xây dựng sẵn bằng cách lấy
thành phần và đặt chúng lại với nhau.

69
00:03:10,810 --> 00:03:15,620
Một nguồn cấp dữ Instagram là không có gì nhiều hơn
một loạt các bài viết cái khác,

70
00:03:15,620 --> 00:03:19,032
mỗi bài chứa như Time,
Hồ sơ, LikeCounter, và như vậy.

71
00:03:19,032 --> 00:03:20,490
Đó là loại giống như xây dựng một ngôi nhà.

72
00:03:20,490 --> 00:03:22,660
Bạn không xây dựng các
nhà từ trên xuống dưới.

73
00:03:22,660 --> 00:03:24,960
Bạn lấy components-- bạn
mất như phòng tắm.

74
00:03:24,960 --> 00:03:28,320
Bạn lấy bedroom-- bạn dính chúng
với nhau, và bạn có một thành phần mới.

75
00:03:28,320 --> 00:03:29,760
Bạn có một phần mới của ngôi nhà.

76
00:03:29,760 --> 00:03:32,860
>> Vì vậy, tất cả React được xây dựng xung quanh
Ý tưởng này của các thành phần đó

77
00:03:32,860 --> 00:03:36,600
là tương tác, đó là khai báo.

78
00:03:36,600 --> 00:03:39,650
Cũng giống như bạn chỉ nói những gì một
hồ sơ cá nhân, và nó ám nó.

79
00:03:39,650 --> 00:03:40,600
Họ là composable.

80
00:03:40,600 --> 00:03:43,880
Bạn có thể mất một thời gian và một hồ sơ, đặt
chúng lại với nhau, làm một cái gì đó tốt hơn.

81
00:03:43,880 --> 00:03:47,770
Và họ tái sử dụng, vì vậy nếu bạn
có mã nguồn cho một bài,

82
00:03:47,770 --> 00:03:49,440
bạn có thể nhúng bất cứ nơi nào mà.

83
00:03:49,440 --> 00:03:53,160
>> Bạn có thể nhúng một Instagram
Điều trên trang web của riêng bạn.

84
00:03:53,160 --> 00:03:56,830
Bạn có thể nhúng trong Facebook, ví dụ,
miễn là nó sử dụng phản ứng lại là tốt.

85
00:03:56,830 --> 00:04:00,360
Vì vậy, các thành phần thực sự, thực sự, thực sự
khối xây dựng mạnh mẽ của web

86
00:04:00,360 --> 00:04:04,180
mà có thể được sử dụng bất cứ nơi nào và đưa
với nhau để làm cho khối xây dựng mới.

87
00:04:04,180 --> 00:04:07,159
Đó là rất, rất
tổng quan về mức độ cao.

88
00:04:07,159 --> 00:04:09,200
Vì vậy, một lần nữa, nếu bạn có
bất kỳ câu hỏi vào thời điểm bất kỳ

89
00:04:09,200 --> 00:04:14,470
về triết lý của lò phản ứng,
mã hóa, ngăn tôi, và cho tôi biết.

90
00:04:14,470 --> 00:04:18,420
>> OK, vì vậy phản ứng là bởi vì nó
có một cách nhìn khác nhau

91
00:04:18,420 --> 00:04:19,870
ở cách bạn xây dựng các ứng dụng web.

92
00:04:19,870 --> 00:04:23,620
Bạn đã có thể nghe nói về MVC, một
mô hình bạn kiểm soát trong CS50 hoặc bất cứ

93
00:04:23,620 --> 00:04:25,940
khác lớp thăm dò bạn sử dụng.

94
00:04:25,940 --> 00:04:29,000
Và hầu hết các khuôn khổ được
được xây dựng trên ý tưởng của MVC.

95
00:04:29,000 --> 00:04:30,410
Phản ứng không phải là.

96
00:04:30,410 --> 00:04:32,980
React được xây dựng xung quanh ý tưởng
các luồng dữ liệu theo một chiều

97
00:04:32,980 --> 00:04:36,510
theo cách nhìn của biểu đồ này hoặc đồ họa ở đây.

98
00:04:36,510 --> 00:04:38,260
>> Về cơ bản, bạn có một nguồn dữ liệu.

99
00:04:38,260 --> 00:04:42,380
Và các nguồn dữ liệu sẽ quyết định
làm thế nào để đặt ra các thành phần nhất định.

100
00:04:42,380 --> 00:04:45,452
Và các thành phần sẽ
sau đó, khi họ thay đổi,

101
00:04:45,452 --> 00:04:47,160
họ sẽ cho các
nguồn dữ liệu để thay đổi.

102
00:04:47,160 --> 00:04:49,350
>> Để sử dụng Instagram
Ví dụ, bạn có thể có

103
00:04:49,350 --> 00:04:52,050
một danh sách các đối tượng như các bài
trong một cơ sở dữ liệu hoặc một cái gì đó.

104
00:04:52,050 --> 00:04:53,310
Dữ.

105
00:04:53,310 --> 00:04:57,600
Và sau đó các thành phần bài của chúng tôi
sẽ mất dữ liệu,

106
00:04:57,600 --> 00:05:01,830
và sử dụng dữ liệu đó để render
một điều trên màn hình.

107
00:05:01,830 --> 00:05:04,300
Đó là những gì các mũi tên
từ dữ liệu đến thành phần là,

108
00:05:04,300 --> 00:05:07,930
và sau đó là cùng một dữ liệu được sử dụng
để vẽ một loạt các thành phần.

109
00:05:07,930 --> 00:05:10,290
>> Trong Facebook Messenger, cho
Ví dụ, đó là phản ứng lại,

110
00:05:10,290 --> 00:05:13,410
bạn có thể có một danh sách các
tin nhắn như nguồn dữ liệu của bạn.

111
00:05:13,410 --> 00:05:15,927
Và điều đó sẽ làm cho không
chỉ danh sách tin nhắn

112
00:05:15,927 --> 00:05:17,510
nhưng cũng có những danh sách bạn bè mà bạn có.

113
00:05:17,510 --> 00:05:19,200
Bạn có đếm chưa đọc.

114
00:05:19,200 --> 00:05:23,330
Có lẽ cũng làm điều Facebook
đó là ở dưới cùng của Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Cùng một dữ liệu là một
nguồn duy nhất của sự thật

116
00:05:25,610 --> 00:05:28,290
và gây ra rất nhiều
các thành phần để được trả lại.

117
00:05:28,290 --> 00:05:30,290
Và bất cứ khi nào một trong những
thành phần được thay đổi,

118
00:05:30,290 --> 00:05:32,320
nó đi lại và
thay đổi nguồn dữ liệu.

119
00:05:32,320 --> 00:05:33,460
>> Bạn gửi một tin nhắn, phải không?

120
00:05:33,460 --> 00:05:34,780
Đó là thay đổi nguồn dữ liệu.

121
00:05:34,780 --> 00:05:39,490
Bạn đọc tin nhắn của bạn,
do đó, bạn thiết lập chưa đọc 0.

122
00:05:39,490 --> 00:05:41,136
Đó là thay đổi nguồn dữ liệu.

123
00:05:41,136 --> 00:05:44,010
Và nhận thấy rằng tất cả các của một
mũi tên sẽ trở lại cùng một dữ liệu

124
00:05:44,010 --> 00:05:47,662
nguồn, do đó bạn biết,
cho một tập dữ liệu nhất định,

125
00:05:47,662 --> 00:05:49,870
bạn biết chính xác những gì các
trang sẽ trông như thế nào.

126
00:05:49,870 --> 00:05:50,700
Đó là định mệnh.

127
00:05:50,700 --> 00:05:53,451
Bạn biết đấy, cho dữ liệu nhất định, những gì
trang sẽ trông như thế nào.

128
00:05:53,451 --> 00:05:56,158
Bạn có thể dự đoán như thế nào nó sẽ
cư xử và đang làm thế nào

129
00:05:56,158 --> 00:05:57,650
để làm việc khi họ đang đi lại với nhau.

130
00:05:57,650 --> 00:06:00,410
>> Và nếu tôi đã có một triệu linh kiện
ở đây, nó sẽ cư xử như nhau, phải không?

131
00:06:00,410 --> 00:06:02,290
Bạn sẽ không có bất kỳ
mối liên kết kỳ lạ.

132
00:06:02,290 --> 00:06:04,120
Một dữ liệu kết xuất một triệu linh kiện.

133
00:06:04,120 --> 00:06:06,879
Một triệu thành phần có thể
quay trở lại và chỉnh sửa dữ liệu.

134
00:06:06,879 --> 00:06:07,920
Và vì vậy điều này là rất tốt đẹp.

135
00:06:07,920 --> 00:06:10,870
Chúng tôi đang xây dựng composable,
dễ dàng các ứng dụng web khả năng mở rộng.

136
00:06:10,870 --> 00:06:13,150
>> Bạn có một nguồn dữ liệu,
nguồn gốc của sự thật.

137
00:06:13,150 --> 00:06:15,790
Điều đó nói với các thành phần của bạn
làm thế nào để đặt ra các trang,

138
00:06:15,790 --> 00:06:18,190
và các thành phần sẽ
xử lý tương tác.

139
00:06:18,190 --> 00:06:20,150
Và nếu họ muốn thay đổi
điều, chỉ cần đi lại

140
00:06:20,150 --> 00:06:21,750
và nói với các nguồn dữ liệu để thay đổi.

141
00:06:21,750 --> 00:06:22,850
Có lý?

142
00:06:22,850 --> 00:06:26,010
Vì vậy, phản ứng lại là tất cả về sự hiểu biết
làm thế nào để xây dựng một thành phần

143
00:06:26,010 --> 00:06:29,540
và làm thế nào để làm cho thành phần của bạn
tương tác với thế giới bên ngoài.

144
00:06:29,540 --> 00:06:31,850
>> Làm tương tác thành phần
với thế giới bên ngoài

145
00:06:31,850 --> 00:06:34,490
sử dụng công nghệ khác
gọi là tuôn ra, mà

146
00:06:34,490 --> 00:06:36,872
là một khuôn khổ đó là
thêm vào đầu của phản ứng lại.

147
00:06:36,872 --> 00:06:38,330
Chúng tôi sẽ không nói về điều đó.

148
00:06:38,330 --> 00:06:42,990
Chúng ta sẽ nói thêm về, nhất định
dữ liệu, làm thế nào bạn có thể làm cho một thành phần?

149
00:06:42,990 --> 00:06:47,010
>> Và do đó, phản ứng lại là thực sự mát mẻ bởi vì bạn
có thể sử dụng nó với bất kỳ kết thúc trở lại bạn muốn.

150
00:06:47,010 --> 00:06:50,480
Nếu bạn có như một kết thúc trở lại Python,
nếu Python của bạn có thể nhổ ra một số dữ liệu,

151
00:06:50,480 --> 00:06:51,610
Phản ứng có thể làm cho nó.

152
00:06:51,610 --> 00:06:54,700
Nếu bạn không có kết quả đầu ra JS
của dữ liệu, phản ứng lại ám nó.

153
00:06:54,700 --> 00:06:56,890
Ruby ray với
dữ liệu, phản ứng lại ám nó.

154
00:06:56,890 --> 00:07:01,860
>> Vì vậy, Phản ứng về cơ bản là một web
view-- một kết thúc trước với các thành phần

155
00:07:01,860 --> 00:07:03,910
cho bất kỳ nguồn dữ liệu nào.

156
00:07:03,910 --> 00:07:07,145
Và như vậy đi từ nguồn dữ liệu để
phản ứng thành phần là khá dễ dàng.

157
00:07:07,145 --> 00:07:08,770
Đi theo cách khác là một chút khó khăn hơn.

158
00:07:08,770 --> 00:07:10,462
Có sử dụng Flux như tôi đã đề cập trước đây.

159
00:07:10,462 --> 00:07:11,420
Chúng tôi sẽ không nhận được vào đó.

160
00:07:11,420 --> 00:07:13,740
Chúng tôi sẽ tập trung hơn vào các
dữ liệu-to-thành phần phụ.

161
00:07:13,740 --> 00:07:15,880
Bằng cách này bạn có thể thực hiện
mát mẻ, các ứng dụng web thú vị.

162
00:07:15,880 --> 00:07:19,870
Nó sẽ không ảnh hưởng đến thế giới bên ngoài
cho bây giờ, nhưng đó là một câu chuyện khác.

163
00:07:19,870 --> 00:07:22,210
>> OK, vì vậy nếu bạn đang ở đây
cho hội thảo cuối cùng của tôi

164
00:07:22,210 --> 00:07:26,610
bạn sẽ biết rằng tất cả các mã cho
nói chuyện ngày hôm nay là có được tại URL này

165
00:07:26,610 --> 00:07:29,320
ở đây, xin lỗi, URL này ở đây.

166
00:07:29,320 --> 00:07:32,730
Và về cơ bản chúng ta sẽ đi
thông qua bốn bước, có lẽ khoảng năm,

167
00:07:32,730 --> 00:07:33,510
có lẽ không phải năm.

168
00:07:33,510 --> 00:07:37,300
Chúng tôi sẽ chuyển qua bốn bước
xây dựng một mẫu Phản ứng ứng dụng.

169
00:07:37,300 --> 00:07:39,550
Và vì vậy tất cả các mã nguồn
cho mỗi bước của con đường

170
00:07:39,550 --> 00:07:42,216
là có được ngay tại đây, vì vậy nếu
bạn đang theo dõi cùng ở nhà,

171
00:07:42,216 --> 00:07:43,991
cảm thấy miễn phí để kiểm tra nội dung mã này.

172
00:07:43,991 --> 00:07:46,740
Nếu bạn đang theo dõi cùng ở đây,
chúng ta sẽ được hiển thị trên màn hình,

173
00:07:46,740 --> 00:07:47,739
do đó, không lo lắng về nó.

174
00:07:47,739 --> 00:07:50,930
Nhưng nếu bạn đang ở nhà, cảm thấy
truy cập trang web này.

175
00:07:50,930 --> 00:07:56,400
Và, Yeah, bạn sẽ có thể để có được
tất cả các mã bao giờ bạn cần ở đây.

176
00:07:56,400 --> 00:08:01,380
Vì vậy, đó là một cheat sheet tốt là tốt
cho cuộc phiêu lưu tương lai của bạn với phản ứng lại.

177
00:08:01,380 --> 00:08:04,490
Cool, vì vậy nếu tất cả những người ở đây,
và thậm chí nếu bạn đang ở nhà,

178
00:08:04,490 --> 00:08:11,580
kéo lên trang web này, is.gd/cs50react,
không có vốn, không có gạch dưới, không có gì.

179
00:08:11,580 --> 00:08:15,849
>> Bạn sẽ thấy một trang có vẻ
một chút như thế này.

180
00:08:15,849 --> 00:08:17,140
Đây là một điều được gọi là CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen là một cộng tác
môi trường mã hóa

182
00:08:20,030 --> 00:08:23,364
mà tôi có thể viết mã ở đây, và
nó sẽ được tự động gửi đến cho bạn.

183
00:08:23,364 --> 00:08:24,780
Và với cách này, tôi có thể viết mã.

184
00:08:24,780 --> 00:08:26,920
Tôi có thể chạy mã ở đây.

185
00:08:26,920 --> 00:08:33,470
>> Đối với example-- và nếu nó reloads-- thấy,
Tôi đang chạy mã JavaScript trên trang

186
00:08:33,470 --> 00:08:36,390
ngay tại đây, và nó sẽ thấy
tự động trả về một trang web

187
00:08:36,390 --> 00:08:37,980
với mã JavaScript này.

188
00:08:37,980 --> 00:08:40,039
Và vì vậy đây là một cách
để chúng tôi thử ra mã

189
00:08:40,039 --> 00:08:43,089
thực sự nhanh chóng mà không cần phải sử dụng
ID hoặc sử dụng máy tính địa phương của chúng tôi của chúng tôi

190
00:08:43,089 --> 00:08:44,290
hoặc bất cứ điều gì.

191
00:08:44,290 --> 00:08:47,670
Đó là một cách rất nhanh chóng cho bạn mockup
và kiểm tra các loại mã khác nhau.

192
00:08:47,670 --> 00:08:50,560
>> Vì vậy, tôi sẽ được tham gia
Ví dụ mã, đặt nó ở đây.

193
00:08:50,560 --> 00:08:52,374
Chúng tôi đang đi để được làm việc qua nó.

194
00:08:52,374 --> 00:08:54,540
Và nếu bạn đang ở nhà, bạn
có thể kéo này lên là tốt.

195
00:08:54,540 --> 00:08:57,530
Và tôi đã cài đặt
Phản ứng ở đây, vì vậy bạn có thể chỉ

196
00:08:57,530 --> 00:09:00,770
viết mã riêng của bạn ở đây, và
thử nó như là sân chơi riêng của bạn.

197
00:09:00,770 --> 00:09:04,940
>> Yeah, nếu tất cả mọi người
mở liên kết này ở đây.

198
00:09:04,940 --> 00:09:08,080
Xin vui lòng cho tôi một ngón tay cái
up khi bạn có nó mở.

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

200
00:09:10,960 --> 00:09:13,770
Cool, mát mát.

201
00:09:13,770 --> 00:09:16,914
Không có gì ở đây bây giờ, nhưng
chúng ta sẽ thay đổi điều đó rất sớm.

202
00:09:16,914 --> 00:09:21,250
>> OK, vì vậy phản ứng lại là một JavaScript
thư viện, và như vậy,

203
00:09:21,250 --> 00:09:24,480
đòi hỏi phải có kiến ​​thức về JavaScript,
đó là ngôn ngữ lập trình web.

204
00:09:24,480 --> 00:09:27,660
Và nó đang được sử dụng cho những thứ khác
bây giờ quá nhưng chủ yếu phát triển web

205
00:09:27,660 --> 00:09:32,040
ngôn ngữ, vì vậy nếu bạn không quen với
rằng, đọc một trang web được gọi JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Rất tuyệt vời.

207
00:09:32,700 --> 00:09:34,240
Bạn có thể tìm hiểu JavaScript
trong nửa giờ.

208
00:09:34,240 --> 00:09:34,990
Không thể tin được.

209
00:09:34,990 --> 00:09:36,420
>> Vì vậy, hãy đọc.

210
00:09:36,420 --> 00:09:39,960
Chúng tôi cũng là một rất nhiều HTML ở đây vì
chúng tôi đang thiết kế trang web của khóa học.

211
00:09:39,960 --> 00:09:43,890
Vì vậy, nếu bạn không quen với
HTML, hãy kiểm tra HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Tôi nghĩ rằng việc học Phản ứng được một
dễ dàng hơn triệu lần nếu bạn đã

213
00:09:46,520 --> 00:09:47,892
biết các khối xây dựng.

214
00:09:47,892 --> 00:09:50,600
Nếu bạn có các thành phần, đó là
dễ dàng để thực hiện một phần lớn hơn.

215
00:09:50,600 --> 00:09:51,860
Đó là phản ứng lại ngôn ngữ cho bạn.

216
00:09:51,860 --> 00:09:54,270
>> Vì vậy, đi trước và cho
những điều này một đọc.

217
00:09:54,270 --> 00:09:55,070
Tạm dừng video này.

218
00:09:55,070 --> 00:09:57,440
Cho nó một đọc nếu bạn là
tại nhà nếu quý vị không

219
00:09:57,440 --> 00:10:00,794
quen thuộc với HTML hoặc JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, vì vậy những gì chúng ta sẽ
làm là chúng ta sẽ làm cho

221
00:10:02,960 --> 00:10:06,470
một ứng dụng Flashcard rất cơ bản sử dụng phản ứng lại.

222
00:10:06,470 --> 00:10:08,210
Chúng ta sẽ có một thẻ từ.

223
00:10:08,210 --> 00:10:09,880
Bạn có thể lật thẻ qua lại.

224
00:10:09,880 --> 00:10:12,399
Và chúng tôi cũng sẽ có một danh sách
tất cả các thẻ mà chúng ta có,

225
00:10:12,399 --> 00:10:14,190
và nếu chúng ta đang cảm thấy
tham vọng, chúng ta có thể

226
00:10:14,190 --> 00:10:17,060
thể chuyển đổi giữa
xe ô tô bằng cách nhấp vào chúng.

227
00:10:17,060 --> 00:10:20,360
>> Nhưng điều này là, trần của bạn
xương, rất đơn giản Phản ứng ứng dụng.

228
00:10:20,360 --> 00:10:22,560
Và vì vậy đây thực sự là
không nhỏ để thực hiện,

229
00:10:22,560 --> 00:10:26,030
nhưng chúng ta sẽ thấy rằng, nếu bạn làm
này, nó rất, rất dễ dàng để mở rộng nó

230
00:10:26,030 --> 00:10:27,680
nếu người khác giúp bạn với nó.

231
00:10:27,680 --> 00:10:33,750
Vì vậy, chúng ta sẽ phải đi qua bốn bước
bắt đầu từ đầu để xây dựng này.

232
00:10:33,750 --> 00:10:36,740
>> OK, vì vậy bốn bước, chúng tôi sẽ
bắt đầu với bước đầu tiên.

233
00:10:36,740 --> 00:10:39,790
Bước đầu tiên là có được
xây dựng thành phần đầu tiên của bạn.

234
00:10:39,790 --> 00:10:44,830
Như tôi đã nói trước đó, một thành phần trong phản ứng lại
chỉ là một phần tử HTML trên steroid.

235
00:10:44,830 --> 00:10:49,660
Nó chỉ rõ HTML
và một số hành vi, và nó

236
00:10:49,660 --> 00:10:52,600
sẽ xác định như thế nào mọi người
có thể tương tác với nó như thế nào

237
00:10:52,600 --> 00:10:54,270
nó sẽ có bộ nhà nước.

238
00:10:54,270 --> 00:10:57,630
Giống như một nút sẽ biết như thế nào nhiều
lần nó được click vào ví dụ,

239
00:10:57,630 --> 00:11:01,010
và nó sẽ biết làm thế nào để đặt chính nó ra.

240
00:11:01,010 --> 00:11:04,430
>> Vì vậy, chúng ta hãy đi trước và xây dựng của chúng tôi
thành phần đầu tiên sử dụng JavaScript.

241
00:11:04,430 --> 00:11:09,711
Vì vậy, nếu cú ​​pháp có vẻ lạ,
đó là bởi vì nó loại là.

242
00:11:09,711 --> 00:11:11,710
Vì vậy, một lần nữa, chúng ta sẽ
để thực hiện một biến gọi là

243
00:11:11,710 --> 00:11:14,580
ứng dụng bằng cách sử dụng các từ khóa để cho,
mà làm cho một biến,

244
00:11:14,580 --> 00:11:18,210
hãy App bằng React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Phản ứng là một thư viện và có
các chức năng tạo ra lớp.

246
00:11:22,609 --> 00:11:24,400
Và chức năng này
một chút mã mà bạn

247
00:11:24,400 --> 00:11:29,090
có thể sử dụng để tạo ra một mới
Phản ứng loại thành phần.

248
00:11:29,090 --> 00:11:32,780
Và như vậy React.createClass
làm cho một thành phần,

249
00:11:32,780 --> 00:11:35,270
và thành phần này sẽ
có thể làm công cụ.

250
00:11:35,270 --> 00:11:40,460
Điều chính nó có thể làm là làm
một cái gì đó, làm như một hàm.

251
00:11:40,460 --> 00:11:44,500
>> Một lần nữa, nếu chỉ số này là không rõ ràng để
bạn, tôi khuyên bạn nên đi về JS cho mèo

252
00:11:44,500 --> 00:11:45,682
và kiểm tra xem nó ra.

253
00:11:45,682 --> 00:11:47,710
Có phải đó là phóng to cũng đủ?

254
00:11:47,710 --> 00:11:48,490
Mát.

255
00:11:48,490 --> 00:11:50,670
>> Vì vậy, mỗi thành phần nhu cầu
để có một chức năng render.

256
00:11:50,670 --> 00:11:53,010
Render chức năng cho biết,
những gì để tôi in trên màn hình?

257
00:11:53,010 --> 00:11:54,760
Nhưng các thành phần là
vô dụng nếu nó không

258
00:11:54,760 --> 00:11:58,060
biết những gì để in trên màn hình, vì vậy
bạn cần phải có một chức năng render.

259
00:11:58,060 --> 00:12:01,904
>> Vì vậy, trong điều render, bạn
chỉ cần để lại một số HTML.

260
00:12:01,904 --> 00:12:03,820
Và những gì là mát
có một điều được gọi là

261
00:12:03,820 --> 00:12:08,660
JSX, mà là một phần mở rộng của
JavaScript được sử dụng bởi các phản ứng.

262
00:12:08,660 --> 00:12:11,845
Nó cho phép của bạn viết HTML bên trong
của bạn JavaScript,

263
00:12:11,845 --> 00:12:13,970
âm thanh loại lạ khi
đầu tiên bạn nghĩ về nó,

264
00:12:13,970 --> 00:12:15,553
nhưng nó làm cho rất nhiều ý nghĩa sau đó.

265
00:12:15,553 --> 00:12:17,430
Vì vậy, chúng ta có thể làm điều này.

266
00:12:17,430 --> 00:12:21,360
Nếu bạn đã quen thuộc với HTML, tôi biết
chúng ta có một div với một mục đích chung

267
00:12:21,360 --> 00:12:22,790
container cho công cụ.

268
00:12:22,790 --> 00:12:26,380
Chúng tôi có thể trở lại một div, và bên trong
div này, chúng ta có thể đặt công cụ.

269
00:12:26,380 --> 00:12:32,390
>> Vì vậy, chúng ta hãy nói rằng chúng ta muốn làm chỉ
một Flashcard thẳng lên cho bây giờ.

270
00:12:32,390 --> 00:12:34,890
Flashcard, tôi sẽ nói,
sẽ có một câu hỏi và câu trả lời.

271
00:12:34,890 --> 00:12:37,530
Vì vậy, bên trong div này, chúng ta hãy
in ra một đoạn

272
00:12:37,530 --> 00:12:42,155
mà nói question-- là gì
câu trả lời cuối cùng cho cuộc sống, vũ trụ?

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

274
00:12:47,640 --> 00:12:50,345
Và sau đó câu trả lời là
có được, tất nhiên, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Mà không đi lên tốt cả.

277
00:12:59,730 --> 00:13:04,164
Yeah, vì vậy về cơ bản bạn có thể thực sự
viết HTML bên trong JavaScript.

278
00:13:04,164 --> 00:13:06,330
Và điều này là có được
in ra màn hình.

279
00:13:06,330 --> 00:13:08,250
Vì vậy, hãy thử nó ra.

280
00:13:08,250 --> 00:13:09,520
>> Vì vậy, chúng tôi có thành phần của chúng tôi.

281
00:13:09,520 --> 00:13:12,210
Chúng ta cần nói Phản ứng để đưa
các thành phần trên màn hình

282
00:13:12,210 --> 00:13:18,990
vì vậy React.render, vì vậy chúng tôi nhận thấy rằng
điều trị ứng dụng như bất kỳ yếu tố nào khác.

283
00:13:18,990 --> 00:13:21,010
Chúng tôi viết nó vì nó là một phần tử HTML.

284
00:13:21,010 --> 00:13:25,100
Giống như thay vì nói như img
cho hình ảnh hoặc p cho đoạn văn,

285
00:13:25,100 --> 00:13:28,120
bạn viết ứng dụng, do đó, App
đối xử như một phần tử HTML.

286
00:13:28,120 --> 00:13:30,380
Như tôi đã nói, đó là
một yếu tố trên steroid.

287
00:13:30,380 --> 00:13:32,870
>> Vì vậy, bạn render App, và bạn
cung cấp cho nó một nơi để đặt nó.

288
00:13:32,870 --> 00:13:37,170
Và đây là cách bạn có thể
nói cho nó nơi để đặt nó.

289
00:13:37,170 --> 00:13:46,200
Tôi đã tạo ra một div đơn giản trên
Trang được gọi với một ID của trang,

290
00:13:46,200 --> 00:13:48,300
và đó là nơi mà các
yếu tố sẽ đi.

291
00:13:48,300 --> 00:13:49,841
>> Và chúng tôi sẽ không chạy với HTML.

292
00:13:49,841 --> 00:13:53,145
Về cơ bản này là sẽ nhận được
đặt bên trong các phần tử trang này

293
00:13:53,145 --> 00:13:54,270
mà chúng ta có trên màn hình.

294
00:13:54,270 --> 00:13:59,210
Vì vậy, nó chạy mã này, và nó thu hút này
điều trên màn hình, vì vậy ở đây chúng ta đang có.

295
00:13:59,210 --> 00:14:01,770
Chúng tôi đã thực hiện Phản ứng thành phần đầu tiên của chúng tôi.

296
00:14:01,770 --> 00:14:08,000
>> Vì vậy, chỉ là một bản tóm tắt, chúng tôi nhẹ nhàng làm
một loại mới của thành phần, phải không?

297
00:14:08,000 --> 00:14:10,145
Đó là những gì các React.createClass.

298
00:14:10,145 --> 00:14:12,680
Và trong thành phần đó, chúng tôi
nói với nó những gì nó phải làm.

299
00:14:12,680 --> 00:14:15,590
Bất cứ khi nào các thành phần này là để
được in lên màn hình,

300
00:14:15,590 --> 00:14:19,300
nó sẽ in ra các div với
hai đoạn văn bên trong của nó.

301
00:14:19,300 --> 00:14:24,460
>> Và những gì chúng ta đã làm, chúng tôi thực hiện một ứng dụng mới
sử dụng các ký hiệu góc khung ứng dụng.

302
00:14:24,460 --> 00:14:27,160
Chúng tôi nói với nó để đặt nó
bên trong phần tử trang.

303
00:14:27,160 --> 00:14:29,867
Và vì vậy những gì tôi đã làm, nó tạo ra
một ứng dụng mới từ mẫu đó.

304
00:14:29,867 --> 00:14:31,200
Và sau đó tôi nói với nó để làm cho nó.

305
00:14:31,200 --> 00:14:33,680
Vì vậy, nó nói, OK, ứng dụng,
những gì tôi nên in ra?

306
00:14:33,680 --> 00:14:36,970
App cho biết, đi in ra một div
với hai đoạn văn bên trong của nó.

307
00:14:36,970 --> 00:14:40,420
Và đây rồi, có div với chúng tôi
hai đoạn văn bên trong của nó.

308
00:14:40,420 --> 00:14:43,180
Có ý nghĩa cho đến nay?

309
00:14:43,180 --> 00:14:46,690
>> Vì vậy, một lần nữa, cả thách thức của React
chỉ biết làm thế nào để làm cho các thành phần.

310
00:14:46,690 --> 00:14:48,500
Làm thế nào để làm cho
các thành phần làm việc cùng nhau.

311
00:14:48,500 --> 00:14:51,780
Bây giờ chúng ta đã thực hiện lần đầu tiên của chúng tôi
thành phần, chúng ta hãy quay trở lại

312
00:14:51,780 --> 00:14:54,284
và làm cho các thành phần tùy chỉnh.

313
00:14:54,284 --> 00:14:56,700
Vì vậy, bạn biết làm thế nào trong HTML bạn
có thể cung cấp cho lớp các nút của bạn?

314
00:14:56,700 --> 00:14:59,146
Bạn có thể cung cấp cho bạn các neo href.

315
00:14:59,146 --> 00:15:00,770
Bạn có thể cung cấp cho bạn một loại đầu vào, phải không?

316
00:15:00,770 --> 00:15:04,740
Bạn có thể cung cấp thêm tùy chỉnh
tính đến tất cả các yếu tố của bạn

317
00:15:04,740 --> 00:15:06,490
để làm cho nó thú vị hơn.

318
00:15:06,490 --> 00:15:09,030
Và chúng tôi thực sự có thể làm
hiện tượng như vậy.

319
00:15:09,030 --> 00:15:17,500
>> Vì vậy, chúng ta hãy nói rằng chúng ta muốn chúng tôi
ứng dụng để đi làm cho bất kỳ thẻ.

320
00:15:17,500 --> 00:15:19,630
Ngay bây giờ chúng tôi chỉ
rendered một thẻ hardcoded.

321
00:15:19,630 --> 00:15:22,530
Chúng tôi biết chỉ có một
thẻ nó có thể làm, vì vậy chúng tôi

322
00:15:22,530 --> 00:15:25,960
sẽ cố gắng và thay đổi điều này ngay bây giờ để
rằng chúng tôi chỉ có thể cung cấp cho nó một số thẻ.

323
00:15:25,960 --> 00:15:27,410
Nó sẽ in ra các thẻ.

324
00:15:27,410 --> 00:15:29,380
>> Bạn phải cố gắng và làm cho bạn
thành phần một mục đích rất chung chung.

325
00:15:29,380 --> 00:15:31,654
Vì vậy, cách này tôi có thể gửi email
này người bạn của tôi và được như thế,

326
00:15:31,654 --> 00:15:33,820
bất cứ điều gì bạn có flashcard,
chỉ cần ăn nó vào đây,

327
00:15:33,820 --> 00:15:35,290
và nó sẽ làm nó bằng chính nó.

328
00:15:35,290 --> 00:15:37,650
Bạn có thể đặt khác
thứ trong ứng dụng của riêng bạn.

329
00:15:37,650 --> 00:15:40,600
>> Nhưng trước tiên, chúng ta hãy phá vỡ này
lên thành hai thành phần,

330
00:15:40,600 --> 00:15:44,500
nhưng chúng tôi muốn tách các thẻ
phần in từ phần ứng dụng thực tế.

331
00:15:44,500 --> 00:15:46,660
Vì vậy, những gì chúng ta có thể làm là chúng tôi
có thể thay đổi điều này từ App

332
00:15:46,660 --> 00:15:51,300
để CardView, chỉ một
tên mới cho các ứng dụng,

333
00:15:51,300 --> 00:15:54,450
và chúng tôi có thể làm cho một mới
thành phần được gọi App,

334
00:15:54,450 --> 00:15:56,336
Không nên nhầm lẫn với App cũ.

335
00:15:56,336 --> 00:16:00,730
Chúng tôi đã có createClass,
và như trong HTML,

336
00:16:00,730 --> 00:16:03,590
bạn có thể tổ Phản ứng linh kiện
bên trong của mỗi khác.

337
00:16:03,590 --> 00:16:16,430
>> Vì vậy, trong này làm cho chức năng,
trả lại chức năng CardView,

338
00:16:16,430 --> 00:16:18,234
và đây là điều chính xác.

339
00:16:18,234 --> 00:16:19,400
Xem lý do tại sao nó là điều tương tự?

340
00:16:19,400 --> 00:16:22,590
Thay vì vẽ chỉ các ứng dụng mà
có div và ghép nối bên trong của nó,

341
00:16:22,590 --> 00:16:26,194
ứng dụng ám CardView, và
CardView ám div và đoạn văn.

342
00:16:26,194 --> 00:16:29,110
Vì vậy, đây là ví dụ đầu tiên của chúng tôi
yếu tố làm tổ bên trong của mỗi khác.

343
00:16:29,110 --> 00:16:32,177
Điều đó có ý nghĩa?

344
00:16:32,177 --> 00:16:33,760
Vì vậy, một lần nữa, chúng tôi có một yếu tố CardView.

345
00:16:33,760 --> 00:16:37,250
Chúng tôi có các yếu tố ứng dụng
rằng nó lớn hơn.

346
00:16:37,250 --> 00:16:40,990
>> OK, vì vậy chúng tôi muốn chúng tôi CardView-- nếu bạn
cung cấp cho một CardView tốt một thẻ nhất định,

347
00:16:40,990 --> 00:16:43,370
nó sẽ in ra cho bạn, phải không?

348
00:16:43,370 --> 00:16:48,050
Vì vậy, đầu tiên, chúng ta cần phải làm một tấm,
vì vậy hãy làm cho một đối tượng thẻ.

349
00:16:48,050 --> 00:17:02,930
Vì vậy, để thẻ của tôi equal--
nếu bạn đang quen thuộc,

350
00:17:02,930 --> 00:17:05,260
đây chỉ là các ký hiệu định
đối tượng trong JavaScript.

351
00:17:05,260 --> 00:17:09,280
Nó giống như là một cấu trúc
trong C, vì vậy chúng tôi đã thực hiện một thẻ,

352
00:17:09,280 --> 00:17:15,920
và vì vậy bây giờ chúng ta có thể vượt qua thẻ này như là
một tài sản hoặc là thuộc tính trong HTML

353
00:17:15,920 --> 00:17:17,290
thuật ngữ để ứng dụng của chúng tôi.

354
00:17:17,290 --> 00:17:20,210
Vì vậy, chúng ta có thể làm được điều này, App
thẻ bằng myCard.

355
00:17:20,210 --> 00:17:23,200
>> Bạn biết làm thế nào trong đầu vào, bạn làm
loại đầu vào bằng văn bản hoặc nút

356
00:17:23,200 --> 00:17:25,240
lớp bằng với BTN cho bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Cùng ý tưởng, thẻ App equals--
bạn phải đặt dấu ngoặc here--

358
00:17:29,500 --> 00:17:33,830
Thẻ App bằng myCard, vì vậy đây
nói rằng chúng ta có đối tượng thẻ này.

359
00:17:33,830 --> 00:17:39,149
Tôi sẽ vượt qua nó như một
tài sản cho các thành phần ứng dụng.

360
00:17:39,149 --> 00:17:41,440
Và thành phần ứng dụng này sẽ
có thể truy cập nó và làm

361
00:17:41,440 --> 00:17:43,580
công cụ thú vị với nó.

362
00:17:43,580 --> 00:17:47,650
>> Vì vậy, ứng dụng của chúng là có được
đưa ra một thẻ, vì vậy bây giờ,

363
00:17:47,650 --> 00:17:49,980
chúng ta hãy có những ứng dụng chỉ cần cung cấp cho
thẻ cho CardView

364
00:17:49,980 --> 00:17:53,110
bản thân bởi vì như các ứng dụng không phải là
sẽ biết phải làm gì với nó,

365
00:17:53,110 --> 00:17:54,850
vì vậy chúng tôi sẽ chỉ cho nó vào CardView.

366
00:17:54,850 --> 00:18:00,050
Vì vậy, chúng tôi sẽ vượt qua nó
cùng một cách, thẻ bằng,

367
00:18:00,050 --> 00:18:05,426
và do đó, mỗi thành phần có thể truy cập
điều đó đã được trao cho nó.

368
00:18:05,426 --> 00:18:07,800
Họ có thể truy cập các thuộc tính
đã được trao cho nó

369
00:18:07,800 --> 00:18:09,470
bằng cách sử dụng cú pháp này, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Vì vậy, những gì xảy ra ở đây được
đã có đối tượng myCard.

372
00:18:14,920 --> 00:18:18,250
Bạn vượt qua nó vào ứng dụng
sử dụng thẻ App bằng myCard.

373
00:18:18,250 --> 00:18:21,420
Đó là đối tượng thẻ được trao cho ứng dụng của bạn.

374
00:18:21,420 --> 00:18:24,400
Các ứng dụng có thể truy cập nó
như this.props.card.

375
00:18:24,400 --> 00:18:28,780
Nó giống như là một hình ảnh
biết những gì nó là nguồn.

376
00:18:28,780 --> 00:18:31,972
>> Ứng dụng này biết những gì nó có thẻ
là, và nó có thể làm mọi thứ với nó.

377
00:18:31,972 --> 00:18:32,930
Nó có thể làm tính toán.

378
00:18:32,930 --> 00:18:35,290
Nó có thể đưa ra quyết định dựa tắt của nó.

379
00:18:35,290 --> 00:18:39,950
>> Để bây giờ, tôi sẽ vượt qua
this.props.card vào CardView.

380
00:18:39,950 --> 00:18:43,420
Có ý nghĩa cho đến nay?

381
00:18:43,420 --> 00:18:45,210
Nó sẽ làm cho ý nghĩa hơn bây giờ.

382
00:18:45,210 --> 00:18:46,990
>> OK, vì vậy bây giờ chúng ta đang ở CardView.

383
00:18:46,990 --> 00:18:51,719
CardView của chúng tôi, đưa ra các thẻ, nên
in ra câu hỏi và câu trả lời của mình.

384
00:18:51,719 --> 00:18:54,510
Ngay bây giờ chúng tôi chỉ in ra một số
câu hỏi và câu trả lời hardcoded.

385
00:18:54,510 --> 00:18:57,720
Chúng tôi cần phải tìm out-- chúng ta cần
yêu cầu các thẻ mà họ đã cho chúng tôi

386
00:18:57,720 --> 00:19:01,360
các câu hỏi và câu trả lời là gì, và
sau đó in này ra vào màn hình.

387
00:19:01,360 --> 00:19:02,470
>> Vì vậy, chúng ta có thể làm điều này ở đây.

388
00:19:02,470 --> 00:19:06,135
Trong làm begin-- đầu tiên làm bằng.

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

390
00:19:08,710 --> 00:19:13,050
Vì vậy, những gì chúng tôi đang làm ở đây chúng ta biết đó là
các thẻ được ban cho chúng ta để một tài sản,

391
00:19:13,050 --> 00:19:13,580
bên phải?

392
00:19:13,580 --> 00:19:15,930
Nó cho chúng ta như là một đầu vào.

393
00:19:15,930 --> 00:19:19,440
Giống như nó gần như
đối số cho hàm.

394
00:19:19,440 --> 00:19:22,810
Thẻ là một lập luận
hầu như để CardView này.

395
00:19:22,810 --> 00:19:25,239
>> Chúng tôi sẽ trích xuất, và đưa
nó vào câu hỏi biến.

396
00:19:25,239 --> 00:19:27,280
Hãy chắc chắn rằng câu trả lời đi
câu trả lời khác nhau.

397
00:19:27,280 --> 00:19:31,130
Nhắc nhở rằng thẻ để trả lời.

398
00:19:31,130 --> 00:19:35,072
Và bây giờ chúng ta có những,
thay vì in ra văn bản đó,

399
00:19:35,072 --> 00:19:37,030
chúng ta sẽ in ra
bất cứ điều gì họ đã cho chúng tôi.

400
00:19:37,030 --> 00:19:43,580
>> Vì vậy, đây stuff-- vì vậy chúng tôi đang đi
để đưa ra câu trả lời.

401
00:19:43,580 --> 00:19:46,380
Hãy xem, nếu công trình này.

402
00:19:46,380 --> 00:19:52,800
Mát mẻ, vì vậy chúng ta hãy bước qua nó
một lần nữa cho chắc chắn.

403
00:19:52,800 --> 00:20:00,470
>> Vì vậy, thẻ của tôi là đối tượng thẻ, và chúng tôi
được cho rằng thẻ vào ứng dụng.

404
00:20:00,470 --> 00:20:04,790
Và các ứng dụng được sẽ đi
thẻ và đưa nó cho CardView.

405
00:20:04,790 --> 00:20:09,190
Và CardView này cho biết, nếu bạn
cho tôi bất kỳ đối tượng Flashcard,

406
00:20:09,190 --> 00:20:11,920
Tôi sẽ in ra câu hỏi của mình
và câu trả lời của mình, đúng không?

407
00:20:11,920 --> 00:20:14,590
>> Vì vậy, những gì tôi có thể làm là tôi có thể
gửi mã này, đầu tiên

408
00:20:14,590 --> 00:20:16,580
như 10 dòng mã của tôi, người bạn của tôi.

409
00:20:16,580 --> 00:20:18,820
Ông có thể nhúng nó trong
ứng dụng của riêng mình.

410
00:20:18,820 --> 00:20:27,200
Và miễn là anh đã làm điều tương tự,
như thẻ CardView bằng này,

411
00:20:27,200 --> 00:20:30,580
miễn là ông đã tạo ra CardView
và cho nó là thông tin đúng,

412
00:20:30,580 --> 00:20:31,987
ông có thể làm thẻ của riêng mình.

413
00:20:31,987 --> 00:20:34,320
Và do đó, cách này, đó là một thực sự
cách mát mẻ cho bạn xây dựng

414
00:20:34,320 --> 00:20:35,906
thành phần sử dụng mỗi khác, phải không?

415
00:20:35,906 --> 00:20:38,280
Thẻ này, tôi có thể xuất bản
CardView này trên internet,

416
00:20:38,280 --> 00:20:39,790
và người ta sẽ có thể sử dụng nó.

417
00:20:39,790 --> 00:20:45,070
Vì vậy, về cơ bản, nó giống như một trong những
chức năng tiêu chuẩn trong thư viện C.

418
00:20:45,070 --> 00:20:47,280
>> Đây là một chức năng mà
ai đó đã viết nó.

419
00:20:47,280 --> 00:20:48,419
Bạn cho một đầu vào nhất định.

420
00:20:48,419 --> 00:20:49,710
Nó sẽ tạo ra một sản lượng nhất định.

421
00:20:49,710 --> 00:20:50,890
Bạn không quan tâm làm thế nào nó hoạt động trong nội bộ.

422
00:20:50,890 --> 00:20:53,790
Miễn là bạn cung cấp cho nó ngay
đầu vào, nó sẽ làm cho đầu ra bên phải.

423
00:20:53,790 --> 00:20:57,850
>> Và một thành phần có thể được
nghĩ theo cùng một cách.

424
00:20:57,850 --> 00:21:00,280
CardView này giống như
một chức năng thư viện.

425
00:21:00,280 --> 00:21:03,400
Nếu bạn cung cấp cho nó một số thẻ
như là một tài sản, nó sẽ thấy

426
00:21:03,400 --> 00:21:05,095
in ra nội dung của thẻ đó.

427
00:21:05,095 --> 00:21:16,820
Cũng giống như nếu tôi thay đổi thẻ của tôi để
thay vì được như thế là những gì 5 cộng với 37,

428
00:21:16,820 --> 00:21:19,210
nó sẽ cập nhật cho phù hợp.

429
00:21:19,210 --> 00:21:21,955
Vì vậy, chỉ bằng cách thay đổi các đầu vào,
nó được một sản lượng nhất định.

430
00:21:21,955 --> 00:21:24,830
Vì vậy, bạn có thể nghĩ đến các thành phần gần như
như các chức năng theo cách này, mà

431
00:21:24,830 --> 00:21:25,920
bạn có thể đặt lại với nhau.

432
00:21:25,920 --> 00:21:29,440
Bạn nhận được đầu vào, như CardView này
như đầu vào, bạn sẽ có được đầu ra.

433
00:21:29,440 --> 00:21:31,900
Trong trường hợp này, đầu ra là HTML.

434
00:21:31,900 --> 00:21:34,404
Có ý nghĩa cho đến nay?

435
00:21:34,404 --> 00:21:36,890
Mát mẻ, vì vậy một lần nữa, tính chất này là
làm thế nào bạn có thể chuyển thông tin

436
00:21:36,890 --> 00:21:40,900
vào và ra của các thành phần.

437
00:21:40,900 --> 00:21:42,740
>> OK, vì vậy chúng ta hãy làm này
Điều tương tác.

438
00:21:42,740 --> 00:21:44,450
Ngay bây giờ nó là loại nhàm chán.

439
00:21:44,450 --> 00:21:45,520
[Không nghe thấy] là gì?

440
00:21:45,520 --> 00:21:48,210
Bạn có thể in một số ra,
nhưng đó là tất cả những gì có thể làm.

441
00:21:48,210 --> 00:21:51,550
>> Vì vậy, chúng ta hãy quay trở lại
câu hỏi cũ chỉ cho bây giờ.

442
00:21:51,550 --> 00:21:54,405
OK, vậy ngay bây giờ các thành phần
là nhàm chán bởi vì tất cả họ làm,

443
00:21:54,405 --> 00:21:55,030
họ có được đầu vào.

444
00:21:55,030 --> 00:21:56,100
Họ làm cho đầu ra, phải không?

445
00:21:56,100 --> 00:21:57,049
Đó là loại nhàm chán.

446
00:21:57,049 --> 00:21:59,090
Chúng tôi muốn có chúng tôi
thành phần để có thể có

447
00:21:59,090 --> 00:22:02,150
một số loại nội bộ nhà nước,
như nhớ một cái gì đó.

448
00:22:02,150 --> 00:22:05,320
>> Đối với một Flashcard, cho
Ví dụ, những loại nhà nước

449
00:22:05,320 --> 00:22:07,550
bạn có thể muốn
nhớ cho một Flashcard?

450
00:22:07,550 --> 00:22:09,740
Những gì tình trạng tạm thời
bạn có thể muốn nhớ

451
00:22:09,740 --> 00:22:12,491
cho một Flashcard trong một ứng dụng flashcard?

452
00:22:12,491 --> 00:22:13,990
Đung Cho dù nó được lộn?

453
00:22:13,990 --> 00:22:14,990
Neel Mehta: Ừ, phải.

454
00:22:14,990 --> 00:22:17,665
Vì vậy, bạn có thể muốn giữ
theo dõi là bạn phải đối mặt lên hoặc là

455
00:22:17,665 --> 00:22:19,100
bạn phải đối mặt xuống trên thẻ.

456
00:22:19,100 --> 00:22:23,420
Trên Facebook, ví dụ, bạn sẽ
muốn nhớ nơi trên news feed

457
00:22:23,420 --> 00:22:25,870
là bạn hay thích ai là hồ sơ
bạn đang làm ngay bây giờ.

458
00:22:25,870 --> 00:22:30,127
>> Trên Messenger, giống như những gì văn bản bạn
gõ vào hộp nhập liệu, phải không?

459
00:22:30,127 --> 00:22:31,710
Nếu bạn refresh trang web, nó đi xa.

460
00:22:31,710 --> 00:22:32,793
Nhưng bạn không thực sự quan tâm.

461
00:22:32,793 --> 00:22:33,770
Nó chỉ là tạm thời.

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

463
00:22:34,548 --> 00:22:36,152
>> Đung [Không nghe thấy]

464
00:22:36,152 --> 00:22:38,360
Neel Mehta: Giống như một đèn flash
thẻ, như bạn có thể được nhìn thấy

465
00:22:38,360 --> 00:22:40,290
phía câu hỏi hoặc bên cạnh câu trả lời?

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

467
00:22:41,070 --> 00:22:43,270
>> Neel Mehta: Giống như một
hai phe Flashcard, phải không?

468
00:22:43,270 --> 00:22:46,370
Yeah, vì vậy bạn muốn
có ý tưởng này của doanh nghiệp

469
00:22:46,370 --> 00:22:50,370
Tôi có tài sản, mà là giống như đầu vào,
nhưng nhà nước, mà là tạm thời, uh,

470
00:22:50,370 --> 00:22:51,839
bạn đang ở đâu trên trang, phải không?

471
00:22:51,839 --> 00:22:54,380
Một lần nữa, tôi đã nói trong Facebook
Messenger, tôi có như thế mà người

472
00:22:54,380 --> 00:22:56,550
bạn đang xem Facebook
hoặc những người là hồ sơ, phải không?

473
00:22:56,550 --> 00:22:58,030
>> Điều này chỉ là tạm thời.

474
00:22:58,030 --> 00:23:01,200
Điều quan trọng là để cho người sử dụng
những gì đang xảy ra, nhưng làm mới trang.

475
00:23:01,200 --> 00:23:02,250
Nó không thực sự quan trọng.

476
00:23:02,250 --> 00:23:04,530
Vì vậy, nó là trạng thái tạm thời,
vì vậy chúng tôi tất cả những gì nhà nước.

477
00:23:04,530 --> 00:23:06,250
>> Vì vậy, một lần nữa, có đạo cụ và nhà nước.

478
00:23:06,250 --> 00:23:09,084
Đạo cụ được đầu vào cho trước
từ nguồn dữ liệu của bạn.

479
00:23:09,084 --> 00:23:10,250
Nhà nước chỉ giống như mặc định.

480
00:23:10,250 --> 00:23:13,700
Nó giống như thứ mà
làm điều tương tác.

481
00:23:13,700 --> 00:23:17,720
>> Vì vậy, trong chúng tôi CardView-- chúng ta hãy có
chúng tôi CardView-- vì vậy nó đã được tốt đẹp.

482
00:23:17,720 --> 00:23:21,420
Những gì chúng tôi đang đi làm ở đây, chúng ta đang đi
chạm CardView và chỉ CardView.

483
00:23:21,420 --> 00:23:25,105
Và do đó, người bạn của tôi nhận được điều này, họ
sẽ không nhận thấy bất kỳ sự khác biệt.

484
00:23:25,105 --> 00:23:27,230
Họ sẽ không phải thay đổi
bất kỳ mã riêng của họ,

485
00:23:27,230 --> 00:23:29,410
nhưng họ sẽ thấy họ
CardView đã được cải tiến lên.

486
00:23:29,410 --> 00:23:31,270
Đó là một phần tốt đẹp về thành phần.

487
00:23:31,270 --> 00:23:35,290
>> OK, vì vậy trong CardView của chúng tôi, chúng ta hãy cố gắng và
theo dõi xem chúng ta đang dần lên

488
00:23:35,290 --> 00:23:36,560
hoặc úp mặt xuống.

489
00:23:36,560 --> 00:23:40,480
Trong phản ứng lại chúng ta làm điều này bằng cách đầu tiên
xác định trạng thái ban đầu.

490
00:23:40,480 --> 00:23:42,070
Trường hợp không thẻ bắt đầu?

491
00:23:42,070 --> 00:23:48,480
>> Vì vậy, có một chức năng gọi là getInitialState
chức năng, và chúng tôi trở về một đối tượng.

492
00:23:48,480 --> 00:23:53,310
Đối tượng này chứa một số nhà nước, và
một nhà nước chỉ là một cặp khóa-giá trị.

493
00:23:53,310 --> 00:23:56,950
Giống như trong Hướng dẫn, bạn có một khóa và một
giá trị, bạn có tên như là một chuỗi.

494
00:23:56,950 --> 00:24:01,410
>> Trong trường hợp này, chúng ta hãy nói trước là đúng.

495
00:24:01,410 --> 00:24:03,760
Điều này nói rằng chúng tôi có một nhà nước.

496
00:24:03,760 --> 00:24:06,570
Một thành phần của nhà nước
là một thuộc tính gọi là phía trước.

497
00:24:06,570 --> 00:24:09,649
[Không nghe thấy], vì vậy mặc định,
chúng ta đang ở phía trước của thẻ,

498
00:24:09,649 --> 00:24:11,440
và chúng ta có thể thay đổi điều này
khi chúng tôi lật thẻ.

499
00:24:11,440 --> 00:24:13,380
Có lý?

500
00:24:13,380 --> 00:24:18,190
>> OK, vì vậy trong render, ngay bây giờ, chúng tôi
hiển thị các câu hỏi và câu trả lời.

501
00:24:18,190 --> 00:24:20,860
Bây giờ những gì chúng ta nên làm
được hiển thị các câu hỏi

502
00:24:20,860 --> 00:24:24,370
nếu chúng ta đang ở trên mặt trước của thẻ vì vậy
câu trả lời là cho mặt sau của thẻ.

503
00:24:24,370 --> 00:24:26,850
Đó là lý do tại sao tất cả các bạn làm
các thẻ tương tác.

504
00:24:26,850 --> 00:24:28,100
Vì vậy, hãy cố gắng và đến nay ở đây.

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

506
00:24:31,600 --> 00:24:33,620
Vâng, đầu tiên chỉ cần thực hiện một biến.

507
00:24:33,620 --> 00:24:37,790
Chúng tôi có thể yêu cầu doanh nghiệp this.state.front.

508
00:24:37,790 --> 00:24:42,010
Chúng tôi truy cập nêu cùng chúng tôi
đạo cụ truy cập, vì vậy this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Nếu chúng tôi phía trước, sau đó văn bản
là this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Nếu chúng ta đang ở trên mặt trước của
thẻ, chúng tôi sẽ cố gắng và lấy

512
00:24:51,360 --> 00:24:52,485
các câu hỏi từ các thẻ.

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

514
00:24:54,782 --> 00:24:57,240
Nếu không, nếu chúng ta đang ở trên lưng
của thẻ, chúng ta làm gì?

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

516
00:25:01,830 --> 00:25:02,750
>> Đung Các câu trả lời?

517
00:25:02,750 --> 00:25:05,041
>> Neel Mehta: Yep, vì vậy văn bản
bằng this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Nhưng nếu bạn thông báo, chúng tôi đang sử dụng
nhà nước để thực hiện một quyết định

520
00:25:10,930 --> 00:25:14,420
bởi vì bây giờ các thành phần
sẽ khác

521
00:25:14,420 --> 00:25:16,710
dựa trên những tương tác như thế nào với nó.

522
00:25:16,710 --> 00:25:20,355
Vì vậy, thay vì in ra này,
chúng tôi sẽ chỉ in ra các văn bản.

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

524
00:25:25,270 --> 00:25:28,650
Cool, vì vậy bây giờ, như bạn thấy,
chúng ta chỉ thấy những câu hỏi.

525
00:25:28,650 --> 00:25:37,720
Và nếu tôi thay đổi trạng thái ở đây bằng tay
phía trước là sai, chúng tôi có được 42 trở lại.

526
00:25:37,720 --> 00:25:39,720
>> Vì vậy, một lần nữa, thành phần này
có nhà nước riêng của mình.

527
00:25:39,720 --> 00:25:43,440
Giống như một nút mà biết được liệu
nó được nhấn hay không,

528
00:25:43,440 --> 00:25:46,080
điều này biết những gì trên
phía trước hoặc phía sau.

529
00:25:46,080 --> 00:25:48,320
Theo mặc định, nó ở phía trước.

530
00:25:48,320 --> 00:25:50,840
Và sau đó nếu nó trên mặt trước,
chúng tôi sẽ in ra các câu hỏi.

531
00:25:50,840 --> 00:25:53,106
Nếu nó trên lưng, chúng tôi sẽ
in ra các câu trả lời.

532
00:25:53,106 --> 00:25:54,980
Vì vậy, một lần nữa, thông tin
nhất định là như nhau.

533
00:25:54,980 --> 00:25:59,090
Nó chỉ trông khác nhau
dựa vào cách bạn chương trình đó.

534
00:25:59,090 --> 00:26:02,670
Vì vậy, ví dụ, Facebook Messenger,
thậm chí nếu bạn có được nguồn dữ liệu giống nhau,

535
00:26:02,670 --> 00:26:05,170
nó có thể trông khác nhau
bởi vì nhà nước là khác nhau.

536
00:26:05,170 --> 00:26:08,421
Bạn đang tìm kiếm một
nhắn người khác nhau của.

537
00:26:08,421 --> 00:26:10,930
>> OK, vì vậy đây là tất cả tốt và
tốt, nhưng bây giờ những gì là thực sự

538
00:26:10,930 --> 00:26:15,940
làm cho chúng ta có thể thay đổi, cho dù
thẻ của chúng tôi là trước hoặc sau.

539
00:26:15,940 --> 00:26:19,010
Chúng tôi có thể làm điều này bằng cách thêm một flip
nút, một nút vào thẻ mà

540
00:26:19,010 --> 00:26:22,950
sẽ lật thẻ nếu nó [không nghe được].

541
00:26:22,950 --> 00:26:31,770
Vì vậy, chúng ta hãy thêm một nút ở đây, điều này
nút, và nút này sẽ nói flip.

542
00:26:31,770 --> 00:26:35,650
>> Và do đó, ngay bây giờ, nó
không làm bất cứ điều gì.

543
00:26:35,650 --> 00:26:37,075
Nó chỉ có vẻ tốt đẹp.

544
00:26:37,075 --> 00:26:43,650
Những gì chúng tôi có thể làm là chúng ta có thể thêm một cú nhấp chuột
xử lý, onClick bằng this.flip,

545
00:26:43,650 --> 00:26:44,820
và chúng tôi sẽ xác định lật sau.

546
00:26:44,820 --> 00:26:47,120
Nhưng về cơ bản, onClick
là một chức năng mà

547
00:26:47,120 --> 00:26:48,675
được gọi khi người dùng nhấp chuột nó.

548
00:26:48,675 --> 00:26:52,330
>> Vì vậy, các nút sẽ biết
khi nó được nhấp vào.

549
00:26:52,330 --> 00:26:54,750
Đã đi nó được nhấn vào,
nó sẽ lật thẻ.

550
00:26:54,750 --> 00:26:58,382
Đó là loại giống như của bạn
giao bánh pizza guy.

551
00:26:58,382 --> 00:27:01,590
Bạn giống như, tất cả các quyền, bất cứ khi nào một ai đó
gọi tôi, tôi sẽ cung cấp bánh pizza, phải không?

552
00:27:01,590 --> 00:27:03,420
>> Bạn đăng ký listener này.

553
00:27:03,420 --> 00:27:04,530
Bạn lắng nghe một sự kiện.

554
00:27:04,530 --> 00:27:07,657
Bạn có được gọi, và khi
sự kiện xảy ra, bạn làm điều gì đó.

555
00:27:07,657 --> 00:27:08,240
Bạn nhận được pizza.

556
00:27:08,240 --> 00:27:11,480
Trong trường hợp này, khi bạn
nhấn vào, bạn lật thẻ.

557
00:27:11,480 --> 00:27:14,560
>> Và vì vậy chúng tôi cần phải xác định một
chức năng sẽ lật thẻ,

558
00:27:14,560 --> 00:27:17,930
vì vậy chúng tôi sẽ viết ngay mà
ở đây, lật chức năng.

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

560
00:27:20,850 --> 00:27:23,680
Và vì vậy những gì bạn nghĩ lật sẽ làm gì?

561
00:27:23,680 --> 00:27:27,180
Một lần nữa điều này được gọi khi
chúng ta click vào nút flip.

562
00:27:27,180 --> 00:27:29,406
Nên các chức năng lật làm những gì?

563
00:27:29,406 --> 00:27:34,136
>> Đung đổi this.state.front
từ true sang false, false thành true.

564
00:27:34,136 --> 00:27:38,420
>> Neel Mehta: Yep, do đó, có bất cứ điều gì
this.front is-- trạng thái phía trước là.

565
00:27:38,420 --> 00:27:40,930
Đi nhà nước phía trước, nếu
đó là sự thật, làm cho nó sai.

566
00:27:40,930 --> 00:27:42,530
Nếu nó sai, làm cho nó đúng, phải không?

567
00:27:42,530 --> 00:27:45,330
Vì vậy, hãy cố gắng đó.

568
00:27:45,330 --> 00:27:48,240
>> Bạn không thể thay đổi trạng thái
chỉ bằng cách làm this.state.

569
00:27:48,240 --> 00:27:50,380
Bạn không thể làm điều này.

570
00:27:50,380 --> 00:27:52,030
Bạn không thể làm điều đó.

571
00:27:52,030 --> 00:27:55,810
Bạn phải sử dụng một chức năng
gọi this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Vì vậy, bạn có thể nói this.setState trước
ruột nơi này, một lần nữa, các dấu chấm than

573
00:28:03,230 --> 00:28:04,330
điểm có nghĩa là ngược lại.

574
00:28:04,330 --> 00:28:07,420
Tôi đoán nếu điều này. state.front
là đúng, nó sẽ biến giả.

575
00:28:07,420 --> 00:28:09,170
Vì vậy, chúng tôi sẽ thiết lập bang
từ true sang false.

576
00:28:09,170 --> 00:28:11,430
Nếu nó sai, chúng tôi sẽ
thiết lập nó false thành true.

577
00:28:11,430 --> 00:28:17,210
>> Chỉ cần nhận thấy rằng chúng tôi có thể lấy và hơi
khác nhau, và như vậy chúng ta hãy cố gắng này.

578
00:28:17,210 --> 00:28:18,675
Bada bing, xem này.

579
00:28:18,675 --> 00:28:21,810
Các nút lật sẽ bây giờ
chuyển phía trước để trở lại trạng thái.

580
00:28:21,810 --> 00:28:24,990
>> Và do đó, đây là nơi mà bạn nhìn thấy một
chút chút về sự kỳ diệu của phản ứng lại.

581
00:28:24,990 --> 00:28:28,420
Giống như chúng ta không bao giờ nói với nó nó phải render lại.

582
00:28:28,420 --> 00:28:30,910
Chúng tôi không bao giờ nói với nó vẽ lại bất cứ điều gì.

583
00:28:30,910 --> 00:28:32,630
Nếu bạn đang làm điều này
mà không có phản ứng lại, bạn muốn

584
00:28:32,630 --> 00:28:34,588
đã thích đối với: khi
nút lật được nhấp,

585
00:28:34,588 --> 00:28:37,290
bạn phải nói với nó để
tự tái render, phải không?

586
00:28:37,290 --> 00:28:43,050
>> Phản ứng được thực sự mát mẻ trong đó nếu bạn
cung cấp cho nó một trạng thái nhất định và các tài sản,

587
00:28:43,050 --> 00:28:45,760
nó sẽ luôn luôn làm
hiện tượng như vậy.

588
00:28:45,760 --> 00:28:48,690
Và như vậy khi chúng tôi bao giờ chúng ta thay đổi
nhà nước và các thuộc tính,

589
00:28:48,690 --> 00:28:50,819
phản ứng chỉ cần tái làm cho toàn bộ điều.

590
00:28:50,819 --> 00:28:52,860
Nó biết rằng có một
one-to-một trong những thư

591
00:28:52,860 --> 00:28:57,270
giữa nhà nước và tham số và HTML.

592
00:28:57,270 --> 00:29:00,110
Vì vậy, bất cứ khi nào một trong những người
thay đổi bằng cách thông qua một nhà nước tập hợp,

593
00:29:00,110 --> 00:29:03,750
nó sẽ thay đổi như thế nào
tiền công còn lại để tạo hình.

594
00:29:03,750 --> 00:29:06,650
Và như vậy về cơ bản cũng giống như phản ứng lại
chờ đợi cho bạn để thay đổi.

595
00:29:06,650 --> 00:29:09,870
>> Bất cứ khi nào nó thay đổi một cái gì đó,
nó sẽ lại làm cho toàn bộ trang.

596
00:29:09,870 --> 00:29:12,480
Và nếu nó có vẻ không hiệu quả,
đó là bởi vì nó sẽ được,

597
00:29:12,480 --> 00:29:15,050
nhưng phản ứng sử dụng một điều
được gọi là một Shadow DOM.

598
00:29:15,050 --> 00:29:19,950
Thay vì vẽ trang trực tiếp, nó
giữ cây HTML ảo trong bộ nhớ.

599
00:29:19,950 --> 00:29:23,620
>> Bạn biết đấy, HTML là giống như một cái cây,
giống như một cấu trúc dữ liệu phân cấp.

600
00:29:23,620 --> 00:29:28,990
Nó giữ một cây giả trong bộ nhớ,
và bất cứ khi nào bạn cập nhật trang,

601
00:29:28,990 --> 00:29:31,940
nó sẽ vẽ giả khác
cây, và nó sẽ tính toán

602
00:29:31,940 --> 00:29:35,120
những thay đổi cần thiết để làm cho
Trang để làm cho hai cây bằng nhau.

603
00:29:35,120 --> 00:29:38,540
Vì vậy, về cơ bản, nó hầu như
lại làm cho rất nhiều.

604
00:29:38,540 --> 00:29:41,540
Và sau đó nó chỉ muốn thay đổi
trang trong tweaks ít khi cần thiết,

605
00:29:41,540 --> 00:29:44,240
vì vậy nó rất, rất, rất hiệu quả.

606
00:29:44,240 --> 00:29:46,970
>> Vì vậy, về cơ bản sẽ phản ứng lại
bất cứ khi nào bạn thay đổi một cái gì đó,

607
00:29:46,970 --> 00:29:49,010
nó sẽ lại làm cho trang hầu.

608
00:29:49,010 --> 00:29:52,830
Nó sẽ tìm ra những gì tôi cần phải
thay đổi để làm cho trang thực sự phản ánh

609
00:29:52,830 --> 00:29:55,602
trang ảo, và nó sẽ làm điều đó.

610
00:29:55,602 --> 00:29:56,560
Đó là DOM ảo.

611
00:29:56,560 --> 00:29:59,350
Đó là một trong những lớn nhất
đặc điểm của phản ứng lại.

612
00:29:59,350 --> 00:30:00,880
>> Điều đó có ý nghĩa?

613
00:30:00,880 --> 00:30:01,540
Bất kỳ câu hỏi?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Đung như thế nào
so sánh vẫn đến MVC

617
00:30:08,969 --> 00:30:10,760
mà chúng ta đã nói về
trước khi tài nguyên như thế nào.

618
00:30:10,760 --> 00:30:13,527
>> Neel Mehta: Vâng, câu hỏi
là như thế nào so sánh với MVC?

619
00:30:13,527 --> 00:30:14,610
Bạn hỏi về nguồn lực.

620
00:30:14,610 --> 00:30:16,445
Vâng, chúng ta hãy nói về làm thế nào nó hoạt động.

621
00:30:16,445 --> 00:30:18,190
>> Trong MVC, bạn muốn cập nhật các mô hình.

622
00:30:18,190 --> 00:30:20,560
Trong trường hợp này, chúng tôi muốn có một mô hình thẻ.

623
00:30:20,560 --> 00:30:24,540
Xem sẽ có
nút flip, và kiểm soát

624
00:30:24,540 --> 00:30:26,310
sẽ có chức năng lật.

625
00:30:26,310 --> 00:30:28,450
Vì vậy, quan điểm sẽ nói với các
điều khiển để lật lật.

626
00:30:28,450 --> 00:30:30,370
Lật sẽ nói với các
mô hình thay đổi, phải không?

627
00:30:30,370 --> 00:30:33,915
>> Và như vậy khi bạn làm một MVC, bạn
lắng nghe cho các mô hình thay đổi,

628
00:30:33,915 --> 00:30:37,150
và bạn lại làm cho quan điểm cho phù hợp.

629
00:30:37,150 --> 00:30:39,210
Hoặc bạn chỉ cần có để thích
có bộ điều khiển.

630
00:30:39,210 --> 00:30:42,418
Chờ cho các mô hình thay đổi, và sau đó
chọn và chọn một phần của như là một điều

631
00:30:42,418 --> 00:30:44,032
thay đổi.

632
00:30:44,032 --> 00:30:45,740
Ở đây chúng ta có một điều,
nhưng trong một ứng dụng lớn,

633
00:30:45,740 --> 00:30:48,510
bạn phải thích nhớ những gì
sự thay đổi trong mỗi nơi duy nhất,

634
00:30:48,510 --> 00:30:50,290
do đó, nó là một chút khó chịu.

635
00:30:50,290 --> 00:30:53,670
Và do đó, phản ứng lại là tốt đẹp
bởi vì nó có một Shadow Dom.

636
00:30:53,670 --> 00:30:56,040
Nó có thể đủ khả năng để chỉ
viết lại toàn bộ điều.

637
00:30:56,040 --> 00:30:58,680
Bạn không cần phải chọn lọc
như đoán gì để cập nhật.

638
00:30:58,680 --> 00:31:02,186
>> Trên Facebook nếu bạn thích
nhận được một tin nhắn mới, trong MVC,

639
00:31:02,186 --> 00:31:04,060
bạn phải nhớ,
OK, thay đổi những điều

640
00:31:04,060 --> 00:31:06,260
ở phía trên cùng của
trang, biểu tượng tin nhắn.

641
00:31:06,260 --> 00:31:08,290
Cũng bật một cửa sổ mới ở phía dưới.

642
00:31:08,290 --> 00:31:10,070
Cũng làm một điều mới trong cửa sổ đó.

643
00:31:10,070 --> 00:31:11,060
Cũng đóng một âm thanh.

644
00:31:11,060 --> 00:31:13,150
>> Đó là rất nhiều thứ
đi ra ngoài cùng một lúc.

645
00:31:13,150 --> 00:31:15,320
Và vì vậy nếu bạn không
có một Shadow Dom, bạn muốn

646
00:31:15,320 --> 00:31:18,740
phải làm điều đó bằng tay vì
bạn không thể loại bỏ toàn bộ trang.

647
00:31:18,740 --> 00:31:21,430
Bạn không có khả năng, vì vậy bạn có
thay đổi từng điều thủ,

648
00:31:21,430 --> 00:31:23,990
đó là thực sự gây phiền nhiễu trong MVC.

649
00:31:23,990 --> 00:31:27,640
>> Vì vậy, để có
tiết kiệm, họ chọn lọc

650
00:31:27,640 --> 00:31:30,750
cập nhật các trang, mà là
hiệu quả, nhưng cũng gây phiền nhiễu.

651
00:31:30,750 --> 00:31:34,002
Trong phản ứng lại, vì Shadow
Dom, bạn sẽ có được cả hai điều này cho miễn phí.

652
00:31:34,002 --> 00:31:35,710
Đó là hiệu quả vì
của Shadow Dom.

653
00:31:35,710 --> 00:31:37,210
Các nút cổ chai được cập nhật lại trang.

654
00:31:37,210 --> 00:31:40,292
Nó không phải làm các thao tác cây.

655
00:31:40,292 --> 00:31:41,250
Bạn sẽ có được hiệu quả.

656
00:31:41,250 --> 00:31:45,420
Bạn cũng có được sự dễ sử dụng vì
nếu bạn chỉ cần viết lại toàn bộ trang,

657
00:31:45,420 --> 00:31:48,970
nhưng bạn chỉ cần biết, tất cả các quyền, những điều
đang có được trên trang một nơi nào đó.

658
00:31:48,970 --> 00:31:51,180
Nó có thể là tại một nơi khác, nhưng
nó sẽ có trên trang, phải không?

659
00:31:51,180 --> 00:31:52,860
Vì vậy, bạn chỉ cần tái rendered
điều toàn bộ hầu như,

660
00:31:52,860 --> 00:31:55,540
và bạn có thể làm cho một cặp vợ chồng
thay đổi các trang riêng của mình.

661
00:31:55,540 --> 00:31:57,850
>> Vì vậy, một lần nữa, trong MVC bạn
sẽ phải chọn

662
00:31:57,850 --> 00:32:01,840
giữa tính năng dễ sử dụng và hiệu quả,
và phản ứng lại, bạn sẽ có được cả hai.

663
00:32:01,840 --> 00:32:04,020
Vì vậy, nó là tốt hơn.

664
00:32:04,020 --> 00:32:05,220
Có lý?

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

666
00:32:06,676 --> 00:32:12,080
>> OK, vì vậy hãy xem chúng ta hãy nói
một chút về bước 4,

667
00:32:12,080 --> 00:32:14,740
làm thế nào chúng ta có thể nhúng các thành phần.

668
00:32:14,740 --> 00:32:16,260
Vì vậy, chúng tôi có quyền này bây giờ.

669
00:32:16,260 --> 00:32:19,420
Chúng tôi đã có nút nhỏ của chúng ta mát mẻ.

670
00:32:19,420 --> 00:32:23,157
Chúng tôi có thể lật nó lại và
ra, và đó là tất cả nó.

671
00:32:23,157 --> 00:32:24,990
Hãy nói rằng chúng ta muốn
có thành phần khác.

672
00:32:24,990 --> 00:32:28,730
Hãy nói rằng ứng dụng của chúng tôi nên Flashcard
chứa một danh sách của tất cả các thẻ

673
00:32:28,730 --> 00:32:31,520
mà bạn có, do đó có nghĩa chúng tôi
cần phải có một thành phần khác.

674
00:32:31,520 --> 00:32:32,970
Vâng, có thể gọi đó là một danh sách xem.

675
00:32:32,970 --> 00:32:36,200
Hãy làm một danh sách xem đó
cùng tồn tại với các CardView,

676
00:32:36,200 --> 00:32:39,680
và xem danh sách này và CardView
sẽ thích làm việc cùng nhau.

677
00:32:39,680 --> 00:32:43,190
Và bạn có thể kết hợp chúng
để làm cho ứng dụng của chúng tôi cho bạn.

678
00:32:43,190 --> 00:32:45,160
>> Vì vậy, đầu tiên, chúng ta hãy làm một
vài chi tiết thẻ ngay.

679
00:32:45,160 --> 00:32:46,370
Hãy nói rằng, những gì thẻ?

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

681
00:32:49,619 --> 00:32:51,910
Và chỉ vì vậy tôi không phải
bore bạn gõ nó trong,

682
00:32:51,910 --> 00:32:53,410
Tôi chỉ cần đi để sao chép nó từ đây.

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

684
00:33:01,664 --> 00:33:03,580
Và vì vậy tôi sẽ không
cho nó chỉ là một thẻ.

685
00:33:03,580 --> 00:33:06,910
Tôi sẽ cung cấp cho nó một mảng của thẻ.

686
00:33:06,910 --> 00:33:10,240
Vì vậy, đầu tiên ứng dụng
sẽ phá vỡ cho bây giờ.

687
00:33:10,240 --> 00:33:14,717
Được rồi, vì vậy chúng tôi đang đi để làm cho
thể này để xử lý nhiều thẻ.

688
00:33:14,717 --> 00:33:17,800
Vì vậy, đầu tiên, chúng ta sẽ để cho nó, không
chỉ là một thẻ nhưng một mảng của thẻ,

689
00:33:17,800 --> 00:33:18,700
giống như một danh sách các thẻ.

690
00:33:18,700 --> 00:33:20,980
Và trong trường hợp này, chúng tôi có ba trong số họ.

691
00:33:20,980 --> 00:33:27,280
>> Tất cả các quyền, do vậy ứng dụng là
sẽ nhận được một danh sách các thẻ,

692
00:33:27,280 --> 00:33:29,870
và nó sẽ quyết định
một để đưa cho các CardView.

693
00:33:29,870 --> 00:33:33,740
Các CardView chỉ có thể
làm cho một thẻ, nhưng các ứng dụng

694
00:33:33,740 --> 00:33:37,610
được một danh sách của tất cả các loại thẻ, phải không?

695
00:33:37,610 --> 00:33:40,820
>> Vì vậy, khi bạn tìm ra một
thẻ để cung cấp cho CardView,

696
00:33:40,820 --> 00:33:44,660
làm thế nào bạn sẽ đoán bạn có thể có thể
để đưa ra quyết định về những thẻ

697
00:33:44,660 --> 00:33:47,064
để hiển thị?

698
00:33:47,064 --> 00:33:49,980
Để cung cấp cho bạn một gợi ý, đó là tạm thời
Bạn sẽ được xem một thẻ nhất định.

699
00:33:49,980 --> 00:33:53,260
Nếu bạn refresh trang web, bạn sẽ thấy
chỉ trở lại thẻ đầu tiên.

700
00:33:53,260 --> 00:33:55,464
Đó là OK, vì đó là tạm thời.

701
00:33:55,464 --> 00:33:56,630
Kỹ thuật những gì chúng ta có thể sử dụng?

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

703
00:34:02,534 --> 00:34:08,760
>> Đung Bạn có thể làm cho một biến
vì vậy chỉ cần như bạn đã có trước.

704
00:34:08,760 --> 00:34:11,989
Đây có phải là sự thật, bạn có thể
có thẻ hiện bằng 1?

705
00:34:11,989 --> 00:34:14,150
>> Neel Mehta: Yeah, vì vậy chúng tôi
muốn có nhà nước, phải không?

706
00:34:14,150 --> 00:34:16,080
Bạn sẽ sử dụng nhà nước trong
thành phần để tìm ra

707
00:34:16,080 --> 00:34:17,288
mà thẻ nào chúng ta muốn nhận được.

708
00:34:17,288 --> 00:34:19,290
Giống như chúng ta có một danh sách các
tất cả các thẻ, chúng tôi sẽ

709
00:34:19,290 --> 00:34:21,630
sử dụng nhà nước để tìm ra
một trong các thẻ đầu tiên,

710
00:34:21,630 --> 00:34:23,710
thẻ thứ hai, thứ ba thẻ, và như vậy.

711
00:34:23,710 --> 00:34:28,760
>> Vì vậy, một ứng dụng để ứng dụng sẽ có được một
có chức năng getInitialState,

712
00:34:28,760 --> 00:34:35,020
getInitialState trả lại chức năng.

713
00:34:35,020 --> 00:34:39,929
Và chúng tôi sẽ chỉ nói activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Vì vậy, bây giờ ứng dụng của chúng tôi có nhà nước riêng của nó.

715
00:34:42,889 --> 00:34:47,179
>> Và vì vậy bây giờ vào làm, để tìm ra
thẻ, chúng ta hãy chỉ cần đi đến các mảng

716
00:34:47,179 --> 00:34:49,969
và lấy điều tại chỉ số đó.

717
00:34:49,969 --> 00:34:53,580
Chọn thẻ this.props.cards bằng
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Vì vậy, như bạn thấy ở đây, các đạo cụ và
nhà nước thực sự làm việc cùng nhau.

720
00:35:00,162 --> 00:35:08,990
Vì vậy, bây giờ mà chúng tôi có activeCard của chúng tôi,
chúng tôi sẽ gọi nó là activeCard,

721
00:35:08,990 --> 00:35:10,470
và hãy xem liệu các công trình này.

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

723
00:35:20,320 --> 00:35:20,820
[Không nghe thấy]

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, đó là một lỗi văn bản.

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

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

728
00:35:51,420 --> 00:35:54,840
>> Cool, vâng, vì vậy bây giờ chúng tôi đã trở lại
đến nơi mà chúng tôi trước đây, phải không?

729
00:35:54,840 --> 00:35:57,100
Chương trình cũ như nhau ngoại trừ
bây giờ chúng tôi có thể hỗ trợ

730
00:35:57,100 --> 00:35:59,390
một danh sách các thẻ, không chỉ là một thẻ.

731
00:35:59,390 --> 00:36:04,130
Và bây giờ, một lần nữa, nếu chúng ta thay đổi
activeIndex, chúng ta có thể đi 0-1,

732
00:36:04,130 --> 00:36:07,330
và bây giờ mà thẻ thứ hai,
và sau đó chúng tôi đã đi đến 0.

733
00:36:07,330 --> 00:36:10,390
Vì vậy, đây là một mới
được cải tiến lên phiên bản của chúng tôi.

734
00:36:10,390 --> 00:36:16,000
>> OK, vì vậy bây giờ chúng ta hãy có một cái nhìn danh sách đó
cho thấy tất cả các thẻ trong chương trình của bạn,

735
00:36:16,000 --> 00:36:19,980
vì vậy chúng tôi sẽ thực hiện một mới
thành phần được gọi ListView.

736
00:36:19,980 --> 00:36:22,155
Hãy listview bằng react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Vì vậy, chúng tôi muốn làm một thứ tự
liệt kê với một mục danh sách cho mỗi thẻ.

739
00:36:38,800 --> 00:36:41,490
Và vì vậy chúng tôi có một loạt các thẻ.

740
00:36:41,490 --> 00:36:44,990
Chúng tôi muốn có một danh sách các mục
cho mỗi thẻ, phải không?

741
00:36:44,990 --> 00:36:47,490
Chúng tôi có thể làm cho một vòng lặp hoặc
một cái gì đó để làm cho một mục danh sách mới.

742
00:36:47,490 --> 00:36:50,522
Nhưng cái cách bạn làm điều đó trong
Phản ứng, sử dụng một điều được gọi là bản đồ.

743
00:36:50,522 --> 00:36:57,150
Bản đồ là một công cụ hoặc một chức năng mà bạn sử dụng
rằng đối với mỗi mục, chạy một số chức năng,

744
00:36:57,150 --> 00:36:59,510
có giá trị trả về, và
mang đến cho bạn đó.

745
00:36:59,510 --> 00:37:06,310
>> Vì vậy, như một ví dụ, chúng ta có mảng
1, 2, 3.map function-- và điều này

746
00:37:06,310 --> 00:37:12,120
là viết tắt cho một
function-- x mũi tên x lần x.

747
00:37:12,120 --> 00:37:16,110
Điều này cho biết, với mọi số
trong 1, 2, 3, lấy nó.

748
00:37:16,110 --> 00:37:17,800
Vuông nó, và cho nó trở lại.

749
00:37:17,800 --> 00:37:22,090
Vậy điều gì làm bạn nghĩ rằng 1,
2, 3.map x đi vào x lần

750
00:37:22,090 --> 00:37:25,480
x cho bạn nhiều lại được
Chức năng của hàm này là

751
00:37:25,480 --> 00:37:27,680
chạy trên mọi phần tử của mảng đó.

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

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

754
00:37:32,190 --> 00:37:35,709
>> Neel Mehta: Yep, 1, 4, 9
bởi vì bạn làm 1 lần 1.

755
00:37:35,709 --> 00:37:36,500
Điều đó mang lại cho bạn một.

756
00:37:36,500 --> 00:37:37,690
Đó là yếu tố đầu tiên.

757
00:37:37,690 --> 00:37:38,530
>> 2 lần 2 là 4.

758
00:37:38,530 --> 00:37:39,570
Đó là một yếu tố thứ hai.

759
00:37:39,570 --> 00:37:40,310
3 lần 3 là 9.

760
00:37:40,310 --> 00:37:41,540
Đó là một yếu tố thứ ba.

761
00:37:41,540 --> 00:37:42,640
Có lý?

762
00:37:42,640 --> 00:37:45,015
Vì vậy, bản đồ có một kỹ thuật bạn
sử dụng trong các lập trình chức năng,

763
00:37:45,015 --> 00:37:48,090
phong cách mới của
lập trình để làm một cái gì đó

764
00:37:48,090 --> 00:37:50,500
để mọi phần tử trong danh sách của bạn.

765
00:37:50,500 --> 00:37:51,970
Và vì vậy điều này nghe có vẻ quen thuộc.

766
00:37:51,970 --> 00:37:53,370
Chúng tôi có một danh sách các thẻ.

767
00:37:53,370 --> 00:37:56,860
Chúng tôi muốn có được một mục danh sách cho mỗi
một, vì vậy chúng tôi sẽ chỉ sử dụng bản đồ ở đây.

768
00:37:56,860 --> 00:38:00,250
Chúng tôi sẽ nói, hãy để danh sách equals
this.props, thẻ, bản đồ.

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

770
00:38:10,580 --> 00:38:15,070
>> Và như vậy cho một thẻ, chúng tôi
sẽ tạo ra một mục danh sách

771
00:38:15,070 --> 00:38:17,580
với thẻ mà nội dung bên của nó.

772
00:38:17,580 --> 00:38:20,660
Hãy chỉ nói rằng chúng tôi muốn đưa ra
các thẻ câu hỏi như vậy card.question.

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

774
00:38:24,990 --> 00:38:30,649
Vì vậy, danh sách này có chứa một
mảng của LI hoặc Danh sách các đầu

775
00:38:30,649 --> 00:38:32,440
nơi có một danh sách
item cho mỗi thẻ,

776
00:38:32,440 --> 00:38:35,150
và có chứa các câu hỏi thẻ.

777
00:38:35,150 --> 00:38:37,640
Có lý?

778
00:38:37,640 --> 00:38:39,450
>> Cool, vì vậy bây giờ chúng ta hãy
thực sự in mà ra.

779
00:38:39,450 --> 00:38:46,521
Vì vậy, chúng tôi sẽ trả lại một ul.

780
00:38:46,521 --> 00:38:49,020
Bên trong là danh sách không có thứ tự,
chúng tôi sẽ chỉ dính toàn bộ danh sách

781
00:38:49,020 --> 00:38:49,890
rằng họ đã cho chúng tôi.

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

783
00:38:52,851 --> 00:38:53,350
Mát.

784
00:38:53,350 --> 00:38:56,060
>> Được rồi, vậy bây giờ này
xem danh sách các công trình chỉ cần tìm.

785
00:38:56,060 --> 00:38:59,842
Bất kỳ câu hỏi về xem danh sách?

786
00:38:59,842 --> 00:39:01,270
Bạn có một loạt các thẻ.

787
00:39:01,270 --> 00:39:02,800
Bạn làm cho một mục danh sách cho mỗi thẻ.

788
00:39:02,800 --> 00:39:05,466
Và nếu chúng được đặt bên trong một thứ tự
danh sách, và bạn cho nó trở lại.

789
00:39:05,466 --> 00:39:09,410
Vì vậy, bây giờ chúng ta hãy hành động như vậy chúng ta nhúng
bên này của ứng dụng của chúng tôi,

790
00:39:09,410 --> 00:39:14,310
vì vậy chúng tôi có thể làm được điều này, xem danh sách.

791
00:39:14,310 --> 00:39:17,070
Lập luận gì để chúng ta vượt qua để xem danh sách?

792
00:39:17,070 --> 00:39:18,320
Những gì thuộc tính nào chúng ta cung cấp cho nó?

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

794
00:39:25,111 --> 00:39:26,860
Hãy nhớ rằng, nếu bạn cung cấp cho
nó là một loạt các thẻ,

795
00:39:26,860 --> 00:39:29,590
nó sẽ làm cho danh sách
xem cho những thẻ.

796
00:39:29,590 --> 00:39:32,267
Vì vậy, những gì chúng ta sẽ vượt qua
ở đây như là đối số?

797
00:39:32,267 --> 00:39:33,350
Đung Một danh sách các thẻ?

798
00:39:33,350 --> 00:39:37,130
Neel Mehta: Yeah, vì vậy các card
bằng this.props.cards, phải không?

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

800
00:39:39,850 --> 00:39:44,370
Và do đó, vấn đề duy nhất
là bạn chỉ có thể

801
00:39:44,370 --> 00:39:48,600
chuyển một phần tử cấp cao nhất trong render,
vậy bạn đã có để bọc nó trong một div.

802
00:39:48,600 --> 00:39:49,100
Nó là lạ.

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

804
00:39:56,190 --> 00:39:57,530
Vì vậy, chúng ta hãy xem nếu đó.

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

806
00:40:09,790 --> 00:40:10,560
Điều đó làm việc?

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

808
00:40:29,774 --> 00:40:31,030
>> Yep, có bạn đi.

809
00:40:31,030 --> 00:40:33,700
Vì vậy, bây giờ chúng tôi có một danh sách
thẻ ở phía dưới,

810
00:40:33,700 --> 00:40:36,180
và sau đó chúng ta có của chúng tôi
CardView cứ vào đầu,

811
00:40:36,180 --> 00:40:40,486
và điều đó sẽ lật giữa
hai mặt của thẻ.

812
00:40:40,486 --> 00:40:42,610
Bây giờ làm đó có ý nghĩa như thế nào tôi đã làm điều đó?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Yeah, vì vậy một lần nữa, chúng ta có hai thành phần.

815
00:40:46,790 --> 00:40:49,666
Các bản in thành phần đầu tiên
ra mỗi thẻ trong danh sách.

816
00:40:49,666 --> 00:40:50,540
Đó là danh sách xem.

817
00:40:50,540 --> 00:40:54,770
Và thành phần thứ hai
in ra chỉ thẻ đó.

818
00:40:54,770 --> 00:40:58,840
Nếu bạn cung cấp cho nó một thẻ nào đó, nó sẽ thấy
in ra thông tin về thẻ

819
00:40:58,840 --> 00:41:01,870
và cho phép bạn lật qua lại.

820
00:41:01,870 --> 00:41:05,850
>> Vì vậy, nếu chúng ta muốn, chúng ta có thể cố gắng và nói chuyện
về việc thêm một số tính năng mới này.

821
00:41:05,850 --> 00:41:09,482
Nếu không chúng ta có thể nói thêm một chút
về với vận tốc của lò phản ứng,

822
00:41:09,482 --> 00:41:11,190
hoặc chúng tôi có thể trả lời
câu hỏi mà bạn có thể có

823
00:41:11,190 --> 00:41:15,050
bởi vì đây là tất cả các bộ phận cốt lõi
của phản ứng mà tôi muốn nói đến.

824
00:41:15,050 --> 00:41:16,540
Chúng tôi có thể đi trước.

825
00:41:16,540 --> 00:41:17,590
Chúng tôi có thể trả lời câu hỏi.

826
00:41:17,590 --> 00:41:18,560
Bất cứ điều gì bạn muốn.

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

828
00:41:21,694 --> 00:41:24,205
>> Đung bạn có thể sử dụng
JSX trong JavaScript bình thường?

829
00:41:24,205 --> 00:41:27,150
Hoặc là cái gì đó mà
đến với [không nghe được]?

830
00:41:27,150 --> 00:41:30,760
>> Neel Mehta: Câu hỏi đặt ra là can
bạn sử dụng JSX với JavaScript bình thường?

831
00:41:30,760 --> 00:41:32,620
Câu trả lời là có.

832
00:41:32,620 --> 00:41:41,070
JSX chỉ là một cách để nó mất của bạn
JavaScript có HTML bên trong của nó,

833
00:41:41,070 --> 00:41:44,215
và biên dịch thành JavaScript
không có HTML bên trong của nó.

834
00:41:44,215 --> 00:41:47,880
Vì vậy, nhận thấy that-- để ý ở đây.

835
00:41:47,880 --> 00:41:50,820
Điều này có vẻ như bạn có như div
và bạn có cơ bên trong của nó.

836
00:41:50,820 --> 00:41:54,970
>> Mà biên dịch để JavaScript
như tạo ra những điều tương tự.

837
00:41:54,970 --> 00:41:59,590
Tôi đoán những gì tôi đang nói là
JSX chỉ là một cú pháp, giống như nó là

838
00:41:59,590 --> 00:42:03,530
một tiền xử lý cho nhiều JavaScript
như PHP là một tiền xử lý cho HTML.

839
00:42:03,530 --> 00:42:05,490
Công ty cổ phần là một tiền xử lý
cho JavaScript cho phép

840
00:42:05,490 --> 00:42:12,970
bạn đặt HTML bên trong của bạn JavaScript.

841
00:42:12,970 --> 00:42:16,425
Và vì vậy nếu bạn có các máy biến áp đúng
đó là một điều được gọi là [Không nghe thấy],

842
00:42:16,425 --> 00:42:17,300
mà sẽ chuyển đổi.

843
00:42:17,300 --> 00:42:19,360
Tiền xử lý ngay,
nó sẽ cho bạn làm điều đó.

844
00:42:19,360 --> 00:42:20,235
>> Đung [Không nghe thấy]

845
00:42:20,235 --> 00:42:23,026
Neel Mehta: Thông thường, bạn không cần
đặt HTML bên trong JavaScript

846
00:42:23,026 --> 00:42:24,110
trừ khi bạn đang làm Phản ứng.

847
00:42:24,110 --> 00:42:27,146
Nhưng bạn có thể làm điều đó anyway.

848
00:42:27,146 --> 00:42:27,645
Vâng?

849
00:42:27,645 --> 00:42:29,353
>> Đung Tôi nghĩ rằng bạn
đã mô tả phản ứng lại

850
00:42:29,353 --> 00:42:31,970
như là một ngôn ngữ lập trình chức năng.

851
00:42:31,970 --> 00:42:35,646
Chúng tôi đã được học C trong CS50.

852
00:42:35,646 --> 00:42:38,032
Là C cũng là một ngôn ngữ chức năng?

853
00:42:38,032 --> 00:42:39,990
Neel Mehta: Vậy câu hỏi
là về chức năng

854
00:42:39,990 --> 00:42:43,010
so với một điều được gọi là
lập trình bắt buộc hay thủ tục.

855
00:42:43,010 --> 00:42:44,820
Có hai loại chương trình phổ biến.

856
00:42:44,820 --> 00:42:48,550
Một được gọi là thủ tục, mà
là tất cả về như làm lệnh,

857
00:42:48,550 --> 00:42:51,510
và là một trong những chức năng, mà là tất cả
về việc có chức năng và có

858
00:42:51,510 --> 00:42:52,930
đầu vào và đầu ra của những người.

859
00:42:52,930 --> 00:42:55,930
Phản ứng là một mô hình chức năng.

860
00:42:55,930 --> 00:42:58,010
C là một mô hình rất thủ tục.

861
00:42:58,010 --> 00:43:02,360
>> Và như là một ví dụ, C chẳng hạn,
bạn không làm cách khai báo này

862
00:43:02,360 --> 00:43:04,390
làm cho các chương trình, phải không?

863
00:43:04,390 --> 00:43:06,826
Bạn có thể nói, in này.

864
00:43:06,826 --> 00:43:07,950
Thay đổi cấu trúc dữ liệu này.

865
00:43:07,950 --> 00:43:08,530
In trang nay.

866
00:43:08,530 --> 00:43:10,160
Đó là tất cả về lệnh.

867
00:43:10,160 --> 00:43:12,640
>> Trong phản ứng lại, không có
mà nhiều lệnh.

868
00:43:12,640 --> 00:43:15,145
Đó là tất cả về việc có
thành phần bạn đặt lại với nhau.

869
00:43:15,145 --> 00:43:16,300
Họ giống như chức năng.

870
00:43:16,300 --> 00:43:26,360
Bạn có giống như một chức năng
gọi CardView,

871
00:43:26,360 --> 00:43:28,680
mà là một chức năng
có đầu vào, đầu ra,

872
00:43:28,680 --> 00:43:30,660
và do đó phản ứng lại là tất cả
về triết lý này

873
00:43:30,660 --> 00:43:32,700
chúng ta về having-- bạn có dữ liệu.

874
00:43:32,700 --> 00:43:34,910
Bạn vượt qua nó thông qua này
thuật toán, và nó sẽ

875
00:43:34,910 --> 00:43:36,800
đầu ra HTML mà bạn
chỉ in trang,

876
00:43:36,800 --> 00:43:39,180
và vì vậy bạn phải
xây dựng nó từng mảnh.

877
00:43:39,180 --> 00:43:42,800
>> Vì vậy, để vẽ một phép ẩn dụ cho những gì
Tôi đã nói, bạn biết làm thế nào

878
00:43:42,800 --> 00:43:47,050
trên Facebook nếu bạn nhận được một tin nhắn,
và bạn chọn những phần nào để cập nhật,

879
00:43:47,050 --> 00:43:47,882
đó là thủ tục.

880
00:43:47,882 --> 00:43:48,840
Đó là bắt buộc, phải không?

881
00:43:48,840 --> 00:43:49,806
OK, tôi nhận được tin nhắn.

882
00:43:49,806 --> 00:43:50,930
Hãy thay đổi tài khoản ở đó.

883
00:43:50,930 --> 00:43:52,110
>> Hãy bật một cửa sổ ở đây.

884
00:43:52,110 --> 00:43:52,780
Hãy thay đổi tài khoản ở đó.

885
00:43:52,780 --> 00:43:53,700
Chúng ta hãy vẽ này đây.

886
00:43:53,700 --> 00:43:55,220
Đó là một cách tiếp cận thủ tục.

887
00:43:55,220 --> 00:44:00,240
>> Đó là những gì những thứ như góc,
Boost, Backbone, các khuôn khổ khác sử dụng.

888
00:44:00,240 --> 00:44:01,200
Phản ứng là chức năng.

889
00:44:01,200 --> 00:44:03,324
Đó là một cách rất khác nhau
suy nghĩ về những gì.

890
00:44:03,324 --> 00:44:07,950
Nó có ý tưởng này chúng ta hãy có
chức năng hoặc các thuật toán mà sẽ bạn

891
00:44:07,950 --> 00:44:08,800
cho nó dữ liệu.

892
00:44:08,800 --> 00:44:11,820
Nó sẽ nhổ ra những gì nó
phải được, và máy tính

893
00:44:11,820 --> 00:44:13,490
sẽ chăm sóc cân nặng ra.

894
00:44:13,490 --> 00:44:15,890
Bạn không xử lý nó cho mình.

895
00:44:15,890 --> 00:44:18,470
Điều đó làm cho một chút cảm giác?

896
00:44:18,470 --> 00:44:18,970
Yeah?

897
00:44:18,970 --> 00:44:24,180
>> Đung Trong một ngôn ngữ chức năng,
tất cả mọi thứ xảy ra cùng một lúc?

898
00:44:24,180 --> 00:44:26,800
>> Neel Mehta: Không, điều xảy ra trong trật tự.

899
00:44:26,800 --> 00:44:29,320
Giống như ở đây vẫn còn
đặt hàng, nhưng nó không

900
00:44:29,320 --> 00:44:32,390
xảy ra theo thứ tự như
khen thưởng, lệnh, lệnh.

901
00:44:32,390 --> 00:44:36,459
Nó sẽ xảy ra theo thứ tự
chức năng cho phép bạn xuất ra.

902
00:44:36,459 --> 00:44:37,750
Đặt điều đó vào chức năng khác.

903
00:44:37,750 --> 00:44:39,550
Đặt đó vào một
chức năng, chức năng khác.

904
00:44:39,550 --> 00:44:41,470
>> Nếu bạn làm CS51, bạn sẽ
tìm hiểu các chương trình chức năng

905
00:44:41,470 --> 00:44:42,886
một chút ra của phạm vi này.

906
00:44:42,886 --> 00:44:45,090
Nhưng về cơ bản, những gì làm cho
Phản ứng mát mẻ không chỉ

907
00:44:45,090 --> 00:44:46,840
các luồng dữ liệu một chiều
và Dom ảo,

908
00:44:46,840 --> 00:44:48,700
nhưng cũng ý tưởng này của
lập trình chức năng.

909
00:44:48,700 --> 00:44:51,720
Và chức năng lập trình là rất dễ dàng
để sáng tác và làm công cụ mát ngoài,

910
00:44:51,720 --> 00:44:53,844
và nó rất dễ dàng để nghĩ
về lý do và về.

911
00:44:53,844 --> 00:44:55,450
Vì vậy, đó là một trận hòa tốt của phản ứng lại.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Bất kỳ câu hỏi nhiều hơn?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Yeah?

916
00:45:03,150 --> 00:45:06,840
>> Đung Um, tại sao bạn
sử dụng để như trái ngược với var?

917
00:45:06,840 --> 00:45:10,450
>> Neel Mehta: Vậy câu hỏi là
tại sao bạn sử dụng chúng thay vì var?

918
00:45:10,450 --> 00:45:13,220
Đây là một điều được gọi là
ES6 hoặc ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Đây là phiên bản mới của JavaScript.

920
00:45:15,820 --> 00:45:19,050
Có một loạt các lý do kỹ thuật,
nhưng let là một phiên bản tốt hơn của var.

921
00:45:19,050 --> 00:45:20,724
>> Đó là cách mà bạn khai báo biến.

922
00:45:20,724 --> 00:45:21,390
Bạn có thể sử dụng để cho.

923
00:45:21,390 --> 00:45:22,140
Bạn có thể sử dụng var.

924
00:45:22,140 --> 00:45:23,825
Hãy có một nhóm các kỹ thuật
reasons-- bạn có thể xem chúng

925
00:45:23,825 --> 00:45:25,610
lên later-- cho lý do tại sao nó tốt hơn.

926
00:45:25,610 --> 00:45:28,780
Về cơ bản, có một số ES6 đẹp
cú pháp mới, một số tính năng mới

927
00:45:28,780 --> 00:45:30,720
trên đầu trang của JavaScript cũ.

928
00:45:30,720 --> 00:45:32,782
>> Vì vậy, chúng tôi có giống như năm phút.

929
00:45:32,782 --> 00:45:34,990
Tôi chỉ muốn nói về
một điều nữa thật nhanh.

930
00:45:34,990 --> 00:45:36,450
Nếu bạn có bất kỳ câu hỏi,
chúng ta hãy nói về nó sau này.

931
00:45:36,450 --> 00:45:38,366
Nhưng chỉ vì vậy đây được
đánh bắt trên máy ảnh, tôi chỉ

932
00:45:38,366 --> 00:45:41,550
muốn nói một chút về cách bạn
Phản ứng thực sự sử dụng trong các ứng dụng của bạn.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Nếu bạn đi ở đây,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
đây là trang chủ cho phản ứng lại, và
nó sẽ cho bạn thấy làm thế nào bạn thực sự sử dụng

936
00:46:03,320 --> 00:46:05,320
Phản ứng trong các trang của bạn.

937
00:46:05,320 --> 00:46:08,845
Về cơ bản, nó là một chút
phức tạp cố gắng để cài đặt phản ứng lại.

938
00:46:08,845 --> 00:46:12,300
Nó không phải là dễ dàng như bạn chỉ cần kéo
và thả một JavaScript trong đó.

939
00:46:12,300 --> 00:46:15,890
>> Bạn phải có biến áp của bạn
thiết lập, mà sẽ, như nó đã làm trước,

940
00:46:15,890 --> 00:46:18,120
biến JSX của bạn vào
JavaScript bình thường.

941
00:46:18,120 --> 00:46:21,030
Bạn phải điều đó sẽ thấy
biên dịch bạn ES6 lại bình thường.

942
00:46:21,030 --> 00:46:24,720
JavaScript có rất nhiều chuyển động
phần bạn phải làm, vì vậy có một điều

943
00:46:24,720 --> 00:46:27,200
gọi Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Và đây là một công cụ dòng lệnh đó sẽ thấy
giúp bạn Scaffold ra Phản ứng của bạn

945
00:46:31,110 --> 00:46:32,380
các dự án một cách dễ dàng.

946
00:46:32,380 --> 00:46:38,660
>> Vì vậy, bạn có thể đọc về điều này
sau này, nhưng có một số công cụ

947
00:46:38,660 --> 00:46:40,160
rằng Yeoman cung cấp.

948
00:46:40,160 --> 00:46:43,280
Họ sẽ cho bạn tạo ra một phản ứng lại
ứng dụng với tất cả mọi thứ được xây dựng trong.

949
00:46:43,280 --> 00:46:46,030
Giống như nó sẽ đã xây dựng
trong, các thành phần được xây dựng trong.

950
00:46:46,030 --> 00:46:47,880
Nó sẽ có biến áp của bạn được xây dựng trong.

951
00:46:47,880 --> 00:46:50,699
Họ có rất nhiều mát mẻ
công cụ được xây dựng trong tự động

952
00:46:50,699 --> 00:46:52,240
sử dụng những điều được gọi là máy phát điện.

953
00:46:52,240 --> 00:46:54,620
>> Vì vậy, đọc về điều này nếu bạn muốn.

954
00:46:54,620 --> 00:46:59,110
Chỉ cần đi trên Yeoman, Y-E-O-M-A-N, và
bạn có thể tìm thấy máy phát như thế này.

955
00:46:59,110 --> 00:47:01,263
Và với máy phát điện như
các, bạn chỉ thích một

956
00:47:01,263 --> 00:47:03,010
là một dòng lệnh vài lệnh.

957
00:47:03,010 --> 00:47:05,530
Nó sẽ ra một giàn giáo
Phản ứng toàn bộ ứng dụng cho bạn.

958
00:47:05,530 --> 00:47:10,470
Nó sẽ nhận được tất cả các hướng dẫn đường ống,
và công việc khó khăn thực hiện cho bạn,

959
00:47:10,470 --> 00:47:13,010
và đây là lý do tại sao bạn chỉ tập trung
về chỉ cần viết trong phản ứng lại.

960
00:47:13,010 --> 00:47:16,739
>> Vì vậy, về cơ bản việc xây dựng một
Phản ứng ứng dụng là không tầm thường.

961
00:47:16,739 --> 00:47:19,530
Nó có dây tất cả cùng nhau, nhưng có
là những công cụ mà sẽ làm điều đó cho bạn.

962
00:47:19,530 --> 00:47:23,070
Vì vậy, nếu bạn muốn thực hiện một phản ứng lại
ứng dụng, hãy thử làm theo cách đó.

963
00:47:23,070 --> 00:47:26,360
Nếu bạn chỉ muốn thử nghiệm,
bạn có thể thử sử dụng CodePen này

964
00:47:26,360 --> 00:47:28,550
vì CodePen này có
tất cả các phản ứng dây.

965
00:47:28,550 --> 00:47:30,240
Tôi đã làm tất cả các công việc cho bạn rồi.

966
00:47:30,240 --> 00:47:34,610
>> Vì vậy, nếu bạn muốn thực hiện như một
sản xuất để phát hành Phản ứng ứng dụng,

967
00:47:34,610 --> 00:47:37,220
hãy thử một trong những máy phát điện.

968
00:47:37,220 --> 00:47:40,240
Nếu bạn chỉ muốn chơi
xung quanh, nó thường có giá trị chỉ

969
00:47:40,240 --> 00:47:44,490
như thử chơi xung quanh trên CodePen đây.

970
00:47:44,490 --> 00:47:45,470
Nghe hay đấy?

971
00:47:45,470 --> 00:47:45,970
Mát.

972
00:47:45,970 --> 00:47:47,890
>> Vì vậy, đó là tất cả tôi có.

973
00:47:47,890 --> 00:47:52,470
Một lần nữa, tất cả các mã và ví dụ
sẽ có trên trang web này ở đây.

974
00:47:52,470 --> 00:47:55,509
Vì vậy, một lần nữa, chúng tôi đã không nói chuyện
về nhiều cú pháp của phản ứng lại,

975
00:47:55,509 --> 00:47:57,550
nhưng để tìm tất cả những
ít chi tiết cú pháp,

976
00:47:57,550 --> 00:48:00,320
đó là tất cả sẽ có sẵn
trên trang web này ở đây.

977
00:48:00,320 --> 00:48:02,660
>> Vì vậy, tôi muốn khuyên bạn như
đi bước đầu tiên.

978
00:48:02,660 --> 00:48:06,277
Đặt nó vào CodePen của bạn.

979
00:48:06,277 --> 00:48:08,110
Hãy thử làm việc trên làm
nó sang bước thứ hai.

980
00:48:08,110 --> 00:48:11,310
Có một bước thứ tư, và chỉ
xem nơi bạn nhận được từ đó.

981
00:48:11,310 --> 00:48:14,840
>> Bất kỳ câu hỏi thêm, kiểm tra
ra trang đó hoặc gửi email cho tôi.

982
00:48:14,840 --> 00:48:16,490
Đó là email của tôi.

983
00:48:16,490 --> 00:48:19,885
Nhưng tôi rất muốn giúp bạn với bất kỳ
câu hỏi mà bạn có thể có về phản ứng lại.

984
00:48:19,885 --> 00:48:21,010
Vì vậy, vâng, đó là tất cả tôi có.

985
00:48:21,010 --> 00:48:23,410
Cảm ơn tất cả các bạn rất nhiều cho
xem hoặc tham dự.

986
00:48:23,410 --> 00:48:26,820
Và tôi sẽ đưa bất cứ câu hỏi
bạn có thể có sau này bây giờ.

987
00:48:26,820 --> 00:48:29,140
Vì vậy, cảm ơn tất cả các bạn đã xem.

988
00:48:29,140 --> 00:48:31,270