עיצוב דינמי בריאקט

תמלול ההרצאה: עיצוב דינמי בריאקט

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

1. 00:02

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

2. 00:17

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

3. 00:31

   האזור של ה-Home די עמוס אז בואו נייצר לנו עוד אזור עבור כל הקונספט של ה-Support התמיכה באתר ואת כל הקומפוננטות שקשורות עבור ה-Styling נשים ב-Support אז אנחנו רוצים לחזור בחזרה בואו נפתח כאן טרמינל מספר 2 ואנחנו רוצים to create functional component אנחנו רוצים עבור support area ונקרא לקומפוננט הזה address והוא בעצם

4. 01:05

   יציג לנו את הכתובת של האתר או של הבית עסק בואו נייצר את זה הנה יש לנו פה את support area והנה יש לנו פה address אז אני נכנס ל address ומה שאני רוצה ב address זה איזושהי פסקה הנה יש לנו פה פסקה ובפסקה כתוב our address ובואו נניח איך שאנחנו גרים בגולד 12 תל אביב.

5. 01:33

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

6. 01:48

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

7. 02:27

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

8. 02:53

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

9. 03:09

   יש לי את הפונקציה ה-CSSית rgb כמחרוזת כמובן והיא מקבלת שלושה גוונים זה מספרים בין 0 ל-255 כולל קצוות כאשר כל אחד מייצר גוון Red, Green, Blue ואז היא לוקחת את שלושת הגוונים ומחזירה לי איזשהו צבע לכן בואו אנחנו נייצר כאן גוון רד רנדומלי math.flor

10. 03:34

    math.random כפול 256 ייתן לי 0 עד 255 נגדי רד יש לנו גרין ויש לנו בלו וכעת אנחנו יכולים to return rgb שיש לו חלק רד חלק גרין חלק בלו אז הנה rgb עכשיו יש לנו פונקציה שמחזירה לנו איזשהו צבע cssי רנדומלי לחלוטין, אני לא יודע איזה צבע היא תחזיר.

11. 04:09

    את זה לא ממש הייתי יכול לעשות בcss לכן זה דינמי. אז איך אנחנו יכולים לקחת את הצבע הזה ולשלוט עליו או להשתמש בו?

12. 04:18

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

13. 04:48

    שנקרא BackgroundMacafColor ולהכניס לו תוכו איזשהו value כי אין דבר כזה מקף בעולם השמות של המשתנים אז בגלל שזה אובייקט אני יכול לרשום דבר כזה זה בסדר, או שאני יכול פשוט להחליף אותו לשם שהוא camel case, מתחיל באות קטנה,

14. 05:10

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

15. 05:21

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

16. 05:36

    אז הנה יש לנו אובייקט סטייל, לא השתמשתי איתו. הנה הגדרה של background color CSS it, הנה הגדרה של color CSS it, מה אני עושה איתו.

17. 05:46

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