[عزف الموسيقى] 

نيل ميهتا: هنا تذهب. 

حسنا، الجميع، أهلا بكم في شبكة الإنترنت تطبيقات في المستقبل مع الرد. هذا هو CS50. اسمي النيل. أنا TA لCS50 وطالبة في كلية هارفارد وجدا، جدا المطور على شبكة الإنترنت عاطفي. لذلك أنا متشوقا ل أن أتحدث إليكم اليوم، سواء كنت هنا أو في المنزل مشاهدة، حول رد الفعل، الذي هو، مرة أخرى وكما قلت، ومستقبل تطبيقات الويب. 

لذلك رد فعل هو إطار الشبكة. وكما لقد كنت أقول لبعض الناس هنا، إطارا هو مجرد مجموعة من الأدوات التي يمكن استخدامها على هيكلة وبناء التطبيق الويب الخاص بك. وتطبيقات الويب هي، مرة أخرى، والمواقع التي هي تفاعلية مثل الفيسبوك، Twitter.com، Instagram.com، أيا كان. 

حتى الفيسبوك هو إطار الشبكة تم تطويره من قبل الفيسبوك بضع سنوات back-- رد فعل هو. منذ تم استخدامها في الفيسبوك على تطبيقات الجوال الخاصة بهم والتطبيق على شبكة الإنترنت، إينستاجرام. أكاديمية خان هو آخر وقت مبكر المتبني بارز في رد الفعل. 

لقد حقا الحصول على شعبية للغاية. إذا كنت من أي وقت مضى استخدام الأشياء مثل الزاوي أو العمود الفقري، وهذا هو من نفس العائلة، ولكنه منذ ذلك الحين حتى الآن يفوق شعبيتهم. هذا هو الشيء ساخنة جديدة. انها حقا، حقا ضخمة. 

وذلك رد فعل لامر جيد وليس مجرد إطار الشبكة واجهات المبنى. انها جيدة لبناء واجهات شبكة الإنترنت. هناك أيضا شيء دعا تتفاعل الأصلية التي يتيح لك بناء واجهات لالروبوت ودائرة الرقابة الداخلية وربما منصات أخرى في المستقبل فقط باستخدام نفس شفرة جافا سكريبت. هل يمكن استخدام بالضبط نفس كود جافا سكريبت لتجعل المواقع، لتقديم تطبيقات الروبوت ودائرة الرقابة الداخلية التطبيقات. 

لقد حان الوقت للغاية ومثيرة للغاية. انها فرصة حقا، حقا بارد. انها حقا شبكة عالمية أداة تطوير واجهة، لذلك هو جدا، جدا الشيء المهم أن يعرف. وكما كنت أقول الناس قبل، وهذا، كما أعتقد، هو الذهاب الى تغيير الطريقة التي بناء تطبيقات الويب إلى الأبد. لذلك فمن ربما مبالغة بعض الشيء، ولكن أنا أعتقد أنه أمر جيد جدا أن تعرف. 

حسنا، ما هو رد فعلك؟ الرد هو إطار يمكنك استخدام لبناء واجهات. واجهة هو، مرة أخرى، صفحة على شبكة الإنترنت، أليس كذلك؟ حتى هنا Instagram.com، والاستخدامات لرد. 

الرد هو مبني على فكرة المكونات. وثمة عنصر هو HTML عنصر على المنشطات، لذلك عنصر HTML مثل زر واحدة. انها الفقرة. انها ضربة رأس، أليس كذلك؟ وسوف تستخدم هذه إينستاجرام، لكنه وسيتم أيضا استخدام مكونات تتفاعل. 

تتفاعل المكونات كهربائيا متابعة عناصر HTML أن يكون سلوكهم الواردة في داخلها. لذلك، على سبيل المثال، يمكن أن لدينا عنصر الوقت، وهو عنصر الوقت، والتي سوف تحتوي مثل الطابع الزمني، كما تعلمون، مكون الشخصي الذي سوف تحتوي على صورة الملف الشخصي واسم الشخص. يمكن أن يكون لديها مثل العداد، التي يمكن الاعتماد مثل عدد من يحب، وإذا نقرت على ذلك، فإنه سوف أكون زيادة عدد يحب. وثمة عنصر هو مجرد مجموعة من التعليمات البرمجية HTML التي لديه بعض وظائف ملفوفة داخل منه. لذلك فمن مثل عنصر HTML ، كما قال على المنشطات لي من قبل. يمكنك أن تأخذ هذه المكونات، ويمكنك وضعها معا لجعل عناصر جديدة، في هذه الحالة، وهو عنصر آخر، الذي يحتوي على كل هذه الأشياء. وسيتضمن الوقت، الملف، LikeCounter، وربما تعليق وربما الصورة نفسها. وحتى تطبيقات الويب مبنية فقط من خلال اتخاذ المكونات ووضعها معا. آر إينستاجرام ليست أكثر من حفنة من المشاركات واحدا تلو الآخر، كل وظيفة تتضمن مثل الوقت، الشخصي، LikeCounter، وهلم جرا. انها نوع من مثل بناء منزل. كنت لا بناء المنزل من أعلى إلى أسفل. كنت تأخذ components-- لك اتخاذ مثل الحمام. كنت تأخذ bedroom-- لك التمسك بها معا، وكان لديك عنصر جديد. لديك جزء جديد من المنزل. 

حتى تتفاعل وكلها بنيت حول هذه الفكرة من المكونات التي هي التفاعلية، التي هي التعريفي. كما كنت أقول ما الوضع هو، ويجعل ذلك. هم composable. يمكنك أن تأخذ الوقت والوضع، وضع معا، تقديم شيء أفضل. وانهم يمكن إعادة استخدامها، لذلك إذا كنت يكون رمز المصدر لآخر، هل يمكن تضمين ذلك في أي مكان. 

يمكنك تضمين إينستاجرام شيء على موقع الويب الخاص بك. يمكنك تضمين في الفيسبوك، على سبيل المثال، طالما أنه يستخدم تتفاعل كذلك. لذلك المكونات هي حقا، حقا، حقا اللبنات قوية من على شبكة الإنترنت التي يمكن استخدامها في أي مكان، ووضع معا لجعل كتل بناء جديدة. هذا هو جدا جدا نظرة عامة على مستوى عال. لذلك، مرة أخرى، إذا كان لديك أي أسئلة في أي لحظة حول فلسفة المفاعل، و الترميز، لوقف لي، واسمحوا لي أن أعرف. 

OK، لذلك الرد هو بارد لأنه لديه طريقة مختلفة للنظر على كيفية بناء تطبيقات الويب. وربما كنت قد سمعت من MVC، ل نموذج يمكنك التحكم في CS50 أو أيا كان البعض التحقيق الطبقات التي تستخدمها. ومعظم الأطر هي بنيت حول فكرة MVC. الرد هو لا. تتفاعل بنيت حول فكرة تدفق البيانات أحادي الاتجاه كما يراها هذا المخطط أو الرسم هنا. 

في الأساس، لديك مصدر البيانات. ومصدر البيانات سيقرر كيفية وضع عناصر معينة. وسوف المكونات ثم، عندما تتغير، وسوف اقول ل مصدر البيانات للتغيير. 

استخدام إينستاجرام سبيل المثال، قد يكون لديك قائمة الكائنات آخر مثل في قاعدة بيانات أو شيء من هذا. أن البيانات. ثم مكونات مركزنا سيستغرق ذلك البيانات، وتستخدم هذه البيانات لتقديم شيء على الشاشة. هذا ما السهم من البيانات إلى المكون، ومن ثم يتم استخدام هذه البيانات نفسه لتقديم مجموعة من المكونات. 

في الفيسبوك رسول، ل سبيل المثال، وهو رد فعل، قد يكون لديك قائمة رسائل كمصدر بيانات. والتي من شأنها أن لا تجعل فقط قائمة الرسائل ولكن أيضا قائمة الأصدقاء لديك. لديك عدد الرسائل غير المقروءة. ربما أيضا تجعل الشيء الفيسبوك هذا في الجزء السفلي من Facebook.com. البيانات نفسه هو مصدر واحد للحقيقة والتي تسبب الكثير من المكونات التي ستقدم. وكلما واحد من هؤلاء يتم تغيير مكونات، انه يعود و يتغير مصدر البيانات. 

