Site Logo
כניסה

מה לומדים

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

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

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

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

 

סילבוס מפורט
ספריית ריאקט מציעה גישה חדשה לישומי צד-לקוח. במקום להפריד בין ה HTML, ה CSS וה JavaScript — בריאקט מחפשים לזהות אלמנטים ויזואליים שמופיעים על המסך ולאחד את הקוד לפיהם. אלמנטים אלו נקראים פקדים. בפרק זה נלמד איך ריאקט עובדת, נבין איך לכתוב תוכניות פשוטות בריאקט ואיך לשלב את ריאקט בתוכנית קיימת שלנו.
1. סקירת הספריה והקורס
תצוגה מקדימה
2. הפקד הראשון שלי
תצוגה מקדימה
3. הפקד הראשון שלי - ריאקט 16
תצוגה מקדימה
4. שילוב ריאקט בקוד שלנו
תצוגה מקדימה
5. שילוב ריאקט 16 בקוד שלנו
תצוגה מקדימה
פקדים הם אבן הבנין המרכזית שלנו בבואנו לכתוב תוכניות ריאקט. פקד הוא רכיב ממשק ויזואלי המופיע במספר מקומות על המסך. כתיב הפקדים של ריאקט מאפיין דרך אחידה לכתוב פקדים בזכותה ריאקט מצליחה להציג ביצועים מעולים של קוד צד הלקוח. בפרק זה נלמד כיצד לעבוד עם פקדים, איך להגדיר קלטים ומצב לכל פקד ואת הדרכים השונות לכתוב פקדים בריאקט, כולל כתיב המחלקות של ES6.
6. העברת קלט לפקד באמצעות Props
תצוגה מקדימה
7. העברת קלט לפקד באמצעות Props בריאקט 16
תצוגה מקדימה
8. ניהול State של פקד
תצוגה מקדימה
9. ניהול State של פקד בריאקט 16
תצוגה מקדימה
10. כתיב המחלקות
תצוגה מקדימה
11. פקדים פונקציונאליים
תצוגה מקדימה
12. תרגול פקדים
תצוגה מקדימה
כתיב מובנה לשילוב בין פקדים מאפשר לחבר את כל מה שלמדנו ולבנות יישומים גדולים בריאקט, ולחלק קוד ארוך למספר פקדים. בפרק זה נלמד כיצד להעביר מידע ולשלב קוד בין פקדים: נדבר על מחזור חיים של פקד ופונקצות ריאקט מיוחדות לטיפול באירועים, נראה כיצד לשלב גישה ל DOM יחד עם קוד ריאקט ונסיים את הפרק בדוגמא מקיפה לשילוב מספר פקדים
13. עבודה עם רשימות ב React
14. גישה ישירה ל DOM
15. גישה ישירה ל DOM בריאקט 16
16. עוד כמה טיפים לשילוב ES6 ו React
17. סקירת תוכנית ריאקט המורכבת ממספר פקדים
18. שיפור קוד התוכנית והתאמה לגירסא 16
19. תרגול פקדים מורכבים
20. מחזור חיים של פקד
21. זרימת מידע ב React
22. טיפול בילדים (children)
23. תרגול מחזור חיים
רוב התוכניות שלכם יצטרכו לעבוד גם עם קוד ישן, ובריאקט יש מספר תבניות לעשות זאת. בפרק זה נלמד כיצד לשלב קוד jQuery Plugins ישנים בתוכניות, כיצד לתקשר עם ממשקי Ajax קיימים בצד השרת ואיזה היבטים עשויים להשפיע על ביצועים של תוכניות בריאקט.
24. שימוש חוזר בקוד באמצעות Mixins
25. שימוש חוזר בקוד באמצעות Higher Order Components
26. שלוב React עם jQuery Plugin
27. ריאקט ותקשורת Ajax
28. ריאקט ותקשורת Ajax מבוססת הבטחות
29. שיפור ביצועים באמצעות צמצום קריאות ל Render
30. תרגול תקשורת
אתם יודעים לכתוב ריאקט, ועכשיו מה? עכשיו הגיע הזמן להבין שריאקט היא לא רק ספריה אלא גם צורת חשיבה אחרת. במודול זה נבנה צעד אחר צעד משחק איקס עיגול ונראה איך צורת החשיבה של ריאקט עוזרת לנו לכתוב ולאפיין אחרת את קוד התוכנית כך שתנצל בצורה אופטימלית את היכולות של ריאקט.
31. פיתוח משחק איקס עיגול
32. חלוקת העבודה בין פקדים
33. ריבוי לוחות למשחק איקס עיגול
34. ניתוב צד-לקוח באמצעות React Router
ככל שהיישום גדל ואתם משתמשים ביותר פקדים, כך מתחזק הצורך לסנכרן בין הפקדים וריאקט לבדה אינה מספיקה. במודול זה נדבר על ארכיטקטורת פלאקס למימוש יישומים גדולים בריאקט. אנו נדבר על מימוש בשם 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. פרויקט סיכום
Teacher

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

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

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

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

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

Tomer Barda, Fullstack Developer

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

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

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

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

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

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

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

בקצרה

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