שיעור 1

הקדמה, הכנת סביבת עבודה ופתיחת פרויקט חדש

התקנה ופתיחת פרויקט חדש בריאקט כולל הרצה

שיעור 2

צעדים ראשונים בעולם של ריאקט ו jsx

התחלת עבודה עם ריאקט והבנת הקבצים index.html, index.js

עבודה עם jsx – שיבוץ ערך של Js בתוך Html

שיבוץ ערך של פונקציה בתוך html

שילוב קלאס css באמצעות className

שילוב אלמנט בתוך אלמנט, ושילוב ערכי js עבור attr

תרגיל 2 חלק 1

תרגיל 2 חלק 2

תרגיל 2 חלק 3

תרגיל 2 חלק 4

שיעור 3

יצירת קומפוננטה

יצירת קומפוננטה מסוג פונקציה

יצירת קומפוננטה מסוג קלאס

קבלת ערכים – שימוש ב props

שילוב של קומפוננטה בתוך קומפוננטה

העברת ערכים לקומפוננטה פנימית יותר

סיכום תחימת קטע Html ע”י const, function, class

הגדרת defaultProps

תרגיל 3 חלק 1

תרגיל 3 חלק 2

תרגיל 3 חלק 3

תרגיל 3 חלק 4

תרגיל 3 חלק 5

שיעור 4

רינדור ה html באמצעות עדכון state

הוספת קונסטרקטור לקלאס קומפוננט והבנת הצורך בניהול state

הגדרת state בקומפוננטה של קלאס

הגדרת state בקומפוננטה מסוג פונקציה

בעיית שימוש בערכי state, props בתוך פונקצית setState

שליחת ערך state לקומפוננטה פנימית יותר

העמקה אל תוך state ושינוי props

שימוש ב state המשותף למספר קומפוננטות

setState is async

תרגיל 4 חלק 1

תרגיל 4 חלק 2

תרגיל 4 חלק 3

שיעור 5

אירועי Javascript של המשתמש כגון: onclick, onmouseover

שימוש באירועי html בקומפוננטה מסוג function

שימוש באירועי html בקומפוננטה מסוג class ופתרון בעיית ה this.

מניעת הפעלת פונקציה טרם האירוע, והתחליף של return false ע”י e.preventDefault

SyntheticEvents העמקה אל מאחורי הקלעים של האירוע

תרגיל 5 חלק 1

תרגיל 5 חלק 2

שיעור 6

הצגת html בתנאי

אפשרות החזרה שונה של קומפוננטה

השמת html שונה בתוך משתנה

שימוש בתנאי מקוצר בריאקט

הסרת התצוגה ע”י החזרת הערך null

תרגיל 6 חלק 1

תרגיל 6 חלק 2

שיעור 7

מערכים ו keys

חזרה על פונקצית map של javascript

שפיכת מערך של נתוני javascript אל תוך ה html

הוספת key לאלמנט html שמשתכפל

Key ייחודי ביחס לאח אלמנט בלבד

תרגיל 7 חלק 1

תרגיל 7 חלק 2

שיעור 8

טפסים – Forms

עידכון state ע”י onChange

בניית פונקציה כללית לעדכון ערכי הקלט

קבלת הערך של תגית select

תגית העלאת קבצים

Formik – הקדמה לשימוש בספרייה זו לצורך טפסים

תרגיל 8 חלק 1

תרגיל 8 חלק 2

שיעור 9

פיתוח קומפוננט גנרי

מהו קומפוננט גנרי? איך יוצרים קומפוננט גנרי?

הרחבה על קומפוננט גנרי

העמקה נוספת על קומפוננט גנרי ומימוש render props

תרגיל 9 חלק 1

תרגיל 9 חלק 2

תרגיל 9 חלק 3

שיעור 10

ייבוא קוד וטעינת קבצים בטעינה מאוחרת

שימוש בקוד הקיים בקובץ אחר import, export

אופן השימוש בטעינת מאוחרת React.lazy

תרגיל 10 חלק 1

שיעור 11

משתני state גלובליים – context

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

