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

1. הכלים הדרושים

הקמת סביבת פיתוח לריאקט דורשת התקנה של כלי בשם Webpack שיתרגם את קוד ה JSX שאנו כותבים לקוד JavaScript רגיל. בשביל להריץ את Webpack תצטרכו כלי נוסף בשם node.js: שהוא מנוע הרצת JavaScript חיצוני לדפדפן. בנוסף תצטרכו עורך טקסט עם תמיכה בקוד JSX. סביבת IntelliJ ואתה גם Webstorm מציגים יפה קוד JSX. בוידאו אני מציג התקנה של כלי בשם Visual Studio Code שמציע יכולות דומות ובחינם. ועכשיו לקישורים:

Node.JS Download: https://nodejs.org/en/

Visual Studio Code: https://code.visualstudio.com/

React Starter Project: www.tocode.co.il/bundles/react/react-starter.zip

2. מבנה פרויקט ריאקט מקומי

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

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

הקישור ל react-starter מציע מבנה כזה בדיוק: הקובץ הראשי main.jsx מבצע ייבוא של קובץ פקד ומציג אותו, וגם הקובץ הראשי וגם קובץ הפקד מייבאים את ספריית ריאקט. הרעיון הוא שמאחר וממילא אנחנו צריכים להריץ כלי חיצוני על קבצי ה jsx כדי להפוך אותם לקבצי JavaScript רגילים, עדיף כבר לנצל את הכלי ולתת לו גם לנהל עבורנו את התלויות. אנו נשתמש ב webpack שמסוגל לעשות את שני הדברים.

שימו לב לתחביר היבוא בקובץ main.jsx:

Import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './hello_world';

ReactDOM.render(<HelloWorld />, document.querySelector('main'));

הפקודה import מציינת יבוא של קובץ או ספריה חיצוניים. הקובץ המייבא מחליט כיצד לקרוא לפקד או לספריה ולכן יש לציין במפורש את השם React ו ReactDOM בשתי השורות הראשונות, ואת השם HelloWorld בשורה השלישית.

בצד השני הקובץ hello_world.jsx מגדיר פקד שניתן ליבוא מקבצים אחרים. שימו לב לתחביר הפעם בצד היצוא:

import React from 'react';

var HelloWorld = React.createClass({
  render: function() {
    return <h1>Hello World</h1>
  }    
});

export default HelloWorld;

השורה האחרונה היא החשובה: כשקובץ main.jsx קורא ל import, הדבר שהוא יקבל זה את המשתנה שהקובץ hello_world.jsx ביצע עליו export. מסיבה זו עלינו לזכור תמיד לבצע export בסוף כל פקד.

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

3. התקנת המודולים

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

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

npm install

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

4. איחוד קבצים באמצעות webpack

הכלי המרכזי שנשתמש בו בהרצה מקומית נקרא webpack. כלי זה לוקח את כל קבצי ה jsx שלנו ומאחד אותם לקובץ JavaScript יחיד בכתיב שדפדפן מכיר ויכול להריץ. אופן הפעולה מוגדר על ידי קובץ הגדרות webpack.config.js. נתבונן בקובץ ההגדרות מהדוגמא:

// webpack.config.js
module.exports = {
  entry: 'main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel', // 'babel-loader' is also a legal name to reference
        query: {
          presets: ['react', 'es2015'],
          plugins: ["transform-class-properties"]
        }
      }
    ]
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js', '.jsx']
  },
};

אפרט כאן מספר ערכים מרכזיים מהקובץ. מומלץ לקרוא את התיעוד לפרטים המלאים והתאמות:

1. הערך שכתוב בשדה filename הוא שם קובץ התוצאה. בקובץ הדוגמא השם bundle.js זהו קובץ ה JavaScript שנקבל אחרי הפעלת webpack. זה גם שם הסקריפט אותו אנו טוענים מקובץ ה html שלנו.

2. הערך שכתוב בשדה entry הוא שם קובץ ה jsx הראשי שלכם. שם תחל בניית עץ התלויות. במקרה שלנו הקובץ נקרא main.jsx.

3. הערכים בשדה moduleDirectories מציינים תיקיות לחיפוש מודולים, כלומר נתיבים שמהם webpack יטען קבצים כשאתם כותבים import. בדוגמא שלנו כל הקבצים נמצאים תחת תיקיית src או תחת תיקיית node_modules (עבור ספריות חיצוניות כדוגמת ספריית ריאקט עצמה).

הפעלת webpack לאחר התקנת הכלי מבוצעת משורת הפקודה באמצעות הקלדת:

node node_modules\webpack\bin\webpack.js -d -w

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

5. סיכום

את כל הפקודות יש להריץ מתוך Node Command Prompt מתוך התיקיה בה נמצא הפרויקט. ההוראות למערכת ההפעלה חלונות.

התקנת המודולים ו Webpack (יש להריץ פעם אחת בעת יצירת הפרויקט):

npm install

הפעלת Webpack כדי להמיר את קבצי ה JSX לקובץ JS יחיד:

node node_modules\webpack\bin\webpack.js -d

הפעלת Webpack במצב האזנה כך שכל שינוי בקובץ JSX מביא להמרה חוזרת של קבצי ה JSX:

node node_modules\webpack\bin\webpack.js -d -w