رد فعل البرنامج التعليمي الجزء 6: بعض الميزات للدورة ، JSX ، وجافا سكريبت

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



→ الجزء 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: مشروع المقرر

الدرس 13. حول بعض ميزات الدورة

→ الأصل

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

import React from "react" import ReactDOM from "react-dom" function App() {    return (       <h1>Hello world!</h1>    ) } ReactDOM.render(<App />, document.getElementById("root")) 

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

 import React from "react"; import ReactDOM from "react-dom"; 

قررت مؤخرًا أنني سأستغني عنهم ، ونتيجة لذلك ، أحصل على الكود الذي تراه في الأمثلة. بالطبع ، هناك تصميمات في JavaScript لا يمكن الاستغناء عنها في فواصل منقوطة. قل ، عند وصف حلقة for ، يبدو بناء الجملة كما يلي:

 for ([]; []; [ ]) 

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

ميزة أخرى من التعليمات البرمجية التي أكتبها هي أنه بالرغم من أن ES6 يسمح لك تقنياً باستخدام وظائف الأسهم في الحالات التي يتم فيها الإعلان عن function باستخدام الكلمة الأساسية function ، إلا أنني لا أستخدمها.

على سبيل المثال ، يمكن إعادة كتابة الكود أعلاه كما يلي:

 import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root")) 

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

الدرس 14. JSX وجافا سكريبت

→ الأصل

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

ماذا لو كان هناك متغير معين تحتاج قيمته إلى استبداله في كود JSX الذي تم إرجاعه بواسطة المكون الوظيفي؟

لنفترض أن لدينا رمزًا مثل هذا:

 import React from "react" import ReactDOM from "react-dom" function App() { return (   <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

أضف إلى المكون الوظيفي اثنين من المتغيرات التي تحتوي على اسم المستخدم الأول والأخير.

 function App() { const firstName = "Bob" const lastName = "Ziroll" return (   <h1>Hello world!</h1> ) } 

الآن نريد أن لا يعود المكون الوظيفي إلى رأس المستوى الأول مع النص Hello world! ، ورأس يحتوي على تحية مثل Hello Bob Ziroll! الذي يتكون باستخدام المتغيرات المتاحة في المكون.

دعنا نحاول إعادة كتابة ما يُرجع المكون ، مثل هذا:

 <h1>Hello firstName + " " + lastName!</h1> 

إذا نظرت إلى ما يظهر على الصفحة بعد معالجة هذه الشفرة ، اتضح أنه لا يبدو أننا نحتاج. وهي النص Hello firstName + " " + lastName! . في الوقت نفسه ، إذا تم استخدام المشروع القياسي الذي تم إنشاؤه بواسطة أدوات create-react-app لتشغيل المثال ، فسيتم تحذيرنا من أن الثوابت الأولى firstName lastName أي مكان. صحيح أن هذا لن يمنع ظهور صفحة النص التي تم إرجاعها بالضبط بواسطة المكون الوظيفي ، دون استبدال أسماء المتغيرات وقيمها بدلاً من استبدالها. يعتبر النظام الأسماء المتغيرة في هذا النموذج نصًا عاديًا.

سنطلب كيفية الاستفادة من جافا سكريبت JavaScript في كود JSX. في الواقع ، القيام بذلك بسيط للغاية. في حالتنا ، يكفي فقط تضمين ما يجب تفسيره كرمز JavaScript في الأقواس المتعرجة. نتيجةً لذلك ، سيبدو شكل إرجاع المكون كما يلي:

 <h1>Hello {firstName + " " + lastName}!</h1> 

في الوقت نفسه ، النص Hello Bob Ziroll! . يمكنك استخدام تصميمات JavaScript العادية في هذه الأجزاء من كود JSX ، مع إبرازها بأقواس مجعد. إليك ما ستنتجه الشفرة في المتصفح:


صفحة ذات علامات تم إنشاؤها بواسطة JSX و JavaScript

منذ العمل مع السلاسل في الظروف الحديثة ، تستخدم ميزات ES6 بشكل رئيسي ، نعيد كتابة الكود باستخدامها. وهي نتحدث عن القوالب الحرفية المرسومة باستخدام backticks ( ` ` ). قد تحتوي هذه السلاسل على إنشاءات النموذج ${} . يتضمن السلوك القياسي للقوالب الحرفية حساب التعبيرات الموجودة في الأقواس المتعرجة وتحويل ما يحدث إلى سلسلة. في حالتنا ، سيبدو كما يلي:

 <h1>Hello {`${firstName} ${lastName}`}!</h1> 

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

النظر في مثال آخر. أي ، نعيد كتابة الكود الخاص بنا حتى لو تم استدعاؤه في الصباح ، فسوف يعرض النص Good morning ، إذا كان في فترة ما بعد الظهر - Good afternoon ، وإذا كان في المساء - Good night . بادئ ذي بدء ، سوف نكتب برنامجًا يُبلغ عن الوقت. فيما يلي رمز المكون الوظيفي للتطبيق الذي يحل هذه المشكلة:

 function App() { const date = new Date() return (   <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) } 

هنا يتم إنشاء مثيل جديد لكائن Date . يستخدم JSX شفرة جافا سكريبت JavaScript ، والتي date.getHours() من خلال الاتصال date.getHours() ، والذي هو الآن ساعة ، وبعد ذلك ، بحساب ما تبقى من قسمة هذا الرقم على 12 ، نقوم بتحويل الوقت إلى تنسيق مدته 12 ساعة. بطريقة مماثلة ، من خلال التحقق من الوقت ، يمكننا تشكيل الخط الذي نحتاجه. على سبيل المثال ، قد يبدو كالتالي:

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } 

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

كالعادة ، يوصى بتجربة ما تعلمناه اليوم.

ملخص

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

أعزائي القراء! هل تستخدم الفاصلة المنقوطة في شفرة JavaScript الخاصة بك؟