הגדרת ה context ושליפת הערך בקומפוננטה

הגדרת state גלובלי בשילוב context כולל אפשרות עידכון ה state

ריבוי ערכים ב context בודד, ריבוי אובייקטים של context, שימוש כפול

תרגיל 11 שלב 1

תרגיל 11 שלב 2

שיעור 12

ניהול שגיאות

הגדרת קומפוננטה שגיאות ע”י קומפוננטה עוטפת

הצגת קומפוננטה שגיאות באמצעות if, else

תפיסת שגיאות UI ע”י getDerivedStateFromError וגם componentDidCatch

הדמיית השגיאה במצב של production

בדיקת שגיאות באמצעות flow

שימוש ב strict mode

שיעור 13

גישה ישירה לרכיבי html באמצעות ref

גישה ל DOM באמצעות React.CreateRef

קבלת ref של קומפוננטה מסוג קלאס

גישה ל DOM מתוך פונקציה באמצעות UseRef

העברת ref פנימה באמצעות props

העברת ref באמצעות forwardref

ניהול השדות באמצעות ref ע”י uncontrolled component

getElementBYid vs. ref

סיכום רפרנס

תרגיל רפרנס

שיעור 14

שימוש חוזר בלוגיקה של קומפוננטה – HOC Highter Order Component

הגדרה בסיסית של HOC

העמקה אל תוך ה HOC

אין להגדיר בפונקצית rednder והעתקת פונקציה סטאטית

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

חילוץ חלק מהפרמטרים של props והעברתם הלאה

שיעור 15

שילוב של ריאקט עם ספריות חיצוניות כגון: Jquery

חיבור ריאקט עם Jquery – דוגמא מלאה

הרחבה על דוגמת ה chosen של Jquery

שילוב Jquery סטנדרטי וריבוי שימוש ב ReactDom.render

רינדור ה html ע”י forceUpdate

קישור data של רכיב חיצוני

שימוש ב web component

שיעור 16

העמקה אל תוך JSX

כתיבת קומפוננטה ללא React.createElement

קריאה לקומפוננטה באמצעות תגית – הרחבה

כללים ב JSX שלב א’

כללים ב JSX שלב ב’

שימוש ב props.children כפונקציה

אופן כתיבת attribute של for ושל aria

שיעור 17

שיפור ביצועים והעלאה מהירה של נתוני המסך

הצגת מאות אלפי רשומות באמצעות react-window

שימוש בקבצי production של ריאקט

מניעת ביצוע render באמצעות shouldComponentUpdate

הבנת האופטימיזציה shouldComponentUpdate

המרת הקומפוננטה ל PureComponent

שמירה על אובייקט מקור גם כאשר יש שינוי

הקפדה על הוספת key לאלמנט שמשתכפל

מדידת זמן עליית קומפוננטה ועידכון ע”י profiler

שיפור ביצועים באמצעות usememo

במקום PureComponent אפשר react.memo בפונקציה

תרגיל על shouldComponentUpdate

תרגיל usememo

שיעור 18

עוד קצת על ריאקט

אבחנה בין ריקאט עם es6 לבין גירסאות קודמות

עבודה עם ריאקט ללא jsx

הבדלי סינטקס בכתיבת html בריאקט

שילוב typescript עם ריאקט

האם יש הורשה בריאקט?

שיעור 19

פונקציות במחזור חיי קומפוננטה של קלאס

ComponentDidMount

CompnentDidUpdate

getDerivedStateFromProps

getSnapshotBeforeUpdate

unmountComponentAtNode

העמקה אל תוך render

העמקה אל הקונסטרקטור

תרגיל componentDidUpdate

תרגיל getDerrivedstateFromProps

שיעור 20

Hooks מתקדמים של ריאקט

הקדמה על הוקס

שלב ראשוני על useEffect

העמקה אל תוך useEffect

uselayouteffect

יצירת Hook חדש

תרגיל הוק

1 מ 2

הפרק הבא

הקדמה

קורס ריאקט מקיף react.js הקדמה, הכנת סביבת עבודה ופתיחת פרויקט חדש הקדמה