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

1. למה ריאקט?

פגישה עם ספריית צד-לקוח חדשה יכולה להיות מעייפת. צריך להתחיל מחדש ללמוד את כל המושגים הספציפיים לספריה, לנסות לבנות אתה מספר תוכניות לדוגמא ולרוב רק אחרי זה מתחילים לראות את הצדדים השליליים ודברים מתחילים להסתבך. 
בריאקט זמן הלימוד הוא מאוד קצר. כמה קצר? עד סוף הקורס תתחילו לכתוב תוכניות מלאות בריאקט, שלא יהיו שונות בהרבה מאלה שתכתבו בעוד חודשיים או שלושה. כלומר אנו לא מדברים פה על ספריה שנכנסים אליה מהר ואז מבינים את הטעויות שעשינו, אלא ספריה שמציגה גישה מאוד פשוטה וברורה לאיך צריך לכתוב דברים — ובכך מסדרת לנו את הקוד.
מצד שני קוד שמשתמש בריאקט יוצא קצר משמעותית ונותן ביצועים טובים יותר מקוד מקביל שמשתמש ב jQuery או אפילו באנגולר. כמה קצר? בחברת Wix הישראלית מספרים שהם שכתבו את אחד המוצרים שלהם לשימוש בריאקט, וקיבלו חסכון של מעל 70% במספר שורות הקוד של המוצר (ושיפור ביצועים של פי 2 ויותר). זמן ההכשרה של מתכנת חדש על פרויקט ירד משבועות למספר ימים.

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

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

1. זמן הלימוד קצר. עד סוף הקורס כבר תכתבו תוכניות מורכבות בריאקט.
2. התוצר הסופי כולל משמעותית פחות שורות קוד מאשר גירסת JavaScript ״נקי״ לאותה הבעייה.
3. הקוד שנשאר ממוקד ולכן קל מאוד לתקן או להוסיף עליו יכולות חדשות.

2. דוגמא לפיתוח משחקון מבוסס ריאקט

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

מוזמנים לעבור לטאב וידאו כדי לצפות בתהליך הבנייה.