קורס React & Redux By Example שיעור תרגול פקדים

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/react/lessons/components-lab
#2

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

#3

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

אגב המלצה שלי לתרגיל הזה היא להשתמש רק ב Component אחד ואז הכל יהיה הרבה יותר קל

#4

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

#5

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

#6

צריך להיות בסוף:

ReactDOM.render(...)
#7

אוקיי עוד משהו כי עדיין לא עובד ??? ממש מתסכל !!!

#8

ברוך הבא ל JavaScript :slight_smile:

ב JS אסור לשים ירידת שורה אחרי ה return - כי הוא לא מבין שהשורה הבאה זה המשך של שורת ה return וחושב שהתכוונת ל return ריק

תחבר את השורות או שים סוגריים עגולים והכל מסתדר

לייק 1
#9

היי ינון,

תרגיל 4 לא הכי מובן. נראה שהמשפט הראשון חתוך וחסרים פרטים.

תודה.

#10

תודה תיקנתי. זה הטקסט המעודכן:

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

לאחר מכן עדכנו את הפקד כך שיוכל לקבל בתור Property ערך של צבע שיוצג לפני שמשתמש בחר את הצבע הראשון.

לייק 1
#11

הפתרונות שלי:

  1. https://codepen.io/itamardavidyan/pen/aREjZq
  2. https://codepen.io/itamardavidyan/pen/rqpKxa
  3. https://codepen.io/itamardavidyan/pen/zmpJGy
  4. https://codepen.io/itamardavidyan/pen/MPQYWV
  5. https://codepen.io/itamardavidyan/pen/WaMbOX
לייק 1
#12

הי איתמר,

כמה הערות לשיפור לפעמים הבאות:

  1. יותר מקובל להפעיל את ה bind פעם אחת ב constructor מאשר 5 פעמים ב render. כלומר בפיתרון הראשון יהיה יותר משתלם לכתוב:
  constructor(props){
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {value: "Hello World"};
  }

במקום לכתוב את זה ב render

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

תודה על ההערות :slight_smile:
תיקנתי את הפתרונות…

לייק 1