הצגת הודעה או תמונה בזמן טעינת דף באתר - ריאקט

תמלול ההרצאה: הצגת הודעה או תמונה בזמן טעינת דף באתר - ריאקט

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

1. 00:02

   אז אחרי שבנינו את ה-Lazy-Loading עבור ה-Contact-Us, בואו נוסיף את אותה קומפוננטה שמציגה איזשהו לואודינג מסאג' או פליז ווייט מסאג' או משהו כזה.

2. 00:19

   ונשלב אותה פה במקום ה-Fragment. בואו נפתח את הטרמינל ונוסיף קומפוננטה. יש לנו Create, נוסיף Functional Component. אני לא אוסיף את זה הפעם לתוך ה-LayoutArea כי זאת קומפוננטה שאנחנו יכולים להשתמש איתה בכל מקום שבו אנחנו רוצים להציג איזשהו לואודינג מסאג', ולכן אולי כדאי להביא אותה ל-SharedArea,

3. 00:49

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

4. 01:11

   בואו נראה רגע איפה היא נמצאת. נפתח את ה-shared please wait, הנה זה פה. יש לנו את הקומפוננטה, יש לנו את ה-css, נשים רגע את ה-css פה בצד.

5. 01:28

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

6. 02:07

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

7. 02:27

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

8. 02:55

   זאת אפשרות אחת. אפשרות אחרת זה פשוט להיכנס לגוגל ולחפש לואודינג גיף. בואו ניקח אפילו טרנספרנט.

9. 03:05

   נעבור לאזור של התמונות ופשוט נחפש פה תמונה במקום לבנות את זה בעצמנו. הנה תמונת גיף שנראה לי שהיא מאוד טובה. כל מיני אפשרויות ל-loading אנחנו רואים שכבר הכל מוכן לנו למעשה איפה הגיף שמקודם מצאתי נראה לי שזאת זאת save image ובואו נשמור אותה אנחנו נמצאים ב-react northwind src assets images נשמור אותה פה נקרא לה loading אוי

10. 03:35

    שזה jpeg ואני לא רוצה jpeg אני רוצה גיף מה בקשר לזאת? או, הנה זאת גיף. ראינו כאן, ואנחנו רוצים לואודינג גיף. I please wait, לא, לואודינג זה שם טוב.

11. 04:16

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

12. 04:26

    אז אנחנו רוצים עכשיו להביא אותה. בואו נעשה פה אימפורט ללואודינג אימאץ', ואנחנו רוצים להביא אותה, מאיפה בעצם להישווה? אנחנו רוצים להביא אותה, בואו נעלה תיקייה, נעלה עוד אחת, ניכנס, לא, עוד אחת אנחנו צריכים, ואז Assets, Images, ופה אמור להיות לורדינג GIF. אז יש לנו את

13. 04:58

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