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

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

 

קורס ריאקט מעודכן לשנת 2020:
כולל ריאקט גרסה 17 בכתיב 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כתיבת רשימה גנרית עם Render Props
    • 32כתיבת פקדים גנריים באמצעות React.Children
    • 33תרגול: שיתוף קוד בין קומפוננטות

    6

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

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

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

    7

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

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

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

    8

    React Router

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

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