יצירת Registration Component

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

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

1. 00:02

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

2. 00:21

   באיזה אזור נוסיף אותם? אז אנחנו הולכים להוסיף אותם באזור חדש שנקרא Auth Area, אזור עבור Authentication ו-Authorization.

3. 00:33

   בואו נבצע קריאייט, fc, למה fc? כי אני רוצה לבנות טופס, אז אני רוצה להשתמש use form, ואני רוצה להוסיף את זה ל-auth area, area חדש שהולך להיווצר לי כאן, ונקרא לה קומפוננטה register.

4. 00:51

   אין לנו state, אין לנו props, go, תיצור לי area חדש, הנה קומפוננטת register, בואו נבנה אותה.

5. 00:59

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

6. 01:18

   יש לנו כאן לייבל, ומה שאנחנו רוצים זה את השם הפרטי של המשתמש input type text, נגדיר שזה יהיה out of focus, זה אומר איך שהטופס עולה, רואים אותו, בואו ניקח עוד אחת עבור ה-Last Name, עוד אחת עבור ה-User Name ולבסוף עבור ה-Password, כאשר Password זה לא Type Text אלא Password.

7. 01:48

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

8. 02:20

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

9. 02:38

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

10. 03:01

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

11. 03:14

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

12. 03:34

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

13. 03:53

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

14. 04:16

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

15. 04:31

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

16. 04:49

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

17. 05:16

    userModel ואנחנו רוצים להביא את ה-register ואנחנו רוצים להביא handleSubmit. בעבר הבאנו גם formState בשביל כל הנושא של הוולידציה אני כרגע אחסוך את הוולידציה, ברור שבמציאות צריך ולידציה, אבל אתם כבר מומחים בוולידציה, אז אין צורך לבזבז על זה את הזמן.

18. 05:37

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

19. 05:48

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

20. 06:08

    מה אנחנו רוצים לעשות פה? ה-wait-out-service, אני לא רוצה להתעסק פה עם יותר מדי קודים של רידאקס, רג'יסטר, תשמע, הנה הבן אדם, יוזר, שה-use-form הביא לי, הספרייה המדהימה הזאת, תשלח אותו לשרת, תשים אותו ברידאקס,

21. 06:24

    תעשה מה שאתה יודע לעשות. בואו נציג פה עוד אלרט, To have been successfully registered מעולה