PracticU

מחיקת מוצר בריאקט

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › מחיקת מוצר בריאקט
מילון מושגים:
ראוט - הגדרה שמקשרת כתובת בקשה לקוד שמטפל בה באפליקציה. גם מסלול שדרכו עוברות חבילות ברשת.
DELETE - פקודת SQL למחיקת שורות מטבלה. גם שיטת HTTP לבקשת מחיקה של משאב בשרת.
טופס - אזור בממשק שבו המשתמש מזין נתונים בשדות ושולח אותם, למשל טופס הרשמה או התחברות.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
אסינכרוני - אופן פעולה שבו פעולה ארוכה רצה ברקע והתוכנית ממשיכה בלי להמתין לה, ומטופלת כשתסתיים.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
צד לקוח - החלק של היישום שרץ בדפדפן ומולו המשתמש מתקשר, הכולל את התצוגה והאינטראקציה.
מחיקת מוצר בריאקט
מחיקת מוצר היא החלק האחרון בסדרה, וכמעט אין בה חדש. ההרצאה עוברת על הקומפוננטה ועל מה שמבדיל אותה מההוספה והעדכון.
איך זה בנוי
1. ראוט: product/delete/:id. הקישור אליו נמצא בדף פרטי המוצר.
2. קומפוננטת class: אין כאן טופס ואין צורך לקלוט נתונים, ולכן לא משתמשים ב-useForm. ה-state מחזיק את המוצר, והוא נטען מהשרת ב-componentDidMount.
3. שאלת אישור: מוצגים השם, המחיר, המלאי והתמונה, עם השאלה אם למחוק. הכפתור Cancel לא מוחק כלום.
4. המחיקה: פונקציה אסינכרונית ששולחת axios.delete לכתובת המוצרים עם ה-id. אין טיפוס מוחזר, כי השרת לא מחזיר דבר.
5. אחרי המחיקה: מוצגת הודעת הצלחה ומנווטים לרשימה דרך ה-props, כי כבר אין מה להציג.
6. בדיקה: מחיקת Grapes הציגה הודעת הצלחה, והמוצר נעלם מהרשימה וגם מהשרת.
שימו לב
סטטוס התשובה למחיקה הוא 204 No Content. בדרך כלל השרת לא מחזיר את המוצר שנמחק, אך הוא יכול.
בסיום הסדרה אפשר לנהל טפסים ב-React: לקלוט נתונים, לאמת אותם בצד לקוח, להציג שגיאות ולשלוח הוספה, עדכון ומחיקה לשרת עם useForm.

פרקי ההרצאה: מחיקת מוצר בריאקט

  1. 00:00

    רכיב מחיקת מוצר

  2. 00:39

    הצגה ואישור המחיקה

  3. 01:16

    מחיקה דרך Axios Delete

תמלול ההרצאה: מחיקת מוצר בריאקט

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

  1. 00:02

    אם ראינו הוספה ועדכון, מן הראוי שנראה גם מחיקה. הכל מוכן, בואו רק נעבור בזריזות ונראה איך זה בנוי, כי כמעט אין פה שום דבר חדש. הנה רכיב delete product, הנה אנחנו יכולים לראות שיש לנו פה ב-routing את ה-rout הזה, product/delete/ ואז את הקוד, ברגע שגולשים זה הרכיב שמוצג,

  2. 00:31

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

  3. 00:47

    אם כן אנחנו צריכים לגלוש לבאק ולמחוק את המוצר אז בואו נראה איך זה מתבצע. ב-delete product יש לנו כאן את הרכיב שקודם כל הוא מקבל דרך ה- route parameters את ה-id לב את ה-ID.

  4. 01:03

    אני השתמשתי פה ב-Class Component כי אין לנו פה טורפס, אז אין לנו פה בכלל use form, אנחנו לא צריכים לקלוט שום דבר במקרה הזה מה-user.

  5. 01:13

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

  6. 01:29

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

  7. 01:42

    אנחנו לא מקבלים שום דבר בחזרה מהשרת. כשמוחקים אז אנחנו לא רושמים פה product model או כל מיני דברים כאלה, כי השרת לא מחזיר שום דבר בתהליך המחיקה, זה נקרא סטטוס code 204 שנקרא no content.

  8. 01:58

    אחרי מחיקה השרת בעצם, ברוב המקרים כן, הוא לא מחזיר שום דבר, הוא

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

ההרצאה הקודמת: עדכון מוצר בריאקט

ההרצאה הבאה: מה זה רידקס - Redux

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

  • מחיקת מוצר - קורס NodeJS
  • מחיקת VPC - ב-AWS
  • תיעוד של מחיקת קובץ
  • מחיקת רשומות קיימות ב-SQL

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

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