קורס ריאקט - React

  • 24 שעות
  • 154 הרצאות

תוכנית הלימודים

1מבוא והתקנה של ריאקט7 הרצאות
  1. מה לומדים בקורס ריאקט ?1 דק'
  2. מה זה ריאקט - React ?6 דק'
  3. מה זה Single Page Application ?20 דק'
  4. התקנה של ריאקט - React11 דק'
  5. יצירת פרויקט חדש ב-React9 דק'
  6. מבנה קבצים בפרויקט של React7 דק'
  7. שחזור node modules1 דק'
2מבנה בסיסי של אתר - React Layout7 הרצאות
  1. מה זה מבנה בסיסי של אתר - React Layout ?4 דק'
  2. עיצוב CSS ב-React4 דק'
  3. יצירת קומפוננטה של Layout ב-React26 דק'
  4. ריאקט - יצירת קומפוננטה8 דק'
  5. יצירת Header ב-React3 דק'
  6. יצירת Footer ב-React2 דק'
  7. ריאקט - יצירת תפריט באתר - Menu6 דק'
3מבנה קומפוננטות ב-React17 הרצאות
  1. שימוש ב-Fragment ב-React11 דק'
  2. שימוש ב-Interpolation ב-React7 דק'
  3. הסבר על Conditional Rendering18 דק'
  4. הצגת רשימה - React List15 דק'
  5. הצגת תמונה ב-React6 דק'
  6. יצירת Class Component4 דק'
  7. העברת מידע בין קומפוננט אב לתתי-קומפוננטות שלו - ילדים ב-REACT17 דק'
  8. העברת מידע בין קומפוננטות בעזרת prop ב-component class בריאקט10 דק'
  9. אירועים בריאקט - Events14 דק'
  10. אירועים בתוך class component ב-React24 דק'
  11. אירועים - העברת מידע בין קומפוננט ילד לאבא שלו - Child to Parent Event23 דק'
  12. ניהול State בתוך Class Component20 דק'
  13. ניהול מערכים בתוך State ב-Class Component19 דק'
  14. קליטת מידע מהמשתמש בריאקט React Two Way binding17 דק'
  15. גישה ישירה ל-DOM ב-React14 דק'
  16. פונקציות Lifecycle Hooks20 דק'
  17. שיפור ביצועים בריאקט בעזרת memo14 דק'
4עיצוב CSS בריאקט12 הרצאות
  1. זליגת React Leaking CSS6 דק'
  2. עיצוב דינמי בריאקט9 דק'
  3. עיצוב דינמי בריאקט עם Pseudo Selector10 דק'
  4. הסבר על CSS Modules11 דק'
  5. הסבר על Styled Components6 דק'
  6. יצירת Styled Components סטטי10 דק'
  7. יצירת Styled Components דינמי7 דק'
  8. הסבר על Material UI1 דק'
  9. התקנת Material UI16 דק'
  10. ספריית אייקונים של Material UI5 דק'
  11. התאמה אישית של עיצוב Material UI7 דק'
  12. הגדרת Theme ב-Material UI9 דק'
5React Hooks8 הרצאות
  1. הסבר על React Hooks3 דק'
  2. הסבר על useState ב-React Hooks9 דק'
  3. הבדלים בין CC State לבין FC State12 דק'
  4. ניהול Multiple State Values ב-React Hooks4 דק'
  5. שימוש ב-Destructuring Assignment עם useState7 דק'
  6. שימוש ב-useEffect - חלק 114 דק'
  7. שימוש ב-useEffect - חלק 23 דק'
  8. פונקציה useRef ב-React Hooks7 דק'
6קומפוננטות ו-Code Reuse7 הרצאות
  1. הסבר על Single Props Children13 דק'
  2. הסבר על Multiple Props Children5 דק'
  3. יצירת Service Class7 דק'
  4. יצירת Higher Order Component עם Function Components16 דק'
  5. שימוש Higher Order Component עם FC8 דק'
  6. יצירת Higher Order Component עם Class Component4 דק'
  7. בניית Custom React Hook7 דק'
