PracticU

יצירת Logout Component

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › יצירת Logout Component
מילון מושגים:
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
טופס - אזור בממשק שבו המשתמש מזין נתונים בשדות ושולח אותם, למשל טופס הרשמה או התחברות.
ממשק - נקודת מגע בין רכיבים: ממשק משתמש שבו אדם מפעיל תוכנה, או ממשק תכנותי שמגדיר אילו פעולות רכיב אחד חושף לאחר.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
ראוט - הגדרה שמקשרת כתובת בקשה לקוד שמטפל בה באפליקציה. גם מסלול שדרכו עוברות חבילות ברשת.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
יצירת Logout Component
האם צריך קומפוננטה ליציאה מהמערכת, כשאין בה טופס ואין ממשק? ההרצאה מראה שכדאי לבנות Logout כקומפוננטה בלי UI, ומה צריך לעשות כדי שהקוד שבה ירוץ פעם אחת.
למה קומפוננטה
הפעולה עצמה היא קריאה לפונקציה אחת, אבל סביבה יש עוד שורות: הודעת הצלחה (שזה UI ולא תפקיד של הסרוויס) וניתוב, למשל לדף הבית, כי המשתמש אולי היה בדף שדורש כניסה. בנוסף יש לינק ללוג אאוט, שקשור לראוט. לכן קומפוננטה בלי UI היא פתרון תקין.
השלבים העיקריים
1. יצירה: יוצרים קומפוננטה בשם Logout ומוחקים את ה-CSS שלה.
2. החזרת null: קומפוננטה בלי UI יכולה להחזיר null.
3. הקוד: useHistory לניתוב, קריאה ל-authService.logout(), alert עם הודעת היציאה והניתוב עם history.push.
4. הבעיה: ההודעה מוצגת פעמיים. React יכולה לקרוא לפונקציית הרינדור יותר מפעם אחת, ואין התחייבות לפעם אחת בלבד.
5. הפתרון: מכניסים את שלושת הצעדים ל-useEffect עם מערך תלויות ריק, כך שהקוד רץ פעם אחת. הקריאה ל-useEffect עצמה חייבת להיות ישירות בגוף הקומפוננטה.
6. שילוב בראוטינג: מוסיפים ראוט ל-Logout. אחרי רענון ומעבר ללוג אאוט, ההודעה הופיעה פעם אחת.
אחרי ההרצאה אפשר לבנות קומפוננטה בלי ממשק משתמש שמבצעת פעולה אחת בטוחה בכניסה לראוט.
השיעור הבא בקורס: ריאקט - Blocking Backend Route

פרקי ההרצאה: יצירת Logout Component

  1. 00:00

    האם לוג אאוט הוא קומפוננטה

  2. 00:39

    מה נדרש לפעולת לוג אאוט

  3. 01:13

    ניתוב אחרי לוג אאוט

  4. 01:45

    בניית קומפוננטה ללא UI

  5. 02:24

    דוגמה לקומפוננטה ללא ממשק

  6. 02:59

    הסרת ה-CSS מהקומפוננטה

תמלול ההרצאה: יצירת Logout Component

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

  1. 00:02

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

  2. 00:32

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

  3. 00:50

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

  4. 01:02

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

  5. 01:22

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

  6. 01:36

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

  7. 01:49

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

  8. 02:06

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

  9. 02:34

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

  10. 02:48

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

  11. 02:59

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

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: יצירת Login Component

ההרצאה הבאה: ריאקט - Blocking Backend Route

הרצאות קשורות מקורסים אחרים

  • Component Testing
  • Component Communitaction

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS