رد فعل البرنامج التعليمي الجزء 2: المكونات الوظيفية

في أحد مقالاتنا السابقة ، سألناك ما إذا كان من المستحسن عمل سلسلة من المنشورات التقليدية استنادًا إلى دورة 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: مشروع المقرر

الدرس 6. المكونات الوظيفية

→ الأصل

في الدرس العملي السابق ، تحدثنا عن حقيقة أنه ليس من الضروري وضع جميع كود JSX الذي يشكل عناصر HTML في وسيطة أسلوب ReactDOM.render() . في حالتنا ، نحن نتحدث عن قائمة نقطية ، واحدة موضحة أدناه.

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") ) 

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

تسمى هذه المكونات "وظيفية" نظرًا لحقيقة أنها تنشئها عن طريق إنشاء وظائف خاصة.

إنشاء وظيفة جديدة MyApp اسم MyApp :

 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") ) 

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

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

في المثال الخاص بنا ، يكفي أخذ الرمز النقطي وتنظيم عودة هذا الرمز من المكون الوظيفي. إليك ما قد يبدو عليه:

 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> } 

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

 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } 

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

الآن ، في أسلوب ReactDOM.render() ، يمكنك إنشاء مثيل للمكون الوظيفي الخاص بنا عن طريق تمريره إلى هذه الطريقة كوسيطة أولى وإرفاقها في علامة JSX.

 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") ) 

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

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

ReactDOM.render() العلامات التي يتم إرجاعها بواسطة المكونات الوظيفية بنفس القواعد التي وضعناها في الاعتبار عند تطبيق أسلوب ReactDOM.render() على المعلمة الأولى. هذا - من المستحيل أن يحتوي على عناصر JSX التي تتبع بعضها البعض. محاولة وضع أي عنصر آخر بعد عنصر <ul> في المثال السابق ، على سبيل المثال - <ol> ، سيؤدي إلى حدوث خطأ. يمكنك تجنب هذه المشكلة ، على سبيل المثال ، ببساطة عن طريق لف كل شيء بإرجاع مكون وظيفي في عنصر <div> .

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

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

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

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

الدرس 7. ورشة العمل. مكونات وظيفية

→ الأصل

ob الوظيفة

1. إعداد مشروع رد الفعل الأساسي.
2. إنشاء مكون وظيفي MyInfo الذي يشكل عناصر HTML التالية:
   
   
   1. العنصر <h1> مع اسمك.
   2. فقرة نصية ( <p> عنصر) تحتوي على قصتك القصيرة عن نفسك.
   3. قائمة ، تحمل علامة ( <ul> ) أو مرقمة ( <ol> ) ، مع قائمة بالأماكن الثلاثة التي ترغب في زيارتها.
3. MyInfo مثيل مكون MyInfo على صفحة الويب.

▍ مهمة إضافية

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

ملاحظة: كتلة قابلة للطي

olution الحل

نحن هنا راضون عن نفس صفحة HTML التي استخدمناها سابقًا. ملف برمز React سيبدو قياسيًا أيضًا. وهي ، نحن نستورد المكتبات فيه ، ReactDOM الهيكل العظمي للمكون الوظيفي MyInfo ReactDOM طريقة ReactDOM render() الخاصة بالكائن ReactDOM ، ReactDOM المكون المراد عرضه على الصفحة ورابط لعنصر الصفحة الذي يجب عرض هذا المكون فيه. في هذه المرحلة ، سيبدو الرمز كما يلي:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root")) 

أنت الآن بحاجة إلى إرجاع رمز JSX من MyInfo الذي ينشئ علامة HTML وفقًا للمهمة. هنا هو رمز الحل الكامل.

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

لاحظ أن البنية التي تم إرجاعها من MyInfo محاطة بأقواس ، وأن العناصر التي سيتم عرضها موجودة داخل العنصر <div> الإضافي.

ملخص

في هذه المقالة ، قدمنا ​​المكونات الوظيفية ل React. في المرة القادمة سوف نتحدث عن ملفات المكونات وهيكل مشاريع React.

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