העברת מידע בין קומפוננט אב לתתי-קומפוננטות שלו - ילדים ב-REACT

תמלול ההרצאה: העברת מידע בין קומפוננט אב לתתי-קומפוננטות שלו - ילדים ב-REACT

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

1. 00:02

   אוקיי, אנחנו ממשיכים לכלי הבסיסי הבא של React. הכלי הבסיסי הבא מאפשר לנו להעביר מידע מה-parent קומפוננט ל-child קומפוננט.

2. 00:18

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

3. 00:34

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

4. 00:52

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

5. 01:21

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

6. 01:41

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

7. 02:06

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

8. 02:27

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

9. 02:58

   מי ששם אותו אצלו מחליט איזה מבצעים הוא רוצה לספק אז הנה ה-functional component שלנו שנקרא sales ואני רוצה שתהיה לי פה איזושהי פסקה, ויהיה כתוב לי פה איזשהו Sale, איזה מבצע שיש לנו עכשיו, והמבצע שלנו, אני לא רוצה להחליט שהמבצע שלנו הוא מבצע

10. 03:20

    על כל המשקאות בחנות, וכמה אחוז אני נותן הנחה כרגע. אז איך אנחנו מעבירים את המידע מה-Parent ל-Chide? קודם כל בואו ניגש רגע ונשים אותו, יש לנו את הsales הנה הוא בוא נראה שהוא הביא לנו אותו הנה הוא פה ובוא נראה רגע שהוא רק מציג אותו ואנחנו רואים sale איזה מבצעים יש עכשיו

11. 03:51

    מבצע מכירות או משהו כזה דרך אגב אני לא רואה שיש לי צורך רגע בcss אז אני אוריד את הcss שיהיה ממש סימפל גם פה אני לא צריך אותו ופה אני רוצה רק שהוא יופיע לי כbox בואו נראה רגע מה מה הוא מציג לנו, הנה הוא נמצא פה, טוב אז איך אנחנו ב-react מקבלים מידע מה-parent אלינו כאשר אנחנו child, מה שאנחנו צריכים לבצע זה לקבל אובייקט אחד

12. 04:29

    שמכיל את כל המידע שה-parent שולח אלינו כאן לסוגריים של הפונקציה, נהוג לקרוא לאובייקט הזה props, זה בעצם השם שלו, אבל אם הייתי בג'אווה סקריפט וכותב React ג'אווה סקריפט אז היה מספיק לי לכתוב כאן props והייתי יכול מיד להשתמש איתו פה ולהגיד בוא תציג לי כאן את props.percent נניח כמה אחוז אתה

13. 05:03

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

14. 05:34

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

15. 05:57

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