7ניתוב - Routing9 הרצאות
  1. ניתוב בריאקט - React Routing6 דק'
  2. יצירת קומפוננטת ניתוב - ריאקט17 דק'
  3. הגדרת ניתוב בתפריט הראשי באתר - ריאקט8 דק'
  4. עיצוב קישורים בתפריט הראשי באתר - ריאקט7 דק'
  5. ניתוב ברירת מחדל - ריאקט3 דק'
  6. ריאקט - דף 404 - עמוד לא קיים / דף לא נמצא5 דק'
  7. טעינה עצלה ריאקט - Lazy Loading React14 דק'
  8. הצגת הודעה או תמונה בזמן טעינת דף באתר - ריאקט8 דק'
  9. שליחת פרמטרים לראוטינג - ריאקט17 דק'
8קבלת מידע משרת מרוחק - Web Access12 הרצאות
  1. הסבר על AJAX4 דק'
  2. התקנת Northwind אוטומטית דרך npm3 דק'
  3. יצירת מחלקת מודל - Model Class11 דק'
  4. שליפת מידע עם Azios20 דק'
  5. יצירת מחלקה עם כל ההגדרות - Config Class - חלק 17 דק'
  6. יצירת מחלקה עם כל ההגדרות - Config Class - חלק 215 דק'
  7. הצגת מידע באתר בצורת כרטיסיות12 דק'
  8. עיצוב כרטיסיות9 דק'
  9. הצגת פרטי מוצר17 דק'
  10. הצגת רשימת העובדים7 דק'
  11. הסבר על Interceptors בריאקט6 דק'
  12. העברת Interceptors לקובץ נפרד2 דק'
9טפסים בריאקט - React Forms11 הרצאות
  1. הוספת קומפוננטה בטפסים של ריאקט - React Forms6 דק'
  2. טופס בריאקט - React Forms5 דק'
  3. חיבור של רכיב לטופס עם React Hook12 דק'
  4. כפתור SUBMIT בטפסים של ריאקט - React Forms6 דק'
  5. שליחת מידע לשרת בריאקט - React Forms5 דק'
  6. שליחת תמונה לשרת בריאקט - React Forms7 דק'
  7. הצגת תמונה בריאקט12 דק'
  8. ולידציה בריאקט - React Validation7 דק'
  9. הצגת הודעות שגיאה למשתמש בריאקט - Validation Messages13 דק'
  10. עדכון מוצר בריאקט13 דק'
  11. מחיקת מוצר בריאקט3 דק'
10העברת מידע בין קומפוננטות - Redux20 הרצאות
  1. מה זה רידקס - Redux16 דק'
  2. התקנת רידקס - Redux4 דק'
  3. רידקס - יצירת Action Types6 דק'
  4. רידקס - יצירת Action2 דק'
  5. רידקס - יצירת Action Creators - ריאקט4 דק'
  6. רידקס - יצירת Reducer - ריאקט15 דק'
  7. רידקס - הפעלה ראשונה של AppState - ריאקט2 דק'
  8. רידקס - הוספת AppState נוסף - קורס React6 דק'
  9. יצירת Store ב-Redux6 דק'
  10. רידקס - Dispatching Data to the Store4 דק'
  11. רידקס - Reading Data from the Store9 דק'
  12. שימוש ברידקס - Redux9 דק'
  13. האזנה לשינויים ברידקס
    Redux Subscribing to Store Changes    10 דק'
  14. הפסקת האזנה לשינויים ברידקס
    Redux Unsubscribing to Store Changes    6 דק'
  15. שיטה לניהול Reducer אחד בלבד3 דק'
  16. רידקס - יצירת Data Service29 דק'
  17. ספריית react-redux בתוך CC15 דק'
  18. ספריית react-redux בתוך FC5 דק'
  19. רידקס - יצירת Middleware8 דק'
  20. רידקס - Using Redux Logger Middleware3 דק'
