PracticU

הסבר על Multiple Props Children

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › הסבר על Multiple Props Children
מילון מושגים:
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.

הסבר על Multiple Props Children
ה-children שמועבר לקומפוננט אפשר לטפל בו כמקשה אחת, אבל גם לפרק אותו לרשימה ולטפל בכל פריט בנפרד - וזו הדרך שההרצאה מציגה.
השלבים העיקריים
1. נקודת ההתחלה: שולחים כמה תגיות (למשל Amazing Products, Exotic Products, High Quality Products) כ-children לתוך קומפוננט אחד, וכרגע הן מוצגות כולן ברצף אחד עם סימן לב בסוף.
2. שימוש במחלקת Children: React מגישה מחלקה בשם Children (עם שיא גדולה, בשונה מ-props.children) עם שירותים כמו ספירת מספר ה-children, בחירת אחד מהם, הפיכתם למערך או ריצה עליהם עם map.
3. ריצה עם map על כל children: קוראים ל-Children.map עם props.children ופונקציה שמקבלת כל פריט (c) ובונה לו תגית חדשה שמכילה אותו ועוד לב צמוד.
4. תוצאה - טיפול נפרד בכל פריט: בעבר הופיעו שלושת הפריטים ברצף עם לב אחד בסוף, ואחרי השינוי כל פריט מוצג עם הלב שלו משום שהוא טופל בנפרד.
שימו לב
מי שבונה קומפוננט עם children יכול להחליט אם להתייחס אליהם כמקשה אחת או כאוסף (Collection) שרצים עליו בנפרד - שתי הגישות תקפות, תלוי בצורך.
כך נבנית קומפוננטה גנרית לשימוש חזור על סדרה של HTML שונה, כחלק מטכניקות ה-Code Reuse.
השיעור הבא בקורס: יצירת Service Class

פרקי ההרצאה: הסבר על Multiple Props Children

  1. 00:00

    סדרת תגיות כ-children

  2. 00:44

    הצגת רשימת המוצרים

  3. 01:38

    מעבר ל-Multiple Children

  4. 02:24

    המחלקה Children וריצה עם map

תמלול ההרצאה: הסבר על Multiple Props Children

הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Multiple Props Children» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    באמת אנחנו רוצים לראות איך אנחנו יכולים להעביר children אבל שה-children יודע לטפל בסדרת תגיות שנמצאות פה בתוך ה-component כ-children. בואו טיפה רק נקצר את זה, בואו נגיד שיש לנו פה strong amazing products וכל מה שאני כותב כרגע זה תגית אחת שנמצאת ישירות בתוך הקומפוננט, ונשכפל את זה.

  2. 00:36

    יש לנו Amazing Products, יש לנו, בוא נגיד, Exotic Products, יש לנו IQuality Product. עכשיו, ברור שזה אמור לעבוד, נכון? זה ה-children שיש לנו, אוקיי?

  3. 00:57

    אז אם אנחנו שולחים את זה, מה אנחנו בעצם אמורים לראות? כל זה, מפה עד לפה, אנחנו אמורים לראות כאן, ואחריהם לב כחול. בואו נבדוק את זה, והנה יש לנו Amazing Products, Exotic Products, High Quality Products, ממש בצורה כזאת.

  4. 01:22

    נרווח פה טיפה, יופי, וזה בסדר. אבל אנחנו יכולים לבנות את הסלוגן שלנו בשיטה שהיא תתמוך באופן שונה ברשימה הזאת.

  5. 01:42

    כמובן, אם זה משהו שמתאים לנו, בואו נשים את זה רגע בהערה זה היה אפשרות לסינגל נקרא לזה סינגל שילד רן אלמנט ואנחנו רוצים טכניקה שנקראת מלטיפל שילד רן אלמנט ולהתייחס אליהם לא כסינגל אלא כמלטיפל מה אנחנו בעצם צריכים לעשות אז אנחנו רוצים לשים כאן אינטרפוליישן ויש לנו מחלקה שנקראת שילד רן שימו לב זה לא

  6. 02:25

    מה ה-children הזה עם שיא קטנה? זה children עם שיא גדולה ויש לה כל מיני שירותים שקשורים ל-children. היא יכולה להגיד לנו כמה children יש, היא יכולה לבחור אחד, היא יכולה להפוך אותם למערך, היא יכולה לרוץ עליהם ב-foreach.

  7. 02:41

    בואו נרוץ עליהם עם map. ואנחנו צריכים לשלוח לתוך הפונקציה הזאת את ה-children, זה יהיה props.children וזה זה. מה שאנחנו רוצים לשלוח עוד זה פונקציה של מה לעשות עם ה-children האלה.

  8. 03:08

    אז אנחנו רוצים עבור כל children,

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: הסבר על Single Props Children

ההרצאה הבאה: יצירת Service Class

הרצאות קשורות מקורסים אחרים

  • Multiple Contracts
  • שימוש במספר טפסים - Multiple Forms
  • Multiple Pages - שימוש במספר דפים
  • עבודה עם מספר פרויקטים - Multiple Projects - DLL

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS