رد فعل البرنامج التعليمي ، الجزء 8: العمل المستمر على تطبيق TODO ، وإدخال خصائص المكونات

تكرس فصول اليوم في دورة React التدريبية ، التي نقوم بنشرها ، لمواصلة العمل على تطبيق TODO وخصائص المكونات.



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

الدرس 16. ورشة العمل. تطبيق TODO. المرحلة رقم 2

→ الأصل

ob الوظيفة

1. بعد ورشة العمل السابقة ، قمت بإنشاء تطبيق React ، يعرض مكون App مجموعة من أزواج العناصر - العلامات (العناصر <input type="checkbox" /> ) وأوصافها (العناصر <p> </p> ). صمم عناصر هذه المجموعة كمكون منفصل - <TodoItem /> لإنشاء قائمة في مكون App . في الوقت نفسه ، لا تنتبه إلى حقيقة أن جميع عناصر هذه القائمة ستبدو كما هي (في وقت لاحق سنتحدث عن كيفية ملؤها ببيانات مختلفة).
2. أسلب الصفحة كما تريد باستخدام ملفات CSS أو الأنماط المضمّنة أو مجموعة من أساليب التصميم هذه لتطبيقات React.

olution الحل

يفترض هذا أنك تواصل العمل على تطبيق يستند إلى مشروع قياسي تم إنشاؤه باستخدام تطبيق create-react-app . هذا هو ما كان عليه رمز مكون App قبل الوظيفة.

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

دعونا ننشئ ، في نفس المجلد الذي يوجد به هذا الملف ، ملف TodoItem.js ، حيث سيتم تخزين رمز مكون TodoItem . الآن قم باستيراد هذا الملف إلى ملف App.js الأمر التالي:

 import TodoItem from "./TodoItem" 

يمكنك القيام بذلك لاحقًا ، عندما يحين الوقت لاستخدام TodoItem مكون TodoItem (لم تتم كتابته بعد). سنهتم بهذا الرمز الآن. إليك ما سيكون عليه:

 import React from "react" function TodoItem() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default TodoItem 

الانتباه إلى شيئين. أولاً ، يُرجع هذا المكون عنصرين - وبالتالي يتم لفهما في عنصر <div> . ثانياً ، ما تقوم بإرجاعه هو نسخة من أحد أزواج عناصر الاختيار / الوصف من ملف App.js

الآن ننتقل مرة أخرى إلى ملف App.js ، وبدلاً من أزواج الاختيار / الوصف ، نستخدم مثيلات المكون TodoItem في الترميز الذي تم إرجاعه به:

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

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


مظهر التطبيق في المتصفح

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

الآن سنكمل المهمة الثانية ، ونصمم التطبيق باستخدام فئات CSS. للقيام بذلك ، نأتي رمز مكون App إلى النموذج التالي:

 import React from "react" import TodoItem from "./TodoItem" function App() {   return (       <div className="todo-list">           <TodoItem />           <TodoItem />           <TodoItem />           <TodoItem />       </div>   ) } export default App 

