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

1. תוכנית עבודה

בשביל לבנות אפליקציית ריאקט בסביבת פיתוח מקומית אני מתקין בסך הכל שני כלים, שניהם חינמיים: node.js ו VS Code.

את node.js מתקינים מהאתר שלהם: https://nodejs.org/en

ואת VS Code מהאתר שלהם: https://code.visualstudio.com/

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

> code --version
1.88.1
e170252f762678dec6ca2cc69aba1570769a5d39
x64

> node --version
v20.12.2

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

2. יצירת פרויקט ראשון

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

<div>Hello World</div>

הקוד האמיתי שרץ בדפדפן הוא קריאת JavaScript כזאת:

React.createElement("div", null, "Hello World");

הכלי vite הוא שאחראי על התרגום ועל הפיכת קבצי ה JavaScript שאנחנו כותבים בקוד לכאלה שדפדפן יכול לקרוא. בשביל ליצור פרויקט חדש עם vite אני נכנס ב Terminal לתיקייה חדשה ושם כותב:

> npm create vite@latest hello-react-world -- --template react

המילה hello-react-world היא שם הפרויקט שבחרתי לתוכנית הראשונה שלנו. אתם יכולים לבחור כל שם שתרצו. אם זאת הפעם הראשונה שאתם מפעילים את הפקודה אז npm ישאל אתכם אם אתם מוכנים להתקין את vite. עונים y או פשוט לוחצים Enter:

> npm create vite@latest hello-react-world
Need to install the following packages:
create-vite@5.2.3
Ok to proceed? (y)

לאחר מכן נקבל את הפלט הבא:

Scaffolding project in C:\Users\ynonp\react\hello-react-world...

Done. Now run:

  cd hello-react-world
  npm install
  npm run dev

מפה vite מציע לי להיכנס לתיקיה ולהפעיל npm install. נעשה את זה:

> cd .\hello-react-world\
> npm install

added 278 packages, and audited 279 packages in 51s

103 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

המשימה הבאה היא להפעיל npm run dev. פקודה זו תשתלט על המסוף ולא תאפשר לי להקליד פקודות אחריה לכן לפני שאני מפעיל אותה אני מפעיל את VS Code מאותה תיקייה כדי שאוכל לראות ולערוך את הקוד:

> code .

ואז חוזר לפי ההוראות ומפעיל:

> npm run dev


  VITE v5.2.11  ready in 1829 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

שימו לב לכתובת ש vite הדפיס על המסך - http://localhost:5173. כנסו לכתובת זו בדפדפן כדי לראות את עמוד הדוגמה ש vite יצר עבורכם ולאחר מכן עברו ל VS Code כדי לראות את הקוד של עמוד הדוגמה.

3. הפעלת קומפוננטת Person

זוכרים את קומפוננטת Person שכתבנו ב codesandbox בשיעור הקודם? אז בואו נכתוב אותה עכשיו בסביבת הפיתוח המקומית שלנו. ב VS Code נפתח את הקובץ App.jsx ונחליף את הקוד שבו בקוד הבא:

import './App.css'

function Person({name = "Guest"}) {
  return (
    <h1>Hello {name}</h1>
  )
}

function App() {
  return (
    <>
      <Person name="a" />
      <Person name="b" />
      <Person />
    </>
  )
}

export default App

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