הסבר על Styled Components

תמלול ההרצאה: הסבר על Styled Components

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

1. 00:02

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

2. 00:35

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

3. 00:58

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

4. 01:17

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

5. 01:46

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

6. 02:07

   DoWork ואני שולח לה מכרוזת ובואו נניח המכרוזת ששלחתי לה זה טסטינג, בואו נריץ את זה, כאשר אם אני Open with the Live Server נריץ את זה בלי קשר לפרויקט React כמובן, נפתח F12 קונסול ונלחץ ונראה את הטסטינג, זאת אומרת, הכל עובד כמו שצריך, אחלה.

7. 02:29

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

8. 02:54

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

9. 03:04

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

10. 03:31

    אוקיי, אז מה ה-added value של כל הסיפור הזה? למה אני רוצה לקחת את זה בתור מערך? אז למעשה אין לי שום סיבה לקרוא לפונקציה כזאת שמקבלת מכרוזת בטכניקה הזאת של ה-tagged template הזה.

11. 03:46

    יש לי סיבה לקרוא לה רק אם אני שולח מכרוזת כזאת שמכילה תוכה values. זה אומר בואו ניקח פה שלושה משתנים a ניתן לו 10 b ניתן לו 20 c ניתן לו 30 ועכשיו בואו נקרא לדו וורק בואו נתחיל בטכניקה רגילה נניח שאני בא ואני אומר אני רוצה לשלוח כאן איזשהו

12. 04:16

    איזושהי מחרוזת ולשרשר בתוכה את ה-abc ואני רוצה לשרשר את זה כמובן על ידי ה-back-tick הזה נגדיר כאן first וניתן לו באמת בואו ניתן לו אפילו בלי בלי רווחים first ויש לנו פה את ה-a second יש לנו כאן את ה-b third יש לנו כאן את ה-c ובואו נגיד שזה end ניתן אפילו אחד בסוף כזה אז אם אני קורא לדו וורק בשיטה הקלאסית עם סוגריים כל

13. 04:51

    הדבר הזה נשלח כמחרוזת אחת רגילה בואו נקרא לזה והנה קיבלנו first 10 אבל אם אנחנו קוראים בשיטה הזאת בואו נראה מה נקבל קיבלנו מערך ושימו לב מה יש במערך first second third end איפה יש כאן את הvalues ABC ששלחנו אנחנו רואים שהם לא מתקבלים במערך הזה אז כבר אנחנו רואים

14. 05:22

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

15. 05:35

    אוקיי, אבל אני גם רוצה את החבר'ה האלה. החבר'ה האלה מתקבלים פה,