PracticU

הוספת קומפוננטה בטפסים של ריאקט - React Forms

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › הוספת קומפוננטה בטפסים של ריאקט - React Forms
מילון מושגים:
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
טופס - אזור בממשק שבו המשתמש מזין נתונים בשדות ושולח אותם, למשל טופס הרשמה או התחברות.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
אירוע - התרחשות שהמערכת מזהה ויכולה להגיב לה, כמו לחיצת עכבר, הקשה או סיום פעולה.
ספרייה - אוסף קוד מוכן, כמו פונקציות ומחלקות, שמפתחים משתמשים בו בתוכניותיהם במקום לכתוב הכול מחדש.
הוק - נקודת חיבור שמאפשרת להריץ קוד מותאם בשלב מסוים של תהליך. ב-React, מנגנון לניהול מצב ויכולות ברכיבים.
ראוט - הגדרה שמקשרת כתובת בקשה לקוד שמטפל בה באפליקציה. גם מסלול שדרכו עוברות חבילות ברשת.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
הוספת קומפוננטה בטפסים של ריאקט - React Forms
מתחילים מודול על טפסים ב-React: איך קולטים מידע מהמשתמש, ואיך מכינים קומפוננטה חדשה שתכיל טופס להוספת מוצר.
למה לא two-way binding ידני
תיבת input אחת דורשת מנגנון שלם של two-way binding: משתנה ב-state, חיבור שלו לתיבה ואירוע שקולט את הערך. בטופס עם 10 תיבות צריך לשכפל את כל זה 10 פעמים. לכן משתמשים בספרייה הכי פופולרית לטפסים, react-hook, שמבצעת את ה-binding מאחורי הקלעים. היא עובדת רק עם functional components, ולכן הקומפוננטה נכתבת כ-FC.
השלבים
1. מה רוצים לקלוט: את פרטי המוצר החדש: שם, מחיר, כמות במלאי ותמונה.
2. יצירת הקומפוננטה: מוסיפים לאזור המוצרים קומפוננטה בשם AddProduct, בלי props, ומציגים בה בינתיים פסקה.
3. ראוט: במנגנון הראוטינג מוסיפים ראוט product/new שמציג את AddProduct, ובודקים בדפדפן שהוא נטען.
4. קישור לטופס: מעל רשימת המוצרים מוסיפים NavLink עם to לכתובת product/new ועם exact, ובתוכו אייקון של add box.
5. עיצוב: ב-CSS של Product List ממקמים את הלינק עם position: absolute, 20 פיקסלים מהצד ומלמעלה.
מה הלאה
הטופס עצמו עדיין ריק. בהרצאה הבאה בונים אותו, ואחר כך משתמשים ב-hook בשם useForm כדי לקלוט את הנתונים.
אחרי ההרצאה יש קומפוננטה וראוט מוכנים לטופס, ואתם יודעים באיזו ספרייה נטפל בקליטת הנתונים.
השיעור הבא בקורס: טופס בריאקט - React Forms

פרקי ההרצאה: הוספת קומפוננטה בטפסים של ריאקט - React Forms

  1. 00:00

    חשיבות הטפסים בפרונט אנד

  2. 00:55

    ההבדל בין input לטופס

  3. 01:33

    הקוד הרב של Two-Way Binding

  4. 02:13

    מעבר לעבודה עם הספרייה

  5. 02:49

    שדות המוצר בטופס

תמלול ההרצאה: הוספת קומפוננטה בטפסים של ריאקט - React Forms

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

  1. 00:02

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

  2. 00:21

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

  3. 00:31

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

  4. 00:52

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

  5. 01:04

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

  6. 01:20

    ומה קורה אם יש לי טופס שיש לו 10 תיבות כאלה? אז בשביל לעשות two-way binding היינו צריכים לכתוב די הרבה קוד, היינו צריכים סטייט ובסטייט היינו צריכים איזשהו משתנה והיינו צריכים לחבר את המשתנה הזה לתיבה והיינו צריכים גם אירוע שהתיבה מרימה ואז

  7. 01:42

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

  8. 02:04

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

  9. 02:22

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

  10. 02:46

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

  11. 03:05

    אז בואו נחזור ונייצר לעצמנו קומפוננטה שזה בעצם התפקיד שלה להוסיף טופס חדש יש לנו פה את האזור של המוצרים להוסיף הכוונה מוצר חדש. היה לנו כאן את ה product list, היה לנו את ה product card שמציג פרטים לגבי מוצר אחד וproduct details ואנחנו רוצים גם להוסיף to create fc. למה

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

ההרצאה הקודמת: העברת Interceptors לקובץ נפרד

ההרצאה הבאה: טופס בריאקט - React Forms

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

  • Forms - Event Object
  • הוספת VMkernel
  • שימוש במספר טפסים - Multiple Forms
  • הוספת Request לטסט

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

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