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
>> NEEL เมธา: ที่นี่มันจะไป

4
00:00:07,275 --> 00:00:11,070
>> ดีทุกคนยินดีต้อนรับสู่เว็บ
ปพลิเคชันของอนาคตด้วยตอบสนอง

5
00:00:11,070 --> 00:00:11,870
นี่คือ CS50

6
00:00:11,870 --> 00:00:12,930
ชื่อของฉันคือ Neel

7
00:00:12,930 --> 00:00:17,689
ฉัน TA สำหรับ CS50 และนักเรียนปีที่สอง
ที่วิทยาลัยฮาร์วาร์และมาก

8
00:00:17,689 --> 00:00:18,730
นักพัฒนาเว็บหลงใหล

9
00:00:18,730 --> 00:00:20,730
ดังนั้นฉันน่าตื่นเต้นมากที่
จะพูดคุยกับคุณในวันนี้

10
00:00:20,730 --> 00:00:24,550
ไม่ว่าคุณจะอยู่ที่นี่หรือที่บ้าน
ดูเกี่ยวกับการตอบสนองซึ่งเป็นอีกครั้ง

11
00:00:24,550 --> 00:00:27,270
ที่ผมกล่าวว่าอนาคตของปพลิเคชันเว็บ

12
00:00:27,270 --> 00:00:29,055
>> ดังนั้นการตอบสนองเป็นกรอบเว็บ

13
00:00:29,055 --> 00:00:30,930
และในขณะที่ผมเคยบอก
กับคนบางคนที่นี่

14
00:00:30,930 --> 00:00:33,400
กรอบเป็นเพียง
ชุดของเครื่องมือที่คุณสามารถใช้

15
00:00:33,400 --> 00:00:35,770
โครงสร้างและสร้าง app เว็บของคุณ

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
และ app เว็บ Instagram

22
00:00:52,460 --> 00:00:56,350
Khan Academy เป็นอีกหนึ่ง
ยอมรับต้นที่โดดเด่นของการตอบสนอง

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 และ iOS

32
00:01:22,200 --> 00:01:26,390
และอาจแพลตฟอร์มอื่น ๆ ในอนาคต
โดยใช้เพียงรหัส JavaScript เดียวกัน

33
00:01:26,390 --> 00:01:31,130
คุณสามารถใช้เดียวกันแน่นอน
รหัส JavaScript เพื่อทำให้เว็บไซต์

34
00:01:31,130 --> 00:01:33,040
ที่จะทำให้ปพลิเคชัน Android และ iOS ปพลิเคชัน

35
00:01:33,040 --> 00:01:35,000
>> มันเป็นมากเวลาที่น่าตื่นเต้นมาก

36
00:01:35,000 --> 00:01:37,070
มันเป็นจริงๆโอกาสที่เย็น

37
00:01:37,070 --> 00:01:42,020
มันจริงๆเว็บสากล
เครื่องมือในการพัฒนาอินเตอร์เฟซ

38
00:01:42,020 --> 00:01:44,420
ดังนั้นจึงเป็นมาก
สิ่งที่สำคัญที่จะรู้ว่า

39
00:01:44,420 --> 00:01:46,949
และขณะที่ผมกำลังบอกคน
ก่อนนี้ผมคิดว่า

40
00:01:46,949 --> 00:01:48,990
จะเปลี่ยนวิธีที่เรา
สร้างปพลิเคชันเว็บตลอดไป

41
00:01:48,990 --> 00:01:55,820
ดังนั้นจึงอาจจะอธิบิต แต่ฉัน
คิดว่ามันเป็นสิ่งที่ดีงามที่จะรู้ว่า

42
00:01:55,820 --> 00:01:57,580
>> ตกลงดังนั้นสิ่งที่เป็นตอบสนอง?

43
00:01:57,580 --> 00:02:01,020
ตอบสนองเป็นกรอบที่คุณสามารถ
ใช้สำหรับการเชื่อมต่ออาคาร

44
00:02:01,020 --> 00:02:03,240
อินเตอร์เฟซที่เป็นอีกครั้ง
หน้าเว็บใช่มั้ย?

45
00:02:03,240 --> 00:02:06,340
ดังนั้นนี่คือ Instagram.com ใช้ตอบสนอง

46
00:02:06,340 --> 00:02:08,740
>> ตอบสนองที่สร้างขึ้นบน
ความคิดของส่วนประกอบ

47
00:02:08,740 --> 00:02:11,900
เป็นองค์ประกอบที่ HTML
องค์ประกอบบนเตียรอยด์

48
00:02:11,900 --> 00:02:14,470
ดังนั้นองค์ประกอบ HTML เป็นเหมือนปุ่ม

49
00:02:14,470 --> 00:02:15,250
มันวรรค

50
00:02:15,250 --> 00:02:17,500
มันเป็นส่วนหัวใช่มั้ย?

51
00:02:17,500 --> 00:02:22,740
และ Instagram จะใช้เหล่านี้ แต่
จะใช้องค์ประกอบของการตอบสนอง

52
00:02:22,740 --> 00:02:25,740
>> ชิ้นส่วนที่มีการตอบสนอง
องค์ประกอบ HTML souped ขึ้น

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
ดังนั้นจึงเป็นเหมือนองค์ประกอบของ HTM​​L ที่เป็น
เตียรอยด์ที่ผมกล่าวว่าก่อนที่จะ

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
>> ดังนั้น React ถูกสร้างขึ้นรอบ ๆ
ความคิดของส่วนประกอบที่

77
00:03:32,860 --> 00:03:36,600
มีการโต้ตอบที่มีความเปิดเผย

78
00:03:36,600 --> 00:03:39,650
เช่นเดียวกับคุณเพียงแค่พูดในสิ่งที่
รายละเอียดและมันทำให้มัน

79
00:03:39,650 --> 00:03:40,600
พวกเขาเป็น composable

80
00:03:40,600 --> 00:03:43,880
คุณสามารถใช้เวลาและรายละเอียดใส่
พวกเขาร่วมกันทำสิ่งที่ดีกว่า

81
00:03:43,880 --> 00:03:47,770
และพวกเขากำลังนำมาใช้ใหม่ดังนั้นหากคุณ
มีรหัสที่มาสำหรับโพสต์

82
00:03:47,770 --> 00:03:49,440
คุณสามารถฝังที่ใดก็ได้

83
00:03:49,440 --> 00:03:53,160
>> คุณสามารถฝัง Instagram
สิ่งที่อยู่บนเว็บไซต์ของคุณเอง

84
00:03:53,160 --> 00:03:56,830
คุณสามารถฝังใน Facebook, ตัวอย่างเช่น
ตราบใดที่มันใช้ตอบสนองได้เป็นอย่างดี

85
00:03:56,830 --> 00:04:00,360
ดังนั้นส่วนประกอบจริงๆจริงๆ
หน่วยการสร้างที่มีประสิทธิภาพของเว็บ

86
00:04:00,360 --> 00:04:04,180
ที่สามารถใช้ทุกที่และใส่
ร่วมกันเพื่อให้การก่อสร้างตึกใหม่

87
00:04:04,180 --> 00:04:07,159
นั่นเป็นอย่างมาก
ภาพรวมในระดับสูง

88
00:04:07,159 --> 00:04:09,200
ดังนั้นอีกครั้งถ้าคุณมี
คำถามใด ๆ ที่จุดใด

