دورة تدريب التفاعل ، الجزء 28: رد فعل الميزات الحديثة ، أفكار المشروع ، الخاتمة

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



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر
→ الجزء 28: ميزات رد الفعل الحالية ، أفكار المشروع ، الاستنتاج
→ النهاية!

الدرس 46. تطوير تطبيقات التفاعل الحديثة

→ الأصل

يعمل الكثير من المبرمجين على Facebook على مكتبة React ، ويساهم أعضاء المجتمع الكبير حول React في المشروع. كل هذا يؤدي إلى حقيقة أن React يتطور بسرعة كبيرة. على سبيل المثال ، إذا كنت تدرس React في بداية عام 2019 ونظرت إلى المواد الموجودة في هذه المكتبة ، على سبيل المثال ، منذ عامين ، لا يمكنك إلا أن تلاحظ التغييرات التي حدثت في React منذ نشر تلك المواد. على سبيل المثال ، في React 16.3 ، ظهرت بعض أساليب دورة حياة المكونات الجديدة ، وتم إهمال بعض الطرق. ويقول ، في الرد 16.6 أن هناك المزيد من الميزات الجديدة. يتوقع عددًا كبيرًا من الابتكارات في React 17.0 وفي الإصدارات المستقبلية من هذه المكتبة.

الآن سنتحدث عن بعض ميزات React الحديثة.

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

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

فيما يلي رمز مكون App الذي يعرض حقل النص:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

هذا ما تبدو عليه صفحة هذا التطبيق في المتصفح.


تطبيق في المتصفح

نقوم بإعادة كتابة أسلوب handleChange() كدالة سهم ، وبذلك يتم إدخال رمز المكون إلى النموذج التالي:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

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

هناك احتمال آخر سننظر فيه هنا وهو استخدام خصائص الفصل. الآن ، عند تهيئة الحالة في المُنشئ ، نستخدم this.state . لذلك نقوم بإنشاء خاصية مثيل للفئة. الآن ، يمكن إنشاء الخصائص خارج المنشئ. نتيجة لذلك ، يمكنك تحويل الشفرة كما يلي:

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

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

فيما يلي قائمة بميزات React.

• API سياق يمكن استخدامه بدلاً من Redux ، على الرغم من أن هذا لا يعني أن مكتبة Redux فقدت أهميتها.
• حدود الأخطاء .
• تقديم قالب الدعائم .
• مكونات النظام العالي .
• رد فعل جهاز التوجيه .
• رد فعل السنانير .
• ميزات جديدة من رد الفعل 16.6 .

بشكل عام ، يمكن ملاحظة أنه بما أن React تتطور بسرعة كبيرة ، فمن المستحسن أن يراقب كل من يشارك في تطوير React باستمرار ابتكارات هذه المكتبة .

الدرس 47. تفاعل مع أفكار المشروع

→ الأصل

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

الدرس 48. الخاتمة

→ الأصل

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

دعنا نذهب من خلال المفاهيم الأساسية التي تعلمتها خلال تطوير هذه الدورة.

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

شكرا لاهتمامكم!

أعزائي القراء! نطلب منك مشاركة انطباعاتك في هذه الدورة التدريبية وإخبارنا بما تريد تطويره (أو تطويره بالفعل) باستخدام React.