React.JS: קורס אונליין בעברית

התקנה וצעדים ראשונים

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

• אורך כולל: 42 דקות

• 1. ברוכים הבאים לקורס
• 2. הפקד הראשון שלי
• 3. הפקד הראשון שלי על מכונת Windows
• 4. איתור שגיאות בתוכנית ריאקט
• 5. ממש קצת JSX כדי שנוכל להתקדם

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

עכשיו שיש לנו תבנית בסיסית לפרויקט נוכל להתחיל למלא אותה בקומפוננטות: נדבר על State ועל Props, נלמד מהו ה Virtual DOM ונכתוב קומפוננטות מועילות שיעזרו לנו בחיים ובפרויקט

• אורך כולל: 50 דקות

• 6. העברת קלט לפקד באמצעות Props
• 7. ניהול State של פקד
• 8. העברת State של פקד אחד בתור Prop לפקד אחר
• 9. כתיבת פקד בתור מחלקה
• 10. מהו Virtual DOM
• 11. תרגול פקדים

שילוב קומפוננטות בעמוד

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

• אורך כולל: 44 דקות

• 12. זרימת מידע ב React
• 13. איך לשמור מערך או אוביקט ב State
• 14. תוכנית לדוגמא: פיתוח מספר מונים וצביעת הגדול ביותר
• 15. שתי תיבות בחירה מתואמות לבחירת מדינה ועיר
• 16. תרגול: שילוב פקדים בעמוד

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

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

• אורך כולל: 102 דקות

• 17. עבודה עם רשימות והמאפיין key
• 18. דוגמא: סימון מרובה ומחיקה ברשימה בריאקט
• 19. תרגול עבודה עם רשימות
• 20. גישה ישירה לאלמנטים באמצעות ref
• 21. דוגמא: סימון מרובה ומחיקה באמצעות גישה ישירה ל DOM
• 22. תרגול: גישה ישירה ל DOM
• 23. הפקודה useEffect
• 24. דוגמא: יצירת טיימר כשפקד נכנס ויוצא מהעמוד
• 25. טעינת מידע ב Ajax באמצעות useEffect
• 26. דוגמא: עבודה עם Youtube API
• 27. תרגול: useEffect
• 28. מחזור חיים של פקד בכתיב המחלקות

שיתוף קוד בין קומפוננטות

בפיתוח מערכות גדולות נרצה לכתוב קוד גנרי יותר במקום להעתיק ולהדביק. במודול זה נלמד על התבניות של שיתוף קוד ביישומי ריאקט ונדבר על: Custom Hooks, Higher Order Components ועבודה עם React.Children

• אורך כולל: 48 דקות

• 29. שיתוף קוד באמצעות Custom Hook
• 30. שיתוף קוד באמצעות Higher Order Component
• 31. כתיבת רשימה גנרית עם Render Props
• 32. כתיבת פקדים גנריים באמצעות React.Children
• 33. תרגול: שיתוף קוד בין קומפוננטות

ביצועים ביישום ריאקט

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

• אורך כולל: 32 דקות

• 34. איך סופרים Render-ים
• 35. צמצום פעולות Render מיותרות באמצעות React.memo
• 36. צמצום קריאות ל Render באמצעות הפונקציה useCallback
• 37. תרגול: שיפור ביצועים ביישום ריאקט

פיתוח יישומים גדולים עם Redux

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

• אורך כולל: 76 דקות

• 38. יישומי ריאקט גדולים: תבנית Flux
• 39. עבודה עם Immutable Data
• 40. שלום Redux
• 41. חיבור ממשק משתמש ריאקטי ליישום Redux
• 42. תרגול: חיבור ריאקט ל Redux
• 43. פיצול אוביקט המידע ביישום Redux
• 44. פיתוח Redux Middlewares
• 45. שלד לפיתוח יישום Chat עם React ו Firebase
• 46. תרגול: Redux Middlewares

React Router

ריאקט אינה פריימוורק לפיתוח Single Page Applications אבל הרבה מתכנתים בונים SPA באמצעותה ולצורך כך נעזרים בספריה בשם React Router. במודול האחרון של הקורס נוסיף למערכת שלנו את React Router ונבנה גם אנחנו יישום עמוד יחיד עם מעברים מהירים בין הדפים.

• אורך כולל: 28 דקות

• 47. יישומי עמוד יחיד עם React Router
• 48. שינוי נתיב יזום עם אלמנט Redirect
• 49. שימוש בפרמטרים של הנתיב

סוף

• אורך כולל: 2 דקות

• 50. סוף