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

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

1. התחילו בקטן

ה Tutorial באתר של React הוא אחלה נקודת התחלה:
https://facebook.github.io/react/tutorial/tutorial.html

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

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

2. התקדמו מעבר לדוגמאות

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

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

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

סוג שלישי של פקדים כולל את אלו המשלבים קוד Legacy. קחו jQuery Plugin ישן ונסו לכתוב פקד React שמשתמש בו, כך שהפרמטרים לפלאגין יועברו בתור Properties לפקד. הפקד jQuery UI Sortable מושלם בתור תרגיל כי הוא כולל קוד שמשנה את ה DOM, מה שמאוד מכעיס את ריאקט.

אחרי זה כתבו בדיקות יחידה לכל אחד מהפקדים שכתבתם.

3. הזהרו מספריות ההרחבה

ספריות ההרחבה של React כוללות את Redux, MobX, React-Redux, React-Router, Redux-Forms, React-Forms ועוד רבות נוספות. כולן נכתבו במטרה לפתור או לעקוף מורכבות של ריאקט, ולכן כל אחת מסתירה את המורכבות שהיא באה לפתור. אבל הבעיה שבלי להבין את המורכבות קשה מאוד להבין את הפתרון.

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

4. בנו Higher Order Component

לכו לקרוא את זה:
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.7tddcxfqk

ואחרי זה נסו לממש Higher Order Component כדי לחסוך קוד באחד מהפקדים שכתבתם בדוגמאות הקודמות. גם HOC וגם Mixins הם שני המנגנונים המרכזיים בריאקט לשיתוף קוד בין פקדים. הראשון (HOC) הרבה יותר אופנתי ואתם תפגשו אותו בהרבה ספריות ריאקט שתעבדו אתן. הבעיה ששורשיו של מנגנון זה בעולם התכנות הפונקציונאלי, שזר למתכנתים רבים שהחלו את דרכם בעולם Object Oriented.

דוגמא טובה ל HOC היא הגנה על תוכן למנויים בלבד, או הצגת Spinner בעת טעינת מידע מהשרת עד הצגת הפקד המתאים.

5. הוסיפו הודעות לוג בתוך פונקציות render

לכו לקרוא את זה:
https://facebook.github.io/react/docs/optimizing-performance.html

ואחרי זה הוסיפו הודעות הדפסה בכל אחת מפונקציות ה render בפקדים שלכם. נסו להבין האם הפונקציה נקראת יותר פעמים ממה שהיא צריכה והאם אפשר לבטל חלק מהקריאות באמצעות shouldComponentUpdate. המשיכו לקרוא על Immutable Data והשתמשו במבני נתונים כאלה כדי לממש את shouldComponentUpdate בצורה יעילה.

6. תרמו קוד לאחת מספריות העזר

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

הספריה react-forms למשל עוזרת לכתוב טפסים בקלות. אחרי שראינו איך מיישמים לבד טפסים ואת האתגרים הקשורים לכו לקרוא את קוד הספריה: https://github.com/prometheusresearch/react-forms
ונסו להבין מה הם עושים אחרת ממה שאתם עשיתם. אחרי זה עברו לטאב Issues שם ונסו לעזור בתיקון חלק מהבעיות.

הספריה react-key-handler עוזרת לטפל בלחיצות מקלדת מתוך פקד ריאקט. לכו לראות מה היא עושה דומה או שונה מהקוד שאתם כתבתם ולאחר מכן נסו לתקן חלק מה Issues מעמוד הגיטהאב שלה:
https://github.com/ayrton/react-key-handler

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

7. רוצים ליווי במסע? אשמח לסייע

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

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