שימוש ב-Interpolation ב-React

תמלול ההרצאה: שימוש ב-Interpolation ב-React

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

1. 00:02

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

2. 00:20

   נקרא לו Discount. בואו נשלב אותו. את זה אפשר לסגור והנה אנחנו רואים אותו כאן. מה שאנחנו רוצים להציג זה רק איזושהי פסקה ולכתוב בה איזשהו משפט only now 10% discount all product וואו בעל הבית השתגע רגע יכול להיות שתגידו לי אוקיי זה סתם פסקה למה אתה צריך קומפוננט אז אתם צודקים אני לא באמת הייתי צריך

3. 00:52

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

4. 01:17

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

5. 01:35

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

6. 01:46

   הוא מופיע פה למעלה, סוגר, נסתכל על הדף, והנה הפסקה שלנו. Only now 10% Discount on all products. בסדר, מה הבעיה שאנחנו רואים פה? אם אתם מסתכלים אתם יכולים לראות שהכל עובד וזה סבבה אבל כתבתי פה 10% בתוך הקוד מה נקרא hardcoded מה קורה אם רק בתקופה הזאת אני רוצה 10% אבל בעוד חודש אני ארצה 7% ובעוד חודשיים אולי 12%

7. 02:23

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

8. 02:45

   מה שאנחנו רוצים, אנחנו רוצים שה-10 הזה יגיע ממשתנה. זאת אומרת, איפשהו פה אנחנו יכולים לייצר לעצמנו איזשהו משתנה.

9. 02:53

   בואו ניקח const% והמידע הזה אמור להגיע משרת מרוחק. בהמשך כמובן נראה איך אנחנו ניגשים לשרת מרוחק ומביאים מידע, אבל בוא נניח שהמידע הזה נמצא באיזשהו שרת מרוחק וממנו אני מביא את המספר 10. והשאלה היא איך אני עכשיו לוקח את המשתנה הזה ומשלב אותו פה?

10. 03:14

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

11. 03:50

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

12. 04:17

    רואים 10%. בואו נשנה את זה ל-12% והנה אנחנו רואים 12% כל עובד פרפקט. מה קורה אם אנחנו רוצים להביא מידע שמוחזר מפונקציה? בואו נניח אנחנו רוצים לכתוב only now on וכרגע אנחנו נניח בפברוארי 2021 10% או 12% discount on all products אם אני מסתכל אנחנו רואים שזה שוב נמצא hardcoded אנחנו רוצים

13. 04:53

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

14. 05:18

    אין פונקציה ב-JavaScript שיודעת לעשות דבר כזה, אז אני קצת אכתוב את זה. בואו נקרא לזה Month,