יצירת Styled Components סטטי

תמלול ההרצאה: יצירת Styled Components סטטי

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

1. 00:02

   אוקיי, אז אנחנו רוצים להתקין קודם כל את ספריית ה-styled components. אז אנחנו באים לטרמינל ואנחנו צריכים לרשום npm i styled מכף components ברבים, ויש לו את הטייפים שלו, כי אנחנו בטייפ סקריפט זה יהיה strudel types /styled מכף components ברבים.

2. 00:33

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

3. 01:05

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

4. 01:32

   שאתם רוצים אבל זה קומפוננט שאנחנו בונים אז בואו נייצר create fc וקומפוננט פשוט נגדיר אותו כ-fc למרות שאנחנו לא באמת בונים אותו בטכניקה הרגילה, תכף אנחנו נראה איך.

5. 01:50

   ואנחנו רוצים לעשות את זה באזור שנקרא styled area ולקרוא לקומפוננטה styled bottom בצורה כזאת. אז בואו נצרף אותו ויש לנו פה אזור Styled Area אתם יכולים לקרוא לו Styled Components Area והוא מכיל את כל ה-Styled Components שלנו אפשר היה לעשות את זה אפילו מחוץ לתיקיית קומפוננט ולייצר במקביל

6. 02:28

   אליה Styled Component זה כבר החלטה שלכם אז יש לנו כאן Styled Button שזה קומפוננטה אין לנו צורך ב-CSS שלו אני מעיף אותו ויש לנו פה משהו קצת שונה שאנחנו בונים.

7. 02:43

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

8. 02:59

   מהפונקציה הזאת אנחנו בכלל יכולים להיפטר. והמשתנה הזה מקבל לתוכו את ה-Button של ספריית ה-Styled Component, שאנחנו צירפנו ושנייה אחת אני אכבה את זה ונעשה אימפורט אליה.

9. 03:17

   אימפורט סטיילד ו-from וזה נמצא בסטיילד קומפוננטס הנה הוא מצא לי את זה נחזיר את זה ו-styled זה בעצם אובייקט ושימו לב מה יש בו את כל תגיות ה-HTML שאתם רק יכולים להשתמש בהם או לחשוב עליהם הנה button הנה טקסט הנה טייבל.

10. 03:46

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

11. 04:08

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

12. 04:26

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

13. 04:43

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

14. 05:09

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

15. 05:20

    ומרג'ין בואו נניח ניתן לו 5 פיקסלים ובורדר רדיוס ניתן לו 10 פיקסלים ובואו ניקח בוקס שדו וניתן 3, 5, כמובן זה x, כמה צל יש על ציר x, כמה צל יש על ציר y, כמה הצללה היא מה שנקרא בלור או ספריי כזה ומה

16. 05:46

    הצבע שלה, בואו ניתן איזשהו צבע נניח שאנחנו רוצים שהכלור יהיה white ובואו נניח שיש לנו background image linear gradient ניתן לו gray וblack כמובן תכף נציב אותו ואז נראה איך זה נראה ובואו ניתן גם נקודותיים הובר ושימו לב שסטיילד קומפוננט תומך בזה זה ממש דבר טוב וניתן פה איזשהו אובייקט

17. 06:42

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

18. 07:15

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