89
00:04:09,200 --> 00:04:14,470
เกี่ยวกับปรัชญาของเครื่องปฏิกรณ์ที่
การเข้ารหัสที่จะหยุดฉันและแจ้งให้เราทราบ

90
00:04:14,470 --> 00:04:18,420
>> OK เพื่อให้ตอบสนองเป็นเย็นเพราะมัน
มีวิธีการที่แตกต่างกันของการมอง

91
00:04:18,420 --> 00:04:19,870
ที่วิธีการที่คุณสร้างปพลิเคชันเว็บ

92
00:04:19,870 --> 00:04:23,620
คุณคงเคยได้ยินของ MVC เป็น
รูปแบบที่คุณสามารถควบคุมใน CS50 หรืออะไรก็ตาม

93
00:04:23,620 --> 00:04:25,940
เรียนละเอียดอื่น ๆ ที่คุณใช้

94
00:04:25,940 --> 00:04:29,000
และกรอบมากที่สุดคือ
สร้างขึ้นรอบ ๆ ความคิดของ MVC

95
00:04:29,000 --> 00:04:30,410
ตอบสนองไม่ได้

96
00:04:30,410 --> 00:04:32,980
ตอบสนองถูกสร้างขึ้นรอบความคิด
ของการไหลของข้อมูลทิศทางเดียว

97
00:04:32,980 --> 00:04:36,510
เท่าที่เห็นจากแผนภูมิหรือกราฟฟิคที่นี่

98
00:04:36,510 --> 00:04:38,260
>> โดยทั่วไปคุณมีแหล่งที่มาข้อมูล

99
00:04:38,260 --> 00:04:42,380
และเป็นแหล่งข้อมูลที่จะเป็นผู้ตัดสินใจ
วิธีการที่จะออกวางองค์ประกอบบางอย่างที่

100
00:04:42,380 --> 00:04:45,452
และส่วนประกอบที่จะ
จากนั้นเมื่อพวกเขาเปลี่ยน

101
00:04:45,452 --> 00:04:47,160
พวกเขาจะบอก
แหล่งข้อมูลมีการเปลี่ยนแปลง

102
00:04:47,160 --> 00:04:49,350
>> ที่จะใช้ Instagram
ตัวอย่างเช่นคุณอาจมี

103
00:04:49,350 --> 00:04:52,050
รายการของวัตถุเช่นโพสต์
ในฐานข้อมูลหรือบางสิ่งบางอย่าง

104
00:04:52,050 --> 00:04:53,310
ว่าข้อมูลที่

105
00:04:53,310 --> 00:04:57,600
และแล้วส่วนประกอบโพสต์ของเรา
จะนำข้อมูลที่

106
00:04:57,600 --> 00:05:01,830
และใช้ข้อมูลที่จะทำให้
สิ่งที่อยู่บนหน้าจอ

107
00:05:01,830 --> 00:05:04,300
นั่นคือสิ่งที่ลูกศร
จากข้อมูลไปยังองค์ประกอบคือ

108
00:05:04,300 --> 00:05:07,930
แล้วข้อมูลเดียวกับที่ใช้
ที่จะทำให้พวงของส่วนประกอบ

109
00:05:07,930 --> 00:05:10,290
>> ใน Facebook Messenger ได้สำหรับ
ตัวอย่างซึ่งเป็นปฏิกิริยา,

110
00:05:10,290 --> 00:05:13,410
คุณอาจมีรายชื่อของ
ข้อความเป็นแหล่งข้อมูลของคุณ

111
00:05:13,410 --> 00:05:15,927
และนั่นจะทำให้ไม่ได้
เพียงรายการของข้อความ

112
00:05:15,927 --> 00:05:17,510
แต่ยังรายชื่อเพื่อนของคุณมี

113
00:05:17,510 --> 00:05:19,200
คุณมีการนับยังไม่ได้อ่าน

114
00:05:19,200 --> 00:05:23,330
อาจจะยังทำให้สิ่งที่ Facebook
ว่าที่ด้านล่างของ Facebook.com

115
00:05:23,330 --> 00:05:25,610
ข้อมูลเดียวกันคือ
แหล่งเดียวของความเป็นจริง

116
00:05:25,610 --> 00:05:28,290
และที่ทำให้เกิดจำนวนมาก
ส่วนประกอบที่จะแสดงผล

117
00:05:28,290 --> 00:05:30,290
และเมื่อใดก็ตามที่เป็นหนึ่งในบรรดา
ส่วนประกอบมีการเปลี่ยนแปลง

118
00:05:30,290 --> 00:05:32,320
มันจะไปและกลับ
การเปลี่ยนแปลงแห​​ล่งที่มาของข้อมูล

119
00:05:32,320 --> 00:05:33,460
>> คุณส่งข้อความไปใช่มั้ย?

120
00:05:33,460 --> 00:05:34,780
ที่มีการเปลี่ยนแปลงแห​​ล่งที่มาของข้อมูล

121
00:05:34,780 --> 00:05:39,490
คุณอ่านข้อความของคุณ
เพื่อให้คุณตั้งค่าเป็น 0 ยังไม่ได้อ่าน

122
00:05:39,490 --> 00:05:41,136
ที่มีการเปลี่ยนแปลงแห​​ล่งที่มาของข้อมูล

123
00:05:41,136 --> 00:05:44,010
และสังเกตเห็นว่าสิ่งเหล่านี้อย่างใดอย่างหนึ่ง
ลูกจะกลับไปที่ข้อมูลเดียวกัน

124
00:05:44,010 --> 00:05:47,662
แหล่งที่มาเพื่อให้คุณรู้ว่า
ได้รับชุดข้อมูลบางอย่าง

125
00:05:47,662 --> 00:05:49,870
คุณรู้ว่าสิ่งที่เป็น
หน้าเป็นไปได้ที่มีลักษณะเหมือน

126
00:05:49,870 --> 00:05:50,700
มันกำหนด

127
00:05:50,700 --> 00:05:53,451
คุณจะรู้ว่าข้อมูลที่ได้รับบางสิ่ง
หน้าเป็นไปได้ที่มีลักษณะเหมือน

128
00:05:53,451 --> 00:05:56,158
คุณสามารถคาดการณ์ว่ามันจะ
มีพฤติกรรมและวิธีการสิ่งที่จะไป

129
00:05:56,158 --> 00:05:57,650
จะทำงานเมื่อพวกเขากำลังใส่กัน

130
00:05:57,650 --> 00:06:00,410
>> และถ้าผมมีส่วนประกอบล้าน
ที่นี่ก็จะมีพฤติกรรมเหมือนกันใช่มั้ย?

131
00:06:00,410 --> 00:06:02,290
คุณจะไม่ได้ใด ๆ
การเชื่อมโยงที่แปลก

132
00:06:02,290 --> 00:06:04,120
หนึ่งในข้อมูลที่แสดงผลล้านส่วนประกอบ

133
00:06:04,120 --> 00:06:06,879
ล้านชิ้นส่วนที่จะทำได้
กลับไปแก้ไขข้อมูล

134
00:06:06,879 --> 00:06:07,920
และเพื่อให้เรื่องนี้เป็นสิ่งที่ดีมาก

135
00:06:07,920 --> 00:06:10,870
เรากำลังสร้าง composable,
ปรับขนาดได้อย่างง่ายดายปพลิเคชันเว็บ

