1
00:00:00,000 --> 00:00:02,910
>> [عزف الموسيقى]

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

3
00:00:04,850 --> 00:00:07,275
>> نيل ميهتا: هنا تذهب.

4
00:00:07,275 --> 00:00:11,070
>> حسنا، الجميع، أهلا بكم في شبكة الإنترنت
تطبيقات في المستقبل مع الرد.

5
00:00:11,070 --> 00:00:11,870
هذا هو CS50.

6
00:00:11,870 --> 00:00:12,930
اسمي النيل.

7
00:00:12,930 --> 00:00:17,689
أنا TA لCS50 وطالبة
في كلية هارفارد وجدا، جدا

8
00:00:17,689 --> 00:00:18,730
المطور على شبكة الإنترنت عاطفي.

9
00:00:18,730 --> 00:00:20,730
لذلك أنا متشوقا ل
أن أتحدث إليكم اليوم،

10
00:00:20,730 --> 00:00:24,550
سواء كنت هنا أو في المنزل
مشاهدة، حول رد الفعل، الذي هو، مرة أخرى

11
00:00:24,550 --> 00:00:27,270
وكما قلت، ومستقبل تطبيقات الويب.

12
00:00:27,270 --> 00:00:29,055
>> لذلك رد فعل هو إطار الشبكة.

13
00:00:29,055 --> 00:00:30,930
وكما لقد كنت أقول
لبعض الناس هنا،

14
00:00:30,930 --> 00:00:33,400
إطارا هو مجرد
مجموعة من الأدوات التي يمكن استخدامها

15
00:00:33,400 --> 00:00:35,770
على هيكلة وبناء التطبيق الويب الخاص بك.

16
00:00:35,770 --> 00:00:39,010
وتطبيقات الويب هي، مرة أخرى، والمواقع
التي هي تفاعلية مثل الفيسبوك،

17
00:00:39,010 --> 00:00:42,330
Twitter.com، Instagram.com، أيا كان.

18
00:00:42,330 --> 00:00:45,590
>> حتى الفيسبوك هو إطار الشبكة
تم تطويره من قبل الفيسبوك

19
00:00:45,590 --> 00:00:48,060
بضع سنوات back-- رد فعل هو.

20
00:00:48,060 --> 00:00:50,830
منذ تم استخدامها في
الفيسبوك على تطبيقات الجوال الخاصة بهم

21
00:00:50,830 --> 00:00:52,460
والتطبيق على شبكة الإنترنت، إينستاجرام.

22
00:00:52,460 --> 00:00:56,350
أكاديمية خان هو آخر
وقت مبكر المتبني بارز في رد الفعل.

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
يتيح لك بناء واجهات
لالروبوت ودائرة الرقابة الداخلية

32
00:01:22,200 --> 00:01:26,390
وربما منصات أخرى في المستقبل
فقط باستخدام نفس شفرة جافا سكريبت.

33
00:01:26,390 --> 00:01:31,130
هل يمكن استخدام بالضبط نفس
كود جافا سكريبت لتجعل المواقع،

34
00:01:31,130 --> 00:01:33,040
لتقديم تطبيقات الروبوت ودائرة الرقابة الداخلية التطبيقات.

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
وسوف تستخدم هذه إينستاجرام، لكنه
وسيتم أيضا استخدام مكونات تتفاعل.

52
00:02:22,740 --> 00:02:25,740
>> تتفاعل المكونات
كهربائيا متابعة عناصر HTML

53
00:02:25,740 --> 00:02:28,100
أن يكون سلوكهم
الواردة في داخلها.

54
00:02:28,100 --> 00:02:31,800
لذلك، على سبيل المثال، يمكن أن لدينا
عنصر الوقت، وهو عنصر الوقت،

55
00:02:31,800 --> 00:02:34,095
والتي سوف تحتوي مثل
الطابع الزمني، كما تعلمون،

56
00:02:34,095 --> 00:02:37,170
مكون الشخصي الذي
سوف تحتوي على صورة الملف الشخصي

57
00:02:37,170 --> 00:02:38,820
واسم الشخص.

58
00:02:38,820 --> 00:02:42,930
يمكن أن يكون لديها مثل العداد، التي
يمكن الاعتماد مثل عدد من يحب،

59
00:02:42,930 --> 00:02:45,610
وإذا نقرت على ذلك، فإنه سوف أكون
زيادة عدد يحب.

60
00:02:45,610 --> 00:02:48,200
وثمة عنصر هو مجرد
مجموعة من التعليمات البرمجية HTML التي

61
00:02:48,200 --> 00:02:50,520
لديه بعض وظائف
ملفوفة داخل منه.

62
00:02:50,520 --> 00:02:53,770
لذلك فمن مثل عنصر HTML
، كما قال على المنشطات لي من قبل.

63
00:02:53,770 --> 00:02:56,270
يمكنك أن تأخذ هذه المكونات،
ويمكنك وضعها معا

64
00:02:56,270 --> 00:02:59,060
لجعل عناصر جديدة، في
هذه الحالة، وهو عنصر آخر،

65
00:02:59,060 --> 00:03:00,505
الذي يحتوي على كل هذه الأشياء.

66
00:03:00,505 --> 00:03:04,050
وسيتضمن الوقت، الملف،
LikeCounter، وربما تعليق

67
00:03:04,050 --> 00:03:06,100
وربما الصورة نفسها.

68
00:03:06,100 --> 00:03:10,810
وحتى تطبيقات الويب مبنية فقط من خلال اتخاذ
المكونات ووضعها معا.

69
00:03:10,810 --> 00:03:15,620
آر إينستاجرام ليست أكثر من
حفنة من المشاركات واحدا تلو الآخر،

70
00:03:15,620 --> 00:03:19,032
كل وظيفة تتضمن مثل الوقت،
الشخصي، LikeCounter، وهلم جرا.

71
00:03:19,032 --> 00:03:20,490
انها نوع من مثل بناء منزل.

72
00:03:20,490 --> 00:03:22,660
كنت لا بناء
المنزل من أعلى إلى أسفل.

73
00:03:22,660 --> 00:03:24,960
كنت تأخذ components-- لك
اتخاذ مثل الحمام.

74
00:03:24,960 --> 00:03:28,320
كنت تأخذ bedroom-- لك التمسك بها
معا، وكان لديك عنصر جديد.

75
00:03:28,320 --> 00:03:29,760
لديك جزء جديد من المنزل.

76
00:03:29,760 --> 00:03:32,860
>> حتى تتفاعل وكلها بنيت حول
هذه الفكرة من المكونات التي

77
00:03:32,860 --> 00:03:36,600
هي التفاعلية، التي هي التعريفي.

78
00:03:36,600 --> 00:03:39,650
كما كنت أقول ما
الوضع هو، ويجعل ذلك.

79
00:03:39,650 --> 00:03:40,600
هم 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
>> يمكنك تضمين إينستاجرام
شيء على موقع الويب الخاص بك.

84
00:03:53,160 --> 00:03:56,830
يمكنك تضمين في الفيسبوك، على سبيل المثال،
طالما أنه يستخدم تتفاعل كذلك.

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
>> استخدام إينستاجرام
سبيل المثال، قد يكون لديك

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
>> في الفيسبوك رسول، ل
سبيل المثال، وهو رد فعل،

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.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
A مليون مكونات يمكن
العودة وتحرير البيانات.

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-- ترى،
أنا على التوالي شفرة جافا سكريبت على الصفحة

186
00:08:33,470 --> 00:08:36,390
هنا، وأنه سوف
تلقائيا تقديم صفحة الويب

187
00:08:36,390 --> 00:08:37,980
مع هذا شفرة جافا سكريبت.

188
00:08:37,980 --> 00:08:40,039
وهكذا هذا هو وسيلة
بالنسبة لنا لمحاولة الخروج كود

189
00:08:40,039 --> 00:08:43,089
حقا سريعة دون الحاجة إلى استخدام
ID لدينا أو استخدام آلة المحلية الخاصة بنا

190
00:08:43,089 --> 00:08:44,290
أو أيا كان.

191
00:08:44,290 --> 00:08:47,670
انها طريقة سريعة جدا بالنسبة لك لنموذج بالحجم الطبيعي
واختبار أنواع مختلفة من التعليمات البرمجية.

192
00:08:47,670 --> 00:08:50,560
>> لذلك أنا ذاهب لتكون آخذة
رمز المثال، ضعه هنا.

193
00:08:50,560 --> 00:08:52,374
ونحن في طريقنا للعمل من خلال ذلك.

194
00:08:52,374 --> 00:08:54,540
وإذا كنت في المنزل، وكنت
يمكن سحب هذا الأمر كذلك.

195
00:08:54,540 --> 00:08:57,530
ولقد المثبتة مسبقا
الرد هنا، لذلك يمكنك فقط

