בניית סביבת ריאקט אמיתית

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

עד כה, השתמשנו בסקריפטים של ריאקט ושל babel. ריאקט הריץ את הספריה ו-babel פירסר בהנאה את ה-JSX. הכל נראה נהדר אבל… זה טוב ללימוד ולא לפרודקשן. הסביבה הזו מעולה ללימוד ולהתנסות. אבל לא תעבוד טוב אם אנחנו רוצים לבנות תוכנה ממשית. בשביל תוכנה כזו אנחנו צריכים בילד, אנחנו צריכים לעשות טרנספיילינג כמו שצריך ואז לקחת את הג׳אווהסקריפט שהתקבל ולהעביר אותו תהליכים שונים. צריך ראוטינג, lazy load, דחיסה ואגרגציה. את הבילד אנחנו עושים על בסיס node. לא צריך להכיר node לעומק אבל משתמשים בו. במאמר הזה אני מסביר איך מתקינים סביבה שיכולה לתמוך באתר מבוסס ריאקט מאפס. נגמרו המשחקים עם

<script src='https://unpkg.com/react@16/umd/react.development.js'></script>
<script src='https://unpkg.com/react-dom@16/umd/react-dom.development.js'></script>
<script src='https://unpkg.com/[email protected]/babel.min.js'></script>

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

<script src='https://unpkg.com/[email protected]/babel.min.js'></script>

גרמנו לספריה שנקראת babel (כתבתי עליה בפירוט פה) לעשות המרה של JSX לקוד ג׳אווהסקריפטי שהדפדפן יכול להתמודד איתו. לתהליך הזה קוראים טרנספילציה. מן הסתם, מדובר בתהליך יקר מבחינת זמן ומשאבים. כשאנחנו לומדים על קומפוננטות, אין לנו בעיה לעשות את זה ב-runtime, אבל בסביבה אמיתית, אם נקרא ל-babel – נקבל ביצועים ממש ממש רעים. הפתרון? לעשות את זה לפני שאנחנו מעלים לפרודקשן. על הדרך אפשר גם לבצע בדיקות סינטקס ופעולות מיניפקציה ואגרגרציה. לפעולה הזו קוראים ׳בילד׳ ואנחנו מבצעים אותה עם node.js. נשמע מסובך? הרבה יותר פשוט ממה שאתם חושבים. ראשית, התקינו node. זו פעולה פשוטה הן בחלונות והן בלינוקס/מק.

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

npx create-react-app my-app

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

npm start

מייד אחרי ההרצה, תפתח לנו אפליקצית ריאקט! כן כן! ב localhost:3000.

הכנתי גם סרטון מהיר. תראו כמה זה פשוט!

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

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

import React from 'react';

class MyComponent extends React.Component {
  render() {
      return <p>Hello world!</p>
  }
}

export default MyComponent;

יש כאן שני שינויים עיקריים ממה שהכרנו קודם. הראשון הוא import React from 'react'; מדובר בסינטקס של web component, הרכיב שאורז את כל האפליקציה ש"מייבא" את מה שאנחנו צריכים. במקרה הזה מדובר בריאקט. אם היינו צריכים להשתמש בקומפוננטה נוספת, היינו צריכים לייבא אותה באותו אופן.
השני הוא export default MyComponent; שמייצא את הקומפוננטה החוצה. זה הכל.

כדי להשתמש בקומפוננטה, נכנס ל app.js, נוודא שאנחנו עושים import:

import MyComponent from './components/MyComponent/MyComponent.jsx';

<MyComponent/>

מסובך? תראו כמה זה פשוט 🙂 הנה הסרטון הקצר שיצרתי פה מראה כמה זה קל.

מהנקודה הזו אנחנו מתחילים לעבוד על אפליקצית ריאקט. יש עוד המון דברים שלא כיסינו ב create react app שבאה עם המון דברים טובים כמו וובפאק, SAAS ממש מהקופסה, static code analysis ועוד ועוד. אבל אני משתדל להתרכז פה בריאקט ולא בתשתית המאוד מאוד רצינית שלו.

במאמר הבא נדבר על ראוטינג.

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