136
00:06:10,870 --> 00:06:13,150
>> คุณมีแหล่งข้อมูลหนึ่ง
แหล่งที่มาของความเป็นจริง

137
00:06:13,150 --> 00:06:15,790
ที่บอกว่าอุปกรณ์ของคุณ
วิธีการที่จะออกวางหน้า

138
00:06:15,790 --> 00:06:18,190
และส่วนประกอบที่จะ
จัดการกับการทำงานร่วมกัน

139
00:06:18,190 --> 00:06:20,150
และถ้าพวกเขาต้องการที่จะเปลี่ยน
สิ่งที่เพียงแค่กลับไป

140
00:06:20,150 --> 00:06:21,750
และบอกแหล่งข้อมูลที่จะเปลี่ยน

141
00:06:21,750 --> 00:06:22,850
ความรู้สึกให้?

142
00:06:22,850 --> 00:06:26,010
ดังนั้นการตอบสนองคือทั้งหมดที่เกี่ยวกับความเข้าใจ
วิธีการสร้างส่วนประกอบ

143
00:06:26,010 --> 00:06:29,540
และวิธีการที่จะทำให้คอมโพเนนต์ของคุณ
มีปฏิสัมพันธ์กับโลกภายนอก

144
00:06:29,540 --> 00:06:31,850
>> การโต้ตอบส่วนประกอบ
กับโลกภายนอก

145
00:06:31,850 --> 00:06:34,490
ใช้เทคโนโลยีอื่น
ที่เรียกว่าฟลักซ์ซึ่ง

146
00:06:34,490 --> 00:06:36,872
เป็นกรอบที่เป็น
เพิ่มที่ด้านบนของการตอบสนอง

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
หากคุณมีเหมือนปลายด้านหลังหลาม
ถ้างูหลามของคุณสามารถคายข้อมูลบางส่วน

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
คุณจะรู้ว่าทั้งหมดของรหัสสำหรับ
พูดคุยในวันนี้เป็นไปได้ที่ URL นี้

165
00:07:26,610 --> 00:07:29,320
ที่นี่ขออภัย URL นี้ที่นี่

166
00:07:29,320 --> 00:07:32,730
และโดยทั่วไปเรากำลังจะไป
ผ่านสี่ขั้นตอนอาจจะห้า

167
00:07:32,730 --> 00:07:33,510
อาจจะไม่ได้ห้า

168
00:07:33,510 --> 00:07:37,300
เราจะย้ายผ่านสี่ขั้นตอน
ของการสร้างแอพพลิเคตัวอย่างตอบสนอง

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
ดังนั้นจึงเป็นแผ่นโกงที่ดีเช่นกัน
สำหรับการผจญภัยในอนาคตของคุณด้วยการตอบสนอง

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
จริงๆอย่างรวดเร็วโดยไม่ต้องใช้
ID ของเราหรือใช้เครื่องในท้องถิ่นของเรา

190
00:08:43,089 --> 00:08:44,290
หรืออะไรก็ตาม

191
00:08:44,290 --> 00:08:47,670
มันเป็นวิธีที่รวดเร็วมากสำหรับคุณที่จะ Mockup
และการทดสอบออกมาแตกต่างกันของรหัส

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
>> OK เพื่อให้ตอบสนองเป็น 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
นอกจากนี้เรายังเป็นจำนวนมากของ HTM​​L ที่นี่เพราะ
เรากำลังออกแบบหน้าเว็บของหลักสูตร

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
เป็น app flashcard พื้นฐานมากโดยใช้ตอบสนอง

222
00:10:06,470 --> 00:10:08,210
เรากำลังจะมี flashcard

223
00:10:08,210 --> 00:10:09,880
คุณสามารถพลิกบัตรไปมา

224
00:10:09,880 --> 00:10:12,399
และเรายังจะมีรายชื่อของ
บัตรทั้งหมดที่เรามี

225
00:10:12,399 --> 00:10:14,190
และถ้าเรารู้สึก
ทะเยอทะยาน, เราอาจจะ

226
00:10:14,190 --> 00:10:17,060
ความสามารถในการสลับไปมาระหว่าง
รถยนต์โดยคลิกที่พวกเขา

227
00:10:17,060 --> 00:10:20,360
>> แต่นี้เป็นของเปล่าของคุณ
กระดูกที่ตอบสนองการตรวจสอบที่ง่ายมาก

228
00:10:20,360 --> 00:10:22,560
ดังนั้นนี้เป็นจริง
ไม่น่ารำคาญที่จะใช้

229
00:10:22,560 --> 00:10:26,030
แต่เรากำลังจะแสดงให้เห็นว่าถ้าคุณทำ
นี้ก็มากและง่ายมากที่จะขยายมัน

230
00:10:26,030 --> 00:10:27,680
ถ้าคนอื่น ๆ ที่ช่วยให้คุณกับมัน

231
00:10:27,680 --> 00:10:33,750
ดังนั้นเรากำลังจะไปผ่านสี่ขั้นตอน
เริ่มต้นจากรอยขีดข่วนที่จะสร้างนี้

232
00:10:33,750 --> 00:10:36,740
>> ตกลงดังนั้นสี่ขั้นตอนเราจะ
เริ่มต้นด้วยขั้นตอนแรก

233
00:10:36,740 --> 00:10:39,790
ขั้นตอนแรกที่เป็นไปได้
การสร้างองค์ประกอบแรกของคุณ

234
00:10:39,790 --> 00:10:44,830
ที่ผมกล่าวว่าก่อนที่จะเป็นส่วนประกอบในการตอบสนอง
เป็นเพียงองค์ประกอบ 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
>> ดังนั้นในสิ่งที่ทำให้คุณ
ก็ต้องกลับมาบาง HTM​​L

260
00:12:01,904 --> 00:12:03,820
และสิ่งที่เย็นคือ
มีสิ่งที่เรียกว่า

261
00:12:03,820 --> 00:12:08,660
JSX ซึ่งเป็นส่วนขยายของ
จาวาสคริปต์ที่ถูกใช้โดยตอบสนอง

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
>> ดังนั้นสมมติว่าเราต้องการที่จะทำให้เพียง
flashcard ตรงขึ้นสำหรับในตอนนี้

270
00:12:32,390 --> 00:12:34,890
flashcard ที่ฉันจะพูดว่า
จะมีคำถามและคำตอบ

271
00:12:34,890 --> 00:12:37,530
ดังนั้นภายใน div นี้ขอ
พิมพ์วรรค

272
00:12:37,530 --> 00:12:42,155
ที่บอกว่าคำถามของสิ่งที่เป็น
คำตอบที่ดีที่สุดเพื่อชีวิตจักรวาล?

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
คุณเขียน App ดังนั้น App เป็น
รับการปฏิบัติเช่นองค์ประกอบ HTML

286
00:13:28,120 --> 00:13:30,380
ที่ผมกล่าวก่อนก็
องค์ประกอบเตียรอยด์

287
00:13:30,380 --> 00:13:32,870
>> คุณดังนั้นทำให้ App และคุณ
ให้สถานที่ที่จะใส่มัน

288
00:13:32,870 --> 00:13:37,170
และนี่คือวิธีที่คุณสามารถ
บอกว่าที่จะนำมัน

289
00:13:37,170 --> 00:13:46,200
ฉันได้สร้าง 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
>> และสิ่งที่เราทำเราทำ app ใหม่
โดยใช้วงเล็บมุมสัญกรณ์การตรวจสอบ