196
00:08:57,530 --> 00:09:00,770
كتابة التعليمات البرمجية الخاصة بك هنا، و
انها محاولة لالملعب الخاص بهم.

197
00:09:00,770 --> 00:09:04,940
>> نعم، إذا كان الجميع ل
فتح هذا الرابط هنا.

198
00:09:04,940 --> 00:09:08,080
من فضلك أعطني الابهام
حتى مرة واحدة لديك مفتوحة.

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

200
00:09:10,960 --> 00:09:13,770
بارد، بارد بارد.

201
00:09:13,770 --> 00:09:16,914
لا يوجد شيء هنا حتى الآن، ولكن
سوف نقوم بتغيير ذلك في وقت قريب جدا.

202
00:09:16,914 --> 00:09:21,250
>> OK، لذلك رد فعل هو جافا سكريبت
مكتبة، وعلى هذا النحو،

203
00:09:21,250 --> 00:09:24,480
يتطلب معرفة وجافا سكريبت،
وهي لغة برمجة الويب.

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
يمكنك تعلم جافا سكريبت
خلال نصف ساعة.

208
00:09:34,240 --> 00:09:34,990
إنه أمر لا يصدق.

209
00:09:34,990 --> 00:09:36,420
>> حتى تعطيه القراءة.

210
00:09:36,420 --> 00:09:39,960
نحن أيضا الكثير من HTML هنا ل
نحن تصميم صفحات الويب بالطبع.

211
00:09:39,960 --> 00:09:43,890
لذلك إذا كنت غير مألوف مع
HTML، تحقق من HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
وأعتقد أن التعلم هو رد فعل
مليون مرة أسهل إذا كنت بالفعل

213
00:09:46,520 --> 00:09:47,892
تعرف اللبنات.

214
00:09:47,892 --> 00:09:50,600
إذا كان لديك المكونات، فإنه من
سهلة لجعل عنصر أكبر.

215
00:09:50,600 --> 00:09:51,860
هذا رد فعل اللغة بالنسبة لك.

216
00:09:51,860 --> 00:09:54,270
>> فهيا وإعطاء
هذه الأمور للقراءة.

217
00:09:54,270 --> 00:09:55,070
وقفة هذا الفيديو.

218
00:09:55,070 --> 00:09:57,440
إعطائها للقراءة إذا كنت
في المنزل إذا لم تكن

219
00:09:57,440 --> 00:10:00,794
دراية HTML أو جافا سكريبت

220
00:10:00,794 --> 00:10:02,960
OK، فما نحن في طريقنا لل
القيام به هو أننا ذاهبون لجعل

221
00:10:02,960 --> 00:10:06,470
التطبيق بطاقات التعليمية الأساسية جدا باستخدام تتفاعل.

222
00:10:06,470 --> 00:10:08,210
ونحن في طريقنا لديهم بطاقات التعليمية.

223
00:10:08,210 --> 00:10:09,880
يمكنك الوجه البطاقة ذهابا وإيابا.

224
00:10:09,880 --> 00:10:12,399
وسيكون لدينا أيضا قائمة
كل الأوراق التي لدينا،

225
00:10:12,399 --> 00:10:14,190
وإذا كنا الشعور
الطموح، ونحن قد تكون

226
00:10:14,190 --> 00:10:17,060
قادرة على تبديل بين
السيارات من خلال النقر عليها.

227
00:10:17,060 --> 00:10:20,360
>> ولكن هذا هو، عارية بك
العظام، وهي بسيطة جدا تتفاعل التطبيق.

228
00:10:20,360 --> 00:10:22,560
وهكذا هذا هو في الواقع
لا تافهة لتنفيذها،

229
00:10:22,560 --> 00:10:26,030
ولكن ونحن في طريقنا لاظهار ذلك، إذا كنت تفعل
هذا، انها جدا، من السهل جدا لتمديده

230
00:10:26,030 --> 00:10:27,680
إذا كان الناس الآخرين مساعدتك في ذلك.

231
00:10:27,680 --> 00:10:33,750
لذلك نحن ذاهبون للذهاب من خلال أربع خطوات
تبدأ من الصفر لبناء هذا.

232
00:10:33,750 --> 00:10:36,740
>> OK، وبالتالي فإن الخطوات الأربع، وسوف نقوم
تبدأ بالخطوة الأولى.

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
>> لذلك دعونا نمضي قدما ونبني
العنصر الأول باستخدام جافا سكريبت.

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
السماح التطبيق يساوي React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> الرد هي مكتبة وله
وإنشاء وظيفة الطبقة.

246
00:11:22,609 --> 00:11:24,400
وهذه هي وظيفة
قليلا من التعليمات البرمجية التي قمت

247
00:11:24,400 --> 00:11:29,090
يمكن استخدامها لإنشاء لجنة جديدة
نوع من ردة الفعل المكون.

248
00:11:29,090 --> 00:11:32,780
وهكذا React.createClass
يجعل عنصر،

249
00:11:32,780 --> 00:11:35,270
وسيكون هذا العنصر
تكون قادرة على القيام الاشياء.

250
00:11:35,270 --> 00:11:40,460
الشيء الرئيسي هو يستطيع القيام به هو تقديم
شيء ما، تجعل بوصفها وظيفة.

251
00:11:40,460 --> 00:11:44,500
>> مرة أخرى، إذا كان هذا المؤشر ليست واضحة ل
لكم، وأنا أوصي تذهب على JS للقطط

252
00:11:44,500 --> 00:11:45,682
والتحقق من ذلك.

253
00:11:45,682 --> 00:11:47,710
هو أن التكبير جيدا بما فيه الكفاية؟

254
00:11:47,710 --> 00:11:48,490
رائع.

255
00:11:48,490 --> 00:11:50,670
>> لذلك كل احتياجات المكونة
لديك وظيفة تقديم.

256
00:11:50,670 --> 00:11:53,010
وتقول وظيفة تقدم،
ما أقوم بطباعة على الشاشة؟

257
00:11:53,010 --> 00:11:54,760
ولكن العنصر هو
عديمة الفائدة إذا لم يحدث ذلك

258
00:11:54,760 --> 00:11:58,060
أعرف ماذا الطباعة على الشاشة، بحيث
تحتاج إلى أن يكون وظيفة تقديم.

259
00:11:58,060 --> 00:12:01,904
>> حتى في تقديم شيء، كنت
تحتاج فقط إلى إعادة بعض HTML.

260
00:12:01,904 --> 00:12:03,820
وما هو بارد
هناك شيء يسمى

261
00:12:03,820 --> 00:12:08,660
JSX، الذي هو امتداد ل
جافا سكريبت أن يستخدم من قبل تتفاعل.

262
00:12:08,660 --> 00:12:11,845
ذلك دعونا تكتب HTML داخل
جافا سكريبت الخاصة بك، والتي

263
00:12:11,845 --> 00:12:13,970
يبدو نوعا من غريب عندما
تعتقد لأول مرة عن ذلك،

264
00:12:13,970 --> 00:12:15,553
ولكنه يجعل الكثير من المعنى بعد ذلك.

265
00:12:15,553 --> 00:12:17,430
حتى نتمكن من القيام بذلك.

266
00:12:17,430 --> 00:12:21,360
إذا كنت على دراية HTML، وأنا أعلم
لدينا شعبة مع الغرض العام

267
00:12:21,360 --> 00:12:22,790
حاوية للأشياء.

268
00:12:22,790 --> 00:12:26,380
يمكننا العودة إلى شعبة، وداخل
هذا شعبة، ونحن يمكن أن تضع الاشياء.

269
00:12:26,380 --> 00:12:32,390
>> لذلك دعونا نقول أننا نريد أن تجعل فقط
على بطاقات التعليمية متابعة مباشرة في الوقت الراهن.

270
00:12:32,390 --> 00:12:34,890
والبطاقات التعليمية، وأود أن أقول،
سوف يكون السؤال والجواب.

271
00:12:34,890 --> 00:12:37,530
حتى داخل هذه شعبة، دعونا
طباعة فقرة

272
00:12:37,530 --> 00:12:42,155
تقول question-- ما هو
الجواب في نهاية المطاف في الحياة، والكون؟

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

274
00:12:47,640 --> 00:12:50,345
ومن ثم فإن الجواب هو
سيكون، بالطبع، 42.

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

276
00:12:56,880 --> 00:12:59,730
>> لم لا تأتي بشكل جيد على الإطلاق.

277
00:12:59,730 --> 00:13:04,164
نعم، وذلك أساسا يمكنك حقا
إرسال HTML داخل جافا سكريبت الخاصة بك.

278
00:13:04,164 --> 00:13:06,330
وهذا سيكون
طباعتها إلى الشاشة.

