PracticU

שימוש ב-Context Object בתוך FC

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › שימוש ב-Context Object בתוך FC
מילון מושגים:
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
הוק - נקודת חיבור שמאפשרת להריץ קוד מותאם בשלב מסוים של תהליך. ב-React, מנגנון לניהול מצב ויכולות ברכיבים.
משתנה - שם שמפנה למקום בזיכרון שבו נשמר ערך שיכול להשתנות במהלך ריצת התוכנית, כמו מספר, טקסט או אובייקט.

שימוש ב-Context Object בתוך FC
איך קומפוננטה מקבלת את ה-Context שהופץ. ההרצאה מראה את הדרך ב-Functional Component, ומציינת שב-Class Component היא שונה.
השלבים העיקריים
1. קומפוננטה לדוגמה: יוצרים קומפוננטה FC בתיקיית SupportArea שמציגה את כתובת הפייסבוק. אין לה צורך ב-props או ב-state, כי Context לא מועבר באמצעותם. המרצה בוחר לעצב אותה לפי ה-theme.
2. השגת האובייקט: useContext(ThemeContext), React hook. אין צורך להגדיר טיפוס, אבל אפשר לכתוב CssValues בסוגריים משולשים. אם משתמשים בטיפוס הגנרי שלא מפרט מאפיינים, לא מקבלים השלמה אוטומטית אחרי נקודה.
3. שימוש: נותנים לרכיב style שמכיל את ה-theme. המרצה מעדיף לשמור אותו במשתנה.
4. בדיקה: מציבים את הקומפוננטה בדף ה-support, ורואים את הורוד, המג'נטה והכתב הקטן שהוגדרו באזור הגלובלי.
טעויות נפוצות
הייבוא של ThemeContext הגיע בטעות מ-Styled Components, והעיצוב לא הופיע. הפתרון היה לייבא אותו מה-state.
עכשיו אפשר להשתמש ב-Context בתוך Functional Component. ב-Class Component זה נעשה אחרת, וזה יוצג בסרטון הבא.
השיעור הבא בקורס: שימוש ב-Context Object בתוך CC

פרקי ההרצאה: שימוש ב-Context Object בתוך FC

  1. 00:00

    ההבדל בין FC ל-Class Component

  2. 00:42

    בניית קומפוננטת פייסבוק

  3. 01:35

    עיצוב הקומפוננטה עם ה-Theme

  4. 02:12

    שימוש ב-useContext hook

תמלול ההרצאה: שימוש ב-Context Object בתוך FC

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

  1. 00:02

    אז איך אנחנו עכשיו משתמשים באיזשהו קומפוננטה בקונטקסט הזה? יש הבדל בשימוש בין Functional Component ו-Class Component.

  2. 00:14

    בואו נתחיל עם Functional Component, קצת יותר פשוט. אני אוסיף כאן את הטרמינל שמאפשר לי לכתוב, ובואו נייצר לעצמנו איזושהי קומפוננטה חדשה, Create FC. נעשה את זה בתוך ה-Support Area, הסאפורט אריה היה אזור של כל מיני דברים שקשורים לעיצובים אז בגלל שאנחנו מתעסקים עם תים שזה משהו של עיצוב אז שמתי את זה פה ובואו נייצר לעצמנו קומפוננטה עבור הכתובת של פייסבוק

  3. 00:47

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

  4. 01:03

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

  5. 01:15

    פייסבוק אדרס, לא, בואו נגיד הפייסבוק שלנו, our facebook, או רק פייסבוק ויש לנו פה את ה-HTTPs www.facebook.com/ , נניח מורפוינד, אני לא באמת יודע מה יש בכתובת הזאת.

  6. 01:35

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

  7. 01:47

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

  8. 01:56

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

  9. 02:02

    אין לי את האובייקט. האובייקט כבר ניתן לגישה בגלל שהפצנו אותו ב-level העליון של עץ הקומפוננטות. איך אני ניגש אליו? על ידי use context react hook שייכת ל-react.

  10. 02:19

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

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

ההרצאה הקודמת: ריאקט - Propagating a Context Object

ההרצאה הבאה: שימוש ב-Context Object בתוך CC

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

  • Application Context
  • Session object - חלק 1
  • המחלקה Object
  • Powershell object

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

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