1. פיתוח פקד Hello World ב React

נעבור להציג קוד פקד Hello World בריאקט. פקד בנוי כעץ של פקדים פשוטים יותר במבנה שנקרא Virtual DOM. הפקד מחבר מספר פקדים פשוטים יותר ומאפשר טיפול בפעולות משתמש עליהם. הפקדים הפשוטים ביותר הם תגיות ה HTML הרגילות ואכן כחלק מספרית ריאקט כבר יצרו פקד לכל תגית HTML.

הפקד הראשון שלנו ייצג את המבנה הבא ב HTML:

<div class="my-first-component">
    <p>Hello World</p>
</div>

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

עוד רגע נגיע לקוד הפקד המלא, אבל תחילה הצגה של פונקציית render בלבד:

  render: function render() {
    return React.createElement(
      'div',
      { className: 'my-first-component' },
      React.createElement(
        'p',
        null,
        'Hello World'
      )
    );
  }

הפונקציה React.createElement מקבלת שלושה פרמטרים: הראשון הוא שם הפקד, השני אוביקט הפרמטרים לפקד זה (אלו ה Attributes שהייתם רושמים לו היתה זו תגית HTML אמיתית). החל מהפרמטר השלישי מועברים הילדים של הפקד, וניתן להעביר יותר מ-1. במקרה שלנו מדובר על פקד שמורכב מפקד div עם מאפיין class ובתוכו פקד p עם טקסט. שימו לב ליצירה המקוננת לפיה createElement החיצוני מקבל כפרמטר שלישי תוצאה של createElement נוסף. בנוסף, מאחר והמילה class היא מילה שמורה ב JavaScript, המאפיין class של התגית הוחלף למילה className. יש עוד כמה מאפייני כאלו ששינו את שמם במעבר מ HTML ל React ונדבר עליהם במהלך הקורס.

את הרווח הגדול מיצירת פקד React נראה רק בהמשך הקוד כשנגיע לרשום פקד זה למסך. הפונקציה ReactDOM.render מקבלת כפרמטר ראשון פקד ריאקט וכפרמטר שני אלמנט ב DOM. הפונקציה קוראת ל render של הפקד וכותבת את התוצאה לתוך אלמנט ה DOM המתאים. כך נראית התוכנית המלאה שמציגה את הפקד שיצרנו שלוש פעמים על העמוד. מוזמנים לעבור לטאבים JS ו HTML לראות את הקוד:

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

2. מבנה ספריות React

כבר מכתיבת התוכנית הראשונה תוכלו להבחין שיש לפחות שתי ספריות שאנו משתמשים בהן בכתיבת קוד ריאקט: הספריה React והספריה ReactDOM. ריאקט היא שפה לתיאור פקדים ומבצעת הפשטה של ההיבטים בפקד הקשורים להצגתו (למשל לכתיבתו ל DOM). ספריית ReactDOM אחראית על קבלת פקד וכתיבתו לחלון הדפדפן לתוך אלמנט DOM מסוים. חלוקה זו מאפשרת לכתוב ספריות עזר נוספות שיוכלו להציג את הפקדים בהקשרים אחרים: למשל ספריית React Native המנצלת את אותם הרעיונות כדי לרנדר פקדים לאפליקציות אייפון ואנדרואיד. אפשרות נוספת היא בניית קוד HTML מעץ הפקדים בריאקט שישלח ללקוח עבור דפדפנים שאינם תומכים ב JavaScript או עבור מנועי חיפוש.

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

3. מעבר ל JSX

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

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

var HelloWorld = React.createClass({
  render() {
    return (<div className="hello-world">
        <p>Hello {1+1} World</p>
      </div>)    
  }
});

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

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

מבחינת הגדרות השפה יש שני דברים חשובים לדעת: האחד הוא השימוש בסוגריים משולשים שמתורגמים ל React.createElement, והשני הוא סוגריים מסולסלים בתוך סוגריים משולשים שתפקידם לברוח החוצה מקוד JSX בחזרה ל JavaScript. הפקד הבא למשל מציג תוצאת חיבור מספרים באמצעות JSX:

<div className="my-first-component">
    <p>1+1={1+1}</p>
</div>

כשמתרגמים את זה לקוד JavaScript מקבלים את הקוד הבא:

  render: function render() {
    return React.createElement(
      'div',
      { className: 'my-first-component' },
      React.createElement(
        'p',
        null,
        '1+1=',
        1 + 1
      )
    );
  }

הביטוי 1+1 הפך לקוד JavaScript ונכתב בתור הילד האחרון של הפקד

.

4. תקציר הפקודות שהוצגו בפרק

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