279
00:13:06,330 --> 00:13:08,250
لذلك دعونا نحاول بها.

280
00:13:08,250 --> 00:13:09,520
>> لذلك لدينا عنصر لدينا.

281
00:13:09,520 --> 00:13:12,210
نحن بحاجة إلى معرفة رد فعل لوضع
عنصر على الشاشة

282
00:13:12,210 --> 00:13:18,990
حتى React.render، لذلك تلاحظ أننا
علاج التطبيق مثل أي عنصر آخر.

283
00:13:18,990 --> 00:13:21,010
نكتب كما كان عنصر HTML.

284
00:13:21,010 --> 00:13:25,100
مثل بدلا من أن تقول مثل IMG
لصورة أو ص للفقرة،

285
00:13:25,100 --> 00:13:28,120
تكتب التطبيق، لذلك التطبيق هو
تعامل مثل عنصر HTML.

286
00:13:28,120 --> 00:13:30,380
كما قلت من قبل، انها
عنصر على المنشطات.

287
00:13:30,380 --> 00:13:32,870
>> لذلك أنت تجعل التطبيق، ولك
إعطائها مكان لوضعها.

288
00:13:32,870 --> 00:13:37,170
وهذه هي الطريقة التي يمكن
أقول ذلك حيث وضعه.

289
00:13:37,170 --> 00:13:46,200
لقد خلق شعبة بسيط على
الصفحة يسمى بمعرف الصفحة،

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
وسوف تطبع مع شعبة
اثنين من الفقرات داخل منه.

301
00:14:19,300 --> 00:14:24,460
>> وماذا فعلنا، ونحن جعل التطبيق الجديد
استخدام التدوين زاوية قوس التطبيق.

302
00:14:24,460 --> 00:14:27,160
قلنا أنه وضعه
داخل عنصر صفحة.

303
00:14:27,160 --> 00:14:29,867
وذلك ما فعلته، خلقت
التطبيق الجديد من ذلك القالب.

304
00:14:29,867 --> 00:14:31,200
ثم قلت لجعله.

305
00:14:31,200 --> 00:14:33,680
لذلك يقال، OK، التطبيق،
ماذا يجب أن تطبع؟

306
00:14:33,680 --> 00:14:36,970
التطبيق يقول، انتقل بطباعة شعبة
مع اثنين من الفقرات داخل منه.

307
00:14:36,970 --> 00:14:40,420
وفويلا، هناك شعبة لدينا مع
فقرتين داخل منه.

308
00:14:40,420 --> 00:14:43,180
معنى حتى الآن؟

309
00:14:43,180 --> 00:14:46,690
>> لذلك، مرة أخرى، فإن التحدي كله من يردون
هو مجرد معرفة كيفية جعل المكونات.

310
00:14:46,690 --> 00:14:48,500
كيفية جعل
المكونات معا.

311
00:14:48,500 --> 00:14:51,780
والآن بعد أن حققنا لنا أولا
عنصر، دعونا نعود

312
00:14:51,780 --> 00:14:54,284
وجعل مكونات قابلة للتخصيص.

313
00:14:54,284 --> 00:14:56,700
حتى تعرف كيف كنت في HTML
يمكن أن تعطي أزرار الفصول الدراسية؟

314
00:14:56,700 --> 00:14:59,146
يمكنك ان تعطي المراسي الخاصة بك أ href.

315
00:14:59,146 --> 00:15:00,770
يمكنك ان تعطي المدخلات الخاصة بك نوع، أليس كذلك؟

316
00:15:00,770 --> 00:15:04,740
يمكنك ان تعطي المزيد من العرف
خصائص لجميع العناصر الخاصة بك

317
00:15:04,740 --> 00:15:06,490
لجعلها أكثر إثارة للاهتمام.

318
00:15:06,490 --> 00:15:09,030
ونحن في الواقع يمكن أن تفعل
نفس الشيء بالضبط.

319
00:15:09,030 --> 00:15:17,500
>> لذلك دعونا نقول اننا نريد ل
التطبيق للذهاب تقديم أي بطاقة.

320
00:15:17,500 --> 00:15:19,630
الآن نحن فقط
أصدرت بطاقة ضمنية.

321
00:15:19,630 --> 00:15:22,530
ونحن نعلم ان هناك واحد فقط
بطاقة يمكن أن تفعله، لذلك نحن

322
00:15:22,530 --> 00:15:25,960
وسنحاول تغيير هذا الآن حتى
يمكننا أن مجرد إعطائه بعض البطاقة.

323
00:15:25,960 --> 00:15:27,410
انها سوف طباعة البطاقة.

324
00:15:27,410 --> 00:15:29,380
>> يجب عليك في محاولة لجعل حياتك
مكونات للأغراض العامة جدا.

325
00:15:29,380 --> 00:15:31,654
لذلك بهذه الطريقة يمكنني أن البريد الإلكتروني
هذا صديقي ويكون مثل،

326
00:15:31,654 --> 00:15:33,820
مهما بطاقات التعليمية لديك،
مجرد إطعام عليه إلى هنا،

327
00:15:33,820 --> 00:15:35,290
وأنها سوف تفعل ذلك من تلقاء نفسه.

328
00:15:35,290 --> 00:15:37,650
يمكنك وضع البعض
الأشياء في التطبيق الخاص بك.

329
00:15:37,650 --> 00:15:40,600
>> ولكن أولا، دعونا كسر هذه
يصل إلى عنصرين،

330
00:15:40,600 --> 00:15:44,500
ولكننا نريد لفصل بطاقة
طباعة جزء من جزء التطبيق الفعلي.

331
00:15:44,500 --> 00:15:46,660
ذلك ما يمكن أن نفعله هو أننا
يمكن تغيير هذا من التطبيق

332
00:15:46,660 --> 00:15:51,300
لCardView، مجرد
اسم جديد للالتطبيق،

333
00:15:51,300 --> 00:15:54,450
ويمكننا أن نجعل جديدة
دعا مكون التطبيق،

334
00:15:54,450 --> 00:15:56,336
وينبغي عدم الخلط مع التطبيق القديم.

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
بدلا من تقديم مجرد التطبيق الذي
لديه شعبة والاقتران داخل منه،

341
00:16:22,590 --> 00:16:26,194
التطبيق يجعل CardView، و
CardView يجعل شعبة والفقرة.

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
>> OK، لذلك نحن نريد لدينا 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
هذا هو صنع التدوين فقط
الاعتراض في جافا سكريبت.

351
00:17:05,260 --> 00:17:09,280
انها نوع من مثل البنية
في C، لذلك قدمنا ​​بطاقة،

352
00:17:09,280 --> 00:17:15,920
وحتى الآن نحن يمكن أن تمر هذه البطاقة حيث
خاصية أو كسمة في HTML

353
00:17:15,920 --> 00:17:17,290
المصطلحات لدينا التطبيق.

354
00:17:17,290 --> 00:17:20,210
حتى نتمكن من القيام بذلك، التطبيق
بطاقة تساوي myCard.

355
00:17:20,210 --> 00:17:23,200
>> أنت تعرف كيف في المدخلات، وتفعل
نوع الإدخال يساوي النص أو زر

356
00:17:23,200 --> 00:17:25,240
الطبقة يساوي BTN لألبس الحذاء،؟

357
00:17:25,240 --> 00:17:29,500
نفس الفكرة، بطاقة التطبيق equals--
كنت قد حصلت على وضع الأقواس here--

358
00:17:29,500 --> 00:17:33,830
بطاقة التطبيق يساوي myCard، لذلك هذا
يقول لنا هذا الكائن البطاقة.

359
00:17:33,830 --> 00:17:39,149
انا ذاهب الى تمرير بأنها
الخاصية لمكون التطبيق.

360
00:17:39,149 --> 00:17:41,440
وسيكون هذا العنصر التطبيق
تكون قادرة على الوصول إليه والقيام

361
00:17:41,440 --> 00:17:43,580
الاشياء معها.

362
00:17:43,580 --> 00:17:47,650
>> لذلك التطبيق لدينا سيكون
الذي يحصل على بطاقة، حتى الآن،

363
00:17:47,650 --> 00:17:49,980
دعونا لها التطبيق تعطي فقط
بطاقة إلى CardView

364
00:17:49,980 --> 00:17:53,110
نفسها لمثل التطبيق ليس
الذهاب إلى معرفة ما يجب القيام به مع ذلك،

365
00:17:53,110 --> 00:17:54,850
ولذا فإننا سوف مجرد إعطائها إلى CardView.

366
00:17:54,850 --> 00:18:00,050
ولذا فإننا سوف تمر عليه
بنفس الطريقة، يساوي بطاقة،

367
00:18:00,050 --> 00:18:05,426
وهكذا كل عنصر يمكن الوصول إلى
الأشياء التي أعطيت له.