هنا قمنا بتعيين اسم الفئة لعنصر <div> . وبالمثل ، TodoItem نعمل مع TodoItem مكون TodoItem :

 import React from "react" function TodoItem(){     return (       <div className="todo-item">           <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default TodoItem 

سنقوم الآن بتضمين ملف CSS index.css الموجود بالفعل في المشروع ، حيث تم إنشاؤه باستخدام create-react-app في ملف index.js :

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

أضف وصف النمط التالي إلى index.css :

 body {   background-color: whitesmoke; } .todo-list {   background-color: white;   margin: auto;   width: 50%;   display: flex;   flex-direction: column;   align-items: center;   border: 1px solid #efefef;   box-shadow:   /* The top layer shadow */       0 1px 1px rgba(0,0,0,0.15),           /* The second layer */       0 10px 0 -5px #eee,           /* The second layer shadow */       0 10px 1px -4px rgba(0,0,0,0.15),           /* The third layer */       0 20px 0 -10px #eee,           /* The third layer shadow */       0 20px 1px -9px rgba(0,0,0,0.15);   padding: 30px; } .todo-item {   display: flex;   justify-content: flex-start;   align-items: center;   padding: 30px 20px 0;   width: 70%;   border-bottom: 1px solid #cecece;   font-family: Roboto, sans-serif;   font-weight: 100;   font-size: 15px;   color: #333333; } input[type=checkbox] {   margin-right: 10px;   font-size: 30px; } input[type=checkbox]:focus {   outline: 0; } 

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


مظهر التطبيق في المتصفح

يمكنك تحليل هذه الأنماط وتعديلها بنفسك.

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


مشروع التطبيق في VSCode

إذا جربنا الآن ما لدينا ، اتضح أن خانات الاختيار تستجيب لتفاعلات المستخدم.


تستجيب الأعلام لتفاعلات المستخدم.

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

الدرس 17. الخصائص ، الجزء 1. سمات عناصر HTML

→ الأصل

دعونا نتحدث عن مفهوم الخصائص في React. لنبدأ بنموذج HTML للصفحة:

 <html>   <head></head>   <body>       <a>This is a link</a>       <input />       <img />   </body> </html> 

كما ترون ، لا يوجد شيء متعلق برد الفعل. أمامنا هو ترميز HTML المعتاد. لاحظ العناصر الثلاثة الموجودة في النص الأساسي للصفحة الموصوفة في هذا الترميز: <a> و <input /> و <img /> ، وفكر في الأخطاء التي تحدث فيها.

المشكلة هنا هي أن كل هذه العناصر لا تفي بوظائفها المتأصلة. الرابط الموضح بواسطة العلامة <a> يؤدي إلى أي مكان. تحتاج هذه العلامة إلى تعيين سمة (خاصية) href ، تحتوي على عنوان معين سيتم إعادة توجيهك إليه عند النقر فوق الارتباط. نفس المشكلة نموذجية <img /> من مثالنا. لم يتم تعيين سمة src ، التي تحدد الصورة أو المحلية أو التي يمكن الوصول إليها بواسطة عنوان URL الذي سيعرضه هذا العنصر. ونتيجة لذلك ، اتضح أنه لضمان التشغيل الصحيح لعناصر <a> و <img> ، من الضروري تعيين خصائص href و src ، على التوالي. إذا تحدثنا عن عنصر <input> ، فبدون ضبط سماته ، سيعرض حقل إدخال على الصفحة ، لكن في هذا النموذج لا يستخدم عادةً ، مع تحديد placeholder لخصائصه ، name ، type . الخاصية الأخيرة ، على سبيل المثال ، تسمح لك بتغيير مظهر وسلوك العنصر <input> بشكل جذري ، وتحويله من حقل إدخال النص إلى إشارة ، إلى زر الاختيار ، أو إلى زر لإرسال نموذج. تجدر الإشارة إلى أن مصطلحي "السمة" و "الملكية" نستخدمهما هنا بالتبادل.

من خلال تعديل الكود أعلاه ، يمكننا إحضاره إلى النموذج التالي:

 <html>   <head></head>   <body>       <a href="https://google.com">This is a link</a>       <input placeholder="First Name" name="" type=""/>       <img align="center" src=""/>   </body> </html> 

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

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

الدرس 18. خصائص ، الجزء 2. مكونات قابلة لإعادة الاستخدام

→ الأصل

قبل الدخول في المحادثة حول استخدام الخصائص في React ، دعنا ننظر إلى مفهوم مفاهيمي آخر. ألق نظرة على صفحة YouTube الرئيسية.


صفحة YouTube الرئيسية

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

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


صفحة YouTube الرئيسية ، عناصر مشابهة لبعضها البعض

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

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

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

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


صفحة YouTube الرئيسية ومكونات الوالدين والطفل

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

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

ملخص

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

أعزائي القراء! هل تفهم مفهوم خصائص المكون؟