قمت بإرسال رسالة، أليس كذلك؟ أن يغير مصدر البيانات. تقرأ الرسائل الخاصة بك، لذلك قمت بتعيين غير مقروء 0. أن يغير مصدر البيانات. ولاحظ أن كل هذه واحدة السهم الذهاب مرة أخرى إلى نفس البيانات المصدر، حتى تعرف، نظرا لمجموعة بيانات معين، تعرف بالضبط ما الصفحة سوف تبدو. انها حتمية. كما تعلمون، نظرا بيانات معينة، ما الصفحة سوف تبدو. يمكنك التنبؤ كيف سيكون ل تتصرف وكيف تسير الامور للعمل عندما كنت وضعت معا. 

وإذا كان لي مليون مكونات هنا، فإنه يتصرف نفسه، أليس كذلك؟ سوف لا يكون لديك أي الترابط غريبة. بيانات واحدة جعلت مليون المكونات. A مليون مكونات يمكن العودة وتحرير البيانات. وهكذا هذا هو لطيف جدا. نحن نبني composable، بسهولة تطبيقات الويب قابلة لل. 

لديك مصدر بيانات واحد، مصدر الحقيقة. أن يقول المكونات الخاصة بك كيفية وضع الصفحة، وسوف المكونات التعامل مع التفاعل. واذا كانوا يريدون تغيير الأشياء، اذهبوا إلى الوراء ويقول مصدر البيانات للتغيير. منطقي؟ لذلك رد فعل هو كل شيء عن الفهم كيفية بناء مكون وكيفية جعل مكون الخاص بك التفاعل مع العالم الخارجي. 

مما يجعل تفاعل عنصر مع العالم الخارجي يستخدم تقنية أخرى دعا الجريان، التي هو الإطار الذي هو وأضاف على رأس تتفاعل. نحن لسنا بصدد الحديث عن ذلك. ونحن في طريقنا للحديث أكثر حول، نظرا البيانات، كيف يمكنك أن تجعل عنصر؟ 

وهكذا تتفاعل بشكل رائع حقا لأنك يمكن استخدامه مع أي النهاية الخلفية التي تريدها. إذا كان لديك مثل الخلفية بيثون، إذا بيثون الخاص بك يمكن أن بصق بعض البيانات، رد فعل يمكن أن تجعل ذلك. إذا كنت لا المخرجات JS من البيانات، تتفاعل يجعلها. روبي القضبان مع البيانات، تتفاعل يجعلها. 

لذلك رد فعل هو في الأساس على شبكة الإنترنت view-- الأمامية مع مكونات لأي مصدر بيانات على الإطلاق. وهكذا تسير من مصدر البيانات ل تتفاعل مكونات عملية سهلة جدا. تسير في الاتجاه الآخر هو اصعب قليلا. يستخدم الجريان كما ذكرت من قبل. ونحن لن ندخل في ذلك. سنركز أكثر على البيانات إلى مكون الجانب. وبهذه الطريقة يمكنك جعل بارد، متعة تطبيقات الويب. انها لن تؤثر على العالم الخارجي في الوقت الراهن، ولكن تلك قصة أخرى. 

حسنا، حتى لو كنت هنا لبلدي مشاركة دراسية عليك أن تعرف أن كل من رمز لل حديث اليوم سيكون في هذا URL هنا، آسف، هذا URL هنا. وأساسا نحن في طريقنا للذهاب من خلال أربع خطوات، ربما خمسة، ربما لا خمسة. سوف نمضي من خلال أربع خطوات بناء على عينة تتفاعل التطبيق. وهكذا كافة التعليمات البرمجية المصدر لكل خطوة على الطريق ستكون هنا، حتى إذا كنت بعد طول في المنزل، لا تتردد في الاطلاع هذا الرمز. إذا كنت بعد طول هنا، نحن سوف يظهر ذلك على الشاشة، لذلك لا تقلق بشأن ذلك. ولكن إذا كنت في المنزل، ويشعر تتردد في زيارة هذا الموقع. و، نعم، يجب أن تكون قادرا على الحصول على كافة التعليمات البرمجية كنت من أي وقت مضى في حاجة هنا. لذلك هو الغش ورقة جيدة كذلك لمغامراتك في المستقبل مع رد فعل. بارد، حتى لو أن كل من هنا، وحتى لو كنت في المنزل، سحب ما يصل هذا الموقع، is.gd/cs50react، أي رأس مال، لا تسطير، لا شيء. 

سترى الصفحة التي تبدو قليلا من هذا القبيل. هذا هو الشيء يسمى CodePen. CodePen هو التعاونية البيئة الترميز التي يمكنني كتابة التعليمات البرمجية هنا، و انها سوف ترسل لك تلقائيا. وبهذه الطريقة، لا أستطيع كتابة التعليمات البرمجية. أستطيع تشغيل التعليمات البرمجية هنا. 

لexample-- وإذا كان reloads-- ترى، أنا على التوالي شفرة جافا سكريبت على الصفحة هنا، وأنه سوف تلقائيا تقديم صفحة الويب مع هذا شفرة جافا سكريبت. وهكذا هذا هو وسيلة بالنسبة لنا لمحاولة الخروج كود حقا سريعة دون الحاجة إلى استخدام ID لدينا أو استخدام آلة المحلية الخاصة بنا أو أيا كان. انها طريقة سريعة جدا بالنسبة لك لنموذج بالحجم الطبيعي واختبار أنواع مختلفة من التعليمات البرمجية. 

لذلك أنا ذاهب لتكون آخذة رمز المثال، ضعه هنا. ونحن في طريقنا للعمل من خلال ذلك. وإذا كنت في المنزل، وكنت يمكن سحب هذا الأمر كذلك. ولقد المثبتة مسبقا الرد هنا، لذلك يمكنك فقط كتابة التعليمات البرمجية الخاصة بك هنا، و انها محاولة لالملعب الخاص بهم. 

نعم، إذا كان الجميع ل فتح هذا الرابط هنا. من فضلك أعطني الابهام حتى مرة واحدة لديك مفتوحة. بارد، بارد بارد. لا يوجد شيء هنا حتى الآن، ولكن سوف نقوم بتغيير ذلك في وقت قريب جدا. 

OK، لذلك رد فعل هو جافا سكريبت مكتبة، وعلى هذا النحو، يتطلب معرفة وجافا سكريبت، وهي لغة برمجة الويب. ويجري استخدامه لأشياء أخرى الآن أيضا، ولكن في المقام الأول على شبكة الإنترنت تطوير لغة، لذلك إذا كنت معتادا أن قراءة موقع يسمى JSforCats.com. إنه لأمر رائع. يمكنك تعلم جافا سكريبت خلال نصف ساعة. إنه أمر لا يصدق. 

حتى تعطيه القراءة. نحن أيضا الكثير من HTML هنا ل نحن تصميم صفحات الويب بالطبع. لذلك إذا كنت غير مألوف مع HTML، تحقق من HTMLdog.com. وأعتقد أن التعلم هو رد فعل مليون مرة أسهل إذا كنت بالفعل تعرف اللبنات. إذا كان لديك المكونات، فإنه من سهلة لجعل عنصر أكبر. هذا رد فعل اللغة بالنسبة لك. 

فهيا وإعطاء هذه الأمور للقراءة. وقفة هذا الفيديو. إعطائها للقراءة إذا كنت في المنزل إذا لم تكن دراية HTML أو جافا سكريبت OK، فما نحن في طريقنا لل القيام به هو أننا ذاهبون لجعل التطبيق بطاقات التعليمية الأساسية جدا باستخدام تتفاعل. ونحن في طريقنا لديهم بطاقات التعليمية. يمكنك الوجه البطاقة ذهابا وإيابا. وسيكون لدينا أيضا قائمة كل الأوراق التي لدينا، وإذا كنا الشعور الطموح، ونحن قد تكون قادرة على تبديل بين السيارات من خلال النقر عليها. 

ولكن هذا هو، عارية بك العظام، وهي بسيطة جدا تتفاعل التطبيق. وهكذا هذا هو في الواقع لا تافهة لتنفيذها، ولكن ونحن في طريقنا لاظهار ذلك، إذا كنت تفعل هذا، انها جدا، من السهل جدا لتمديده إذا كان الناس الآخرين مساعدتك في ذلك. لذلك نحن ذاهبون للذهاب من خلال أربع خطوات تبدأ من الصفر لبناء هذا. 

