יצירת תפריט לוגין בריאקט

תמלול ההרצאה: יצירת תפריט לוגין בריאקט

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

1. 00:02

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

2. 00:16

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

3. 00:37

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

4. 01:06

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

5. 01:19

   גם היא נמצאת ב-out area, היא קשורה לתפריט של out area, אז אני אקרא לה out menu. והנה הקומפוננטה, האמת אני כבר רואה ששכחתי משהו.

6. 01:32

   אני רוצה שיהיה לי פה state וטוב בואו נעשה אותה כclass component אני אעיף אותה delete out menu נבנה מחדש אבל cc out area /out menu וstate כי יש לנו פה צורך לדעת מי זה אותו יוזר בשביל להציג את השם פרטי ושם משפחה זה לא שאי אפשר לבנות אותה עם functional component האמת היא די פשוטה ולכן היא מתאימה כמובן גם ל functional

7. 02:02

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

8. 02:11

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

9. 02:23

   כתלות במה? כתלות בהאם יש לנו יוזר או אין לנו יוזר. האם היוזר נניח לוגד אין, כן או לא. אז אולי נבדוק האם, טוב, אני לא רוצה לפנות ברנדר לערוצים אחרים כמו side effects, אז בואו נבדוק this.state.user.

10. 02:46

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

11. 03:01

    בואו נרווח כאן, נעשה את זה ככה, זה נפתח וזה אותו דבר. נשים את זה פה למטה, פה למטה, למטה, למטה, נרווח. טוב, אז מה שאנחנו רוצים לבנות כאן זה איזושהי span, בוא נניח, Hello, User who logged in, כי יש לי את ה-user פה,

12. 03:26

    אז אני רוצה לשים את השם הפרטי ושם המשפחה שלו. אז פה יש לי את list.state.user.first, משורשר עם this.state.user.lastname זאת הספן הראשונה.

13. 03:43

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

14. 04:08

    ה-Ui השני זה תמיד יהיה לו גסט, אז אנחנו מעיפים את כל זה in a לו גסט. יש לי פה את ה-Vertical Pipe, יש לי כאן או לוג אין או משכפל את שני החבר'ה האלה, רג'יסטר, נרשום פה רג'יסטר, וסיימנו לבנות את ה-Ui.

15. 04:31

    אבל יש פה איזושהי בעיה אחת, איפה זה הולך להשתנות? איפה הוא בכלל מהותחל? לא רואה בכלל שהוא מותחל, הוא תמיד יהיה נע, לא undefined, איפה אתם רואים שמישהו התחיל אותו בכלל?

16. 04:44

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

17. 05:03

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

18. 05:15

    אני לא רוצה לגשת ל-store.get.state.out.user. אני יכול, אבל אז זה אומר שניגשתי ל-store מתוך איזושהי קומפוננט התמימה לחלוטין, לא הכי אלגנטי.

19. 05:29

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

20. 05:47

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

21. 06:05

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

22. 06:29

    פה למעלה באזור הזה פה למעלה שהוא עדיין קורס לי אבל תכף הוא יירגע ופה למעלה זה אומר אולי ב-Layout, בואו נלך רגע ל-Layout, למה אני לא רואה את ה-Layout?

23. 06:45

    הנה הוא, ונלך ל-Header. בואו נניח שכאן איפשהו למעלה יש לנו פה את הלוגו בצד שמאל, צד ימין, נשים Out Menu.

24. 06:56

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