קורס ריאקט מקיף react.js

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

עברית מלאה

זמין לצפיה בכל זמן וללא הגבלה

למי מיועד ?

למתכנתים מקצועיים עם ידע מקדים של JaveScript, Html, Css שרוצים להיות בשיא – ברמת בכירים ומובילי צוות. אין צורך בידע מקדים בריאקט, לומדים ממש מההתחלה ועד לרמה הגבוהה

מה תרוויחו מהקורס?

תתקדמו למומחי ריאקט שבטופ, שמקבלים יותר

מחיר

3,500 2,750 ₪

עד 12 תשלומים

התחל

קנה עכשיו

כבר רשום?

כניסה לקורס

 5/5

תוכן הקורס

הרחב הכל

שיעור 1

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

הרחב

תוכן השיעור

0% הושלמו 0/2 שלבים

הקדמה

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

שיעור 2

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

הרחב

תוכן השיעור

0% הושלמו 0/10 שלבים

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

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

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

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

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

שיעור 3

הרחב

תוכן השיעור

0% הושלמו 0/12 שלבים

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

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

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

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

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

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

שיעור 4

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

הרחב

תוכן השיעור

0% הושלמו 0/11 שלבים

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

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

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

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

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

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

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

שיעור 5

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

הרחב

תוכן השיעור

0% הושלמו 0/6 שלבים

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

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

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

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

תרגיל 5 חלק 1

תרגיל 5 חלק 2

שיעור 6

הצגת html בתנאי

הרחב

תוכן השיעור

0% הושלמו 0/6 שלבים

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

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

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

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

תרגיל 6 חלק 1

תרגיל 6 חלק 2

שיעור 7

מערכים ו keys

הרחב

תוכן השיעור

0% הושלמו 0/6 שלבים

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

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

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

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

תרגיל 7 חלק 1

תרגיל 7 חלק 2

שיעור 8

טפסים – Forms

הרחב

תוכן השיעור

0% הושלמו 0/7 שלבים

עידכון state ע”י onChange

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

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

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

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

תרגיל 8 חלק 1

תרגיל 8 חלק 2

שיעור 9

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

הרחב

תוכן השיעור

0% הושלמו 0/6 שלבים

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

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

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

תרגיל 9 חלק 1

תרגיל 9 חלק 2

תרגיל 9 חלק 3

שיעור 10

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

הרחב

תוכן השיעור

0% הושלמו 0/3 שלבים

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

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

תרגיל 10 חלק 1

שיעור 11

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

הרחב

תוכן השיעור

0% הושלמו 0/6 שלבים

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

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

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

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

תרגיל 11 שלב 1

תרגיל 11 שלב 2

שיעור 12

ניהול שגיאות

הרחב

תוכן השיעור

0% הושלמו 0/6 שלבים

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

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

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

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

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

שימוש ב strict mode

שיעור 13

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

הרחב

תוכן השיעור

0% הושלמו 0/10 שלבים

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

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

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

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

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

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

FindDomNode

getElementBYid vs. ref

סיכום רפרנס

תרגיל רפרנס

שיעור 14

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

הרחב

תוכן השיעור

0% הושלמו 0/5 שלבים

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

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

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

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

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

שיעור 15

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

הרחב

תוכן השיעור

0% הושלמו 0/6 שלבים

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

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

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

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

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

שימוש ב web component

שיעור 16

העמקה אל תוך JSX

הרחב

תוכן השיעור

0% הושלמו 0/6 שלבים

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

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

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

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

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

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

שיעור 17

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

הרחב

תוכן השיעור

0% הושלמו 0/12 שלבים

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

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

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

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

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

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

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

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

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

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

תרגיל על shouldComponentUpdate

תרגיל usememo

שיעור 18

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

הרחב

תוכן השיעור

0% הושלמו 0/5 שלבים

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

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

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

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

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

שיעור 19

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

הרחב

תוכן השיעור

0% הושלמו 0/9 שלבים

ComponentDidMount

CompnentDidUpdate

getDerivedStateFromProps

getSnapshotBeforeUpdate

unmountComponentAtNode

העמקה אל תוך render

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

תרגיל componentDidUpdate

תרגיל getDerrivedstateFromProps

שיעור 20

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

הרחב

תוכן השיעור

0% הושלמו 0/8 שלבים

הקדמה על הוקס

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

העמקה אל תוך useEffect

1 מ 2