OK، وبالتالي فإن الخطوات الأربع، وسوف نقوم تبدأ بالخطوة الأولى. الخطوة الأولى ستكون بناء العنصر الأول الخاص بك. كما قلت من قبل، وهو عنصر في يردون هو مجرد عنصر HTML على المنشطات. وهي تحدد HTML وبعض السلوك، وذلك وتحديد كيف يمكن للناس يمكن أن تتفاعل معها كيف كان يمكن أن يكون الحالة الداخلية. مثل زر سيعرف مثل كم عدد الأوقات قد تم النقر عليه على سبيل المثال، وسوف تعرف كيف تضع نفسها خارج. 

لذلك دعونا نمضي قدما ونبني العنصر الأول باستخدام جافا سكريبت. إذا كان الأمر كذلك بناء الجملة تبدو غريبة، هذا لأنه نوع من هو. لذلك، مرة أخرى، ونحن في طريقنا لجعل متغير يسمى التطبيق باستخدام الكلمة ندعك، الأمر الذي يجعل متغير، السماح التطبيق يساوي React.createClass. 

الرد هي مكتبة وله وإنشاء وظيفة الطبقة. وهذه هي وظيفة قليلا من التعليمات البرمجية التي قمت يمكن استخدامها لإنشاء لجنة جديدة نوع من ردة الفعل المكون. وهكذا React.createClass يجعل عنصر، وسيكون هذا العنصر تكون قادرة على القيام الاشياء. الشيء الرئيسي هو يستطيع القيام به هو تقديم شيء ما، تجعل بوصفها وظيفة. 

مرة أخرى، إذا كان هذا المؤشر ليست واضحة ل لكم، وأنا أوصي تذهب على JS للقطط والتحقق من ذلك. هو أن التكبير جيدا بما فيه الكفاية؟ رائع. 

لذلك كل احتياجات المكونة لديك وظيفة تقديم. وتقول وظيفة تقدم، ما أقوم بطباعة على الشاشة؟ ولكن العنصر هو عديمة الفائدة إذا لم يحدث ذلك أعرف ماذا الطباعة على الشاشة، بحيث تحتاج إلى أن يكون وظيفة تقديم. 

حتى في تقديم شيء، كنت تحتاج فقط إلى إعادة بعض HTML. وما هو بارد هناك شيء يسمى JSX، الذي هو امتداد ل جافا سكريبت أن يستخدم من قبل تتفاعل. ذلك دعونا تكتب HTML داخل جافا سكريبت الخاصة بك، والتي يبدو نوعا من غريب عندما تعتقد لأول مرة عن ذلك، ولكنه يجعل الكثير من المعنى بعد ذلك. حتى نتمكن من القيام بذلك. إذا كنت على دراية HTML، وأنا أعلم لدينا شعبة مع الغرض العام حاوية للأشياء. يمكننا العودة إلى شعبة، وداخل هذا شعبة، ونحن يمكن أن تضع الاشياء. 

لذلك دعونا نقول أننا نريد أن تجعل فقط على بطاقات التعليمية متابعة مباشرة في الوقت الراهن. والبطاقات التعليمية، وأود أن أقول، سوف يكون السؤال والجواب. حتى داخل هذه شعبة، دعونا طباعة فقرة تقول question-- ما هو الجواب في نهاية المطاف في الحياة، والكون؟ ومن ثم فإن الجواب هو سيكون، بالطبع، 42. 

لم لا تأتي بشكل جيد على الإطلاق. نعم، وذلك أساسا يمكنك حقا إرسال HTML داخل جافا سكريبت الخاصة بك. وهذا سيكون طباعتها إلى الشاشة. لذلك دعونا نحاول بها. 

لذلك لدينا عنصر لدينا. نحن بحاجة إلى معرفة رد فعل لوضع عنصر على الشاشة حتى React.render، لذلك تلاحظ أننا علاج التطبيق مثل أي عنصر آخر. نكتب كما كان عنصر HTML. مثل بدلا من أن تقول مثل IMG لصورة أو ص للفقرة، تكتب التطبيق، لذلك التطبيق هو تعامل مثل عنصر HTML. كما قلت من قبل، انها عنصر على المنشطات. 

لذلك أنت تجعل التطبيق، ولك إعطائها مكان لوضعها. وهذه هي الطريقة التي يمكن أقول ذلك حيث وضعه. لقد خلق شعبة بسيط على الصفحة يسمى بمعرف الصفحة، وحيث ان العنصر ستذهب. 

ونحن لن تشغيل مع HTML. أساسا هذا هو الذهاب للحصول على وضعت داخل هذا العنصر الصفحة أن لدينا على الشاشة. بحيث يتم تشغيله هذا الرمز، وأنه يستمد هذا شيء على الشاشة، لذلك نحن هنا. لقد كان أول رد فعل مكون لدينا. 

لذلك مثلما خلاصة، التي قطعناها على أنفسنا بلطف نوع جديد من عنصر، أليس كذلك؟ هذا ما React.createClass. وفي هذا المكون، ونحن وقال انه ما ينبغي القيام به. كلما هذا المكون هو سيتم طباعتها على الشاشة، وسوف تطبع مع شعبة اثنين من الفقرات داخل منه. 

وماذا فعلنا، ونحن جعل التطبيق الجديد استخدام التدوين زاوية قوس التطبيق. قلنا أنه وضعه داخل عنصر صفحة. وذلك ما فعلته، خلقت التطبيق الجديد من ذلك القالب. ثم قلت لجعله. لذلك يقال، OK، التطبيق، ماذا يجب أن تطبع؟ التطبيق يقول، انتقل بطباعة شعبة مع اثنين من الفقرات داخل منه. وفويلا، هناك شعبة لدينا مع فقرتين داخل منه. معنى حتى الآن؟ 

لذلك، مرة أخرى، فإن التحدي كله من يردون هو مجرد معرفة كيفية جعل المكونات. كيفية جعل المكونات معا. والآن بعد أن حققنا لنا أولا عنصر، دعونا نعود وجعل مكونات قابلة للتخصيص. حتى تعرف كيف كنت في HTML يمكن أن تعطي أزرار الفصول الدراسية؟ يمكنك ان تعطي المراسي الخاصة بك أ href. يمكنك ان تعطي المدخلات الخاصة بك نوع، أليس كذلك؟ يمكنك ان تعطي المزيد من العرف خصائص لجميع العناصر الخاصة بك لجعلها أكثر إثارة للاهتمام. ونحن في الواقع يمكن أن تفعل نفس الشيء بالضبط. 

لذلك دعونا نقول اننا نريد ل التطبيق للذهاب تقديم أي بطاقة. الآن نحن فقط أصدرت بطاقة ضمنية. ونحن نعلم ان هناك واحد فقط بطاقة يمكن أن تفعله، لذلك نحن وسنحاول تغيير هذا الآن حتى يمكننا أن مجرد إعطائه بعض البطاقة. انها سوف طباعة البطاقة. 

يجب عليك في محاولة لجعل حياتك مكونات للأغراض العامة جدا. لذلك بهذه الطريقة يمكنني أن البريد الإلكتروني هذا صديقي ويكون مثل، مهما بطاقات التعليمية لديك، مجرد إطعام عليه إلى هنا، وأنها سوف تفعل ذلك من تلقاء نفسه. يمكنك وضع البعض الأشياء في التطبيق الخاص بك. 

ولكن أولا، دعونا كسر هذه يصل إلى عنصرين، ولكننا نريد لفصل بطاقة طباعة جزء من جزء التطبيق الفعلي. ذلك ما يمكن أن نفعله هو أننا يمكن تغيير هذا من التطبيق لCardView، مجرد اسم جديد للالتطبيق، ويمكننا أن نجعل جديدة دعا مكون التطبيق، وينبغي عدم الخلط مع التطبيق القديم. لقد حصلت على createClass، وكما هو الحال في HTML، يمكنك عش يردون مكونات داخل بعضها البعض. 

حتى في هذه الوظيفة تقديم، وظيفة CardView العودة، وهذا هو بالضبط نفس الشيء. ترى لماذا انها نفس الشيء؟ بدلا من تقديم مجرد التطبيق الذي لديه شعبة والاقتران داخل منه، التطبيق يجعل CardView، و CardView يجعل شعبة والفقرة. لذلك هذا هو المثال الأول لدينا عناصر التعشيش داخل بعضها البعض. هل هذا منطقي؟ لذلك، مرة أخرى، لدينا عنصر CardView. لدينا عناصر التطبيق انه اكبر من. 