302
00:14:24,460 --> 00:14:27,160
เราบอกว่ามันจะนำมัน
ภายในองค์ประกอบหน้า

303
00:14:27,160 --> 00:14:29,867
ดังนั้นสิ่งที่ผมทำมันสร้าง
app ใหม่จากแม่แบบที่

304
00:14:29,867 --> 00:14:31,200
แล้วผมบอกว่ามันจะทำให้มัน

305
00:14:31,200 --> 00:14:33,680
ดังนั้นจึงกล่าวว่าตกลงใน app
สิ่งที่ฉันควรจะพิมพ์ออกมา?

306
00:14:33,680 --> 00:14:36,970
App กล่าวไปพิมพ์ div
กับสองย่อหน้าภายในของมัน

307
00:14:36,970 --> 00:14:40,420
และ voila มี 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
>> ดังนั้นสมมติว่าเราต้องการของเรา
app ที่จะไปทำให้บัตรใด ๆ

320
00:15:17,500 --> 00:15:19,630
ตอนนี้เราก็
กลายเป็นบัตร hardcoded

321
00:15:19,630 --> 00:15:22,530
เรารู้ว่ามีเพียงหนึ่ง
บัตรก็สามารถทำเพื่อเรา

322
00:15:22,530 --> 00:15:25,960
จะพยายามและการเปลี่ยนแปลงนี้ในขณะนี้เพื่อ
ว่าเราก็สามารถให้การ์ดบาง

323
00:15:25,960 --> 00:15:27,410
มันจะพิมพ์ออกบัตร

324
00:15:27,410 --> 00:15:29,380
>> คุณควรจะพยายามทำให้คุณ
ส่วนประกอบที่ใช้งานทั่วไปมาก

325
00:15:29,380 --> 00:15:31,654
ดังนั้นวิธีนี้ผมสามารถส่งอีเมล
นี้เพื่อนของฉันและเป็นเช่น

326
00:15:31,654 --> 00:15:33,820
สิ่ง flashcard ที่คุณมี
เพียงแค่กินมันเข้าไปในที่นี่

327
00:15:33,820 --> 00:15:35,290
และมันจะทำมันด้วยตัวเอง

328
00:15:35,290 --> 00:15:37,650
คุณสามารถใส่อื่น ๆ
สิ่งที่อยู่ใน app ของคุณเอง

329
00:15:37,650 --> 00:15:40,600
>> แต่ก่อนอื่นเรามาทำลายนี้
ออกเป็นสองส่วน

330
00:15:40,600 --> 00:15:44,500
แต่เราต้องการที่จะแยกบัตร
พิมพ์ส่วนหนึ่งจากส่วนการตรวจสอบที่เกิดขึ้นจริง

331
00:15:44,500 --> 00:15:46,660
ดังนั้นสิ่งที่เราสามารถทำได้คือเรา
สามารถเปลี่ยนจาก App

332
00:15:46,660 --> 00:15:51,300
เพื่อ CardView เพียง
ชื่อใหม่สำหรับแอพพลิเค

333
00:15:51,300 --> 00:15:54,450
และเราสามารถทำให้ใหม่
ส่วนประกอบที่เรียกว่า App,

334
00:15:54,450 --> 00:15:56,336
เพื่อไม่ให้สับสนกับ App เก่า

335
00:15:56,336 --> 00:16:00,730
เรามี createClass ที่
และเช่นเดียวกับในรูปแบบ HTML,

336
00:16:00,730 --> 00:16:03,590
คุณสามารถตอบสนองรังส่วนประกอบ
ภายในของแต่ละอื่น ๆ

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
มันเป็นชนิดเช่น struct
ใน C ดังนั้นเราจึงทำบัตร

352
00:17:09,280 --> 00:17:15,920
และตอนนี้เราสามารถผ่านบัตรเช่นนี้
ทรัพย์สินหรือเป็นแอตทริบิวต์ใน HTML มี

353
00:17:15,920 --> 00:17:17,290
คำศัพท์เพื่อ app ของเรา

354
00:17:17,290 --> 00:17:20,210
ดังนั้นเราจึงสามารถทำเช่นนี้ App
บัตรเท่ากับ myCard

355
00:17:20,210 --> 00:17:23,200
>> คุณรู้วิธีในการป้อนข้อมูลที่คุณทำ
ประเภทการป้อนข้อมูลเท่ากับข้อความหรือปุ่ม

356
00:17:23,200 --> 00:17:25,240
ระดับเท่ากับ btn สำหรับบูต ,?

357
00:17:25,240 --> 00:17:29,500
ความคิดเดียวกันบัตร App equals--
คุณได้มีการใส่เครื่องมือจัดฟัน here--

358
00:17:29,500 --> 00:17:33,830
บัตร App เท่ากับ myCard ดังนั้นนี้
กล่าวว่าเรามีวัตถุการ์ดใบนี้

359
00:17:33,830 --> 00:17:39,149
ฉันจะผ่านมันเป็น
สถานที่ให้บริการไปยังส่วนการตรวจสอบ

360
00:17:39,149 --> 00:17:41,440
และองค์ประกอบ app นี้จะ
จะสามารถเข้าถึงได้และทำ

361
00:17:41,440 --> 00:17:43,580
สิ่งที่น่าสนใจกับมัน

362
00:17:43,580 --> 00:17:47,650
>> ดังนั้น app ของเราเป็นไปได้
รับบัตรดังนั้นสำหรับตอนนี้

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
โดยใช้บัตร App เท่ากับ myCard

373
00:18:18,250 --> 00:18:21,420
วัตถุบัตรที่จะได้รับการ app ของคุณ

374
00:18:21,420 --> 00:18:24,400
app ที่สามารถเข้าถึงได้
เป็น this.props.card

375
00:18:24,400 --> 00:18:28,780
มันเป็นเหมือนภาพ
แหล่งที่มารู้ว่าสิ่งที่มันเป็น

376
00:18:28,780 --> 00:18:31,972
>> app นี้รู้ว่าสิ่งที่มันเป็นการ์ด
และมันสามารถทำสิ่งที่มีมัน

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
ตอนนี้เราก็พิมพ์ออกมาบางส่วน
คำถามและคำตอบ hardcoded

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
มันให้กับเราเป็น input

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
>> ดังนั้นบัตรเป็นวัตถุบัตรและเรา
จะให้บัตรที่เพื่อ app

404
00:20:00,470 --> 00:20:04,790
และ app ที่เป็นไปได้ที่จะใช้
บัตรและให้แก่ CardView

405
00:20:04,790 --> 00:20:09,190
และ CardView นี้กล่าวว่าถ้าคุณ
ให้ฉัน flashcard วัตถุใด ๆ

406
00:20:09,190 --> 00:20:11,920
ฉันจะพิมพ์ออกมาของคำถาม
และคำตอบที่ใช่มั้ย?

407
00:20:11,920 --> 00:20:14,590
>> ดังนั้นสิ่งที่ฉันจะทำคือฉันสามารถ
ส่งรหัสนี้เป็นครั้งแรก

408
00:20:14,590 --> 00:20:16,580
เช่น 10 สายรหัสของฉันกับเพื่อนของฉัน

409
00:20:16,580 --> 00:20:18,820
เขาจะฝังใน
แอพลิเคชันของตัวเอง

410
00:20:18,820 --> 00:20:27,200
และตราบใดที่เขาทำในสิ่งเดียวกัน
เช่นบัตร CardView เท่ากับนี้

