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

אבל לפני הכל ולממהרים - זה הלינק לקורס: https://www.tocode.co.il/bundles/react

1. קצת על ריאקט

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

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

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

2. מה יש בקורס

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

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

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

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

1. נדבר על פיתוח קומפוננטות בסיסיות ועיצוב הממשק.
2. נדבר על חיבור מספר קומפוננטות ופיתוח קומפוננטות גנריות: גם באמצעות Custom Hooks, גם באמצעות Higher Order Components וגם באמצעות Containers.
3. נדבר על שילוב קוד React עם קוד חיצוני, כולל דוגמאות לעבודה עם Youtube API, Firebase וכמובן Ajax ותקשורת עם צד שרת.
4. נדבר על ניהול State ביישום כולו באמצעות ספריית Redux (ואם אתם מעדיפים MobX אל דאגה - יש שיעור הרחבה עליה).
5. נדבר על ביצועים ונראה מה יכול לקלקל ביצועים של יישום ריאקט ואיך לבנות יישומים מהירים, וגם נלמד למה חשוב לשים לב כבר מהיום הראשון של הפיתוח כדי שהביצועים לא יתקלקלו בהמשך.
6. נפתח יישומי Single Page Applications עם React Router

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

3. קצת היסטוריה

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

התחלתי לעבוד עם ריאקט ב 2015 והתאהבתי מהרגע הראשון. מבחינתי ריאקט ב 2015 היה משמעותית יותר מעניין מ Angular (שהיה אז האלטרנטיבה המרכזית) ומ Backbone (שהיה מסורבל) וכמובן מכתיבת jQuery Plugins (שהרגישו מיושנים ולא יעילים). אחרי כמה חודשים של עבודה חשבתי שיהיה נחמד להקליט קורס וידאו בנושא. האתר הזה היה ממש בתחילת דרכו וכך נולד הגלגול הראשון של קורס ריאקט. אם יש לכם מנוי פעיל תוכלו עדיין לראות אותו כאן: https://www.tocode.co.il/bundles/react-old/

הקורס הורכב מ 31 שיעורים, היו שם לא מעט דוגמאות מעניינות והוא הציג גישה טובה לארכיטקטורת יישומים גדולים כולל סקירה של Flux, Redux ו Reflux (שכבר לא איתנו).

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

מה עושים? כמובן, מקליטים גירסא חדשה של הקורס הפעם עם עדכון כל הדוגמאות לכתיב החדש. על הדרך הוספתי הבהרות, שיניתי דברים שהיו מסובכים מדי והוספתי שיעורים חדשים על נושאים שהיו אופנתיים באותו זמן. התוצאה היתה הקורס שהיה באתר עד אתמול ועדיין אפשר למצוא אותו כאן: https://www.tocode.co.il/bundles/react15

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

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

הקורס הנוכחי אגב כולל 48 שיעורים ועוד 8 שיעורי הרחבה (אורך כולל של הקורס יחד עם שיעורי ההרחבה הוא כמעט 15 שעות וידאו). שני שיעורים לקחתי מהגירסא הקודמת ועוד 46 כתבתי מחדש. הוא מתחיל מההתחלה וכולל רק נושאים ותבניות שעבדו לי בתור מפתח ריאקט ושהחזיקו מעמד איתי ב-5 שנים בהן אני כותב בריאקט.

אני מאוד מרוצה מהתוצאה וממליץ לכם ללכת לראות גם אם כבר ראיתם את אחת הגירסאות הקודמות, וכמובן אם אתם חדשים לריאקט או שיש לכם חברים שרוצים להתחיל לכתוב בפריימוורק אז הקורס הוא נקודת התחלה מעולה. לינק לקורס? ברור: https://www.tocode.co.il/bundles/react