OK، لذلك نحن نريد لدينا CardView-- إذا كنت إعطاء CardView جيد بطاقة معينة، انها سوف طباعة بالنسبة لك، أليس كذلك؟ لذلك أولا، ونحن بحاجة لجعل بطاقة، لذلك دعونا جعل كائن بطاقة. لذلك دعونا بطاقتي equal-- إذا كنت مألوفا، هذا هو صنع التدوين فقط الاعتراض في جافا سكريبت. انها نوع من مثل البنية في C، لذلك قدمنا ​​بطاقة، وحتى الآن نحن يمكن أن تمر هذه البطاقة حيث خاصية أو كسمة في HTML المصطلحات لدينا التطبيق. حتى نتمكن من القيام بذلك، التطبيق بطاقة تساوي myCard. 

أنت تعرف كيف في المدخلات، وتفعل نوع الإدخال يساوي النص أو زر الطبقة يساوي BTN لألبس الحذاء،؟ نفس الفكرة، بطاقة التطبيق equals-- كنت قد حصلت على وضع الأقواس here-- بطاقة التطبيق يساوي myCard، لذلك هذا يقول لنا هذا الكائن البطاقة. انا ذاهب الى تمرير بأنها الخاصية لمكون التطبيق. وسيكون هذا العنصر التطبيق تكون قادرة على الوصول إليه والقيام الاشياء معها. 

لذلك التطبيق لدينا سيكون الذي يحصل على بطاقة، حتى الآن، دعونا لها التطبيق تعطي فقط بطاقة إلى CardView نفسها لمثل التطبيق ليس الذهاب إلى معرفة ما يجب القيام به مع ذلك، ولذا فإننا سوف مجرد إعطائها إلى CardView. ولذا فإننا سوف تمر عليه بنفس الطريقة، يساوي بطاقة، وهكذا كل عنصر يمكن الوصول إلى الأشياء التي أعطيت له. يمكنهم الوصول إلى خصائص التي أعطيت لها استخدام هذا النحو، this.props.card. 

فما يحدث هنا لديك الكائن myCard. كنت تمريرها إلى التطبيق باستخدام بطاقة التطبيق يساوي myCard. وبالنظر إلى أن الكائن بطاقة إلى التطبيق الخاص بك. التطبيق يمكن الوصول إليه كما this.props.card. انها نوع من مثل صورة يعلم ما هو عليه في المصدر. 

هذا التطبيق يعرف ما هو بطاقة هو، وأنها يمكن أن تفعل أشياء معها. ويمكن أن تفعل الحسابية. فإنه يمكن اتخاذ قرارات تستند الخروج من ذلك. 

الآن، كنت ذاهبا لتمرير this.props.card على CardView. معنى حتى الآن؟ أنه سوف يكون أكثر منطقية الآن. 

حسنا، الآن نحن في CardView. لدينا CardView، نظرا للبطاقة، ينبغي طباعة السؤال والجواب. الآن نحن مطبوعة للتو بعض أسئلة وأجوبة ضمنية. نحن بحاجة لمعرفة out-- نحتاج أن يطلب البطاقة التي أعطونا ما هو السؤال والجواب، و ثم طباعة هذا الخروج إلى الشاشة. 

حتى نتمكن من القيام بذلك هنا. في تقديم begin-- به أولا قدم المساواة. وذلك ما نقوم به هنا هو أننا نعلم أن يتم منح بطاقات بنا إلى الملكية، الصحيح؟ لقد أعطيت لنا كمدخل. كما انها تقريبا مثل الحجج إلى وظيفة. البطاقة حجة تقريبا لهذا CardView. 

سنقوم استخراج ذلك، وضعت أنه في مسألة متغيرة. تأكد من الإجابة ذهب إلى الإجابة المتغيرة. يطالب تلك البطاقة للرد. والآن بعد أن لدينا هذه، بدلا من طبع هذا النص، ونحن في طريقنا للطباعة كل ما أعطانا. 

لذلك هذا stuff-- حتى ونحن في طريقنا لاخماد جواب السؤال. دعونا نرى ما اذا كان هذا يعمل. بارد، لذلك دعونا الخطوة من خلال ذلك أكثر مرة واحدة فقط للتأكد. 

حتى بطاقتي هي كائن بطاقة، ونحن تعطي هذه البطاقة إلى التطبيق. والتطبيق هو الذهاب الى اتخاذ بطاقة وإعطائها إلى CardView. ويقول هذا CardView، إذا كنت تعطيني أي كائن بطاقات التعليمية، سوف طباعة السؤال الذي وجهته وردها، أليس كذلك؟ 

ذلك ما يمكن أن تفعله هو يمكنني إرسال هذا الرمز، أول مثل 10 خطوط من قانون بلدي، إلى صديقي. كان يمكن تضمين ذلك في تطبيق بلده. وطالما أنه فعل الشيء نفسه، مثل بطاقة CardView يساوي هذا، طالما انه خلق CardView وأعطاه الحق في المعلومات، كان يمكن تقديم بطاقته الخاصة. وهكذا بهذه الطريقة، انها حقا طريقة بارد بالنسبة لك لبناء المكونات التي تستخدم بعضها البعض، أليس كذلك؟ هذه البطاقة، ويمكنني أن تنشر هذا CardView على شبكة الإنترنت، والناس سوف تكون قادرة على استخدامها. ذلك أساسا، انها مثل واحد من الوظائف القياسية في المكتبة C. 

بل هو وظيفة حيث كتب أحدهم ذلك. كنت تعطي مدخلات معينة. انها سوف تنتج انتاج معين. كنت لا تهتم كيف يعمل داخليا. طالما أنك تعطيه الحق المدخلات، وأنها سوف تجعل من الناتج الصحيح. 

ويمكن أن يكون عنصرا فكرت في نفس الطريق. هذا هو مثل CardView وظيفة المكتبة. إذا كنت تعطيه بعض بطاقة كخاصية، وأنها سوف طباعة محتويات تلك البطاقة. مثل إذا قمت بتغيير بطاقتي ل بدلا من ذلك يكون مثل ما هو 5 زائد 37، فإنه سيتم تحديث وفقا لذلك. وذلك فقط عن طريق تغيير المدخلات، فإنه يحصل على انتاج معين. حتى تتمكن من التفكير في مكونات تقريبا وظائف في هذا الطريق، الذي يمكنك وضع معا. يمكنك الحصول على المدخلات، مثل هذا CardView كإدخال، وتحصل على الناتج. في هذه الحالة، خرج هو HTML. معنى حتى الآن؟ بارد، لذلك مرة أخرى، الخصائص كيف يمكنك تمرير المعلومات داخل وخارج المكونات. 

حسنا، دعونا نجعل هذا الشيء التفاعلي. الحق الآن هو نوع من السأم. ما هو (غير مسموع)؟ يمكنك طباعة بعض من، ولكن هذا هو كل ما يمكن القيام به. 

لذلك دعونا نعود الى السؤال القديم فقط في الوقت الراهن. حسنا، حتى الآن هذه المكونات ومملة لأن كل ما يفعلونه، أنها تحصل على المدخلات. أنها تجعل الإخراج، أليس كذلك؟ هذا هو نوع من السأم. نحن نريد أن يكون لدينا المكونات لتكون قادرة على نوع من الحالة الداخلية، كما تتذكر شيئا. 

لبطاقات التعليمية، ل مثلا، ما نوع الدولة قد ترغب في تذكر لبطاقات التعليمية؟ ما وضع مؤقت قد ترغب في تذكر لبطاقات التعليمية في التطبيق بطاقات التعليمية؟ الحضور: ما إذا كان قد تم انقلبت عليه؟ نيل ميهتا: نعم، هذا صحيح. لذلك قد ترغب في الاحتفاظ المسار من أنت مواجهة أو ل كنت وجهه لأسفل على البطاقة. في الفيسبوك، على سبيل المثال، تفعل نريد أن نتذكر فيها في تغذية الأخبار هل أنت تحب أو الذي الشخصية تفعلون الآن. 

على رسول، مثل ما النص الذي اكتب في مربع الإدخال، أليس كذلك؟ إذا قمت بتحديث الصفحة، فإنه يذهب بعيدا. ولكن كنت لا تهتم حقا. انها مؤقتة فقط. نعم؟ 

الحضور: (غير مسموع) نيل ميهتا: مثل ومضة بطاقة، مثلك يمكن رؤية الجانب سؤال أو الجانب الجواب؟ 

الحضور: OK. 

نيل ميهتا: مثل الوجهين بطاقات التعليمية، أليس كذلك؟ نعم، لذلك تريد ل لدينا هذه الفكرة من الآن لدي الخصائص، الذي هو مثل المدخلات، ولكن الدولة التي هي مؤقتة، اه، أين أنت في الصفحة، أليس كذلك؟ وقال مرة أخرى وأنا في الفيسبوك رسول، ولدي مثل الذي شخص تقرأها الفيسبوك أو الذين الشخصية، أليس كذلك؟ 

