Site Logo
כניסה

מה לומדים

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

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

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

כל נושא בקורס מוסבר באמצעות דוגמאות קוד וכולל תרגול מעשי.

 

סילבוס מפורט
נתחיל את הקורס בסקירה של הספריה, כתיבת קומפוננטה ראשונה בענן ועל המחשב שלנו ובניית תבנית לפרויקט ריאקט הכולל קוד JavaScript, HTML ו CSS
1. ברוכים הבאים לקורס
תצוגה מקדימה
2. הרכיב הראשון שלי
תצוגה מקדימה
3. הרכיב הראשון שלי על מכונת Windows
תצוגה מקדימה
4. איתור שגיאות בתוכנית ריאקט
תצוגה מקדימה
5. ממש קצת JSX כדי שנוכל להתקדם
תצוגה מקדימה
6. יצירת פרויקט עם create-react-app
תצוגה מקדימה
עכשיו שיש לנו תבנית בסיסית לפרויקט נוכל להתחיל למלא אותה בקומפוננטות: נדבר על State ועל Props, נלמד מהו ה Virtual DOM ונכתוב קומפוננטות מועילות שיעזרו לנו בחיים ובפרויקט
7. העברת קלט לרכיב באמצעות Props
8. ניהול State של רכיב
9. העברת State של רכיב אחד בתור Prop לרכיב אחר
10. כתיבת רכיב בתור מחלקה
11. מהו Virtual DOM
12. תרגול רכיבים
קומפוננטות ריאקט עובדות טוב יותר כשהן יחד ובשיעור זה נלמד לשלב מספר קומפוננטות כדי לבנות מהן קומפוננטות גדולות יותר. נדבר על שיתוף מידע בין קומפוננטות ונראה איך בנויים ישומים גדולים יותר בריאקט
13. זרימת מידע ב React
14. איך לשמור מערך או אוביקט ב State
15. תוכנית לדוגמא: פיתוח מספר מונים וצביעת הגדול ביותר
16. שתי תיבות בחירה מתואמות לבחירת מדינה ועיר
17. תרגול: שילוב רכיבים בעמוד
כתבנו מספיק קומפוננטות כדי להמשיך ולצלול לתוך ריאקט וליכולות של כל קומפוננטה. במודול זה נדבר על רשימות והמאפיין key, על גישה ישירה ל DOM עם useRef ועל תקשורת עם צד שרת ועבודה עם APIs חיצוניים באמצעות useEffect
18. עבודה עם רשימות והמאפיין key
19. דוגמא: סימון מרובה ומחיקה ברשימה בריאקט
20. תרגול עבודה עם רשימות
21. גישה ישירה לאלמנטים באמצעות ref
22. דוגמא: סימון מרובה ומחיקה באמצעות גישה ישירה ל DOM
23. תרגול: גישה ישירה ל DOM
24. הפקודה useEffect
25. דוגמא: יצירת טיימר כשרכיב נכנס ויוצא מהעמוד
26. טעינת מידע ב Ajax באמצעות useEffect
27. דוגמא: עבודה עם Youtube API
28. תרגול: useEffect
29. מחזור חיים של רכיב בכתיב המחלקות
בפיתוח מערכות גדולות נרצה לכתוב קוד גנרי יותר במקום להעתיק ולהדביק. במודול זה נלמד על התבניות של שיתוף קוד ביישומי ריאקט ונדבר על: Custom Hooks, Higher Order Components ועבודה עם React.Children
30. שיתוף קוד באמצעות Custom Hook
31. שיתוף קוד באמצעות Higher Order Component
32. כתיבת רשימה גנרית עם Render Props
33. כתיבת רכיבים גנריים באמצעות React.Children
34. תרגול: שיתוף קוד בין קומפוננטות
מה גורם לאפליקציה שלכם לעבוד לאט? איך מזהים בעיות ביצועים? ואיך מתקנים אותן מרגע שזיהיתם? במודול זה נפתח את ה React Profiler, נבין מה קורה מתחת לפני השטח בעבודה עם ריאקט ואיזה דברים יכולים להאט את היישום וכמובן נלמד טכניקות לשיפור ביצועים ביישום ריאקט.
35. איך סופרים Render-ים
36. צמצום פעולות Render מיותרות באמצעות React.memo
37. צמצום קריאות ל Render באמצעות הפונקציה useCallback
38. תרגול: שיפור ביצועים ביישום ריאקט
בעת פיתוח יישומים גדולים הרבה פעמים נשתמש בספריה משלימה לריאקט לניהול הארכיטקטורה. שתי הספריות המובילות הן Redux ו MobX ובמודול זה נדבר עליהן ונראה איך לכתוב יישום באמצעות כל אחת מהספריות.
39. יישומי ריאקט גדולים: תבנית Flux
40. עבודה עם Immutable Data
41. שלום Redux
42. מעבר ל Redux Toolkit
43. חיבור ממשק משתמש ריאקטי
44. פיתוח פעולות מורכבות
45. כתיב הבנאי של Extra Reducers
46. תרגול רידאקס 1
47. פיתוח Redux Middlewares
48. פיתוח שלד ליישום צ׳ט עם רידאקס ופיירבייס
49. תרגול: Redux Middlewares
ריאקט אינה פריימוורק לפיתוח Single Page Applications אבל הרבה מתכנתים בונים SPA באמצעותה ולצורך כך נעזרים בספריה בשם React Router. במודול האחרון של הקורס נוסיף למערכת שלנו את React Router ונבנה גם אנחנו יישום עמוד יחיד עם מעברים מהירים בין הדפים.
50. היכרות עם React Router
51. נתיבים מקוננים
52. ניווט אוטומטי
53. היכרות עם Data API
54. טעינת מידע מה Router
55. הגשת טפסים אסינכרונית
56. הצגת מסך טעינה
בפרק זה נכיר את ריאקט נייטיב באמצעות כתיבת משחק איקס עיגול והפעלת המשחק על טלפון אייפון ואנדרואיד
57. התקנה ויצירת שלד פרויקט
58. קומפוננטת תפריט ראשי
59. קומפוננטת המשחק
60. ניווט בין מסכים
61. לוגיקת המשחק
62. בניה ב XCode וב Android Studio
63. סוף
Teacher

מדריך הקורס - ינון פרק

הי! אני ינון פרק. אני מתכנת שכותב קוד כל יום מאז שנת 2002, ומשנת 2012 גם מדריך קורסים בפיתוח למתכנתים בחברות תוכנה מובילות בארץ. בין השאר לימדתי ב Intel, IBM, Amdocs, Sapiens, eBay ובעוד עשרות חברות הייטק נוספות כאן בארץ.

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

איך זה עובד - מסלול מנוי חודשי

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

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

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

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

בקצרה

  • 63 שיעורים
  • 9 שעות וידאו
  • גישה לכל תכני הקורס ולכל שאר הקורסים באתר
  • אתם לא לבד! עזרה מקצועית דרך המייל ובקבוצת הדיונים
    • הצטרפו עכשיו