זליגת React Leaking CSS

תמלול ההרצאה: זליגת React Leaking CSS

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

1. 00:02

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

2. 00:33

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

3. 00:59

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

4. 01:35

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

5. 02:07

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

6. 02:31

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

7. 02:41

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

8. 03:06

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

9. 03:16

   אז אני בא לפה ואני אומר, אני ממציא איזשהו קלאס שנקרא קול, נקרא לו nice button בצורה כזאת, וזה יהיה אדום. אז כמובן שכרגע אף לחצן לא קיבל אדום, אלא אם כן אני הולך אליו ואני אומר שיש לו את ה-class name של ה-ice button.

10. 03:41

    האמת שבואו נשמור על האחידות של React, והאחידות של React זה אותיות גדולות בצורה כזאת. אז נגדיר לו שאנחנו בונים class ה-ice button בצורה כזאת, והנה רק הוא הושפע מזה.

11. 03:58

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

12. 04:08

    אם קומפוננט אחר בטעות או שלא בטעות גם יוצר אותו קלאס, נייס בטון, ואומר אני רוצה לתת לקלאס הזה איזה משהו אחר לגמרי, בואו נניח ניתן לו Backround Color Blue, אבל ניתן לו עוד דברים, ניתן לו Font Size Extra Extra Large, ואני רוצה עכשיו את הנייס בטון הזה לשים אצלי

13. 04:34

    בלחצן שלי, הרי יש לי פה לחצן, בואו ניקח כאן ClassName, ניתן לו את ה-Nice Button, נחזור רגע לדף, אוקיי, מה קרה?

14. 04:46

    פתאום הייתה לי פה גם כן אזליגת CSS. אנחנו רואים שהעיצוב הזה של ה-Best Seller זלג והגיע ל-Recommended. הרגע, מה אסור?

15. 04:59

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

16. 05:16

    לכן, מה שאנחנו תמיד עשינו בשביל לפתור את