עיצוב CSS ב-React
index.css, כמו צבע רקע וגופן. ההרצאה מראה למה מגדירים אותו שם, גם כשקיימת קומפוננטה שאחראית על ה-Layout.npm start.html, ל-body וגם ל-#root, כלומר ה-div עם id שהוא root ב-index.html, שבו נשתלת הקומפוננטה הראשית.margin: 0 ו-padding: 0, גובה 100% כי ברירת המחדל של גובה היא לפי התוכן, יישור טקסט למרכז, font-style: italic וצבע DarkCyan. הרקע הוא linear-gradient של 45 מעלות מ-LightBlue ל-White. כל אחד יכול לבחור צבעים אחרים.App הקיימת דורסת אותו. בהרצאה הבאה מטפלים בה.index.css ולהפריד אותו מה-CSS של קומפוננטה.פרקי ההרצאה: עיצוב CSS ב-React
תמלול ההרצאה: עיצוב CSS ב-React
הטקסט המלא של הדקות הראשונות בהרצאה «עיצוב CSS ב-React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז בואו ניגש לפרויקט שלנו, פתח את הפרויקט והוא היה פה ב-react, פתח אותו, קודם כל בואו נעריץ אותו npm start והנה אנחנו רואים שהוא רץ ופועל והדבר הראשון שאנחנו רוצים לבנות ב-layout שלנו זה את ה-css הכללי של האתר.
אפילו שיש לנו קומפוננטה שאחראית על ה-layout וכמובן יהיה לה css משלה עדיין יהיה css אחד כללי עבור לדוגמה ה-body של האתר ואיזה צבע רקע אני רוצה באתר עצמו בדיוק כמו שכאן אנחנו רואים איזשהו צבע רקע ואנחנו רואים איזה גופן שיכלנו לעשות את זה בקומפוננטה אבל ה-css שקשור לקומפוננטה של ה-layout
אחראי רק על ה-css של המבנה של ה-layout עדיין יש לנו אינדקס css אז בואו ניפטר מכל מה שיש פה ובואו נראה אגב איך זה השפיע לנו הנה שימו לב שאנחנו כבר רואים שיש פה איזה שוליים מסוימים שאנחנו גם אותם רוצים להיפטר מהם וכבר אין פה את הגופן שמקודם היה ומה שאנחנו רוצים לעשות כאן זה את הדבר הבא אנחנו רוצים
לתת ל html לבאדי ולid root כמה הגדרות כלליות עכשיו אם אתם זוכרים מה זה ID root זה היה פה באינדקס בתוך האינדקס ישנה div שיש לה ID root ובתוכה הולך להישתל הקומפוננטה הראשית הראשונה שעולה וראינו את זה כאן שפה אנחנו באינדקס
ה-tsx אנחנו לוקחים את ה-id את האלמנט של הרות ושותלים בתוכו את זה כאשר React Strict Mode מדבר על הצגת שגיאות על הדף ואיזה שהוא, וזה ה-app, זה הקומפוננט הראשית שלנו, היא כאילו אמורה להיות ה-layout שלנו, שכרגע יש בה את הציור הזה שנסתובב פה.
אבל אנחנו עדיין לא שם, אנחנו רוצים לבוא ולעשות הגדרות כלליות בתוך ה-index.css. אז מה שאנחנו רוצים לתת, כמובן כל אחד יכול לתת איזה הגדרות שהוא רוצה, באיזה אתר שהוא רוצה, אבל אני הולך לתת margin 0, padding 0, אני הולך להיפטר מהדבר הזה שנמצא פה, אוקיי, אני לא יודע למה הוא לא תפס לי את
זה, אבל הוא אמור לתפוס לי את זה, או הנה הוא תפס. ואנחנו רוצים לתת גובה 100% קודם כל, כי by default גובה של html זה כמה שהתוכן מכיל ולא כמה, ולא 100%, אז אנחנו רוצים למתוח את הגובה 100%. בואו נשים את כל הטקסט הליין באמצע, נגדיר שהפונט style italic,