368
00:18:05,426 --> 00:18:07,800
يمكنهم الوصول إلى خصائص
التي أعطيت لها

369
00:18:07,800 --> 00:18:09,470
استخدام هذا النحو، this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> فما يحدث هنا
لديك الكائن myCard.

372
00:18:14,920 --> 00:18:18,250
كنت تمريرها إلى التطبيق
باستخدام بطاقة التطبيق يساوي myCard.

373
00:18:18,250 --> 00:18:21,420
وبالنظر إلى أن الكائن بطاقة إلى التطبيق الخاص بك.

374
00:18:21,420 --> 00:18:24,400
التطبيق يمكن الوصول إليه
كما this.props.card.

375
00:18:24,400 --> 00:18:28,780
انها نوع من مثل صورة
يعلم ما هو عليه في المصدر.

376
00:18:28,780 --> 00:18:31,972
>> هذا التطبيق يعرف ما هو بطاقة
هو، وأنها يمكن أن تفعل أشياء معها.

377
00:18:31,972 --> 00:18:32,930
ويمكن أن تفعل الحسابية.

378
00:18:32,930 --> 00:18:35,290
فإنه يمكن اتخاذ قرارات تستند الخروج من ذلك.

379
00:18:35,290 --> 00:18:39,950
>> الآن، كنت ذاهبا لتمرير
this.props.card على CardView.

380
00:18:39,950 --> 00:18:43,420
معنى حتى الآن؟

381
00:18:43,420 --> 00:18:45,210
أنه سوف يكون أكثر منطقية الآن.

382
00:18:45,210 --> 00:18:46,990
>> حسنا، الآن نحن في CardView.

383
00:18:46,990 --> 00:18:51,719
لدينا CardView، نظرا للبطاقة، ينبغي
طباعة السؤال والجواب.

384
00:18:51,719 --> 00:18:54,510
الآن نحن مطبوعة للتو بعض
أسئلة وأجوبة ضمنية.

385
00:18:54,510 --> 00:18:57,720
نحن بحاجة لمعرفة out-- نحتاج
أن يطلب البطاقة التي أعطونا

386
00:18:57,720 --> 00:19:01,360
ما هو السؤال والجواب، و
ثم طباعة هذا الخروج إلى الشاشة.

387
00:19:01,360 --> 00:19:02,470
>> حتى نتمكن من القيام بذلك هنا.

388
00:19:02,470 --> 00:19:06,135
في تقديم begin-- به أولا قدم المساواة.

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

390
00:19:08,710 --> 00:19:13,050
وذلك ما نقوم به هنا هو أننا نعلم أن
يتم منح بطاقات بنا إلى الملكية،

391
00:19:13,050 --> 00:19:13,580
الصحيح؟

392
00:19:13,580 --> 00:19:15,930
لقد أعطيت لنا كمدخل.

393
00:19:15,930 --> 00:19:19,440
كما انها تقريبا مثل
الحجج إلى وظيفة.

394
00:19:19,440 --> 00:19:22,810
البطاقة حجة
تقريبا لهذا CardView.

395
00:19:22,810 --> 00:19:25,239
>> سنقوم استخراج ذلك، وضعت
أنه في مسألة متغيرة.

396
00:19:25,239 --> 00:19:27,280
تأكد من الإجابة ذهب
إلى الإجابة المتغيرة.

397
00:19:27,280 --> 00:19:31,130
يطالب تلك البطاقة للرد.

398
00:19:31,130 --> 00:19:35,072
والآن بعد أن لدينا هذه،
بدلا من طبع هذا النص،

399
00:19:35,072 --> 00:19:37,030
ونحن في طريقنا للطباعة
كل ما أعطانا.

400
00:19:37,030 --> 00:19:43,580
>> لذلك هذا stuff-- حتى ونحن في طريقنا
لاخماد جواب السؤال.

401
00:19:43,580 --> 00:19:46,380
دعونا نرى ما اذا كان هذا يعمل.

402
00:19:46,380 --> 00:19:52,800
بارد، لذلك دعونا الخطوة من خلال ذلك
أكثر مرة واحدة فقط للتأكد.

403
00:19:52,800 --> 00:20:00,470
>> حتى بطاقتي هي كائن بطاقة، ونحن
تعطي هذه البطاقة إلى التطبيق.

404
00:20:00,470 --> 00:20:04,790
والتطبيق هو الذهاب الى اتخاذ
بطاقة وإعطائها إلى CardView.

405
00:20:04,790 --> 00:20:09,190
ويقول هذا CardView، إذا كنت
تعطيني أي كائن بطاقات التعليمية،

406
00:20:09,190 --> 00:20:11,920
سوف طباعة السؤال الذي وجهته
وردها، أليس كذلك؟

407
00:20:11,920 --> 00:20:14,590
>> ذلك ما يمكن أن تفعله هو يمكنني
إرسال هذا الرمز، أول

408
00:20:14,590 --> 00:20:16,580
مثل 10 خطوط من قانون بلدي، إلى صديقي.

409
00:20:16,580 --> 00:20:18,820
كان يمكن تضمين ذلك في
تطبيق بلده.

410
00:20:18,820 --> 00:20:27,200
وطالما أنه فعل الشيء نفسه،
مثل بطاقة CardView يساوي هذا،

411
00:20:27,200 --> 00:20:30,580
طالما انه خلق CardView
وأعطاه الحق في المعلومات،

412
00:20:30,580 --> 00:20:31,987
كان يمكن تقديم بطاقته الخاصة.

413
00:20:31,987 --> 00:20:34,320
وهكذا بهذه الطريقة، انها حقا
طريقة بارد بالنسبة لك لبناء

414
00:20:34,320 --> 00:20:35,906
المكونات التي تستخدم بعضها البعض، أليس كذلك؟

415
00:20:35,906 --> 00:20:38,280
هذه البطاقة، ويمكنني أن تنشر
هذا CardView على شبكة الإنترنت،

416
00:20:38,280 --> 00:20:39,790
والناس سوف تكون قادرة على استخدامها.

417
00:20:39,790 --> 00:20:45,070
ذلك أساسا، انها مثل واحد من
الوظائف القياسية في المكتبة C.

418
00:20:45,070 --> 00:20:47,280
>> بل هو وظيفة حيث
كتب أحدهم ذلك.

419
00:20:47,280 --> 00:20:48,419
كنت تعطي مدخلات معينة.

420
00:20:48,419 --> 00:20:49,710
انها سوف تنتج انتاج معين.

421
00:20:49,710 --> 00:20:50,890
كنت لا تهتم كيف يعمل داخليا.

422
00:20:50,890 --> 00:20:53,790
طالما أنك تعطيه الحق
المدخلات، وأنها سوف تجعل من الناتج الصحيح.

423
00:20:53,790 --> 00:20:57,850
>> ويمكن أن يكون عنصرا
فكرت في نفس الطريق.

424
00:20:57,850 --> 00:21:00,280
هذا هو مثل CardView
وظيفة المكتبة.

425
00:21:00,280 --> 00:21:03,400
إذا كنت تعطيه بعض بطاقة
كخاصية، وأنها سوف

426
00:21:03,400 --> 00:21:05,095
طباعة محتويات تلك البطاقة.

427
00:21:05,095 --> 00:21:16,820
مثل إذا قمت بتغيير بطاقتي ل
بدلا من ذلك يكون مثل ما هو 5 زائد 37،

428
00:21:16,820 --> 00:21:19,210
فإنه سيتم تحديث وفقا لذلك.

429
00:21:19,210 --> 00:21:21,955
وذلك فقط عن طريق تغيير المدخلات،
فإنه يحصل على انتاج معين.

430
00:21:21,955 --> 00:21:24,830
حتى تتمكن من التفكير في مكونات تقريبا
وظائف في هذا الطريق، الذي

431
00:21:24,830 --> 00:21:25,920
يمكنك وضع معا.

432
00:21:25,920 --> 00:21:29,440
يمكنك الحصول على المدخلات، مثل هذا CardView
كإدخال، وتحصل على الناتج.

433
00:21:29,440 --> 00:21:31,900
في هذه الحالة، خرج هو HTML.

434
00:21:31,900 --> 00:21:34,404
معنى حتى الآن؟

435
00:21:34,404 --> 00:21:36,890
بارد، لذلك مرة أخرى، الخصائص
كيف يمكنك تمرير المعلومات

436
00:21:36,890 --> 00:21:40,900
داخل وخارج المكونات.

437
00:21:40,900 --> 00:21:42,740
>> حسنا، دعونا نجعل هذا
الشيء التفاعلي.

438
00:21:42,740 --> 00:21:44,450
الحق الآن هو نوع من السأم.

439
00:21:44,450 --> 00:21:45,520
ما هو (غير مسموع)؟