411
00:20:27,200 --> 00:20:30,580
ตราบใดที่เขาสร้างขึ้น CardView
และมอบให้เป็นข้อมูลที่ถูกต้อง

412
00:20:30,580 --> 00:20:31,987
เขาสามารถทำให้การ์ดของตัวเอง

413
00:20:31,987 --> 00:20:34,320
ดังนั้นวิธีนี้จะเป็นจริง
วิธีที่เย็นสำหรับคุณที่จะสร้าง

414
00:20:34,320 --> 00:20:35,906
ส่วนประกอบที่ใช้กันใช่มั้ย?

415
00:20:35,906 --> 00:20:38,280
การ์ดใบนี้ฉันจะเผยแพร่
CardView บนอินเทอร์เน็ตนี้

416
00:20:38,280 --> 00:20:39,790
และคนที่จะสามารถใช้งานได้

417
00:20:39,790 --> 00:20:45,070
ดังนั้นโดยทั่วไปก็เหมือนหนึ่งใน
ฟังก์ชั่นมาตรฐานในห้องสมุด 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
>> สำหรับ flashcard สำหรับ
ตัวอย่างเช่นชนิดของรัฐ

449
00:22:05,320 --> 00:22:07,550
คุณอาจต้องการที่จะ
จำ flashcard หรือไม่?

450
00:22:07,550 --> 00:22:09,740
สิ่งที่สถานะชั่วคราว
คุณอาจต้องการที่จะจำ

451
00:22:09,740 --> 00:22:12,491
สำหรับ flashcard ในแอปพลิเค flashcard?

452
00:22:12,491 --> 00:22:13,990
ผู้ชม: ไม่ว่าจะได้รับการพลิก?

453
00:22:13,990 --> 00:22:14,990
NEEL เมธา: ใช่ขวา

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
NEEL เมธา: เช่นเดียวกับแฟลช
บัตรเช่นคุณสามารถเห็น

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
>> NEEL เมธา: ชอบ
flashcard สองด้านขวา?

468
00:22:43,270 --> 00:22:46,370
ใช่ดังนั้นคุณจึงต้องการ
มีความคิดในตอนนี้

469
00:22:46,370 --> 00:22:50,370
ฉันมีคุณสมบัติซึ่งเป็นเหมือนปัจจัยการผลิต
แต่รัฐซึ่งเป็นชั่วคราวเอ่อ

470
00:22:50,370 --> 00:22:51,839
คุณจะอยู่ที่ไหนในหน้าใช่มั้ย?

471
00:22:51,839 --> 00:22:54,380
อีกครั้งที่ผมกล่าวใน Facebook
Messenger ของผมมีคนที่ชอบ

472
00:22:54,380 --> 00:22:56,550
คุณกำลังดู Facebook
หรือผู้ที่เป็นรายละเอียดใช่มั้ย?

473
00:22:56,550 --> 00:22:58,030
>> นี้เป็นเพียงชั่วคราว

474
00:22:58,030 --> 00:23:01,200
มันเป็นสิ่งสำคัญที่จะแสดงให้ผู้ใช้
สิ่งที่เกิดขึ้น แต่รีเฟรชหน้าเว็บ

475
00:23:01,200 --> 00:23:02,250
มันไม่สำคัญว่าจริงๆ

476
00:23:02,250 --> 00:23:04,530
ดังนั้นจึงเป็นรัฐชั่วคราว
ดังนั้นเราจึงรัฐมันทั้งหมด

477
00:23:04,530 --> 00:23:06,250
>> ดังนั้นอีกครั้งมีรัฐและอุปกรณ์

478
00:23:06,250 --> 00:23:09,084
อุปกรณ์ประกอบฉากจะได้รับการป้อนข้อมูล
จากแหล่งข้อมูลของคุณ

479
00:23:09,084 --> 00:23:10,250
รัฐก็เหมือนกับการเริ่มต้น

480
00:23:10,250 --> 00:23:13,700
ก็เช่นเดียวกับสิ่งที่
ทำให้สิ่งที่โต้ตอบ

481
00:23:13,700 --> 00:23:17,720
>> ดังนั้นใน CardView-- ขอได้ของเรา
CardView-- ของเราเพื่อให้มันเป็นที่ดี

482
00:23:17,720 --> 00:23:21,420
สิ่งที่เรากำลังจะทำที่นี่เรากำลังจะ
สัมผัส CardView และมีเพียง CardView

483
00:23:21,420 --> 00:23:25,105
และเพื่อให้เพื่อนของฉันที่ได้นี้พวกเขา
จะไม่เห็นความแตกต่างใด ๆ

484
00:23:25,105 --> 00:23:27,230
พวกเขาจะไม่ได้มีการเปลี่ยนแปลง
ใด ๆ ของรหัสของตัวเอง

485
00:23:27,230 --> 00:23:29,410
แต่พวกเขาจะได้เห็นพวกเขา
CardView ได้ souped ขึ้น

486
00:23:29,410 --> 00:23:31,270
นั่นเป็นส่วนหนึ่งที่ดีเกี่ยวกับส่วนประกอบ

487
00:23:31,270 --> 00:23:35,290
>> ตกลงดังนั้นใน CardView เราลองและ
ติดตามไม่ว่าจะเป็นช่วงที่เรากำลังขึ้น

488
00:23:35,290 --> 00:23:36,560
หรือคว่ำหน้าลง

489
00:23:36,560 --> 00:23:40,480
ในการตอบสนองที่เราทำเช่นนี้โดยครั้งแรก
ระบุสถานะเริ่มต้น

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
>> OK ดังนั้นทำให้ตอนนี้เรา
แสดงคำถามและคำตอบที่

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
>> NEEL เมธา: อ๋อดังนั้นข้อความ
เท่ากับ 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
>> NEEL เมธา: อ้างเพื่อใช้สิ่งที่
this.front is-- รัฐต้อนรับ

565
00:27:38,420 --> 00:27:40,930
ใช้รัฐด้านหน้าถ้า
มันเป็นความจริงให้เป็นเท็จ

566
00:27:40,930 --> 00:27:42,530
ถ้าเป็นเท็จทำให้มันเป็นความจริงใช่มั้ย?

567
00:27:42,530 --> 00:27:45,330
ดังนั้นลองที่

568
00:27:45,330 --> 00:27:48,240
>> คุณไม่สามารถเปลี่ยนสถานะ
เพียงแค่ทำ this.state

569
00:27:48,240 --> 00:27:50,380
คุณไม่สามารถทำเช่นนี้

570
00:27:50,380 --> 00:27:52,030
คุณไม่สามารถทำเช่นนั้น

571
00:27:52,030 --> 00:27:55,810
คุณต้องใช้ฟังก์ชั่น
เรียกว่า this.setState

572
00:27:55,810 --> 00:28:03,230
>> เพื่อให้คุณสามารถพูด this.setState ด้านหน้า
ลำไส้ใหญ่ที่นี้อีกครั้งอัศเจรีย์

573
00:28:03,230 --> 00:28:04,330
หมายถึงจุดตรงข้าม

574
00:28:04,330 --> 00:28:07,420
ผมคิดว่าถ้าเรื่องนี้ state.front
เป็นความจริงก็จะเปิดเป็นเท็จ

575
00:28:07,420 --> 00:28:09,170
ดังนั้นเราจะตั้งรัฐ
จากความจริงเป็นเท็จ

