עיצוב דינמי בריאקט עם Pseudo Selector
-g, את npm i radium. בפרויקט TypeScript מתקינים גם את הטיפוסים: npm i @types/radium. בפרויקט JavaScript רגיל מספיק החבילה הראשונה.[email protected].lightblue או lightgreen, וצבע ריחוף כהה, darkblue או darkgreen. שני המשתנים מוגדרים מחוץ לקומפוננט כדי שייווצרו פעם אחת ולא בכל רענון, כי בזמן ריחוף הקומפוננט מצויר מחדש.':hover' כמחרוזת, ובתוכו backgroundColor של צבע הריחוף ו-color: white.Radium (באות גדולה, כי זה higher order component) ובשורת הייצוא מבצעים export default Radium(Email). אחרי זה הריחוף עובד גם בכחול וגם בירוק.@.פרקי ההרצאה: עיצוב דינמי בריאקט עם Pseudo Selector
תמלול ההרצאה: עיצוב דינמי בריאקט עם Pseudo Selector
הטקסט המלא של הדקות הראשונות בהרצאה «עיצוב דינמי בריאקט עם Pseudo Selector» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות בעולם העיצוב זה איך אנחנו יכולים לבצע דיינמיק סטיילינג כאשר הסטיילינג הוא פסאודו סלקטור אנחנו יודעים שיש לנו את הקונספט הזה של פסאודו סלקטור לדוגמה אם אני מבצע הובר ומרחף על איזה שהוא רכיב יש לי אפשרות להגדיר רק כשאני מרחף עליך אז בעצם אני צובע אותך CSS תומך בזה
אבל איך אנחנו יכולים לעשות את זה דינמי דינמי זה אומר שאנחנו רוצים לעשות את זה בטייפ סקריפט. איך בטייפ סקריפט?
אני מגדיר שיש לי את ה-hover הזה מעל על ידי עיצוב cssי. אז למעשה React לא תומכת בזה. בכדי שנצליח לעשות את זה אנחנו צריכים לשלב כאן איזושהי ספרייה חיצונית שזה מה שהיא יודעת לעשות.
היא יודעת לשלב extra css בצורה דינמית בקונספט של ה-embedded styling שעשינו. סליחה באינליין סטיילינג שעשינו אנחנו יכולים דרך הספרייה הזאתי לעשות פסאודו סטיילינג אנחנו יכולים לעשות מדיה קוויריז אנחנו יכולים לעשות אנימיישן אנחנו יכולים לעשות הרבה דברים שהם מעבר לcss רגיל הספרייה הזאתי
נקראת רדיום ובכדי להוריד ולהתקין ספרייה בתוך הפרויקט אנחנו פשוט הולכים לטרמינל אני רגע אנקה אותו ואנחנו פשוט מתקינים התקנה שהיא לא גלובלית במחשב על ידי מינוס G, כמו שעשינו לדוגמה כשהתקנו את React, אלא בלי מינוס G, npm, i, קיצור של install ואת השם של הספרייה.
אז הספרייה נקראת רדיום, אז אני פשוט רושם רדיום, רדיום זה עם r קטנה, אבל אם הספרייה הזאת מגיעה גם עם טייפים שקשורים לטייפ סקריפט, אז אני צריך להוסיף שטרודל טייפס סלאש ואת השם של הספרייה רדיום.
אם הייתי רק בג'אווה סקריפט, נניח הייתי מפתח React.js בג'אווה סקריפט רגיל, לא היה לי את זה, היה לי רק npmi רדיום.
ברגע שיש לנו גם טייפים שקשורים כמו קלאסים שקשורים לטייפ סקריפט, אז יש לנו פה את התוספת הזאת שזה כאילו התקנה נוספת שמגיעה עם הספרייה.
אז בואו נתקין את זה, PMI רדיום עם הטייפ שלו יופי ובואו נבנה לעצמנו עוד קומפוננטה אז ניגש ל-Create Functional Component בתוך Support ובואו נייצר לעצמנו קומפוננטה שנקראת E-Mail והיא תציג לנו פשוט את ה-E-Mail של החברה נבצע Enter הנה יש לנו קומפוננטת E-Mail ונבוא לפה אנחנו רוצים האמת
הכל דינמי אז בואו ניפטר רגע מהקובץ הזה גילית ויש לנו כאן רק בוא אין לנו גם את זה אז תכף אנחנו הולכים להשתמש בספרייה רדיום ומה שאני רוצה לעשות זה קודם כל להגדיר לעצמי איזה שהוא אובייקט דינמי סטייל ואנחנו רוצים לתת background color גם עבור מצב של עכבר מרחף מעל הרכיב הובר אם היינו בCSS האמת חבל שמחקתי את הCSS אבל אם היינו בCSS אז הייתם
יכולים לרשום בוא נניח נקודה והשם של ה-Component זה היה E-Mail נקודותיים over זה מה שהיינו יכולים לעשות אבל איך אנחנו יכולים לעשות דבר כזה כאן באזור של הטייפ סקריפט זה משהו שהוא קצת לא נתמך על ידי React אז ראשית אני מזכיר אנחנו רוצים לבצע קוד שהוא דינמי זאת אומרת לקבוע את הצבעים בצורה רנדומלית