קורס React & Redux By Example שיעור הפקד הראשון שלי

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

למה ב- ReactDOM.render בפרמטר הראשון אני מעביר שוב CreaeElement - למה לא לשלוח את המשתנה שמייצג את המבנה app עצמו ?

#3

“מוזמנים ללחוץ על כפתור View Compiled כדי לראות את תוצאת ההמרה ולחזור לקוד ה JavaScript האמיתי שדפדפן מריץ.”
איפה יש כפתור כזה ? לא הבנתי - אתה מתכוון לקודפן - אבל בכלים של הפיתוח של הדפדפן - זה ישר מגיע כקוד JS רגיל , נכון?

#4

“מבחינת הגדרות השפה יש שני דברים חשובים לדעת: האחד הוא השימוש בסוגריים מסולסלים שמתורגמים ל React.createElement”
יש פה טעות - כי בדוגמא מופיע בכלל סוגרים עגולות ולא מסולסלות ?

#5

הי,

  1. מה זה ״המשתנה שמייצג את המבנה app עצמו״ ?
    כדאי לחשוב על אלמנטי ריאקט האלה בתור מחלקות (כי זה די מה שהם), כלומר כשאתה מגדיר:
const App = React.createClass(...)

אתה בעצם מגדיר:

class App extends React.Component { ... }

ואגב בגירסאות חדשות יותר (מופיע גם בקורס בשיעורים שמתיחסים לריאקט 16) יש העדפה לכתיב השני כלומר בצורה של קלאס.

אז אם אנחנו כותבים בצורה של קלאס צריך לעשות לזה משהו כמו ״new״ כדי לקבל את ה Object. וזו בדיוק המטרה של הפונקציה React.createElement. היא ה new של מחלקת פקד בריאקט.

ל ReactDOM.render צריך להעביר ״אוביקט״ ולא ״מחלקה״ ולכן מפעילים את React.createElement ומעבירים לה את התוצאה.

  1. כן מדובר על הכפתור בקודפן. בכלי הפיתוח רואים את ה Compiled ב View Source רגיל.

  2. תודה תוקן

לייק 1
#6

שלום. לא עובד בקודפן (באתר שלהם) הדבקתי את הקוד אבל בתצוגה לא מופיע כלום!

#7

הי @ziva

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

#8

image
image1919×954 56.8 KB

#9

ועכשיו עם babel:

image
image1919×951 57.5 KB

#10

הי,
אולי תוכלי לשים פשוט את הקישור לדף קודפן שיצרת? יהיה יותר קל להיכנס ולהסתכל

#11

#12

הי,

היו מספר תיקונים לבצע:

  1. הדוגמא בוידאו היתה על גירסא 15 של ריאקט, אבל את הקודפן שלך רשמת בגירסא 16. התחביר הדיפולטי קצת השתנה בין הגירסאות ואפשר לראות את ההבדל בוידאו ממש בשיעור הבא כאן:
    https://www.tocode.co.il/bundles/react/lessons/my-first-component-v16

בינתיים בשביל לגרום לתוכנית שלך לעבוד אפשר לשנות את הגירסא ל-15 או לדעתי יותר קל להוסיף ספריה בשם create-react-class שמאפשרת גם את התחביר הקודם. לקחתי את הקודפן שפירסמת והוספתי את הסיפריה וככה זה נראה אחרי התיקון שלי:

בעיה נוספת שהיתה בקוד שלך היא בשורה:

ReactDOM.render(React.createElement(App), document.getElementById('main'));

הבעיה שב HTML המילה main אינה ה ID של האלמנט אלא ממש השם שלו, ולכן צריך לשנות את השורה לקוד הבא:

ReactDOM.render(React.createElement(App), document.querySelector('main'));

הקודפן שהדבקתי כולל את שני השינויים

#13

תודה. העתקתי את הקוד שלך ואצלי משום מה זה לא שינה דבר.

#14

כי זה לא הקוד- אלה הספריות. יש ספריה נוספת שנקראת create-react-class שצריך להוסיף. את יכולה למצוא את זה אם תלחצי בקודפן שלי על הגדרות ה JavaScript ושם תוכלי לראות את שתי הספריות של ריאקט ואת הספריה החדשה

#15

טוב. סוף שיניתי את הקוד לפי השיעור של גרסה 16 ועכשיו זה נראה מצויין.
תודה על העזרה! ועל הקורס המצויין!
הנה הקישור.

לייק 1
#16

היי, מדוע לא מוסבר מה זה קודפן ומה בדיוק אני אמורה לעשות שם? ממש לא הבנתי מה אני צריכה להוסיף

#17

וגם מה ההבדל בין הדרך שבה השתמשת ב react.create class לבין class App extends Component

#18

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

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

גם הוא בחינם.

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

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

את יכולה להוריד קובץ זיפ עם כל קבצי הדוגמא מכל סרטי הוידאו בקישור הזה:
https://github.com/tocodeil/react-course-examples/archive/master.zip

#19

ההבדל בין React.createClass ל extends React.Component הוא בעיקר שיטת הכתיבה -

בעבר מתכנתי JavaScript כמעט ולא הכירו וכמעט ולא השתמשו במילה class, ולכן כשריאקט התחילה הדרך להגדיר פקד היתה לקרוא לפונקציה React.createClass ולהעביר לה את אוביקט האפשרויות.

בהמשך הזמן כתיב ES6 הפך ליותר מקובל בתעשיה וגם ריאקט יישרו קו והוסיפו את התמיכה בכתיב של class … extends React.Component כדרך נוספת להגדיר פקד. החל מגירסא 16 של ריאקט זאת הדרך המומלצת והתמיכה בדרך הישנה יותר אפשרית באמצעות תוספת של ספריה חיצונית. כדאי לוודא שאת מכירה לעומק ES6 לפני שמתחילה לכתוב ריאקט בשיטה זו ויש באתר קורס שלם בנושא:
https://www.tocode.co.il/bundles/es6

בחודשים האחרונים אנחנו רואים מעבר נוסף מכתיב ה class לכתיב מבוסס פונקציה. במהלך הקורס אני מראה גם את השיטה הזו. מומלץ מאוד גם אחרי שאת מגיעה לשיעורים האלה וקצת יותר מתמצאת בריאקט לצפות בשיעור ההרחבה בנושא React Hooks שעוסק בדרך שפקדי ריאקט הולכים להיכתב בעתיד:
https://www.tocode.co.il/past_workshops/71

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