هذا هو مؤقت فقط. من المهم أن تظهر للمستخدم ما يحدث، ولكن تحديث الصفحة. لا يهم حقا. لذلك فمن حالة مؤقتة، لذلك نحن جميعا دولة عليه. 

لذلك، مرة أخرى، هناك دولة والدعائم. الدعائم ومدخلات معينة من مصدر البيانات. الدولة هي تماما مثل التخلف. انها مجرد مثل الاشياء التي يجعل الشيء تفاعلية. 

لذلك لدينا في CardView-- دعونا لها لدينا CardView-- حيث كان لطيفا. ما نحن في طريقنا للقيام به هنا، ونحن في طريقنا لمسة CardView وفقط CardView. وحتى صديقي الذي حصلت على هذا، فإنها لن تلاحظ أي فرق. انهم لن تضطر إلى تغيير أي من التعليمات البرمجية الخاصة بهم، ولكن لديهم معرفة بها CardView حصلت كهربائيا تصل. هذا هو جزء لطيف حول المكونات. 

OK، وذلك في CardView لدينا، دعونا نحاول و تتبع ما إذا كنا نقوم بالتخلص يصل أو وجهه لأسفل. في رد فعل ونحن نفعل ذلك من خلال أولا تحديد الحالة الأولية. أين تبدأ البطاقة؟ 

هكذا تكون وظيفة تسمى getInitialState وظيفة، ونعود كائن. يحتوي هذا الكائن بعض الدول، و هذه الدولة هي مجرد زوج قيمة المفتاح. كما هو الحال في إرشاد، لديك مفتاح و قيمة، لديك مثل الاسم هو سلسلة. 

في هذه الحالة، دعنا نقول الجبهة الحقيقية. هذا يقول أن لدينا دولة. واحد مكون من مكونات الدولة هي سمة تسمى الجبهة. (غير مسموع)، لذلك افتراضيا، نحن في الوجه الأمامي للبطاقة، ويمكننا تغيير هذا ونحن نقف على البطاقة. منطقي؟ 

OK، وذلك في تقدم، في الوقت الراهن، ونحن تبين السؤال والجواب. الآن ماذا نفعل وتظهر هذه المسألة إذا نحن على واجهة البطاقة بحيث الجواب عن الجزء الخلفي من البطاقة. هذا هو السبب الذي جعل جميع بطاقة تفاعلية. لذلك دعونا نحاول وهذا هنا. حسنا، أولا جعل مجرد متغير. يمكننا أن نسأل الآن this.state.front. نحن العبور إلى الدولة على نفسه نحن الدعائم الوصول، this.state.front ذلك. 

إذا نحن أمام، ثم النص غير this.props.card.question. إذا نحن على الجزء الأمامي من بطاقة، نحن ذاهبون لمحاولة والاستيلاء على السؤال من البطاقة. خلاف ذلك، إذا كنا على ظهره من البطاقة، ماذا نفعل؟ 

الحضور: الجواب؟ 

نيل ميهتا: نعم، ذلك النص يساوي this.props.card.answer. ولكن إذا لاحظت، نستخدمه الدولة لاتخاذ قرار لأنه الآن عنصر سوف تبدو مختلفة القائم قبالة كيف يمكن لهذه التفاعل معها. وذلك بدلا من طبع هذا، سنقوم طباعة فقط من النص. بارد، وحتى الآن، وكما ترون، ونحن نرى فقط هذه المسألة. وإذا قمت بتغيير الدولة هنا يدويا إلى الأمام غير صحيحة نحصل على 42 الظهر. 

لذلك، مرة أخرى، هذا العنصر له دولته الخاصة. كما يعرف زر ما إذا كان لقد تم الضغط عليه أم لا، هذا الشيء يعرف ما هو على الجبهة أو على ظهره. افتراضيا، انها على الجبهة. ثم لو كان على الجبهة، سنقوم بطباعة هذه المسألة. إذا كان على ظهره، وسنقوم طباعة الجواب. لذلك، مرة أخرى، فإن المعلومات معين هو نفس. انها مجرد تبدو مختلفة على أساس كيف البرنامج عليه. لذلك، على سبيل المثال، الفيسبوك رسول، حتى إذا كنت تحصل على نفس مصدر البيانات، قد تبدو مختلفة لأن الدولة المختلفة. كنت تبحث في رسالة شخص آخر ل. 

OK، لذلك هذا هو كل شيء حسن و جيد، ولكن الآن ما هو في الواقع تجعلنا قادرين على تغيير سواء بطاقة لدينا هي الأمامي أو الخلفي. يمكننا القيام بذلك عن طريق إضافة الوجه زر، زر إلى البطاقة التي والوجه البطاقة إذا كان (غير مسموع). لذلك دعونا إضافة زر هنا، هذا سوف زر، وهذا الزر ويقول الوجه. 

والآن الحق في ذلك، فإنه لا تفعل أي شيء. هو فقط تبدو لطيفة. ما يمكننا القيام به هو أننا يمكن أن تضيف نقرة معالج، عند _ النقر يساوي this.flip، وسنقوم تحديد الوجه في وقت لاحق. ولكن في الأساس، عند _ النقر هي وظيفة هذا يحصل على استدعاء عندما يقوم المستخدم بالنقر عليه. 

لذلك الزر سيعرف عندما يكون تم النقر عليه. ذهب لقد تم النقر عليه، سيكون الوجه البطاقة. انها نوع من مثل الخاص بك توصيل البيتزا الرجل. كنت مثل، كل الحق، كلما شخص وتدعو لي، وأنا سوف نقدم البيتزا، أليس كذلك؟ 

تسجيل هذا المستمع. كنت استمع لهذا الحدث. يمكنك الحصول على ودعا، وعندما يحدث الحدث، أن تفعل شيئا. يمكنك الحصول على البيتزا. في هذه الحالة، عندما كنت النقر عليها، كنت الوجه البطاقة. 

ولذا فإننا بحاجة إلى تحديد وظيفة من شأنها أن الوجه البطاقة، ولذا فإننا سوف أكتب هذا الحق هنا، والوجه وظيفة. وماذا في ذلك هل تعتقد أن الوجه تفعل؟ مرة أخرى يحصل على استدعاء هذا عندما نحن انقر على زر الوجه. ما يجب على وظيفة الوجه تفعل؟ 

الحضور: تغيير this.state.front من فيا لكاذبة، كاذبة إلى true. 

نيل ميهتا: نعم، حتى تأخذ أيا كان this.front is-- الدولة الأمامية. تتخذ الدولة الأمامية، إذا هذا صحيح، وجعله كاذبة. إذا كان كاذبا، وجعله صحيحا، أليس كذلك؟ لذلك دعونا نحاول ذلك. 

لا يمكنك تغيير الدولة فقط عن طريق القيام this.state. لا يمكنك أن تفعل هذا. لا يمكنك أن تفعل ذلك. لديك لاستخدام وظيفة دعا this.setState. 

لذلك يمكن القول this.setState الجبهة القولون هذا حيث، مرة أخرى، تعجب نقطة تعني العكس. أعتقد إذا كان هذا. state.front صحيح، أنها سوف تتحول كاذبة. ولذا فإننا سوف تعيين حالة من فيا لكاذبة. إذا كان كاذبا، وسوف نقوم تعيين كاذبة إلى true. 

لاحظ فقط التي وضعناها والحصول على بعض الشيء بشكل مختلف، وذلك دعونا نحاول هذا. بادا بنج، أن ننظر في ذلك. سوف الزر الوجه الآن تبديل الأمام إلى الخلف الدولة. 

وحتى هنا حيث تشاهد قليلا من سحر تتفاعل. وكأننا أبدا قال انها لإعادة تقديم. نحن أبدا قال انه رسم أي شيء. إذا كنت تفعل هذا دون رد فعل، وكنت وقد to-- أحب عندما يتم النقر على زر الآخر، عليك أن أقول ذلك ل يدويا إعادة تقديم، أليس كذلك؟ 

