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

React & Redux By Example: קורס אונליין בעברית

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

התחל ללמוד כעת בחינם
סילבוס מפורט
מחירים
42 שיעורים
24 שעות
ינון פרק

מה לומדים

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

הקורס מורכב מ-10 שעורים המכסים יחדיו את כל מה שאתם צריכים לדעת כדי להתחיל לכתוב קוד ריאקט ולשלב אותו בתוכניות שלכם. אנו נתחיל בדברים הפשוטים, נראה כיצד לבנות פקד ריאקט וכיצד לשלב אותו בקוד קיים שלנו מבלי לפגוע בנגישות האתר למנועי חיפוש. לאחר הבנה של היסודות נוכל לבנות פקדים מורכבים: נדבר על העברת מידע בין פקדים, החל מתוכניות קטנות ועד ליישומי צד-לקוח מלאים הכוללים תקשורת עם צד-שרת ו Local Storage. בהמשך תלמדו על ארכיטקטורת Flux שפותחה בפייסבוק כטכנולוגיה מלווה לריאקט, וכיצד Flux ו React משתלבות יחד לפתח יישומי צד-לקוח מלאים.

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

הקורס מבוסס דוגמאות וכל נושא מוסבר באמצעות דוגמא מלווה אחת או יותר. כל דוגמאות הקוד מוצגות כ״קוד חי״ באמצעות Codepen. אתם יכולים לנסות אותן תוך כדי הלמידה, לשנות חלקים בקוד ולראות את ההשפעה באופן מיידי. בנוסף תקבלו קובץ ZIP להורדה עם כל הדוגמאות שהוצגו בקורס. בקטעי הווידאו המלווים תוכלו לראות את בניית הקוד שלב אחרי שלב.

הספריות שנלמדות בקורס כוללות: React, Reflux, React Router, React Bootstrap.
בנוסף נראה כיצד לשלב את ריאקט עם ספריית jQuery ו jQuery UI. 

תלמידים ממליצים

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

    Tomer Barda, Fullstack Developer

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

    עומר בן שושן, מפתח PHP

למה ללמוד אצלנו

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

ההצעה כוללת:

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

קורס של אתר ToCode: הכשרה מקצועית לשוק העבודה.

פרטים טכניים

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

בחרו מסלול לימוד

React & Redux By Example

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

React & Redux By Example

נסו בחינם
0₪
  • 12 שיעורים ראשונים לנסיון
  • מענה בעברית לכל שאלה דרך קבוצת הדיונים
  • מענה בעברית לכל שאלה דרך קבוצת הדיונים
  • כניסה לכל הסדנאות

React & Redux By Example

קורס מלא בתשלום
500₪ + מע״מ
  • גישה מיידית ולכל החיים לכל תכני קורס זה
  • תרגול מלווה ברמה גבוהה
  • מענה בעברית לכל שאלה דרך קבוצת הדיונים
  • כניסה לכל הסדנאות

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

    1

    התקנה ופיתוח תוכנית ראשונה

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

    2

    כתיב הפקדים

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

    3

    פקדים מורכבים

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

    • 13. עבודה עם רשימות ב React
    • 14. גישה ישירה ל DOM
    • 15. גישה ישירה ל DOM בריאקט 16
    • 16. עוד כמה טיפים לשילוב ES6 ו React
    • 17. סקירת תוכנית ריאקט המורכבת ממספר פקדים
    • 18. שיפור קוד התוכנית והתאמה לגירסא 16
    • 19. תרגול פקדים מורכבים
    • 20. מחזור חיים של פקד
    • 21. זרימת מידע ב React
    • 22. טיפול בילדים (children)
    • 23. תרגול מחזור חיים

    4

    שילוב פקדים עם העולם החיצון

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

    • 24. שימוש חוזר בקוד באמצעות Mixins
    • 25. שימוש חוזר בקוד באמצעות Higher Order Components
    • 26. שלוב React עם jQuery Plugin
    • 27. ריאקט ותקשורת Ajax
    • 28. ריאקט ותקשורת Ajax מבוססת הבטחות
    • 29. שיפור ביצועים באמצעות צמצום קריאות ל Render
    • 30. תרגול תקשורת

    5

    לחשוב ריאקט

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

    • 31. פיתוח משחק איקס עיגול
    • 32. חלוקת העבודה בין פקדים
    • 33. ריבוי לוחות למשחק איקס עיגול
    • 34. ניתוב צד-לקוח באמצעות React Router

    6

    ארכיטקטורת Flux ו Redux

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

    • 35. ארכיטקטורת Flux
    • 36. הספריה Immutable.JS
    • 37. תרגול: עבודה עם Immutable Data
    • 38. מבוא ל Redux
    • 39. חיבור ממשק משתמש מבוסס React
    • 40. הספריה react-redux
    • 41. פיצול אוביקט המידע
    • 42. תקשורת עם צד שרת ביישום Redux
    • 43. הספריה redux-form
    • 44. הגשת טופס לשרת
    • 45. וולידציה בצד לקוח
    • 46. טיפול בשגיאות שרת
    • 47. תרגול טפסים ברידאקס
    • 48. פרויקט סיכום