576
00:28:09,170 --> 00:28:11,430
ถ้าเป็นเท็จเราจะ
ตั้งค่าผิดพลาดจริง

577
00:28:11,430 --> 00:28:17,210
>> เพียงแค่แจ้งให้ทราบว่าเราจะกำหนดและได้รับเล็กน้อย
แตกต่างกันและเพื่อให้ลองนี้

578
00:28:17,210 --> 00:28:18,675
Bada Bing, ดูที่นี้

579
00:28:18,675 --> 00:28:21,810
ปุ่มพลิกจะตอนนี้
สลับด้านหน้าไปด้านหลังรัฐ

580
00:28:21,810 --> 00:28:24,990
>> และเพื่อให้ที่นี่เป็นที่ที่คุณเห็น
นิด ๆ หน่อย ๆ ของความมหัศจรรย์ของการตอบสนอง

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
ได้ to-- ชอบเมื่อ
ปุ่มพลิกมีการคลิก

585
00:28:34,588 --> 00:28:37,290
คุณจะต้องบอกให้
ด้วยตนเองอีกครั้งทำให้ใช่มั้ย?

586
00:28:37,290 --> 00:28:43,050
>> ตอบสนองที่เป็นจริงในเย็นว่าถ้าคุณ
ให้รัฐบางอย่างและคุณสมบัติ

587
00:28:43,050 --> 00:28:45,760
มันก็จะทำให้
สิ่งเดียวที่แน่นอน

588
00:28:45,760 --> 00:28:48,690
และดังนั้นเมื่อเราเคยเราเปลี่ยน
รัฐและคุณสมบัติที่

589
00:28:48,690 --> 00:28:50,819
ตอบสนองเพียงวาทกรรมอีกครั้งสิ่งที่ทั้ง

590
00:28:50,819 --> 00:28:52,860
มันรู้ว่ามี
แบบหนึ่งต่อหนึ่งการติดต่อ

591
00:28:52,860 --> 00:28:57,270
ระหว่างรัฐกับพารามิเตอร์และ HTML

592
00:28:57,270 --> 00:29:00,110
ดังนั้นเมื่อใดก็ตามที่ทั้งของคนเหล่านั้น
การเปลี่ยนแปลงโดยผ่านรัฐชุด

593
00:29:00,110 --> 00:29:03,750
มันจะเปลี่ยนวิธีการ
การจ่ายเงินมีการแสดงอีกครั้ง

594
00:29:03,750 --> 00:29:06,650
และเพื่อตอบสนองโดยทั่วไปเป็นเหมือน
รอให้คุณเปลี่ยน

595
00:29:06,650 --> 00:29:09,870
>> เมื่อใดก็ตามที่มีการเปลี่ยนแปลงบางสิ่งบางอย่าง
มันจะกลับมาทำให้ทั้งหน้า

596
00:29:09,870 --> 00:29:12,480
และถ้ามันฟังดูไม่มีประสิทธิภาพ
มันเป็นเพราะมันจะเป็น

597
00:29:12,480 --> 00:29:15,050
แต่ตอบสนองการใช้สิ่งที่
เรียกว่าเงา DOM

598
00:29:15,050 --> 00:29:19,950
แทนการวาดภาพหน้าตรงมัน
ช่วยให้ต้นไม้ HTML เสมือนในหน่วยความจำ

599
00:29:19,950 --> 00:29:23,620
>> คุณจะรู้ว่า HTML เป็นเหมือนต้นไม้
เช่นโครงสร้างข้อมูลแบบลำดับชั้น

600
00:29:23,620 --> 00:29:28,990
มันทำให้ต้นไม้ปลอมในหน่วยความจำ
และเมื่อใดก็ตามที่คุณอัปเดตหน้า

601
00:29:28,990 --> 00:29:31,940
มันจะวาดปลอมอีก
ต้นไม้และมันจะคำนวณ

602
00:29:31,940 --> 00:29:35,120
สิ่งที่จะต้องมีการเปลี่ยนแปลงเพื่อให้
หน้าจะทำให้ต้นไม้สองต้นเท่ากับ

603
00:29:35,120 --> 00:29:38,540
ดังนั้นโดยทั่วไปก็จริง
อีกวาทกรรมมาก

604
00:29:38,540 --> 00:29:41,540
และจากนั้นก็เพียง แต่ชอบการเปลี่ยนแปลง
หน้านี้ในการปรับแต่งเล็ก ๆ น้อย ๆ ตามความจำเป็น

605
00:29:41,540 --> 00:29:44,240
ดังนั้นจึงเป็นเรื่องมากที่มีประสิทธิภาพมาก

606
00:29:44,240 --> 00:29:46,970
>> ดังนั้นโดยทั่วไปจะตอบสนอง
เมื่อใดก็ตามที่คุณเปลี่ยนบางสิ่งบางอย่าง

607
00:29:46,970 --> 00:29:49,010
มันจะกลับมาแสดงผลหน้าจริง

608
00:29:49,010 --> 00:29:52,830
มันจะคิดออกว่าผมไม่จำเป็นต้อง
เปลี่ยนที่จะทำให้หน้าจริงสะท้อนให้เห็นถึง

609
00:29:52,830 --> 00:29:55,602
หน้าเสมือนและมันจะทำอย่างนั้น

610
00:29:55,602 --> 00:29:56,560
นั่นคือ DOM เสมือน

611
00:29:56,560 --> 00:29:59,350
มันเป็นหนึ่งในที่ใหญ่ที่สุด
คุณสมบัติของการตอบสนอง

612
00:29:59,350 --> 00:30:00,880
>> ที่ทำให้รู้สึก?

613
00:30:00,880 --> 00:30:01,540
มีคำถามอะไรไหม?

614
00:30:01,540 --> 00:30:02,040
ใช่?

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

616
00:30:05,568 --> 00:30:08,969
>> ผู้ชม: อย่างไร
ยังคงเปรียบเทียบกับ MVC

617
00:30:08,969 --> 00:30:10,760
ที่เราพูดคุยเกี่ยวกับ
ก่อนทรัพยากรเช่น

618
00:30:10,760 --> 00:30:13,527
>> NEEL เมธา: ใช่คำถาม
เป็นวิธีการที่ไม่ได้เปรียบเทียบกับ MVC?

619
00:30:13,527 --> 00:30:14,610
คุณถามเกี่ยวกับทรัพยากร

620
00:30:14,610 --> 00:30:16,445
ดีขอพูดคุยเกี่ยวกับวิธีการที่จะทำหน้าที่

621
00:30:16,445 --> 00:30:18,190
>> ใน MVC คุณต้องการปรับปรุงรูปแบบ

622
00:30:18,190 --> 00:30:20,560
ในกรณีนี้เราจะมีรูปแบบบัตร

623
00:30:20,560 --> 00:30:24,540
มุมมองจะมี
ปุ่มพลิกและการควบคุม

624
00:30:24,540 --> 00:30:26,310
จะมีฟังก์ชั่นพลิก

625
00:30:26,310 --> 00:30:28,450
ดังนั้นมุมมองที่จะบอก
ควบคุมการพลิกพลิก

626
00:30:28,450 --> 00:30:30,370
พลิกจะบอก
รูปแบบการเปลี่ยนแปลงใช่มั้ย?

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
และเพื่อตอบสนองเป็นอย่างดี
เพราะมีเงาพระ

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
ดังนั้นถ้าคุณทำไม่ได้
มีเงาพระที่คุณต้องการ