الرد هو رائع حقا في أنه إذا تعطيه الدولة وخصائص معينة، وسوف تقدم دائما نفس الشيء بالضبط. وحتى عندما كنا نغير من أي وقت مضى الدولة والخواص، مجرد رد فعل يجعل إعادة-كل شيء. كان يعرف أن هناك المراسلات واحد الى واحد بين الدولة ومعلمة وHTML. لذلك كلما أي من هذين التغييرات من خلال مجموعة الدولة، فإنه سيتم تغيير الطريقة التي هو إعادة تقديم الدفع. وذلك أساسا رد فعل مثل في انتظاركم للتغيير. 

كلما يتغير شيء، انها سوف إعادة تقديم الصفحة بأكملها. وإذا كان يبدو غير فعال، انها لأنها ستكون، لكن رد فعل يستخدم شيئا يسمى الظل DOM. بدلا من رسم الصفحة مباشرة، فإنه تحافظ على شجرة HTML الظاهرية في الذاكرة. 

كما تعلمون، HTML هي مثل شجرة، مثل هيكل البيانات الهرمية. إنها تحافظ على شجرة وهمية في الذاكرة، وكلما قمت بتحديث الصفحة، انها سوف رسم وهمية أخرى شجرة، وانها سوف حساب ما تغييره يحتاج إلى جعل صفحة لجعل الشجرتين على قدم المساواة. ذلك أساسا، فإنه عمليا إعادة يجعل الكثير. وبعد ذلك فقط مثل تغيير الصفحة في القرص قليلا حسب الحاجة، لذلك فمن جدا، جدا، فعالة جدا. 

حتى تتفاعل في الأساس سوف كلما قمت بتغيير شيء ما، انها سوف تعيد تقديم صفحة تقريبا. انها سوف معرفة ما الذي أحتاجه ل تغيير لجعل الصفحة حقيقية تعكس الصفحة الافتراضية، وأنها سوف تفعل ذلك. هذا هو DOM الظاهري. انها واحدة من أكبر ملامح لرد. 

هل هذا منطقي؟ أي أسئلة؟ نعم؟ 

الجمهور: كيف مقارنة تزال إلى MVC التي تحدثنا عنها قبل الموارد مثل. 

نيل ميهتا: نعم، والسؤال هو كيف يمكن ان تقارن MVC؟ هل سألت عن الموارد. حسنا، دعونا نتحدث عن كيف يعمل. 

في MVC، وكنت تحديث النموذج. في هذه الحالة سيكون لدينا نموذج البطاقة. ان رأي لديهم زر الآخر، والسيطرة سيكون لديك وظيفة الوجه. لذلك الرأي أن نقول لل تحكم على الوجه الآخر. أن الوجه نقول لل نموذج للتغيير، أليس كذلك؟ 

وذلك عند القيام MVC، كنت الاستماع لنموذج للتغيير، ويجب إعادة تقديم وجهة نظر وفقا لذلك. أو عليك أن تحب لدينا وحدة تحكم. انتظر نموذج للتغيير، ومن ثم انتقاء واختيار جزء من وكأنه شيء للتغيير. هنا لدينا شيء واحد، ولكن في التطبيق كبير، عليك أن تتذكر ما تحب التغيير في كل مكان واحد، لذلك أمر مزعج قليلا. وذلك رد فعل لطيف لأنه يحتوي على الظل دوم. ويمكن أن تحمل فقط إعادة كتابة الأمر برمته. لم يكن لديك لانتقائي مثل تخمين ما تحديثها. 

في الفيسبوك إذا كنت تحب الحصول على رسالة جديدة، في MVC، عليك أن تتذكر، OK، تغيير الأشياء في الجزء العلوي من الصفحة، رمز الرسالة. البوب ​​أيضا نافذة جديدة في الجزء السفلي. وتأكد أيضا شيئا جديدا في هذا الإطار. كما تلعب الصوت. 

كما أن هناك العديد من الاشياء الخروج في نفس الوقت. وحتى إذا كنت لا يملك الظل دوم، وكنت يجب أن نفعل ذلك يدويا ل لا يمكنك التخلص من صفحة كاملة. أنت لا تستطيع، لذلك لديك لتغيير كل شيء يدويا، وهو أمر مزعج حقا في MVC. 

وذلك من أجل أن تكون مقتصد، بشكل انتقائي تحديث الصفحة، وهو كفاءة، ولكن مزعج أيضا. في رد فعل، لأنه من الظل دوم، يمكنك الحصول على كل شيء مجانا. انها فعالة ل من الظل دوم. عنق الزجاجة بتحديث الصفحة. انها لا تفعل التلاعب شجرة. يمكنك الحصول على الكفاءة. يمكنك أيضا الحصول على سهولة الاستخدام ل إذا كنت مجرد كتابة صفحة كاملة، لكنك تعلم فقط، كل الحق، والأشياء وسيكون على الصفحة في مكان ما. قد يكون في مكان مختلف، ولكن انها سوف تكون على الصفحة، أليس كذلك؟ لذلك أنت فقط إعادة تقديم هذه الشيء بأكمله تقريبا، وكنت قد جعل زوجين تغييرات على الصفحة نفسها. 

لذلك، مرة أخرى، في MVC لك سيكون لديك لاختيار بين سهولة الاستخدام والكفاءة، وتتفاعل، وتحصل على حد سواء. لذلك فمن الأفضل. منطقي؟ صلب. 

حسنا، دعونا نرى دعونا نتحدث قليلا عن الخطوة 4، كيف يمكننا تضمين المكونات. لذلك لدينا هذا الحق الآن. لدينا زر تبرد قليلا. يمكننا أن نقف مرة أخرى و إيابا، وهذا كل ما يفعله. دعونا نقول أننا نريد ل لدينا مكون آخر. دعنا نقول يجب أن لدينا التطبيق بطاقات التعليمية تحتوي على قائمة من كافة بطاقات التي لديك، وهذا يعني أننا يجب أن يكون مكون آخر. حسنا، ربما نسميها عرض القائمة. دعونا نجعل وجهة نظر القائمة التي تتعايش مع CardView، وجهة النظر هذه القائمة وCardView لن ترغب في العمل معا. ويمكنك الجمع بينهما لجعل التطبيق لدينا بالنسبة لك. 

لذلك أولا، دعونا جعل أكثر زوجين بطاقات الحق. دعنا نقول، ما البطاقات؟ وفقط لذلك أنا لم يكن لديك ل يحمل لكم مع كتابتها في، أنا ذاهب لمجرد نسخه من هنا. وهكذا انا ذاهب الى لا إعطائها بطاقة واحدة فقط. انا ذاهب الى اعطائها مجموعة من البطاقات. حتى أول تطبيقات الذهاب الى كسر في الوقت الراهن. كل الحق، لذلك نحن ذاهبون لجعل هذه قادرة على التعامل مع بطاقات متعددة. أولا حتى، ونحن في طريقنا لإعطائه، لا مجرد بطاقة واحدة ولكن مجموعة من البطاقات، مثل قائمة من البطاقات. وفي هذه الحالة، لدينا ثلاثة منهم. 

كل الحق، لدرجة التطبيق هو ذاهب للحصول على بطاقات القائمة، وانها سوف تقرر أي واحد لتظهر للCardView. وCardView يمكن فقط تقديم بطاقة واحدة، ولكن التطبيق يحصل على قائمة من كافة بطاقات، أليس كذلك؟ 

وذلك عند معرفة واحدة بطاقة لإعطاء CardView، كيف كنت أعتقد أنك قد تكون قادرة لاتخاذ قرار حول أي بطاقة لمشاهدة، لعرض؟ لتعطيك تلميحا، انها مؤقتا عليك أن تكون عرض بطاقة معينة. إذا قمت بتحديث الصفحة، عليك اذهبوا إلى البطاقة الأولى. وهذا موافق لأنه مؤقت. ما الأسلوب قد نستخدمها؟ 

الحضور: هل يمكن جعل متغير لذلك تماما مثل كان لديك الجبهة. هل هذا صحيح، هل يمكن لديك بطاقة الحالية يساوي 1؟ 

نيل ميهتا: نعم، لذلك نحن تريد أن يكون لها الدولة، أليس كذلك؟ يمكنك استخدام الدولة في المكون لمعرفة أي بطاقة نريد الحصول عليها. كما لدينا قائمة من كل الأوراق، وسوف نقوم استخدام الدولة لمعرفة واحدة من البطاقة الأولى، البطاقة الثانية، وبطاقة ثالثة، وهلم جرا. 

لذلك التطبيق لذلك سوف التطبيق الحصول على لديك وظيفة getInitialState، وظيفة getInitialState العودة. ونحن سوف نقول فقط activeIndex 0. حتى الآن لدينا التطبيق وانها الدولة الخاصة. 

