رد فعل الجزء 4: مكونات الأصل والطفل

نحن ننشر الجزء التالي من ترجمة 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: مشروع المقرر

الدرس 9. مكونات الوالدين والطفل

→ الأصل

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

لنبدأ مع قالب التطبيق الذي تعرفه بالفعل. من أجل تذكر ما index.js ، يمكنك ، من الذاكرة ، كتابة رمز في ملف index.js الفارغ لعرض صفحة رأس المستوى الأول مع النص Hello World! تتفاعل الأدوات. إليك ما قد يبدو عليه الرمز:

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

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

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <App />, document.getElementById("root") ) 

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

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

ولكن مثل هذا الرمز لا يزال غير فعال. نحتاج إلى ملف مكون App ( App.js ) الموجود في نفس المجلد مثل index.js . هذا هو الملف الذي نشير إليه في تطبيق استيراد أمر import App from "./App" . تذكر أن أسماء مكونات React مكتوبة بأسلوب الجمل وتبدأ بحرف كبير. قم بإنشاء الملف الذي نحتاجه ووصف مكون App فيه. حاول أن تفعل ذلك بنفسك. وهي كتابة الشفرة التي يعرضها مكون App Hello again على الصفحة.

إليك ما يبدو عليه هذا الرمز:

 import React from "react" function App(){ return (   <h1>Hello again</h1> ) } export default App 

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

 import React from "react" function App(){ return (   <div>     <h1>Hello a third time!</h1>     <ul>       <li>Thing 1</li>       <li>Thing 2</li>       <li>Thing 3</li>     </ul>   </div> ) } export default App 

ربما سنقرر الآن أن ما يتم تشكيله عن طريق مكون App يجب أن يكون موقعًا على الويب. سيكون به كتلة تنقل ( <nav></nav> ) ومنطقة محتوى رئيسية ( <main></main> ). سيؤدي هذا الحل إلى تكوين الكود التالي:

 import React from "react" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>   </div> ) } export default App 

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


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

هنا لا يزال بإمكانك تبسيط القائمة بحيث تصبح أشبه بشريط التنقل.

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

ألق نظرة على هذا الرسم البياني من أجل فهم أفضل لما هو على المحك.


يعرض مكون التطبيق مكون MyInfo ، إخراج العنصر <div>

هنا نعرض مكون App على الصفحة. في هذه الحالة ، يقرر مكون App عرض مكون آخر - MyInfo . والمكون MyInfo يعرض بالفعل عنصر JSX معين. انتبه إلى الفرق بين مفهومي "العنصر" و "العنصر". العناصر هي كيانات تتحول إلى كود HTML عادي. لذلك ، في العنصر المقدم في أسفل المخطط ، يتم استخدام علامة <div> بسيطة ، ويبدأ اسمها بحرف صغير ، يخبرنا أن هذا عنصر عادي ، وليس أحد المكونات التي أنشأناها. من ناحية أخرى ، يبدأ اسم MyInfo بحرف كبير. هذا يساعد على فهم أن لدينا مكون.

ربما سمعت أن DOM (نموذج كائن المستند ، يشار إليه غالبًا باسم "الشجرة"). العنصر الجذر لهذه الشجرة هو العنصر <html> . في حالتنا ، العنصر الأساسي للشجرة الممثلة في الرسم التخطيطي هو مكون App . لا تقتصر قدرات هذا المكون على إخراج مكون آخر ، MyInfo في حالتنا. يمكنه ، على سبيل المثال ، عرض مكون آخر ، وهو "تذييل الصفحة" ، أسفل الصفحة. دعنا نقول هذا العنصر سوف يطلق AwesomeFooter .


مكون التطبيق يخرج عنصرين

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

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


مخرجات مكون التطبيق ثلاثة مكونات

يتم تمثيل الجزء العلوي من الصفحة في الرسم التخطيطي الخاص بنا بواسطة مكون AwesomeHeader . يتم إعطاء هذه الأسماء لهذه المكونات حتى لا تخلط بينها وبين العناصر. لا AwesomeHeader لمكون AwesomeHeader ، مثل مكون App ، إخراج JSX فقط ، ولكن أيضًا المكونات الأخرى. على سبيل المثال ، يمكن أن يكون مكون NavBar ، وهو شريط تنقل ، ومكون Logo يعرض شعارًا. وستعرض هذه المكونات بالفعل عناصر عادية - مثل <img /> و <nav> .

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

لنقم الآن بإنشاء مكون في تطبيق التدريب الخاص بنا سيكون "تذييلًا" للصفحة.

للقيام بذلك ، قم بإنشاء ملف جديد في نفس المجلد مثل ملف index.js . Footer.js ووضع التعليمات البرمجية التالية في ذلك:

 import React from "react" function Footer() {   return (       <footer>           <h3><font color="#3AC1EF">▍This is my footer element</font></h3>       </footer>   ) } export default Footer 

يرجى ملاحظة أن اسم المكون الوظيفي يبدأ بحرف كبير ( Footer ) ، وأن اسم العنصر (<footer> ) يبدأ بحرف صغير. كما سبق ذكره ، وهذا يساعد على تمييز العناصر من المكونات.

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

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

 import React from "react" import Footer from "./Footer" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>     <Footer />   </div> ) } export default App 

الآن الصفحة التي ستظهر بها نماذج الطلبات هي تلك الموضحة أدناه.


يعرض مكون التطبيق العلامات التي شكلها مكون آخر في أسفل الصفحة - تذييل الصفحة

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

 import React from "react" import Footer from "./Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

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

تحدثنا هنا حول كيفية العمل مع المكونات المتداخلة. يمكنك أن تجرب بشكل جيد ما تعلمته للتو من خلال جعل المشروع ، حيث يبدو الملف App.js كما هو موضح أعلاه ، في حالة صالحة للعمل.

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

→ الأصل

ob الوظيفة

بناء تطبيق React من الصفر. عرض المكون الجذر App (المعرفة في ملف منفصل) على الصفحة. اطبع المكونات التالية داخل هذا المكون:

1. Navbar
2. MainContent
3. Footer

يجب أن يتم وصف المكونات التي يعرضها App في ملفات منفصلة ، يجب على كل منها إخراج بعض عناصر JSX.

olution الحل

كأساس لحل هذه المشكلة ، يتم استخدام مشروع قياسي تم إنشاؤه باستخدام أدوات create-react-app (إذا كنت لا تعرف كيفية إنشاء مثل هذا المشروع ، فقم بإلقاء نظرة على هذه المادة). ويستخدم index.html القياسي.

رمز ملف index.js :

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

هنا هو رمز لملف App.js يرجى ملاحظة أننا سوف نستخدم مجلد components لتخزين ملفات المكونات.

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

رمز ملف Header.js :

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

MainContent.js ملف MainContent.js :

 import React from "react" function MainContent() {   return (       <main>This is the main section</main>   ) } export default MainContent 

رمز الملف Footer.js :

 import React from "react" function Footer() {   return (       <footer>This is the footer</footer>   ) } export default Footer 

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

هذا هو ما يبدو عليه المشروع في VSCode.


المشروع في VSCode

وهنا هي الصفحة التي تشكل هذا التطبيق.


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

يعمل تطبيق React الخاص بنا ، لكن ما يظهر على الصفحة يبدو غير مهتم تمامًا. يمكنك إصلاح ذلك عن طريق تصميم محتويات الصفحة.

ملخص

تحدثنا اليوم عن مكونات الوالدين والطفل. في المرة القادمة سنبدأ العمل في أول مشروع تدريبي كبير ونتحدث عن عناصر صفحة التصميم.

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