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

1. מהי קומפוננטת ריאקט

דוגמא פשוטה יכולה להיות דף הבית של גוגל. בואו ניקח רגע להתבונן בו:

1. בשורה העליונה יש ארבעה לינקים:

   • תחילה תמונת פרופיל קטנה
   • אחריה תיבה עם נקודות קטנות
   • טקסט "חיפוש תמונות"
   • טקסט Gmail

2. באמצע יש לנו לוגו גדול של גוגל

3. אחריו רכיב החיפוש:

   • קודם תיבה גדולה וציור קטן של מקלדת בצד שמאל
   • ומתחת שני כפתורי החיפוש

4. שורת שפות עם קישורים לגוגל באנגלית ובערבית

5. למטה שתי שורות עבור ה Footer, הראשונה עם שם המדינה הנוכחי והשניה עם לינקים חשובים

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

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

2. קוד לקומפוננטה ראשונה ב Code Sandbox

בשביל לא להעמיס עם יותר מדי מידע לפני שמתחילים בואו נכנס לאתר https://codesandbox.io/dashboard ונבנה שם תוכנית ריאקט ראשונה. האתר הוא מעין סביבת פיתוח אינטרקטיבית שפועלת אונליין בתוך הדפדפן ולכן יש לה את היתרון שאפשר להתחיל לבנות פרויקט בלי להתקין כלום על המחשב. בשיעור הבא נראה איך להתקין את כל הכלים על המחשב ולפתח אצלנו על המכונה.

כנסו לאתר ובחרו Create Sandbox ואז בחרו את React. באופן אוטומטי האתר ייתן לכם קוד שכולל מספר קבצים. נתבונן בקובץ App.js שנראה כך:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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

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

3. הכח של קומפוננטות - שילוב ושימוש חוזר

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

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

function Person(props) {
  return (
    <div>
      <h2>Hello World!</h2>
    </div>
  );
}

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

function App() {
  return (
    <div className="App">
      <Person />
      <Person />
      <Person />
    </div>
  );
}

ועכשיו נקבל על המסך שלוש הודעות Hello World.

אבל הכיף לא נגמר כאן - קומפוננטה יכולה לקבל גם פרמטרים מהקומפוננטה שיצרה אותה, וכאן אנחנו רואים את ההתחלה של הכח של ריאקט. במקום ש Person ידפיס כל פעם את אותה הודעה בואו נעדכן את הקוד שלו כך שיקבל מבחוץ איזשהו שם וידפיס ברכת שלום עם השם שקיבל. נתחיל עם App: כמו שהעברנו מאפיין className ל div הראשי, כך אנחנו יכולים להעביר גם מאפיינים חדשים (שאנחנו ממציאים) לרכיבים שאנחנו יוצרים. הנה שלושת האנשים הפעם עם שמות:

function App() {
  return (
    <div className="App">
      <Person name="mike" />
      <Person name="dave" />
      <Person name="dana" />
    </div>
  );
}

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

function Person(props) {
  const propsJson = JSON.stringify(props);

  return (
    <div>
      <h2>Hello World!</h2>
      <pre>{propsJson}</pre>
      <hr />
    </div>
  );
}

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

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

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

function Person(props) {
  const { name } = props;

  return (
    <div>
      <h2>[{name}]: Hello World!</h2>
    </div>
  );
}

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

4. סיכום

בשיעור זה ראינו:

1. מהו רכיב ריאקט (לפעמים אכנה אותו בקורס "פקד" או "קומפוננטה". השם הכי מקובל הוא "קומפוננטה" אבל לא תמיד זה עובד בעברית)

2. איך לכתוב קוד של קומפוננטת ריאקט אונליין ב Code Sandbox.

3. איך לשלב מספר קומפוננטות בתוכנית כדי לבנות דפי אינטרנט גדולים.

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