646
00:31:15,320 --> 00:31:18,740
ต้องทำด้วยตนเองเพราะ
คุณจะไม่สามารถกำจัดทั้งหน้า

647
00:31:18,740 --> 00:31:21,430
คุณไม่สามารถที่จะให้คุณมี
ที่จะเปลี่ยนสิ่งที่แต่ละคนด้วยตนเอง

648
00:31:21,430 --> 00:31:23,990
ซึ่งเป็นที่น่ารำคาญจริงๆในการ MVC

649
00:31:23,990 --> 00:31:27,640
>> ดังนั้นในการที่จะ
ประหยัดพวกเขาเลือก

650
00:31:27,640 --> 00:31:30,750
อัปเดตหน้าซึ่งเป็น
ที่มีประสิทธิภาพ แต่ยังน่ารำคาญ

651
00:31:30,750 --> 00:31:34,002
ในการตอบสนองเพราะเงา
Dom คุณจะได้รับสิ่งที่ทั้งสองได้ฟรี

652
00:31:34,002 --> 00:31:35,710
มันเป็นเพราะมีประสิทธิภาพ
เงาของพระ

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
สมมติว่าแอพพลิเค flashcard ของเราควรจะเป็น
มีรายการของบัตรทั้งหมด

673
00:32:28,730 --> 00:32:31,520
ว่าคุณมีเพื่อให้หมายความว่าเรา
ควรจะมีองค์ประกอบอื่น

674
00:32:31,520 --> 00:32:32,970
ดีอาจจะเรียกว่ามุมมองรายการ

675
00:32:32,970 --> 00:32:36,200
ขอให้มุมมองรายการที่
อยู่อย่างมี CardView ที่

676
00:32:36,200 --> 00:32:39,680
และดูรายการนี​​้และ CardView
จะชอบทำงานร่วมกัน

677
00:32:39,680 --> 00:32:43,190
และคุณสามารถรวมพวกเขา
ที่จะทำให้ app ของเราสำหรับคุณ

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
>> สิทธิทั้งหมดดังนั้น app เป็น
จะได้รับบัตรรายการ

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
>> NEEL เมธา: ใช่เราจึง
ต้องการที่จะมีรัฐใช่มั้ย?

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
ดังนั้นตอนนี้ app ของเรามีสถานะของตัวเอง

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
ดังนั้นนี่คือใหม่
รุ่น souped ขึ้นของเรา

734
00:36:10,390 --> 00:36:16,000
>> ตกลงดังนั้นตอนนี้เรามีมุมมองรายการที่
แสดงบัตรทั้งหมดในโปรแกรมของคุณ

735
00:36:16,000 --> 00:36:19,980
ดังนั้นเราจะทำใหม่
ส่วนประกอบที่เรียกว่า ListView

736
00:36:19,980 --> 00:36:22,155
ให้ ListView เท่ากับ react.createClass

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

738
00:36:32,890 --> 00:36:38,800
ดังนั้นเราจึงต้องการที่จะทำให้เรียงลำดับ
รายการที่มีรายการสำหรับบัตรทุก

739
00:36:38,800 --> 00:36:41,490
และเพื่อให้เรามีพวงของบัตร

740
00:36:41,490 --> 00:36:44,990
เราต้องการรายการหนึ่ง
สำหรับการ์ดทุกใช่มั้ย?

741
00:36:44,990 --> 00:36:47,490
เราสามารถทำสำหรับวงหรือ
บางสิ่งบางอย่างที่จะทำให้รายการรายชื่อใหม่

742
00:36:47,490 --> 00:36:50,522
แต่วิธีการที่คุณทำมันใน
ตอบสนองการใช้สิ่งที่เรียกว่าแผนที่

743
00:36:50,522 --> 00:36:57,150
แผนที่เป็นเครื่องมือหรือฟังก์ชั่นที่คุณใช้เป็น
ว่าทุกรายการวิ่งฟังก์ชั่นบางอย่าง

744
00:36:57,150 --> 00:36:59,510
ใช้ค่าตอบแทนและ
จะช่วยให้คุณกลับมาที่

745
00:36:59,510 --> 00:37:06,310
>> เพื่อให้เป็นตัวอย่างที่เรามีอาร์เรย์
1, 2, function-- 3.map นี้

746
00:37:06,310 --> 00:37:12,120
ชวเลขเป็น
ลูกศร function-- x x x ครั้ง

747
00:37:12,120 --> 00:37:16,110
นี้กล่าวว่าสำหรับจำนวนทุก
ใน 1, 2, 3, เอามัน

748
00:37:16,110 --> 00:37:17,800
สแควร์มันและให้มันกลับมา

749
00:37:17,800 --> 00:37:22,090
ดังนั้นสิ่งที่คุณคิดว่า 1,
2 x 3.map ไปคร​​ั้ง x

750
00:37:22,090 --> 00:37:25,480
x ช่วยให้คุณได้รับกลับมา
ที่ฟังก์ชั่นนี้

751
00:37:25,480 --> 00:37:27,680
ทำงานในองค์ประกอบของอาร์เรย์ว่าทุก

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

753
00:37:30,837 --> 00:37:32,190
>> ผู้ชม: 1, 4 9

754
00:37:32,190 --> 00:37:35,709
>> NEEL เมธา: อ๋อ, 1, 4, 9
เพราะคุณทำ 1 ครั้ง 1

755
00:37:35,709 --> 00:37:36,500
ที่ช่วยให้คุณหนึ่ง

756
00:37:36,500 --> 00:37:37,690
นั่นเป็นองค์ประกอบแรก

757
00:37:37,690 --> 00:37:38,530
>> 2 ครั้งที่ 2 เป็น 4

758
00:37:38,530 --> 00:37:39,570
นั่นเป็นองค์ประกอบที่สอง

759
00:37:39,570 --> 00:37:40,310
3 ครั้งที่ 3 คือ 9

760
00:37:40,310 --> 00:37:41,540
นั่นเป็นองค์ประกอบที่สาม

761
00:37:41,540 --> 00:37:42,640
ความรู้สึกให้?

762
00:37:42,640 --> 00:37:45,015
แผนที่ดังนั้นมีเทคนิคคุณ
ใช้ในการเขียนโปรแกรมการทำงาน

763
00:37:45,015 --> 00:37:48,090
รูปแบบใหม่ของ
การเขียนโปรแกรมที่จะทำบางสิ่งบางอย่าง

764
00:37:48,090 --> 00:37:50,500
องค์ประกอบในรายการของคุณทุกคน

765
00:37:50,500 --> 00:37:51,970
และเพื่อให้เสียงที่คุ้นเคย

766
00:37:51,970 --> 00:37:53,370
เรามีรายการของบัตร

767
00:37:53,370 --> 00:37:56,860
เราต้องการที่จะได้รับรายการสำหรับทุกคน
หนึ่งดังนั้นเราก็จะใช้แผนที่ที่นี่

768
00:37:56,860 --> 00:38:00,250
เราจะบอกให้เท่ากับรายการ
this.props, การ์ด, แผนที่

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

770
00:38:10,580 --> 00:38:15,070
>> และเพื่อให้ได้รับบัตรเรา
จะสร้างในรายการ

771
00:38:15,070 --> 00:38:17,580
ด้วยเนื้อหาของบัตรที่ด้านข้างของมัน

