
SupportArea שמציגה את כתובת הפייסבוק. אין לה צורך ב-props או ב-state, כי Context לא מועבר באמצעותם. המרצה בוחר לעצב אותה לפי ה-theme.useContext(ThemeContext), React hook. אין צורך להגדיר טיפוס, אבל אפשר לכתוב CssValues בסוגריים משולשים. אם משתמשים בטיפוס הגנרי שלא מפרט מאפיינים, לא מקבלים השלמה אוטומטית אחרי נקודה.style שמכיל את ה-theme. המרצה מעדיף לשמור אותו במשתנה.ThemeContext הגיע בטעות מ-Styled Components, והעיצוב לא הופיע. הפתרון היה לייבא אותו מה-state.הטקסט המלא של הדקות הראשונות בהרצאה «שימוש ב-Context Object בתוך FC» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז איך אנחנו עכשיו משתמשים באיזשהו קומפוננטה בקונטקסט הזה? יש הבדל בשימוש בין Functional Component ו-Class Component.
בואו נתחיל עם Functional Component, קצת יותר פשוט. אני אוסיף כאן את הטרמינל שמאפשר לי לכתוב, ובואו נייצר לעצמנו איזושהי קומפוננטה חדשה, Create FC. נעשה את זה בתוך ה-Support Area, הסאפורט אריה היה אזור של כל מיני דברים שקשורים לעיצובים אז בגלל שאנחנו מתעסקים עם תים שזה משהו של עיצוב אז שמתי את זה פה ובואו נייצר לעצמנו קומפוננטה עבור הכתובת של פייסבוק
של המערכת שלנו אין צורך בפרופס אין צורך בסטייט יכול להיות שלקומפוננטה שלנו יש פרופס או סטייט אבל זה לא קשור לקונטקסט הקונטקסט לא מעביר את עצמו דרך לא פרופס ולא סטייט ובואו נייצר את זה.
הנה יש לנו קומפוננטה שכל התפקיד שלה זה להוות את הכתובת של פייסבוק. בואו נגדיר שהיא בוקס ואנחנו רוצים כאן לתת את הכתובת עצמה.
פייסבוק אדרס, לא, בואו נגיד הפייסבוק שלנו, our facebook, או רק פייסבוק ויש לנו פה את ה-HTTPs www.facebook.com/ , נניח מורפוינד, אני לא באמת יודע מה יש בכתובת הזאת.
גוד, מה אנחנו רוצים לעשות? אנחנו רוצים עכשיו להשתמש כאן באותו אובייקט ולעצב את הקומפוננטה הזאת עם האובייקט הזה ספציפית בגלל שהוא Theme.
יכול להיות שהאובייקט היה מתאר את היוזר הכללי והייתי רוצה להציג את הפרטים שלו גם. בגלל שזה Theme אני רוצה לעצב את הסטיילינג שלו.
אוקיי, דבר ראשון אני רוצה להשיג את האובייקט הזה. אז אני בא לפה, קונסט אפטים.
אין לי את האובייקט. האובייקט כבר ניתן לגישה בגלל שהפצנו אותו ב-level העליון של עץ הקומפוננטות. איך אני ניגש אליו? על ידי use context react hook שייכת ל-react.
אפשר להגיד לו פה מה סוג הנתונים. אני מזכיר לכם סוג הנתונים, אנחנו בנינו אותו, זה היה css values והפקודה הזאת פשוט אומרת לי: תשמע, תן לי את הסוג של הקונטקסט.