יצירת Context Object

תמלול ההרצאה: יצירת Context Object

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

1. 00:02

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

2. 00:18

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

3. 00:42

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

4. 00:56

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

5. 01:11

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

6. 01:22

   בתוכו אנחנו רוצים לבנות עם Context TS. אוקיי, דבר ראשון אני רוצה לבנות אובייקט, אובייקט שמהווה כמה הגדרות cssיות, אני אקרא לו up-theme.

7. 01:35

   הנה יש לי פה אובייקט up-theme, כמובן שאנחנו רוצים להחצין אותו כי אנחנו רוצים להשתמש איתו מבחוץ. אקספורט בצורה כזאת, בוא נניח של-up-theme יש color והוא מג'נדה, יש לו background color והוא pink, יש לו font-family והוא ariel, ויש לו פונט סייז והוא בוא נניח שמאל.

8. 02:03

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

9. 02:16

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

10. 02:28

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

11. 02:49

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

12. 03:07

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

13. 03:29

    אז בואו נייצר טייפ נקרא לו css values והסוג שלו זה כל סוג שאנחנו מגדירים. אז בואו נגדיר שהסוג שלו יש לו color והcolor שלו הוא string ויש לו background color והסוג שלו הוא string כל אחד מהם כמובן הוא string.

14. 03:50

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

15. 04:12

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

16. 04:24

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