Site Logo
כניסה

הקורס עודכן לאחרונה בתאריך: מאי 2024

מה לומדים

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

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

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

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

 

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

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

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

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

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

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

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

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

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

בקצרה

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