PracticU

ריאקט - Propagating a Context Object

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

ריאקט - Propagating a Context Object
אחרי שנוצר אובייקט ה-Context, ההרצאה מראה איך מפיצים אותו לעץ הקומפוננטות בעזרת ה-Provider.
איך מפיצים
1. בוחרים איפה לעטוף: רק קומפוננטות בתוך התגית יקבלו את האובייקט. כדי שרק קומפוננטות של מוצרים יקבלו אותו, עוטפים את הקומפוננטה הכי עליונה של המוצרים, למשל ProductList. כדי שכל האתר יקבל, עוטפים את הרכיב העליון ביותר: ה-Layout, ה-Browser Router או האינדקס. כאן עוטפים מעל ה-Provider של ה-store.
2. ה-Provider: בתוך ThemeContext יש Provider, בדומה ל-Provider של React Redux. הוא עוטף את הקומפוננטות ומפיץ את האובייקט. חשוב לייבא ThemeContext מקובץ ה-state ולא מ-Styled Components.
3. ה-value: במאפיין value של ה-Provider נותנים את האובייקט שמפיצים, כאן appTheme.
4. ה-default value: הערך שהועבר ל-createContext משמש כשמשתמשים באובייקט מחוץ לעץ של ה-Provider. המרצה מחזיר אותו ל-null בכוונה, כדי להראות שהוא לא קשור להפצה. אפשר להשאיר שם את appTheme, למשל לצורכי דיבאגינג.
עכשיו כל קומפוננטה בתוך ה-Layout יכולה לגשת לאובייקט. איך משיגים אותו בפועל מוצג בסרטון הבא.
השיעור הבא בקורס: שימוש ב-Context Object בתוך FC

פרקי ההרצאה: ריאקט - Propagating a Context Object

  1. 00:00

    הפצת האובייקט בעץ הקומפוננטות

  2. 00:40

    עטיפת עץ קומפוננטות מסוים

  3. 01:18

    עטיפת ה-index כמו Provider

  4. 01:53

    הוספת תגית Team Context

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

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

  1. 00:02

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

  2. 00:24

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

  3. 00:40

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

  4. 00:56

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

  5. 01:08

    אותו Layout, כאן אנחנו יכולים לעטוף אותו. לעטוף את ה-Dive הזאת, או לעטוף את ה-Browse Router. אפשר במקום זה לגשת ואפילו לעטוף את האינדקס, כאן.

  6. 01:22

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

  7. 01:52

    שיש שניים, ואנחנו רוצים אותו מפה, היא זה שלנו, אני רואה שיש עוד אחד של Styled Components, אנחנו רוצים את זה, ונסגור אותו כאן, Team Context.

  8. 02:05

    כעת מה שהוא מבקש מאיתנו, הוא אומר לנו, תשמעו, אתם רוצים להפיץ משהו, אני רק מעטפת כזאת, בתוך ה-Team Context יש משהו שנקרא Provider,

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

ההרצאה הקודמת: יצירת Context Object

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

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

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

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

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