440
00:21:45,520 --> 00:21:48,210
يمكنك طباعة بعض من،
ولكن هذا هو كل ما يمكن القيام به.

441
00:21:48,210 --> 00:21:51,550
>> لذلك دعونا نعود الى
السؤال القديم فقط في الوقت الراهن.

442
00:21:51,550 --> 00:21:54,405
حسنا، حتى الآن هذه المكونات
ومملة لأن كل ما يفعلونه،

443
00:21:54,405 --> 00:21:55,030
أنها تحصل على المدخلات.

444
00:21:55,030 --> 00:21:56,100
أنها تجعل الإخراج، أليس كذلك؟

445
00:21:56,100 --> 00:21:57,049
هذا هو نوع من السأم.

446
00:21:57,049 --> 00:21:59,090
نحن نريد أن يكون لدينا
المكونات لتكون قادرة على

447
00:21:59,090 --> 00:22:02,150
نوع من الحالة الداخلية،
كما تتذكر شيئا.

448
00:22:02,150 --> 00:22:05,320
>> لبطاقات التعليمية، ل
مثلا، ما نوع الدولة

449
00:22:05,320 --> 00:22:07,550
قد ترغب في
تذكر لبطاقات التعليمية؟

450
00:22:07,550 --> 00:22:09,740
ما وضع مؤقت
قد ترغب في تذكر

451
00:22:09,740 --> 00:22:12,491
لبطاقات التعليمية في التطبيق بطاقات التعليمية؟

452
00:22:12,491 --> 00:22:13,990
الحضور: ما إذا كان قد تم انقلبت عليه؟

453
00:22:13,990 --> 00:22:14,990
نيل ميهتا: نعم، هذا صحيح.

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
في الفيسبوك، على سبيل المثال، تفعل
نريد أن نتذكر فيها في تغذية الأخبار

457
00:22:23,420 --> 00:22:25,870
هل أنت تحب أو الذي الشخصية
تفعلون الآن.

458
00:22:25,870 --> 00:22:30,127
>> على رسول، مثل ما النص الذي
اكتب في مربع الإدخال، أليس كذلك؟

459
00:22:30,127 --> 00:22:31,710
إذا قمت بتحديث الصفحة، فإنه يذهب بعيدا.

460
00:22:31,710 --> 00:22:32,793
ولكن كنت لا تهتم حقا.

461
00:22:32,793 --> 00:22:33,770
انها مؤقتة فقط.

462
00:22:33,770 --> 00:22:34,548
نعم؟

463
00:22:34,548 --> 00:22:36,152
>> الحضور: (غير مسموع)

464
00:22:36,152 --> 00:22:38,360
نيل ميهتا: مثل ومضة
بطاقة، مثلك يمكن رؤية

465
00:22:38,360 --> 00:22:40,290
الجانب سؤال أو الجانب الجواب؟

466
00:22:40,290 --> 00:22:41,070
>> الحضور: OK.

467
00:22:41,070 --> 00:22:43,270
>> نيل ميهتا: مثل
الوجهين بطاقات التعليمية، أليس كذلك؟

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
وقال مرة أخرى وأنا في الفيسبوك
رسول، ولدي مثل الذي شخص

472
00:22:54,380 --> 00:22:56,550
تقرأها الفيسبوك
أو الذين الشخصية، أليس كذلك؟

473
00:22:56,550 --> 00:22:58,030
>> هذا هو مؤقت فقط.

474
00:22:58,030 --> 00:23:01,200
من المهم أن تظهر للمستخدم
ما يحدث، ولكن تحديث الصفحة.

475
00:23:01,200 --> 00:23:02,250
لا يهم حقا.

476
00:23:02,250 --> 00:23:04,530
لذلك فمن حالة مؤقتة،
لذلك نحن جميعا دولة عليه.

477
00:23:04,530 --> 00:23:06,250
>> لذلك، مرة أخرى، هناك دولة والدعائم.

478
00:23:06,250 --> 00:23:09,084
الدعائم ومدخلات معينة
من مصدر البيانات.

479
00:23:09,084 --> 00:23:10,250
الدولة هي تماما مثل التخلف.

480
00:23:10,250 --> 00:23:13,700
انها مجرد مثل الاشياء التي
يجعل الشيء تفاعلية.

481
00:23:13,700 --> 00:23:17,720
>> لذلك لدينا في CardView-- دعونا لها
لدينا CardView-- حيث كان لطيفا.

482
00:23:17,720 --> 00:23:21,420
ما نحن في طريقنا للقيام به هنا، ونحن في طريقنا
لمسة CardView وفقط CardView.

483
00:23:21,420 --> 00:23:25,105
وحتى صديقي الذي حصلت على هذا، فإنها
لن تلاحظ أي فرق.

484
00:23:25,105 --> 00:23:27,230
انهم لن تضطر إلى تغيير
أي من التعليمات البرمجية الخاصة بهم،

485
00:23:27,230 --> 00:23:29,410
ولكن لديهم معرفة بها
CardView حصلت كهربائيا تصل.

486
00:23:29,410 --> 00:23:31,270
هذا هو جزء لطيف حول المكونات.

487
00:23:31,270 --> 00:23:35,290
>> OK، وذلك في 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
>> نيل ميهتا: نعم، ذلك النص
يساوي 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
لذلك، على سبيل المثال، الفيسبوك رسول،
حتى إذا كنت تحصل على نفس مصدر البيانات،

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
>> OK، لذلك هذا هو كل شيء حسن و
جيد، ولكن الآن ما هو في الواقع

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
ما يمكننا القيام به هو أننا يمكن أن تضيف نقرة
معالج، عند _ النقر يساوي this.flip،

545
00:26:43,650 --> 00:26:44,820
وسنقوم تحديد الوجه في وقت لاحق.

546
00:26:44,820 --> 00:26:47,120
ولكن في الأساس، عند _ النقر
هي وظيفة هذا

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
من فيا لكاذبة، كاذبة إلى true.

564
00:27:34,136 --> 00:27:38,420
>> نيل ميهتا: نعم، حتى تأخذ أيا كان
this.front is-- الدولة الأمامية.

565
00:27:38,420 --> 00:27:40,930
تتخذ الدولة الأمامية، إذا
هذا صحيح، وجعله كاذبة.

566
00:27:40,930 --> 00:27:42,530
إذا كان كاذبا، وجعله صحيحا، أليس كذلك؟

567
00:27:42,530 --> 00:27:45,330
لذلك دعونا نحاول ذلك.

568
00:27:45,330 --> 00:27:48,240
>> لا يمكنك تغيير الدولة
فقط عن طريق القيام this.state.

569
00:27:48,240 --> 00:27:50,380
لا يمكنك أن تفعل هذا.

570
00:27:50,380 --> 00:27:52,030
لا يمكنك أن تفعل ذلك.

571
00:27:52,030 --> 00:27:55,810
لديك لاستخدام وظيفة
دعا this.setState.

572
00:27:55,810 --> 00:28:03,230
>> لذلك يمكن القول this.setState الجبهة
القولون هذا حيث، مرة أخرى، تعجب

573
00:28:03,230 --> 00:28:04,330
نقطة تعني العكس.

574
00:28:04,330 --> 00:28:07,420
أعتقد إذا كان هذا. state.front
صحيح، أنها سوف تتحول كاذبة.

575
00:28:07,420 --> 00:28:09,170
ولذا فإننا سوف تعيين حالة
من فيا لكاذبة.

576
00:28:09,170 --> 00:28:11,430
إذا كان كاذبا، وسوف نقوم
تعيين كاذبة إلى true.

577
00:28:11,430 --> 00:28:17,210
>> لاحظ فقط التي وضعناها والحصول على بعض الشيء
بشكل مختلف، وذلك دعونا نحاول هذا.

578
00:28:17,210 --> 00:28:18,675
بادا بنج، أن ننظر في ذلك.

579
00:28:18,675 --> 00:28:21,810
سوف الزر الوجه الآن
تبديل الأمام إلى الخلف الدولة.

580
00:28:21,810 --> 00:28:24,990
>> وحتى هنا حيث تشاهد
قليلا من سحر تتفاعل.

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
>> نيل ميهتا: نعم، والسؤال
هو كيف يمكن ان تقارن 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
>> في الفيسبوك إذا كنت تحب
الحصول على رسالة جديدة، في MVC،

639
00:31:02,186 --> 00:31:04,060
عليك أن تتذكر،
OK، تغيير الأشياء

640
00:31:04,060 --> 00:31:06,260
في الجزء العلوي من
الصفحة، رمز الرسالة.

641
00:31:06,260 --> 00:31:08,290
البوب ​​أيضا نافذة جديدة في الجزء السفلي.

642
00:31:08,290 --> 00:31:10,070
وتأكد أيضا شيئا جديدا في هذا الإطار.

