رد فعل البرنامج التعليمي ، الجزء 12: ورشة عمل ، المرحلة 3 تطبيق TODO

في جزء اليوم من ترجمة دورة React ، نقترح عليك إكمال المهمة العملية المتمثلة في إنشاء مجموعات من المكونات باستخدام JavaScript ومتابعة العمل على تطبيق 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: مشروع المقرر

الدرس 22. ورشة العمل. تشكيل ديناميكي لمجموعات من المكونات

→ الأصل

ob الوظيفة

استنادًا إلى مشروع تطبيق React القياسي الذي تم إنشاؤه بواسطة create-react-app ، وباستخدام رمز ملف بيانات vschoolProducts.js ، قم بإنشاء تطبيق يعرض قائمة بمكونات Product على الصفحة ، تم تشكيلها باستخدام طريقة المصفوفة القياسية .map() على استنادا إلى بيانات من vschoolProducts.js .

تذكر إنشاء مثيلات المكون وتمريرها السمة key مع معرف فريد ، وإلا فإن النظام سيصدر تحذير.

في عملية حل المشكلة ، يمكنك استخدام الإعداد التالي لملف App.js :

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

هنا هو vschoolProducts.js الملف vschoolProducts.js :

 const products = [   {       id: "1",       name: "Pencil",       price: 1,       description: "Perfect for those who can't remember things! 5/5 Highly recommend."   },   {       id: "2",       name: "Housing",       price: 0,       description: "Housing provided for out-of-state students or those who can't commute"   },   {       id: "3",       name: "Computer Rental",       price: 300,       description: "Don't have a computer? No problem!"   },   {       id: "4",       name: "Coffee",       price: 2,       description: "Wake up!"   },   {       id: "5",       name: "Snacks",       price: 0,       description: "Free snacks!"   },   {       id: "6",       name: "Rubber Duckies",       price: 3.50,       description: "To help you solve your hardest coding problems."   },   {       id: "7",       name: "Fidget Spinner",       price: 21.99,       description: "Because we like to pretend we're in high school."   },   {       id: "8",       name: "Sticker Set",       price: 14.99,       description: "To prove to other devs you know a lot."   } ] export default products 

olution الحل

فيما يلي رمز ملف App.js :

 import React from "react" import Product from "./Product" import productsData from "./vschoolProducts" function App() {   const productComponents = productsData.map(item => <Product key={item.id} product={item}/>)     return (       <div>           {productComponents}       </div>   ) } export default App 

يرجى ملاحظة أن خاصية id الكائنات من ملف البيانات اختيارية. كانت هذه الخاصية مفيدة لنا لإعداد سمة key التي تم إنشاؤها بواسطة طريقة .map() لمثيلات مكون Product .

فيما يلي رمز ملف Product.js :

 import React from "react" function Product(props) {   return (       <div>           <h2><font color="#3AC1EF">{props.product.name}</font></h2>           <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>       </div>   ) } export default Product 

هنا ، عند اشتقاق خاصية تحتوي على سعر المنتج ، والذي يكون مرئيًا في المكون باسم props.product.price ، نستخدم طريقة toLocaleString() ، التي toLocaleString() بها مقدار المنتج.

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


التطبيق في VSCode

وهنا هي صفحة التطبيق في المتصفح.


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

انتبه إلى النموذج الذي تظهر به قيمة البضاعة.

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

→ الأصل

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

ob الوظيفة

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

فيما يلي محتويات ملف todosData.js :

 const todosData = [   {       id: 1,       text: "Take out the trash",       completed: true   },   {       id: 2,       text: "Grocery shopping",       completed: false   },   {       id: 3,       text: "Clean gecko tank",       completed: false   },   {       id: 4,       text: "Mow lawn",       completed: true   },   {       id: 5,       text: "Catch up on Arrested Development",       completed: false   } ] export default todosData 

olution الحل

فيما يلي رمز ملف App.js :

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

فيما يلي رمز ملف TodoItem.js :

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

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


التطبيق في VSCode

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


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

سنتحدث لاحقًا عن النماذج ونصلح طلب التدريب الخاص بنا مع الاستمرار في العمل عليه.

ملخص

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

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