772
00:38:17,580 --> 00:38:20,660
ขอเพียงบอกว่าเราต้องการที่จะให้ออก
บัตรคำถามเพื่อ card.question

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

774
00:38:24,990 --> 00:38:30,649
ดังนั้นรายการนี​​้มี
อาร์เรย์ของ LI หรือบัตรรายการ

775
00:38:30,649 --> 00:38:32,440
ที่มีรายการหนึ่ง
รายการบัตรทุก

776
00:38:32,440 --> 00:38:35,150
และที่มีคำถามการ์ด

777
00:38:35,150 --> 00:38:37,640
ความรู้สึกให้?

778
00:38:37,640 --> 00:38:39,450
>> เย็นดังนั้นตอนนี้เรามา
จริงที่พิมพ์ออกมา

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
ดังนั้นตอนนี้ขอทำหน้าที่ดังนั้นเราจึงฝัง
นี้ภายในของ app ของเรา

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
NEEL เมธา: ใช่ดังนั้นบัตร
เท่ากับ 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
หันองค์ประกอบหนึ่งในระดับชั้นนำในการแสดงผล
เพื่อให้คุณได้มีการห่อมันใน div

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
>> NEEL เมธา: คำถามคือสามารถ
คุณใช้ JSX ด้วย JavaScript ปกติ?

831
00:41:30,760 --> 00:41:32,620
คำตอบคือใช่

832
00:41:32,620 --> 00:41:41,070
JSX เป็นเพียงวิธีการที่จะใช้เวลาของคุณ
จาวาสคริปต์ที่มี 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
>> ที่รวบรวมเพื่อ JavaScript ที่
เช่นสร้างสิ่งเดียวกัน

837
00:41:54,970 --> 00:41:59,590
ผมคิดว่าสิ่งที่ผมพูดคือว่า
JSX เป็นเพียงประโยคเหมือนมัน

838
00:41:59,590 --> 00:42:03,530
preprocessor ​​สำหรับ JavaScript มาก
เช่น PHP เป็น preprocessor ​​สำหรับ HTML

839
00:42:03,530 --> 00:42:05,490
JSC เป็น preprocessor
สำหรับจาวาสคริปต์ที่ช่วยให้

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
NEEL เมธา: โดยปกติแล้วคุณไม่จำเป็นต้อง
ที่จะนำ 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
เราได้รับการเรียนรู้ซีใน CS50

852
00:42:35,646 --> 00:42:38,032
C ยังเป็นภาษาที่ทำงาน?

853
00:42:38,032 --> 00:42:39,990
NEEL เมธา: ดังนั้นคำถาม
เป็นเรื่องเกี่ยวกับการทำงาน

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
>> และเป็นตัวอย่างที่ C ตัวอย่างเช่น
คุณไม่ได้ทำด้วยวิธีนี้เปิดเผย

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
>> นั่นคือสิ่งที่สิ่งที่ต้องการเชิงมุม
เพิ่มโครงกรอบอื่น ๆ ที่ใช้

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
>> NEEL เมธา: ไม่มีสิ่งที่เกิดขึ้นในการสั่งซื้อ

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
ดังนั้นจึงเป็นอีกวาดที่ดีของการตอบสนอง

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
คำถามใด ๆ เพิ่มเติมหรือไม่

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
ใช่?

916
00:45:03,150 --> 00:45:06,840
>> ผู้ชม: อืมคุณจะทำไม
ใช้ให้ตรงข้ามกับ var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL เมธา: ดังนั้นคำถามคือ
ทำไมคุณให้ใช้แทน var?

918
00:45:10,450 --> 00:45:13,220
นี่คือสิ่งที่เรียกว่า
ES6 หรือ ECMAScript 6

919
00:45:13,220 --> 00:45:15,820
มันเป็นรุ่นใหม่ของ JavaScript

920
00:45:15,820 --> 00:45:19,050
มีพวงของเหตุผลทางเทคนิคเป็น,
แต่ขอให้เป็นรุ่นที่ดีขึ้นของ var

921
00:45:19,050 --> 00:45:20,724
>> มันเป็นวิธีที่คุณประกาศตัวแปร

922
00:45:20,724 --> 00:45:21,390
คุณสามารถใช้ให้

923
00:45:21,390 --> 00:45:22,140
คุณสามารถใช้ var

924
00:45:22,140 --> 00:45:23,825
ให้มีพวงของเทคนิค
reasons-- คุณสามารถมองพวกเขา

925
00:45:23,825 --> 00:45:25,610
ขึ้น later-- ว่าทำไมมันจะดีกว่า

926
00:45:25,610 --> 00:45:28,780
โดยทั่วไปมี ES6 ที่ดีบางอย่าง
ไวยากรณ์ใหม่บางคุณสมบัติใหม่

927
00:45:28,780 --> 00:45:30,720
ที่ด้านบนของ JavaScript เก่า

928
00:45:30,720 --> 00:45:32,782
>> ดังนั้นเราจึงมีเหมือนห้านาที

929
00:45:32,782 --> 00:45:34,990
ฉันแค่อยากจะพูดคุยเกี่ยวกับ
สิ่งหนึ่งที่เพิ่มเติมเร็วจริง

930
00:45:34,990 --> 00:45:36,450
หากคุณมีคำถามใด ๆ
ขอพูดคุยเกี่ยวกับเรื่องนี้หลังจากนี้

931
00:45:36,450 --> 00:45:38,366
แต่เพื่อให้ได้รับเพียงแค่นี้
ติดอยู่ในกล้องฉันเพียงแค่

932
00:45:38,366 --> 00:45:41,550
ต้องการที่จะพูดคุยเล็กน้อยเกี่ยวกับการคุณ
ตอบสนองการใช้งานจริงในปพลิเคชันของคุณ

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> ถ้าคุณไปที่นี่
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
นี้เป็นหน้าบ้านสำหรับตอบสนองและ
มันจะแสดงวิธีที่คุณใช้งานจริง

936
00:46:03,320 --> 00:46:05,320
ตอบสนองในหน้าเว็บของคุณ

937
00:46:05,320 --> 00:46:08,845
โดยทั่วไปก็เล็ก ๆ น้อย ๆ
ซับซ้อนพยายามติดตั้งตอบสนอง

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
เพียงไปบนองค์รักษ์, Y-E-O-M-A-N และ
คุณสามารถหาเครื่องกำเนิดไฟฟ้าเช่นนี้

955
00:46:59,110 --> 00:47:01,263
และมีเครื่องกำเนิดไฟฟ้าเช่น
เหล่านี้คุณเพียงต้องการที่หนึ่ง

956
00:47:01,263 --> 00:47:03,010
เป็นคำสั่งที่บรรทัดคำสั่งคู่

957
00:47:03,010 --> 00:47:05,530
มันจะนั่งร้านออก
ทั้งตอบสนอง app สำหรับคุณ

958
00:47:05,530 --> 00:47:10,470
มันจะได้รับทั้งหมดท่อด้วยตนเอง
และงานที่ทำเสียงฮึดฮัดสำหรับคุณ

959
00:47:10,470 --> 00:47:13,010
และนี่คือเหตุผลที่คุณเพียงมุ่งเน้น
เพียงเขียนตอบสนอง

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
แต่ฉันชอบที่จะช่วยให้คุณมีใด ๆ
คำถามที่คุณอาจมีเกี่ยวกับการตอบสนอง

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