643
00:31:10,070 --> 00:31:11,060
كما تلعب الصوت.

644
00:31:11,060 --> 00:31:13,150
>> كما أن هناك العديد من الاشياء
الخروج في نفس الوقت.

645
00:31:13,150 --> 00:31:15,320
وحتى إذا كنت لا
يملك الظل دوم، وكنت

646
00:31:15,320 --> 00:31:18,740
يجب أن نفعل ذلك يدويا ل
لا يمكنك التخلص من صفحة كاملة.

647
00:31:18,740 --> 00:31:21,430
أنت لا تستطيع، لذلك لديك
لتغيير كل شيء يدويا،

648
00:31:21,430 --> 00:31:23,990
وهو أمر مزعج حقا في MVC.

649
00:31:23,990 --> 00:31:27,640
>> وذلك من أجل أن تكون
مقتصد، بشكل انتقائي

650
00:31:27,640 --> 00:31:30,750
تحديث الصفحة، وهو
كفاءة، ولكن مزعج أيضا.

651
00:31:30,750 --> 00:31:34,002
في رد فعل، لأنه من الظل
دوم، يمكنك الحصول على كل شيء مجانا.

652
00:31:34,002 --> 00:31:35,710
انها فعالة ل
من الظل دوم.

653
00:31:35,710 --> 00:31:37,210
عنق الزجاجة بتحديث الصفحة.

654
00:31:37,210 --> 00:31:40,292
انها لا تفعل التلاعب شجرة.

655
00:31:40,292 --> 00:31:41,250
يمكنك الحصول على الكفاءة.

656
00:31:41,250 --> 00:31:45,420
يمكنك أيضا الحصول على سهولة الاستخدام ل
إذا كنت مجرد كتابة صفحة كاملة،

657
00:31:45,420 --> 00:31:48,970
لكنك تعلم فقط، كل الحق، والأشياء
وسيكون على الصفحة في مكان ما.

658
00:31:48,970 --> 00:31:51,180
قد يكون في مكان مختلف، ولكن
انها سوف تكون على الصفحة، أليس كذلك؟

659
00:31:51,180 --> 00:31:52,860
لذلك أنت فقط إعادة تقديم هذه
الشيء بأكمله تقريبا،

660
00:31:52,860 --> 00:31:55,540
وكنت قد جعل زوجين
تغييرات على الصفحة نفسها.

661
00:31:55,540 --> 00:31:57,850
>> لذلك، مرة أخرى، في MVC لك
سيكون لديك لاختيار

662
00:31:57,850 --> 00:32:01,840
بين سهولة الاستخدام والكفاءة،
وتتفاعل، وتحصل على حد سواء.

663
00:32:01,840 --> 00:32:04,020
لذلك فمن الأفضل.

664
00:32:04,020 --> 00:32:05,220
منطقي؟

665
00:32:05,220 --> 00:32:06,676
صلب.

666
00:32:06,676 --> 00:32:12,080
>> حسنا، دعونا نرى دعونا نتحدث
قليلا عن الخطوة 4،

667
00:32:12,080 --> 00:32:14,740
كيف يمكننا تضمين المكونات.

668
00:32:14,740 --> 00:32:16,260
لذلك لدينا هذا الحق الآن.

669
00:32:16,260 --> 00:32:19,420
لدينا زر تبرد قليلا.

670
00:32:19,420 --> 00:32:23,157
يمكننا أن نقف مرة أخرى و
إيابا، وهذا كل ما يفعله.

671
00:32:23,157 --> 00:32:24,990
دعونا نقول أننا نريد ل
لدينا مكون آخر.

672
00:32:24,990 --> 00:32:28,730
دعنا نقول يجب أن لدينا التطبيق بطاقات التعليمية
تحتوي على قائمة من كافة بطاقات

673
00:32:28,730 --> 00:32:31,520
التي لديك، وهذا يعني أننا
يجب أن يكون مكون آخر.

674
00:32:31,520 --> 00:32:32,970
حسنا، ربما نسميها عرض القائمة.

675
00:32:32,970 --> 00:32:36,200
دعونا نجعل وجهة نظر القائمة التي
تتعايش مع CardView،

676
00:32:36,200 --> 00:32:39,680
وجهة النظر هذه القائمة وCardView
لن ترغب في العمل معا.

677
00:32:39,680 --> 00:32:43,190
ويمكنك الجمع بينهما
لجعل التطبيق لدينا بالنسبة لك.

678
00:32:43,190 --> 00:32:45,160
>> لذلك أولا، دعونا جعل
أكثر زوجين بطاقات الحق.

679
00:32:45,160 --> 00:32:46,370
دعنا نقول، ما البطاقات؟

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

681
00:32:49,619 --> 00:32:51,910
وفقط لذلك أنا لم يكن لديك ل
يحمل لكم مع كتابتها في،

682
00:32:51,910 --> 00:32:53,410
أنا ذاهب لمجرد نسخه من هنا.

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

684
00:33:01,664 --> 00:33:03,580
وهكذا انا ذاهب الى لا
إعطائها بطاقة واحدة فقط.

685
00:33:03,580 --> 00:33:06,910
انا ذاهب الى اعطائها مجموعة من البطاقات.

686
00:33:06,910 --> 00:33:10,240
حتى أول تطبيقات
الذهاب الى كسر في الوقت الراهن.

687
00:33:10,240 --> 00:33:14,717
كل الحق، لذلك نحن ذاهبون لجعل
هذه قادرة على التعامل مع بطاقات متعددة.

688
00:33:14,717 --> 00:33:17,800
أولا حتى، ونحن في طريقنا لإعطائه، لا
مجرد بطاقة واحدة ولكن مجموعة من البطاقات،

689
00:33:17,800 --> 00:33:18,700
مثل قائمة من البطاقات.

690
00:33:18,700 --> 00:33:20,980
وفي هذه الحالة، لدينا ثلاثة منهم.

691
00:33:20,980 --> 00:33:27,280
>> كل الحق، لدرجة التطبيق هو
ذاهب للحصول على بطاقات القائمة،

692
00:33:27,280 --> 00:33:29,870
وانها سوف تقرر أي
واحد لتظهر للCardView.

693
00:33:29,870 --> 00:33:33,740
وCardView يمكن فقط
تقديم بطاقة واحدة، ولكن التطبيق

694
00:33:33,740 --> 00:33:37,610
يحصل على قائمة من كافة بطاقات، أليس كذلك؟

695
00:33:37,610 --> 00:33:40,820
>> وذلك عند معرفة واحدة
بطاقة لإعطاء CardView،

696
00:33:40,820 --> 00:33:44,660
كيف كنت أعتقد أنك قد تكون قادرة
لاتخاذ قرار حول أي بطاقة

697
00:33:44,660 --> 00:33:47,064
لمشاهدة، لعرض؟

698
00:33:47,064 --> 00:33:49,980
لتعطيك تلميحا، انها مؤقتا
عليك أن تكون عرض بطاقة معينة.

699
00:33:49,980 --> 00:33:53,260
إذا قمت بتحديث الصفحة، عليك
اذهبوا إلى البطاقة الأولى.

700
00:33:53,260 --> 00:33:55,464
وهذا موافق لأنه مؤقت.

701
00:33:55,464 --> 00:33:56,630
ما الأسلوب قد نستخدمها؟

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

703
00:34:02,534 --> 00:34:08,760
>> الحضور: هل يمكن جعل متغير
لذلك تماما مثل كان لديك الجبهة.

704
00:34:08,760 --> 00:34:11,989
هل هذا صحيح، هل يمكن
لديك بطاقة الحالية يساوي 1؟

705
00:34:11,989 --> 00:34:14,150
>> نيل ميهتا: نعم، لذلك نحن
تريد أن يكون لها الدولة، أليس كذلك؟

706
00:34:14,150 --> 00:34:16,080
يمكنك استخدام الدولة في
المكون لمعرفة

707
00:34:16,080 --> 00:34:17,288
أي بطاقة نريد الحصول عليها.

708
00:34:17,288 --> 00:34:19,290
كما لدينا قائمة من
كل الأوراق، وسوف نقوم

709
00:34:19,290 --> 00:34:21,630
استخدام الدولة لمعرفة
واحدة من البطاقة الأولى،

710
00:34:21,630 --> 00:34:23,710
البطاقة الثانية، وبطاقة ثالثة، وهلم جرا.

711
00:34:23,710 --> 00:34:28,760
>> لذلك التطبيق لذلك سوف التطبيق الحصول على
لديك وظيفة getInitialState،

712
00:34:28,760 --> 00:34:35,020
وظيفة getInitialState العودة.

713
00:34:35,020 --> 00:34:39,929
ونحن سوف نقول فقط activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
حتى الآن لدينا التطبيق وانها الدولة الخاصة.

