שלום אורח התחבר

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

 

קורס ריאקט מעודכן לשנת 2020:
כולל ריאקט גרסה 16.12 בכתיב React Hooks
כולל React Router גרסה 5

לתשלום וכניסה לקורס לחצו כאן

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

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

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

מה לומדים

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

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

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

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

 

כמה זה עולה?

מנוי חודשי מתחדש לאתר
רק 117 ₪ בחודש
  • גישה מיידית לכל תכני הלימוד בכל הקורסים באתר
  • תרגול מלווה ברמה גבוהה
  • מענה בעברית לכל שאלה דרך קבוצת הדיונים
  • גישה לכל הוובינרים המוקלטים באתר
  • המנוי ללא התחייבות וניתן לבטל בכל עת
  • קראו עוד על מסלול המנויים
להצטרפות לחצו כאן והתחילו ללמוד עוד היום

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

מיד לאחר התשלום תקבלו גישה לכל תכני הלימוד באתר ותוכלו להתחיל ללמוד את הקורס ״React.JS״. המנוי נותן לכם:

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

המנוי הינו ללא התחייבות ומחויב מדי חודש בחודשו עבור אותו החודש.

סילבוס מפורט:

    1

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

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

    2

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

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

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

    3

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

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

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

    4

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

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

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

    5

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

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

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

    6

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

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

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

    7

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

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

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

    8

    React Router

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

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

    9

    סוף

    • 49. סוף