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

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

1. יצירת פרויקט ריאקט עם create-react-app

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

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

החיסרון בכלי כזה, והוא בולט במיוחד עם create-react-app, הוא שיש עומס פיצ'רים שאת רובם אנחנו לא צריכים בפרויקט, ולפעמים אפילו פיצ'ר אחד שחסר לנו בכלי יהיה לנו קשה להוסיף כי אין לנו שליטה על הגדרות הבניה.

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

מאחר וכבר התקנו את node.js על המחשב בשיעור הרכיב הראשון שלי על מכונת Windows, אני משתמש באותה התקנה, פותח חלון cmd בתיקיה שבה אני רוצה ליצור את הפרויקט ושם רושם:

npx create-react-app@latest react-demo-1

המילה האחרונה בשורה, react-demo-1 היא שם הפרויקט. אתם יכולים לבחור כל שם שתרצו.

אחרי המתנה קצרה תקבלו תיקיה חדשה בשם react-demo-1 ובתוכה פרויקט ריאקט חדש. אלה הקבצים המרכזיים בפרויקט:

2. סקירת קוד הפרויקט

נתחיל את הסקירה בתיקיית src, שם נמצא שני קבצים מעניינים: הקובץ App.js כולל את הקומפוננטה המרכזית של שלד הפרויקט, והקובץ index.js כולל קוד איתחול שטוען את אותה קומפוננטה.

הקובץ index.js הוא הקצר מבין השניים ולכן נתחיל ממנו:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

הוא מתחיל בבלוק של import-ים כדי לייבא את כל הדברים שהוא תלוי בהם. שורת הקוד המרכזית בקובץ היא:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

הקוד הזה דומה לקריאה ReactDOM.render שראינו יחד, אבל הוא גירסה חדשה יותר שלה. יצירת שלד פרויקט עם create-react-app אומר שאנחנו מקבלים את הגירסה החדשה ביותר של ריאקט, ובגירסה 18 ריאקט החליפו את הקריאה ל ReactDOM.render בקריאה ל createRoot. מבחינה מעשית ולצורך כל הדוגמאות שלנו בקורס שני הדברים עובדים אותו דבר ותפקידם לתפוס אלמנט ב DOM ו"לצייר" לתוכו את עץ הקומפוננטות של ריאקט.

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

הקובץ השני המעניין הוא App.js. זה הקוד שלו בשלד שנוצר:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

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

3. הרצת הפרויקט ושינוי הקוד

נעבור לשורת הפקודה ונפעיל את הפקודה:

npm run start

אם לא שברתם כלום התוצאה תהיה הפעלה של שרת פיתוח מקומי, קצת דומה ל webpack-dev-server שהפעלנו לבד באחד השיעורים הקודמים. כניסה בדפדפן לשרת המקומי בפורט 3000 תציג את קומפוננטת הדוגמה App. בשביל המשחק בואו נשנה את הקוד של App ונשמור, ונוכל לראות את הגירסה החדשה מתעדכנת מיידית בדפדפן.

4. עבודה עם CSS

בשלד הפרויקט שיצר create-react-app אין קובץ HTML. בשביל לשלב קבצים שבדרך כלל היינו טוענים מה HTML, כמו למשל קבצי CSS, אנחנו עוברים לטעון אותם מתוך JavaScript. הפקודה:

import './App.css';

שמופיעה בקובץ App.js טוענת את הקובץ App.css, שזה קובץ CSS רגיל לגמרי. כנסו לקובץ ונסו לשנות את אחת ההגדרות ותוכלו לראות את העמוד מתעדכן בזמן אמת בדפדפן.

5. הוספת ספריות מ npm

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

בפרויקט שנוצר על ידי create-react-app אני יכול להוסיף ספריית קוד חיצוני מ npm באמצעות הפקודה npm install. בשביל הדוגמה נוסיף את הספריה lodash, שזו ספריה לכל מיני פונקציות עזר קטנות ב JavaScript. אני מפעיל משורת הפקודה:

npm install --save-dev lodash

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

import './App.css';
import _ from 'lodash';

function App() {
  const days = ['Sunday', 'Monday', 'Tuesday'];

  return (
    <div className="App">
      <p>The first day of the week is {_.head(days)}</p>
    </div>
  );
}

export default App;

6. מעבר למצב פרודקשן

הפקודה npm run start הפעילה שרת פיתוח מקומי, אבל כמו בתבנית הפרויקט שיצרתי לבד, גם בתבנית פרויקט של create-react-app שרת הפיתוח המקומי לא מתאים למצב ייצור. אנחנו לא צריכים שאפליקציה במצב ייצור תסתכל על מערכת הקבצים ותטען מחדש קבצים כל פעם שמשהו משתנה.

המעבר למצב ייצור כרוך בהפעלת פקודה שתבנה את כל הפרויקט שלנו לקבצים סטטיים, כאלה שאפשר להעלות על שרת אינטרנט או אפילו ל CDN. הפקודה שיוצרת את הקבצים היא:

npm run build

נפעיל את הפקודה ואנחנו רואים שקיבלנו תיקיה חדשה בשם build. בתוך התיקיה כבר יש קובץ בשם index.html וגם קבצי ה js וה css שלנו שם, אחרי שעברו כיווץ. המטרה של הכיווץ היא בעיקר לחסוך מקום בעת העברת הקבצים לדפדפן. מבנה הפרויקט לא מאפשר הפעלה שלו באמצעות לחיצה כפולה על קובץ ה html, אבל אני כן יכול להשתמש בתוכנת שרת ווב כמו http-server כדי להגיש את הקבצים. נפעיל מתוך תיקיית build את הפקודה:

npx http-server

ועכשיו בגלישה ל localhost:8080 אני מקבל את הפרויקט. שינוי בקוד הפרויקט לא יגרום לטעינה מחדש של העמוד בדפדפן ומבט בטאב network בכלי הפיתוח יראה לי שכל הקבצים שקיבלנו הגיעו אחרי כיווץ.

7. סיכום - יצירת פרויקט

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

ל create-react-app יש תמיכה בטמפלייטס נוספים, כולל אפשרות לבנות טמפלייט בעצמכם, וכך אפשר ליצור בקלות שלד לפרויקט TypeScript או כל סוג פרויקט ריאקטי אחר שאתם צריכים.

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

פיצ'ר אחרון של create-react-app שלא דיברתי עליו בשיעור הזה הוא התמיכה המובנית בבדיקות. אני ממליץ אחרי שתסיימו את קורס זה לצפות בוובינר בדיקות בריאקט שהעברתי בקישור: https://www.tocode.co.il/past_workshops/108