715
00:34:42,889 --> 00:34:47,179
>> وجعل ذلك الآن فصاعدا، لمعرفة
بطاقة، دعونا اذهبوا إلى مجموعة

716
00:34:47,179 --> 00:34:49,969
والاستيلاء على شيء في هذا الفهرس.

717
00:34:49,969 --> 00:34:53,580
اختر بطاقة this.props.cards يساوي
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
هكذا كما ترون هنا، والدعائم و
الدولة فعلا العمل معا.

720
00:35:00,162 --> 00:35:08,990
حتى الآن أن لدينا activeCard لدينا،
نحن سوف يطلق عليه activeCard،

721
00:35:08,990 --> 00:35:10,470
ودعونا نرى ما اذا كان هذا يعمل.

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

723
00:35:20,320 --> 00:35:20,820
[غير مسموع]

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

725
00:35:41,504 --> 00:35:44,900
>> أوه، هذا كان خطأ النص.

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

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

728
00:35:51,420 --> 00:35:54,840
>> بارد، صحيح، وحتى الآن كنا مرة أخرى
إلى حيث كنا من قبل، أليس كذلك؟

729
00:35:54,840 --> 00:35:57,100
البرنامج القديم نفسه إلا
الآن يمكننا دعم

730
00:35:57,100 --> 00:35:59,390
قائمة البطاقات، وليس بطاقة واحدة فقط.

731
00:35:59,390 --> 00:36:04,130
والآن، مرة أخرى، إذا كنا نريد تغيير
activeIndex، يمكننا أن نذهب 0-1،

732
00:36:04,130 --> 00:36:07,330
والآن بعد أن البطاقة الثانية،
ثم ذهبنا إلى 0.

733
00:36:07,330 --> 00:36:10,390
حتى هنا جديد
كهربائيا متابعة إصدار لدينا.

734
00:36:10,390 --> 00:36:16,000
>> حسنا، دعونا حتى الآن لديها وجهة نظر القائمة التي
يظهر كل الأوراق في البرنامج،

735
00:36:16,000 --> 00:36:19,980
ولذا فإننا سوف تجعل جديدة
دعا مكون listView.

736
00:36:19,980 --> 00:36:22,155
السماح listView يساوي react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
لذلك نحن نريد لإصدار غير مرقمة
قائمة مع عنصر قائمة لكل بطاقة.

739
00:36:38,800 --> 00:36:41,490
وهكذا لدينا مجموعة من البطاقات.

740
00:36:41,490 --> 00:36:44,990
نريد واحد عنصر قائمة
لكل بطاقة، أليس كذلك؟

741
00:36:44,990 --> 00:36:47,490
يمكننا القيام به لحلقة أو
شيء لجعل عنصر قائمة جديد.

742
00:36:47,490 --> 00:36:50,522
ولكن الطريقة يمكنك أن تفعل ذلك في
رد فعل، استخدام شيء يسمى خريطة.

743
00:36:50,522 --> 00:36:57,150
الخريطة هي أداة أو وظيفة استخدام
أن لكل بند، ويدير بعض من وظيفة،

744
00:36:57,150 --> 00:36:59,510
يأخذ قيمة الإرجاع، و
يتيح لك أن يعود.

745
00:36:59,510 --> 00:37:06,310
>> وذلك على سبيل المثال، لدينا مجموعة
1، 2، function-- 3.map وهذا

746
00:37:06,310 --> 00:37:12,120
هو اختصار ل
function-- س س السهم مرات س.

747
00:37:12,120 --> 00:37:16,110
هذا يقول: لكل رقم
في 1، 2، 3، أعتبر.

748
00:37:16,110 --> 00:37:17,800
ساحة لها، ويعيدها.

749
00:37:17,800 --> 00:37:22,090
فما رأيكم 1،
2، 3.map س يذهب إلى العصور س

750
00:37:22,090 --> 00:37:25,480
س يعطي لكم مرة أخرى نظرا ل
أن هذه هي وظيفة

751
00:37:25,480 --> 00:37:27,680
تعمل على كل عنصر من عناصر هذا الصفيف.

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

753
00:37:30,837 --> 00:37:32,190
>> الحضور: 1، 4 9؟

754
00:37:32,190 --> 00:37:35,709
>> نيل ميهتا: نعم، 1، 4، 9
لأنك 1 مرات 1.

755
00:37:35,709 --> 00:37:36,500
والتي تمنحك واحدا.

756
00:37:36,500 --> 00:37:37,690
هذا هو العنصر الأول.

757
00:37:37,690 --> 00:37:38,530
>> 2 مرات 2 هو 4.

758
00:37:38,530 --> 00:37:39,570
هذا هو العنصر الثاني.

759
00:37:39,570 --> 00:37:40,310
3 مرات 3 هو 9.

760
00:37:40,310 --> 00:37:41,540
هذا هو العنصر الثالث.

761
00:37:41,540 --> 00:37:42,640
منطقي؟

762
00:37:42,640 --> 00:37:45,015
حتى خريطة لديها تقنية لك
استخدام في المبرمجين وظيفي،

763
00:37:45,015 --> 00:37:48,090
نمط جديد من
البرمجة أن تفعل شيئا

764
00:37:48,090 --> 00:37:50,500
إلى كل عنصر في قائمتك.

765
00:37:50,500 --> 00:37:51,970
وحتى هذا يبدو مألوفا.

766
00:37:51,970 --> 00:37:53,370
لدينا قائمة من البطاقات.

767
00:37:53,370 --> 00:37:56,860
نريد أن نحصل على عنصر القائمة لكل
واحد، ولذا فإننا سوف مجرد استخدام خريطة هنا.

768
00:37:56,860 --> 00:38:00,250
سوف نقول، دعونا متساوين قائمة
this.props، بطاقات، خريطة.

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

770
00:38:10,580 --> 00:38:15,070
>> وذلك نظرا لبطاقة، ونحن
الذهاب لتوليد عنصر قائمة

771
00:38:15,070 --> 00:38:17,580
مع محتويات الجانبية التي البطاقة منه.

772
00:38:17,580 --> 00:38:20,660
دعنا نقول فقط نريد أن نعطيه
بطاقات يشكك حتى card.question.

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

774
00:38:24,990 --> 00:38:30,649
لذلك تحتوي هذه القائمة على
مجموعة من لLI أو قائمة وحدات

775
00:38:30,649 --> 00:38:32,440
حيث هناك لائحة واحدة
البند لكل بطاقة،

776
00:38:32,440 --> 00:38:35,150
والذي يحتوي على مسألة البطاقات.

777
00:38:35,150 --> 00:38:37,640
منطقي؟

778
00:38:37,640 --> 00:38:39,450
>> بارد، وحتى الآن دعنا
في الواقع طباعة هذا الخروج.

779
00:38:39,450 --> 00:38:46,521
لذلك نحن سيعود المجاهدين.

780
00:38:46,521 --> 00:38:49,020
داخل تلك القائمة غير مرتبة،
سنقوم مجرد عصا القائمة بأكملها

781
00:38:49,020 --> 00:38:49,890
التي قدموها لنا.

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

783
00:38:52,851 --> 00:38:53,350
رائع.

784
00:38:53,350 --> 00:38:56,060
>> كل الحق، وحتى الآن هذا
عرض القائمة يعمل العثور فقط.

785
00:38:56,060 --> 00:38:59,842
أي أسئلة حول وجهة النظر القائمة؟

786
00:38:59,842 --> 00:39:01,270
لديك مجموعة من البطاقات.

787
00:39:01,270 --> 00:39:02,800
قمت بإجراء عنصر قائمة لكل بطاقة.

788
00:39:02,800 --> 00:39:05,466
وضعها داخل غير مرقمة
قائمة، وكنت يعيدها.

789
00:39:05,466 --> 00:39:09,410
حتى الآن دعونا نعمل لذلك نحن تضمين
هذا داخل التطبيق لدينا،

790
00:39:09,410 --> 00:39:14,310
حتى نتمكن من القيام بذلك، عرض القائمة.

791
00:39:14,310 --> 00:39:17,070
ما حجة لا نعبر لعرض القائمة؟

792
00:39:17,070 --> 00:39:18,320
ما خصائص نعطي ذلك؟

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

794
00:39:25,111 --> 00:39:26,860
تذكر، إذا كنت تعطي
انها مجموعة من البطاقات،

795
00:39:26,860 --> 00:39:29,590
انها سوف تجعل قائمة
عرض لتلك البطاقات.

796
00:39:29,590 --> 00:39:32,267
ذلك ما يمكن أن نعبر
هنا حجة؟

797
00:39:32,267 --> 00:39:33,350
الحضور: قائمة البطاقات؟

