שימוש Higher Order Component עם FC

תמלול ההרצאה: שימוש Higher Order Component עם FC

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

1. 00:02

   כעת אנחנו רוצים להשתמש ב-Higher Order Component הזה שבנינו, ובואו לצורך כך נבנה קומפוננט משלנו. בואו באמת נצרף את הקומפוננט Create FC לאזור של ה-Support, Support Area, ונקרא לקומפוננטה הזאת Deliveries, כלומר משלוחים.

2. 00:31

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

3. 00:52

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

4. 01:17

   את השעות מבחוץ בואו ניקח אינטרפייס דליבריז פרופס ובואו ניקח סטארטינג אור סטרינג Ending Hour String ונקבל פה את ה-Props Deliveries ואנחנו רוצים לבנות כאן פסקה Delivery Hours ולתת פה את ה-Props.Starting ומקף ובואו ניתן props.Ending בצורה כזאת.

5. 02:05

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

6. 02:28

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

7. 02:48

   בואו ניקח את זה ל-Support וב-Support יש לנו אחרי ה-Call us. בואו נשים פה דליבריז הנה הוא ונגיד לדליבריז סטארטינג אור וניתן שאנחנו מתחילים משלוחים ב-10 AM ו-Ending Hour ואנחנו מסיימים ב-9 בערב 9 PM. אז הנה יש לנו עכשיו קומפוננט משלנו ואנחנו העברנו לו props הכל בסדר לא השתמשנו

8. 03:34

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

9. 03:58

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

10. 04:18

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

11. 04:35

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

12. 04:54

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

13. 05:19

    אז כאשר אנחנו רוצים לקחת קומפוננטה שאנחנו בונים ולהעביר אותה דרך higher order component אנחנו בעצם לא מחזירים פה את הקומפוננטה אלא אנחנו מחזירים את ה-higher order component שעוטפת את הקומפוננטה שלנו וזה השימוש ב-higher order component זאת אומרת שכאן במקום לעשות export default ואת הקומפוננטה שלנו

14. 05:50

    אנחנו עושים export default background by hour זה הקומפוננטה שבנינו מקודם ואנחנו עוטפים אותה בקומפוננטה שלנו. אז עכשיו מה שהמערכת עושה זה אומרת כזה דבר, אתם לא מחזירים מהקומפוננטה שלכם ישירות את