وجعل ذلك الآن فصاعدا، لمعرفة بطاقة، دعونا اذهبوا إلى مجموعة والاستيلاء على شيء في هذا الفهرس. اختر بطاقة this.props.cards يساوي this.state.activeIndex. هكذا كما ترون هنا، والدعائم و الدولة فعلا العمل معا. حتى الآن أن لدينا activeCard لدينا، نحن سوف يطلق عليه activeCard، ودعونا نرى ما اذا كان هذا يعمل. [غير مسموع] 

أوه، هذا كان خطأ النص. آه. 

بارد، صحيح، وحتى الآن كنا مرة أخرى إلى حيث كنا من قبل، أليس كذلك؟ البرنامج القديم نفسه إلا الآن يمكننا دعم قائمة البطاقات، وليس بطاقة واحدة فقط. والآن، مرة أخرى، إذا كنا نريد تغيير activeIndex، يمكننا أن نذهب 0-1، والآن بعد أن البطاقة الثانية، ثم ذهبنا إلى 0. حتى هنا جديد كهربائيا متابعة إصدار لدينا. 

حسنا، دعونا حتى الآن لديها وجهة نظر القائمة التي يظهر كل الأوراق في البرنامج، ولذا فإننا سوف تجعل جديدة دعا مكون listView. السماح listView يساوي react.createClass. لذلك نحن نريد لإصدار غير مرقمة قائمة مع عنصر قائمة لكل بطاقة. وهكذا لدينا مجموعة من البطاقات. نريد واحد عنصر قائمة لكل بطاقة، أليس كذلك؟ يمكننا القيام به لحلقة أو شيء لجعل عنصر قائمة جديد. ولكن الطريقة يمكنك أن تفعل ذلك في رد فعل، استخدام شيء يسمى خريطة. الخريطة هي أداة أو وظيفة استخدام أن لكل بند، ويدير بعض من وظيفة، يأخذ قيمة الإرجاع، و يتيح لك أن يعود. 

وذلك على سبيل المثال، لدينا مجموعة 1، 2، function-- 3.map وهذا هو اختصار ل function-- س س السهم مرات س. هذا يقول: لكل رقم في 1، 2، 3، أعتبر. ساحة لها، ويعيدها. فما رأيكم 1، 2، 3.map س يذهب إلى العصور س س يعطي لكم مرة أخرى نظرا ل أن هذه هي وظيفة تعمل على كل عنصر من عناصر هذا الصفيف. 

الحضور: 1، 4 9؟ 

نيل ميهتا: نعم، 1، 4، 9 لأنك 1 مرات 1. والتي تمنحك واحدا. هذا هو العنصر الأول. 

2 مرات 2 هو 4. هذا هو العنصر الثاني. 3 مرات 3 هو 9. هذا هو العنصر الثالث. منطقي؟ حتى خريطة لديها تقنية لك استخدام في المبرمجين وظيفي، نمط جديد من البرمجة أن تفعل شيئا إلى كل عنصر في قائمتك. وحتى هذا يبدو مألوفا. لدينا قائمة من البطاقات. نريد أن نحصل على عنصر القائمة لكل واحد، ولذا فإننا سوف مجرد استخدام خريطة هنا. سوف نقول، دعونا متساوين قائمة this.props، بطاقات، خريطة. 

وذلك نظرا لبطاقة، ونحن الذهاب لتوليد عنصر قائمة مع محتويات الجانبية التي البطاقة منه. دعنا نقول فقط نريد أن نعطيه بطاقات يشكك حتى card.question. لذلك تحتوي هذه القائمة على مجموعة من لLI أو قائمة وحدات حيث هناك لائحة واحدة البند لكل بطاقة، والذي يحتوي على مسألة البطاقات. منطقي؟ 

بارد، وحتى الآن دعنا في الواقع طباعة هذا الخروج. لذلك نحن سيعود المجاهدين. داخل تلك القائمة غير مرتبة، سنقوم مجرد عصا القائمة بأكملها التي قدموها لنا. رائع. 

كل الحق، وحتى الآن هذا عرض القائمة يعمل العثور فقط. أي أسئلة حول وجهة النظر القائمة؟ لديك مجموعة من البطاقات. قمت بإجراء عنصر قائمة لكل بطاقة. وضعها داخل غير مرقمة قائمة، وكنت يعيدها. حتى الآن دعونا نعمل لذلك نحن تضمين هذا داخل التطبيق لدينا، حتى نتمكن من القيام بذلك، عرض القائمة. ما حجة لا نعبر لعرض القائمة؟ ما خصائص نعطي ذلك؟ تذكر، إذا كنت تعطي انها مجموعة من البطاقات، انها سوف تجعل قائمة عرض لتلك البطاقات. ذلك ما يمكن أن نعبر هنا حجة؟ الحضور: قائمة البطاقات؟ نيل ميهتا: نعم، بطاقات ذلك يساوي this.props.cards، أليس كذلك؟ وبالتالي فإن المشكلة الوحيدة هو أنه يمكنك فقط تحولت عنصر ذو مستوى أعلى واحد في تقدم، لذلك كنت قد حصلت على التفاف عليه في شعبة. انها غريبة. لذلك دعونا نرى إذا كان ذلك. هل هذا يعمل؟ 

نعم، هناك تذهب. حتى الآن لدينا قائمة من البطاقات في الأسفل، ثم لدينا CardView نفسها على القمة، والتي من شأنها أن الوجه بين الجانبين من البطاقة. الآن لا تجعل الشعور كيف فعلت ذلك؟ نعم، لذلك مرة أخرى، لدينا عنصرين. طباعة عنصر الأولى من كل بطاقة في القائمة. هذا هو عرض القائمة. والعنصر الثاني بطباعة فقط تلك البطاقة. إذا كنت تعطيه بطاقة معينة، فإنه سوف أكون طباعة المعلومات حول تلك البطاقة وتتيح لك الوجه ذهابا وإيابا. 

لذلك إذا أردنا، يمكننا أن نحاول والكلام حول إضافة بعض الميزات الجديدة في هذا. وإلا فإننا يمكن أن نتحدث أكثر قليلا حول من سرعة المفاعل، أو يمكننا الإجابة أسئلة قد تكون لديها لأن هذه كلها من الأجزاء الأساسية من الرد الذي أريد أن أتحدث عنه. يمكننا المضي قدما. يمكننا الإجابة على الأسئلة. أياً كان ما تريد. 

الحضور: هل يمكن استخدام JSX في جافا سكريبت العادي؟ أو أن شيئا جاء مع (غير مسموع)؟ 

نيل ميهتا: والسؤال هو العلبة استخدام JSX مع جافا سكريبت العادي؟ الجواب نعم. JSX هو مجرد وسيلة لذلك يأخذ بك جافا سكريبت لديها HTML داخل منه، ويجمع إلى تفعيل جافا سكريبت أن لايوجد HTML داخل منه. لذلك تلاحظ هكذا- يضرب لذلك تلاحظ هنا. هذا يبدو وكأنه لديك مثل شعبة وكان لديك الاشياء داخل منه. 

أن يجمع إلى تفعيل جافا سكريبت أن كما يولد نفس الشيء. أعتقد أن ما أقوله هو أن JSX هو مجرد النحوي، مثل انها قبل المعالج لجافا سكريبت بكثير مثل PHP هو المعالج لHTML. JSC هو المعالج لجافا سكريبت التي تتيح كنت وضعت داخل HTML جافا سكريبت الخاصة بك. وحتى إذا كان لديك محول الصحيح وهو شيء يسمى (غير مسموع)، التي ستحول. والمعالج الصحيح، انها سوف تسمح لك أن تفعل ذلك. 

الحضور: (غير مسموع) نيل ميهتا: عادة لا تحتاج لوضع HTML داخل جافا سكريبت ما لم صنعك تتفاعل. ولكن يمكنك أن تفعل ذلك على أي حال. نعم؟ 

الحضور: أعتقد أنك قد وصف رد فعل كلغة برمجة وظيفية. لقد تم تعلم C في CS50. غير C أيضا لغة وظيفية؟ نيل ميهتا: لذا فإن السؤال هو حول ظيفية مقابل شيء آخر يسمى حتمية أو الإجرائية البرمجة. هناك نوعين من البرامج المشهورة. دعا أحد الإجرائية، التي هو كل شيء عن مثل أوامر القيام، واحد هو وظيفي، والذي هو كل شيء عن وجود وظائف وجود المدخلات والمخرجات من هؤلاء. الرد هو نموذج وظيفي. C هو النموذج الإجرائي للغاية. 