798
00:39:33,350 --> 00:39:37,130
نيل ميهتا: نعم، بطاقات ذلك
يساوي this.props.cards، أليس كذلك؟

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

800
00:39:39,850 --> 00:39:44,370
وبالتالي فإن المشكلة الوحيدة
هو أنه يمكنك فقط

801
00:39:44,370 --> 00:39:48,600
تحولت عنصر ذو مستوى أعلى واحد في تقدم،
لذلك كنت قد حصلت على التفاف عليه في شعبة.

802
00:39:48,600 --> 00:39:49,100
انها غريبة.

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
لذلك دعونا نرى إذا كان ذلك.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
هل هذا يعمل؟

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> نعم، هناك تذهب.

809
00:40:31,030 --> 00:40:33,700
حتى الآن لدينا قائمة
من البطاقات في الأسفل،

810
00:40:33,700 --> 00:40:36,180
ثم لدينا
CardView نفسها على القمة،

811
00:40:36,180 --> 00:40:40,486
والتي من شأنها أن الوجه بين
الجانبين من البطاقة.

812
00:40:40,486 --> 00:40:42,610
الآن لا تجعل الشعور كيف فعلت ذلك؟

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
نعم، لذلك مرة أخرى، لدينا عنصرين.

815
00:40:46,790 --> 00:40:49,666
طباعة عنصر الأولى
من كل بطاقة في القائمة.

816
00:40:49,666 --> 00:40:50,540
هذا هو عرض القائمة.

817
00:40:50,540 --> 00:40:54,770
والعنصر الثاني
بطباعة فقط تلك البطاقة.

818
00:40:54,770 --> 00:40:58,840
إذا كنت تعطيه بطاقة معينة، فإنه سوف أكون
طباعة المعلومات حول تلك البطاقة

819
00:40:58,840 --> 00:41:01,870
وتتيح لك الوجه ذهابا وإيابا.

820
00:41:01,870 --> 00:41:05,850
>> لذلك إذا أردنا، يمكننا أن نحاول والكلام
حول إضافة بعض الميزات الجديدة في هذا.

821
00:41:05,850 --> 00:41:09,482
وإلا فإننا يمكن أن نتحدث أكثر قليلا
حول من سرعة المفاعل،

822
00:41:09,482 --> 00:41:11,190
أو يمكننا الإجابة
أسئلة قد تكون لديها

823
00:41:11,190 --> 00:41:15,050
لأن هذه كلها من الأجزاء الأساسية
من الرد الذي أريد أن أتحدث عنه.

824
00:41:15,050 --> 00:41:16,540
يمكننا المضي قدما.

825
00:41:16,540 --> 00:41:17,590
يمكننا الإجابة على الأسئلة.

826
00:41:17,590 --> 00:41:18,560
أياً كان ما تريد.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> الحضور: هل يمكن استخدام
JSX في جافا سكريبت العادي؟

829
00:41:24,205 --> 00:41:27,150
أو أن شيئا
جاء مع (غير مسموع)؟

830
00:41:27,150 --> 00:41:30,760
>> نيل ميهتا: والسؤال هو العلبة
استخدام JSX مع جافا سكريبت العادي؟

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
ويجمع إلى تفعيل جافا سكريبت أن
لايوجد HTML داخل منه.

834
00:41:44,215 --> 00:41:47,880
لذلك تلاحظ هكذا- يضرب لذلك تلاحظ هنا.

835
00:41:47,880 --> 00:41:50,820
هذا يبدو وكأنه لديك مثل شعبة
وكان لديك الاشياء داخل منه.

836
00:41:50,820 --> 00:41:54,970
>> أن يجمع إلى تفعيل جافا سكريبت أن
كما يولد نفس الشيء.

837
00:41:54,970 --> 00:41:59,590
أعتقد أن ما أقوله هو أن
JSX هو مجرد النحوي، مثل انها

838
00:41:59,590 --> 00:42:03,530
قبل المعالج لجافا سكريبت بكثير
مثل PHP هو المعالج لHTML.

839
00:42:03,530 --> 00:42:05,490
JSC هو المعالج
لجافا سكريبت التي تتيح

840
00:42:05,490 --> 00:42:12,970
كنت وضعت داخل HTML جافا سكريبت الخاصة بك.

841
00:42:12,970 --> 00:42:16,425
وحتى إذا كان لديك محول الصحيح
وهو شيء يسمى (غير مسموع)،

842
00:42:16,425 --> 00:42:17,300
التي ستحول.

843
00:42:17,300 --> 00:42:19,360
والمعالج الصحيح،
انها سوف تسمح لك أن تفعل ذلك.

844
00:42:19,360 --> 00:42:20,235
>> الحضور: (غير مسموع)

845
00:42:20,235 --> 00:42:23,026
نيل ميهتا: عادة لا تحتاج
لوضع HTML داخل جافا سكريبت

846
00:42:23,026 --> 00:42:24,110
ما لم صنعك تتفاعل.

847
00:42:24,110 --> 00:42:27,146
ولكن يمكنك أن تفعل ذلك على أي حال.

848
00:42:27,146 --> 00:42:27,645
نعم؟

849
00:42:27,645 --> 00:42:29,353
>> الحضور: أعتقد أنك
قد وصف رد فعل

850
00:42:29,353 --> 00:42:31,970
كلغة برمجة وظيفية.

851
00:42:31,970 --> 00:42:35,646
لقد تم تعلم C في CS50.

852
00:42:35,646 --> 00:42:38,032
غير C أيضا لغة وظيفية؟

853
00:42:38,032 --> 00:42:39,990
نيل ميهتا: لذا فإن السؤال
هو حول ظيفية

854
00:42:39,990 --> 00:42:43,010
مقابل شيء آخر يسمى
حتمية أو الإجرائية البرمجة.

855
00:42:43,010 --> 00:42:44,820
هناك نوعين من البرامج المشهورة.

856
00:42:44,820 --> 00:42:48,550
دعا أحد الإجرائية، التي
هو كل شيء عن مثل أوامر القيام،

857
00:42:48,550 --> 00:42:51,510
واحد هو وظيفي، والذي هو كل شيء
عن وجود وظائف وجود

858
00:42:51,510 --> 00:42:52,930
المدخلات والمخرجات من هؤلاء.

859
00:42:52,930 --> 00:42:55,930
الرد هو نموذج وظيفي.

860
00:42:55,930 --> 00:42:58,010
C هو النموذج الإجرائي للغاية.

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
في الفيسبوك إذا كنت تحصل على رسالة،
ويمكنك اختيار ما أجزاء لتحديث،

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
>> نيل ميهتا: لا، الأمور في النظام.

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
>> الحضور: أم، لماذا أنت
استخدام دعونا بدلا من فار؟

917
00:45:06,840 --> 00:45:10,450
>> نيل ميهتا: لذا فإن السؤال هو
لماذا تستخدمون السماح بدلا من فار؟

918
00:45:10,450 --> 00:45:13,220
هذا هو الشيء يسمى
ES6 أو ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
انها النسخة الجديدة من جافا سكريبت.

920
00:45:15,820 --> 00:45:19,050
هناك مجموعة من الأسباب الفنية،
ولكن دعونا هو أفضل إصدار من فار.

921
00:45:19,050 --> 00:45:20,724
>> بل كيف تقوم بتعريف المتغيرات.

922
00:45:20,724 --> 00:45:21,390
يمكنك استخدام السماح.

923
00:45:21,390 --> 00:45:22,140
يمكنك استخدام فار.

924
00:45:22,140 --> 00:45:23,825
دعونا لديه مجموعة من التقنية
reasons-- يمكنك البحث عنها

925
00:45:23,825 --> 00:45:25,610
حتى later-- لماذا من الأفضل.

926
00:45:25,610 --> 00:45:28,780
في الأساس، ES6 لديه بعض لطيفة
جملة جديد، بعض الميزات الجديدة

927
00:45:28,780 --> 00:45:30,720
على رأس جافا سكريبت القديم.

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
انها ليست سهلة كما قمت بسحب فقط
وإسقاط الجافا سكربت في هناك.

939
00:46:12,300 --> 00:46:15,890
>> أن يكون لديك المحول الخاص بك
إعداد، والتي سوف، كما فعلت من قبل،

940
00:46:15,890 --> 00:46:18,120
تحويل JSX الخاص بك إلى
جافا سكريبت العادي.

941
00:46:18,120 --> 00:46:21,030
عليك أن الشيء الذي سوف أكون
تجميع لك ES6 إلى وضعها الطبيعي.

942
00:46:21,030 --> 00:46:24,720
جافا سكريبت هناك الكثير من التحرك
أجزاء ما عليك القيام به، ولذلك لا يوجد شيء

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
انها سوف سقالة خارجا
كامل تتفاعل التطبيق بالنسبة لك.

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