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

1. ריאקט בתוך פריימוורק

בדפי התיעוד של ריאקט הדף שמסביר איך ליצור פרויקט חדש עלול להיות מבלבל:

https://react.dev/learn/creating-a-react-app

במקום להסביר לנו איך יוצרים פרויקט חדש הוא מציע לנו שתי דרכים שלא לגמרי ברור מה ההבדל ביניהן לפיתוח פרויקט Full Stack, עוד דרך אחת שמתאימה לפרויקטי React Native, כלומר פרויקט ריאקט לפיתוח אפליקציית מובייל, לאחר מכן עוד שתי דרכים לפיתוח Full Stack ואז עוד פיסקה עם הכותרת Start From Scratch שמקשרת למדריך אחר שגם הוא כולל 3 אפשרויות שונות. בואו ננסה לעשות סדר בלי להיכנס יותר מדי לפוליטיקה של ריאקט:

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

2. שני סוגי הפרויקטים שיעניינו אותנו בקורס הם פרויקטי Full Stack ופרויקטי צד לקוח בלבד. בפרויקט Full Stack יהיה לנו פרויקט אחד שרץ על שרת, מייצר קבצי HTML, CSS ו JavaScript (או טייפסקריפט) שנשלחים לדפדפן ואותו קוד שנשלח לדפדפן מתקשר עם הקוד שרץ על השרת. בפרויקט Full Stack האינטגרציה בין קוד צד השרת לקוד צד הלקוח מובנית בפריימוורק, כך שיהיה לנו קוד ריאקט שרץ בצד שרת, מושך מידע מבסיס הנתונים, ואז מעביר את אותו המידע לקוד ריאקט שרץ בדפדפן וזה ישים את המידע על המסך.

3. בפרויקט "צד לקוח בלבד" יהיו לנו שתי מערכות נפרדות. קוד שרת באיזושהי שפה או תשתית יחשוף REST API וקוד ריאקט שרץ על הדפדפן יתחבר לאותו API וימשוך את המידע כדי להציג אותו. פרויקטים כאלה יאפשרו לנו לשלב ריאקט לתוך מערכת שכבר יש לנו, או לבנות שרת אחד שיוכל לספק מידע גם לאפליקציית ווב וגם לאפליקציית מובייל דרך אותו API. כשמדברים בריאקט על בניית פרויקט From Scratch הם מדברים על פרויקט צד לקוח בלבד.

4. אותה ריאקט משמשת בסיס למספר Full Stack Frameworks. בדף התיעוד של ריאקט נכון להיום מופיעות 4 אפשרויות: Next.JS, Remix, Redwood ו Tanstack Start. כן יש הבדלים ביניהן, כן לכל אחת תפיסת עולם משלה, ועדיין כולן משתמשות בריאקט ומריצות גם קוד צד שרת וגם קוד צד לקוח ודואגות לאינטגרציה בין שני החלקים. בחלק הראשון של הקורס נעבוד עם Next.JS מאחר והיא הפופולרית מכולן ו Vercel (החברה שמפתחת את Next.JS) היא גם אחת המתחזקות העיקריות של ריאקט עצמה. בהמשך הקורס נלמד איך ליצור פרויקט צד-לקוח בלבד מאפס באמצעות Vite.

2. יצירת פרויקט מקומי

בשביל ליצור פרויקט Next.JS חדש עליי לוודא שיש לי node.js מותקן על המחשב. אני ממליץ להריץ:

$ node --version

ולראות שאתם מקבלים גירסה סבירה של node - כל מה שמעל 20 זה בסדר.

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

$ npx create-next-app@latest first-react-app -e https://github.com/ynonp/next-15-starter

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

לאחר שהפקודה מסיימת אני נכנס לתיקייה שנוצרה ומפעיל שם את VS Code כדי לעבור על הקוד, ובמקביל מריץ משורת הפקודה:

$ npm run dev

כדי להריץ שרת פיתוח מקומי.

3. סקירה וניקוי הקוד

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

1. הקובץ page.tsx מכיל את הקוד שנראה בדף הראשי של האתר. בהמשך הקורס נלמד להוסיף דפים נוספים למערכת.

2. הקובץ layout.tsx מכיל הגדרות כלליות יותר לעמוד לדוגמה הגדרות פונטים, שפה וטעינה של קובץ ה CSS.

3. הקובץ globals.css מכיל את הגדרות העיצוב הגלובאליות של האתר.

4. בתיקייה public ניתן לשמור תמונות וקבצים סטטיים אחרים אליהם נתיחס מקוד האתר.

5. הקובץ eslint.config.mjs מכיל את ההגדרות של ESLint. זה כלי ניתוח הקוד שיכעס עלינו כשאנחנו כותבים קוד לא לפי כללי עיצוב הקוד של next. אנחנו יכולים לעדכן את הקובץ כדי להוריד או להוסיף כללים.

6. הקובץ next.config.ts הוא קובץ הגדרות כללי של next.

7. הקובץ tsconfig.json מכיל את הגדרות הקומפילציה לטייפסקריפט.

רוב הזמן בעבודה על next אנחנו נעבוד עם קבצי הקוד page.tsx, layout.tsx ו globals.css וכמובן קבצי קוד נוספים שניצור לכל פרויקט.

נעדכן את הקובץ page.tsx לתוכן הבא:

export default function Home() {
  return (
    <div>
      <h1>Welcome To My Next.JS App</h1>
    </div>
  );
}

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

$ npm run dev

ונכנס לדפדפן לצפות בתוצאה בכתובת:

http://localhost:3000

4. עכשיו אתם

השאירו את שרת הפיתוח דולק ועדכנו את קוד העמוד בקובץ page.tsx, לדוגמה הוסיפו פסקת טקסט. שימו לב שאחרי שמירה העמוד אוטומטית מתעדכן בדפדפן כדי להראות את פיסקת הטקסט החדשה שהוספתם. לאחר מכן עדכנו את הצבעים בקובץ globals.css ושימו לב שהעמוד מתעדכן כדי להראות את הצבעים החדשים.