PracticU

מובקס - MobX Developer Tools

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › מובקס - MobX Developer Tools
מילון מושגים:
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.

מובקס - MobX Developer Tools
MobX Developer Tools היא תוספת ל-Chrome שבודקת את ה-state של MobX. ההרצאה מציגה אותה וממליצה להכיר אותה, למרות שהיא מצומצמת יחסית.
מה עושים
1. התקנה: מחפשים MobX developer tools ומוסיפים ל-Chrome. אין צורך לחבר שום דבר בקוד האפליקציה, והכלי פעיל מיד.
2. הקלטה: פותחים את החלונית, מקבעים אותה בצד, ולוחצים על כפתור ההקלטה. בהקלטה מוסיפים כמה פריטים לרשימת המכולת, מוחקים אחד ועוצרים.
3. מה רואים: לכל פעולה, למשל Add Item או Remove Item, הכלי מציג את הנתונים שהיו בה (name ו-amount), וגם את ה-Observers, כלומר מי מתבונן במידע. אפשר לחפש רק פעולות מסוג מסוים, ו-Clear מנקה את הרשימה.
הגבלות
בגרסה המוצגת הכלי רק מציג שינויים שהתבצעו, הרבה פחות מ-Redux DevTools. לדברי המרצה, מפתחי הכלי דיווחו שבגרסה הנוכחית של MobX ייתווספו אפשרות לשנות נתונים ופרופיילינג.
עכשיו אפשר להקליט את הפעולות ב-MobX ולראות איזה נתונים עברו ומי צפה בהם.
השיעור הבא בקורס: התראות והודעות שגיאה בריאקט React Notifications

פרקי ההרצאה: מובקס - MobX Developer Tools

  1. 00:00

    התקנת התוסף MobX DevTools

  2. 00:40

    הצגת החלונית ומעקב אחר שינויים

  3. 01:21

    איפוס והתחלת הקלטה חדשה

  4. 01:58

    פעולות שאינן נרשמות בהקלטה

תמלול ההרצאה: מובקס - MobX Developer Tools

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

  1. 00:02

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

  2. 00:32

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

  3. 01:03

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

  4. 01:35

    נתחיל להקליט ונוסיף ריט, הנה יש לנו פה 111, גו, נוסיף 222, נוסיף 333, 444, נמחק אחד, שימו לב שכל פעולה אנחנו ממש רואים אותה מתבצעת ונעצור את ההקלטה.

  5. 01:56

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

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

ההרצאה הקודמת: רידקס - Redux Developer Tools

ההרצאה הבאה: התראות והודעות שגיאה בריאקט - React Notifications

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

  • הסבר על Microsoft Developer Program

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

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