PracticU

יצירת Class Component

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › יצירת Class Component
מילון מושגים:
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
הערה - טקסט בקוד שמסביר אותו לבני אדם ואינו מבוצע על ידי המחשב.
ירושה - מנגנון בתכנות מונחה עצמים שבו מחלקה יורשת תכונות ופעולות ממחלקת אב, ויכולה להרחיב אותן.

יצירת Class Component
רוב הקומפוננטים ב-React נבנים כפונקציות, אבל אפשר לבנות קומפוננט גם כמחלקה. ההרצאה מראה את ההמרה על הקומפוננט Logo שנבנה קודם.
מתי לבחור במחלקה
קומפוננט אמור לתאר UI פשוט יחסית, ולכן פונקציה מספיקה ברוב המקרים. אם הקומפוננט מורכב ומצריך הרבה פונקציות פנימיות, מחלקה עשויה לפשט את הקוד. המרצה מבטיח להראות בהמשך מתי זה נחוץ.
השלבים העיקריים
1. משאירים את הפונקציה בהערה: מעבירים את הקומפוננט Logo הקיים להערה, כדי להשוות.
2. ירושה: בונים מחלקה באותו שם, Logo, שיורשת (extends) מ-Component של React. מייבאים אותו מ-react.
3. פונקציית render: בתוך המחלקה אי אפשר לכתוב return ישיר. מגדירים פונקציה בשם render, והשם חייב להיות בדיוק כזה. התוכן הקודם של הפונקציה, ה-return עם ה-JSX, נכנס אליה.
4. ייצוא: כמו קודם, export default לשם המחלקה.
5. בדיקה: אחרי רענון הלוגו מופיע באותו מקום בדיוק.
שימו לב
1. אם משנים את שם הפונקציה, מתקבלת שגיאה בהמשך: למחלקה אין render.
2. היתרון של מחלקה הוא האפשרות להוסיף לה פונקציות ושדות (data members), וזה נראה בהרצאות הבאות.
אחרי ההרצאה אפשר להמיר קומפוננט פונקציונלי פשוט לקומפוננט מחלקה.
השיעור הבא בקורס: העברת מידע בין קומפוננט אב לתתי-קומפוננטות שלו - ילדים ב-REACT

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

  1. 00:00

    מתי לבנות קומפוננט כ-Class

  2. 01:22

    המרת קומפוננט Logo ל-Class

  3. 01:58

    ירושה מהמחלקה Component

  4. 02:37

    הפונקציה render במקום return

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

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

  1. 00:02

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

  2. 00:33

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

  3. 01:07

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

  4. 01:20

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

  5. 01:40

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

  6. 02:09

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

  7. 02:37

    שמים את זה פה למעלה. מה אנחנו עושים בתוך ה-class? אנחנו לא יכולים לכתוב בתוך ה-class "return", וזה ברור.

  8. 02:44

    אנחנו בונים פונקציה שנקראת render, והיא חייבת להיקרא render, וכל הפונקציה הקודמת שהייתה לנו למעשה בפונקצ'יונל

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

ההרצאה הקודמת: הצגת תמונה ב-React

ההרצאה הבאה: העברת מידע בין קומפוננט אב לתתי-קומפוננטות שלו - ילדים ב-REACT

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

  • The R Class
  • Component Testing
  • Component Communitaction
  • Static Class

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

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