وكمثال على ذلك، C على سبيل المثال، لم تقم بهذه الطريقة التقريرية لجعل هذا البرنامج، أليس كذلك؟ لديك لتقوله، طباعة هذا. تغيير هذه البنية البيانات. طباعة هذا. انها كل شيء عن الأوامر. 

في رد فعل، ليس هناك أن العديد من الأوامر. انها كل شيء عن وجود المكونات التي وضعت معا. انهم مثل الوظائف. لديك مثل وظيفة دعا CardView، التي هي وظيفة يحتوي المدخلات والمخرجات، وهكذا تتفاعل هو كل شيء حول هذه الفلسفة لنا من having-- لديك البيانات. يمكنك تمرير من خلال هذا الخوارزمية، وانها سوف إخراج HTML التي قمت المطبوعة فقط الصفحة، وبحيث يكون لديك ل بناء عليه قطعة قطعة. 

وذلك لرسم استعارة ما قلت من قبل، وتعرف كيف في الفيسبوك إذا كنت تحصل على رسالة، ويمكنك اختيار ما أجزاء لتحديث، هذا الإجرائي. فقد أصبح من الضروري، أليس كذلك؟ حسنا، أنا حصلت على الرسالة. دعونا تغيير الحساب هناك. 

دعونا البوب ​​نافذة هنا. دعونا تغيير الحساب هناك. دعونا رسم هذا هنا. هذا هو النهج الإجرائي. 

هذا ما الأشياء مثل الزاوي، دفعة، العمود الفقري، واستخدام أطر أخرى. رد فعل وظيفي. إنها طريقة مختلفة جدا للتفكير في الأشياء. فإنه يأخذ هذه الفكرة من دعونا لها وظائف أو الخوارزميات التي سوف إعطائها البيانات. انها سوف بصق ما ينبغي أن يكون، والكمبيوتر سوف تأخذ الرعاية من وزنها بها. كنت لا التعامل معها بنفسك. لا تجعل قليلا من معنى؟ نعم؟ 

الحضور: في لغة وظيفية، كل شيء يحدث في وقت واحد؟ 

نيل ميهتا: لا، الأمور في النظام. مثل هنا لا يزال هناك النظام، ولكن لم يحدث ذلك يحدث في ترتيب مثل نشيد، والقيادة، والقيادة. يحدث ذلك في ترتيب وظيفة تمنحك الإخراج. وضع هذا في وظيفة أخرى. وضع ذلك موضع آخر وظيفة، وظيفة أخرى. 

إذا كنت تفعل CS51، عليك تعلم برامج وظيفية وخارج قليلا من نطاق هذا. ولكن في الأساس، ما يجعل رد فعل بارد ليس فقط تدفق البيانات في اتجاه واحد ودوم الظاهري، ولكن أيضا هذه الفكرة من البرمجة الوظيفية. والبرمجة وظيفية سهلة جدا أن يؤلف وجعل الاشياء باردة من، وأنه من السهل جدا أن نفكر حول والعقل عنه. حتى انها قرعة جيدة أخرى للرد. أي أسئلة أخرى؟ نعم؟ 

الحضور: أم، لماذا أنت استخدام دعونا بدلا من فار؟ 

نيل ميهتا: لذا فإن السؤال هو لماذا تستخدمون السماح بدلا من فار؟ هذا هو الشيء يسمى ES6 أو ECMAScript 6. انها النسخة الجديدة من جافا سكريبت. هناك مجموعة من الأسباب الفنية، ولكن دعونا هو أفضل إصدار من فار. 

بل كيف تقوم بتعريف المتغيرات. يمكنك استخدام السماح. يمكنك استخدام فار. دعونا لديه مجموعة من التقنية reasons-- يمكنك البحث عنها حتى later-- لماذا من الأفضل. في الأساس، ES6 لديه بعض لطيفة جملة جديد، بعض الميزات الجديدة على رأس جافا سكريبت القديم. 

لذلك لدينا مثل خمس دقائق. أردت فقط أن نتحدث عن أكثر شيء واحد بسرعة حقيقية. إذا كان لديك أي أسئلة، دعونا نتحدث عن ذلك بعد ذلك. ولكن فقط حتى يحصل هذا القبض على الكاميرا، أنا فقط أريد أن أتحدث قليلا عن كيف استخدام في الواقع رد فعل في تطبيقات الخاصة بك. 

اذا ذهبت هنا، Facebook.GitHub.IO/react، هذه هي الصفحة الرئيسية للرد، و سوف تظهر لك كيف يمكنك استخدامها في الواقع تتفاعل في صفحاتك. أساسا، انها قليلا محاولة معقدة لتثبيت تتفاعل. انها ليست سهلة كما قمت بسحب فقط وإسقاط الجافا سكربت في هناك. 

أن يكون لديك المحول الخاص بك إعداد، والتي سوف، كما فعلت من قبل، تحويل JSX الخاص بك إلى جافا سكريبت العادي. عليك أن الشيء الذي سوف أكون تجميع لك ES6 إلى وضعها الطبيعي. جافا سكريبت هناك الكثير من التحرك أجزاء ما عليك القيام به، ولذلك لا يوجد شيء دعا الفلاح، Yeoman.io. وهذا هو أداة سطر الأوامر التي سوف تساعدك سقالة من رد فعل بك المشاريع بسهولة. 

لذلك يمكنك أن تقرأ عن هذا في وقت لاحق، ولكن هناك بعض الأدوات أن الفلاح تقدم. أنها سوف تتيح لك إنشاء تتفاعل التطبيق مع كل ما بني في. مثل ذلك سوف بنينا في مكونات بنيت فيها انها سوف يكون المحول الخاص بك بنيت في. لديهم الكثير من بارد الاشياء التي بنيت في تلقائيا باستخدام دعا مولدات هذه الأمور. 

حتى قرأت عن هذا إذا أردت. اذهبوا على الفلاح، Y-E-O-M-A-N، و يمكنك العثور على المولدات مثل هذه. ومع المولدات الكهربائية مثل هذه، كنت مجرد مثل واحد هو أوامر سطر الأوامر الزوجين. انها سوف سقالة خارجا كامل تتفاعل التطبيق بالنسبة لك. انها سوف تحصل على كل الأنابيب اليدوي، والعمل الناخر القيام به بالنسبة لك، وهذا هو السبب في أنك تركز فقط على مجرد الكتابة في رد الفعل. 

لذلك بناء الأساس رد فعل التطبيق هو غير بديهي. لقد السلكية كل ذلك معا، ولكن هناك هي الأدوات التي سوف نفعل ذلك لك. حتى إذا كنت تريد أن تجعل من رد فعل التطبيق، ومحاولة القيام بذلك بهذه الطريقة. إذا كنت ترغب فقط في التجربة، يمكنك محاولة استخدام هذا CodePen لأن هذا CodePen له جميع تتفاعل الأسلاك. لقد فعلت كل عمل لك بالفعل. 

حتى إذا كنت تريد أن تجعل مثل إنتاج لاطلاق سراح تتفاعل التطبيق، محاولة واحدة من هذه المولدات. إذا كنت ترغب فقط للعب حولها، فإنه غالبا ما يستحق فقط مثل محاولة اللعب حولها على CodePen هنا. يبدو جيدا؟ رائع. 

ولهذا كل ما لدي. مرة أخرى، كل رمز والأمثلة على ذلك سيكون على هذا الموقع هنا. لذلك، مرة أخرى، لم نتحدث حول الكثير من بناء جملة تتفاعل، ولكن للعثور على جميع تلك تفاصيل النحوية قليلا، انها جميعا سوف تكون متاحة على هذا الموقع هنا. 

لذلك أنا أنصح مثل اتخاذ الخطوة الأولى. وضعه في CodePen الخاص بك. محاولة العمل على جعل إلى الخطوة الثانية. هناك الخطوة الرابعة، وعادل رؤية أين تحصل عليه من ذلك. 

أي أسئلة أخرى، تحقق إلى أن الصفحة أو البريد الالكتروني لي. هذا بريدي الإلكتروني. ولكن أحب أن تساعدك مع أي أسئلة قد تكون لديكم حول رد فعل. لذلك، نعم، هذا كل ما لدي. شكرا جزيلا لكم جميعا مشاهدة أو حضور. وسآخذ أي أسئلة قد يكون لديك بعد هذا الآن. لذا شكرا لكم جميعا لمشاهدة.