11ריאקט - אימות משתמשים
Authentication & Authorization14 הרצאות
  1. אימות משתמשים בריאקט
    Authentication & Authorization    13 דק'
  2. יצירת User Mode בריאקט2 דק'
  3. יצירת Redux AuthState10 דק'
  4. פתיחה ופענוח טוקן - Decoding the Token5 דק'
  5. יצירת Auth Service10 דק'
  6. יצירת Registration Component13 דק'
  7. יצירת Login Component3 דק'
  8. יצירת Logout Component6 דק'
  9. ריאקט - Blocking Backend Route9 דק'
  10. שליחת JWT Token - ריאקט6 דק'
  11. שליחת JWT דרך Interceptor - ריאקט7 דק'
  12. הגנה על אתר עם שם וסיסמה בריאקט - Blocking Component6 דק'
  13. שמירת טוקן ב-Session Storage8 דק'
  14. יצירת תפריט לוגין בריאקט14 דק'
12ריאקט - MobX12 הרצאות
  1. מה זה MobX - ריאקט5 דק'
  2. יצירת Global State בתוך MobX7 דק'
  3. הצגת Global State בתוך MobX9 דק'
  4. הסבר על MobX - Observable11 דק'
  5. הוספת פונקציות ופעולות - MobX Actions3 דק'
  6. שימוש ב-MobX Actions13 דק'
  7. הוספת Computed Values ב-MobX3 דק'
  8. הצגת Computed Values ב-MobX2 דק'
  9. הסבר על Decorators8 דק'
  10. הדגמה של Decorators3 דק'
  11. הסבר על Reactions ב-MobX9 דק'
  12. הדגמה של Reactions ב-MobX14 דק'
13ריאקט - Context5 הרצאות
  1. קורס ריאקט - Context3 דק'
  2. יצירת Context Object9 דק'
  3. ריאקט - Propagating a Context Object4 דק'
  4. שימוש ב-Context Object בתוך FC4 דק'
  5. שימוש ב-Context Object בתוך CC3 דק'
14ריאקט דיבאג - React Debugging8 הרצאות
  1. ריאקט דיבאג עם Chrome
    React Debugging    13 דק'
  2. ריאקט דיבאג עם VS Code
    Visual Studio Code    5 דק'
  3. תוסף מיוחד ל-Chrome לדיבאג
    React Developer Tool- Components    8 דק'
  4. תוסף מיוחד ל-Chrome לדיבאג
    React Developer Tools - Profiler    8 דק'
  5. רידקס - Redux Developer Tools11 דק'
  6. מובקס - MobX Developer Tools3 דק'
  7. התראות והודעות שגיאה בריאקט
    React Notifications    8 דק'
  8. הודעות שגיאה בריאקט16 דק'
15ריאקט - העלאת אתר לענן - Firebase4 הרצאות
  1. ריאקט - העלאת אתר לענן - Firebase - חלק 17 דק'
  2. ריאקט - העלאת אתר לענן - Firebase - חלק 210 דק'
  3. ריאקט - העלאת אתר לענן - Firebase - חלק 310 דק'
  4. ריאקט - עדכון של Firebase6 דק'
16סיכום קורס ופרויקט גמר2 הרצאות
  1. סיכום קורס ריאקט4 דק'
  2. קורס React – פרויקט סיום1 דק'

מה לומדים בקורס ריאקט?

קורס ריאקט (React) של PracticU הוא מסלול מלא לבניית אתרי Single Page Application: 154 הרצאות וידאו בעברית (כ-24 שעות) ב-16 פרקים. הוא מתחיל בהתקנה, ביצירת פרויקט ובמבנה הקבצים, ובונה לאורך הקורס אתר שלם מהשלד ועד העלאה לענן.

אחרי Layout עם Header, Footer ותפריט, לומדים את מבנה הקומפוננטות: Props, Events, Conditional Rendering, רשימות, State ו-Lifecycle ב-Class Component. בפרק העיצוב עוברים על CSS Modules, Styled Components ו-Material UI, ואז על React Hooks – useState, useEffect ו-useRef – על קומפוננטות פונקציונליות ועל Higher Order Component ו-Custom Hook.

משם הקורס מתקדם לנושאים של אפליקציה אמיתית: Routing עם דף 404 ו-Lazy Loading, קבלת מידע משרת מרוחק עם Axios ו-Interceptors, וטפסים עם ולידציה, שליחת תמונה ועדכון ומחיקה של מוצר.

הקורס מקדיש שלושה פרקים לניהול מצב: Redux עם Action, Reducer ו-Store והוספת Middleware, MobX עם Observable, Actions ו-Computed Values, ו-Context. פרק נפרד מלמד אימות והרשאות: Registration, Login ו-Logout, פענוח טוקן JWT, שליחתו דרך Interceptor ושמירתו ב-Session Storage.

בפרק על דיבאג מכירים את React Developer Tools, כלי הפיתוח של Redux ושל MobX וניפוי שגיאות ב-VS Code וב-Chrome. את הפרויקט מעלים לענן עם Firebase, ובסוף מסכמים בפרויקט סיום.

למי הקורס מתאים?

  • מי שרוצה ללמוד פיתוח Front-End מודרני ולבנות אתרים ואפליקציות ווב.
  • מפתחי JavaScript שרוצים לעבור לעבוד עם React.
  • בוגרי קורס HTML ו-CSS שמחפשים את הצעד הבא בדרך למפתח Web.
  • מפתחים שרוצים להבין לעומק Redux, MobX, Context ו-Routing בפרויקט שלם.

ידע בסיסי ב-HTML, CSS ו-JavaScript יעזור לכם להתקדם מהר יותר.

הקורס רחב במיוחד: 154 הרצאות מכסות גם את הגישה הוותיקה של Class Components וגם את הגישה המודרנית של Hooks, ולכן הוא מתאים גם למי שנתקל בקוד ישן בפרויקט קיים.

מה תדעו לעשות בסוף הקורס?

  • להקים פרויקט React, לבנות Layout ולחלק את האתר לקומפוננטות.
  • לעבוד עם Hooks ועם קומפוננטות פונקציונליות ולעצב עם Styled Components ו-Material UI.
  • להגדיר ניתוב בין עמודים וטעינה עצלה.
  • לשלוף נתונים משרת, להציג אותם ולשלוח טפסים עם ולידציה.
  • לנהל מצב עם Redux, MobX או Context.
  • לבנות הרשמה, כניסה והרשאות עם JWT.
  • להעלות אתר לענן עם Firebase.

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

איך לומדים?

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

שאלות נפוצות

האם קורס ריאקט מתאים למתחילים?

הקורס מתחיל בהתקנה וביצירת פרויקט ראשון, אבל כדאי להכיר HTML, CSS ו-JavaScript ברמה בסיסית כדי להתקדם בנוחות.

כמה זמן נמשך הקורס?

154 הרצאות וידאו, כ-24 שעות, ב-16 פרקים. אפשר להתקדם בקצב שלכם.

האם הקורס מכסה גם Redux?

כן. יש פרק שלם על Redux, ובנוסף פרקים על MobX ועל Context, כך שאפשר להשוות בין שלוש הדרכים לנהל מידע בין קומפוננטות.

האם לומדים Hooks או Class Components?

שניהם. הקורס מציג קומפוננטות Class וגם React Hooks עם קומפוננטות פונקציונליות, ומסביר את ההבדלים ביניהם.

כמה עולה הקורס?

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

האם מקבלים תעודה?

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