התקנת React: הקמת אפליקציית React עם Vite

כדי להתקין React, צרו פרויקט חדש עם Vite: הריצו npm create vite@latest my-app -- --template react, ואז cd my-app, npm install ו-npm run dev. קודם צריך שיהיה מותקן Node.js. Vite מגדירה את React, את קימפול ה-JSX ושרת פיתוח שמרענן את הדף כשאתם שומרים.

לא צריך שום דבר מזה כדי להתחיל ללמוד. העורך שמתחת מריץ React בתוך הדף הזה; זו גרסה מפושטת של קובץ ה-App.jsx ש-Vite יוצרת בשבילכם.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

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

דרישות מוקדמות: Node.js

הכלים שבונים אפליקציית React רצים על Node.js, ו-npm (מנהל החבילות שלו) מגיע איתו. התקינו את גרסת ה-LTS הנוכחית מאתר Node.js או עם מנהל גרסאות כמו nvm, ואז בדקו בטרמינל:

node -v
npm -v

שתי הפקודות אמורות להדפיס מספר גרסה. אם node -v מדפיס גרסה ישנה, שדרגו: Vite 8 דורשת Node.js 20.19 ומעלה (22.12 ומעלה בקו 22) ומדפיסה אזהרה בגרסאות ישנות יותר.

יצירת אפליקציית React עם Vite

הריצו את ארבע הפקודות האלה בתיקייה שבה אתם שומרים את הפרויקטים שלכם:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest מוריד את מחולל הפרויקטים העדכני. my-app הוא שם התיקייה, ו---template react בוחר React רגיל עם JavaScript. ה--- הנוסף מעביר את אפשרות התבנית דרך npm אל המחולל.
• npm install מוריד את React, React DOM, Vite ושאר התלויות שמופיעות ב-package.json אל node_modules.
• npm run dev מפעיל את שרת הפיתוח ומדפיס כתובת מקומית, בדרך כלל http://localhost:5173. פתחו אותה בדפדפן.

אחר כך המחולל שואל שתי שאלות: איזה linter להגדיר (Oxlint או ESLint), והאם להתקין ולהפעיל את האפליקציה עכשיו. אם עונים כן לשנייה, הוא מריץ בשבילכם npm install ו-npm run dev, כך שאפשר לדלג על שתי הפקודות האחרונות. בשביל TypeScript, השתמשו במקום זאת ב---template react-ts; ראו React עם TypeScript.

הקבצים ש-Vite יוצרת

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

שלושה מהם הכי חשובים:

index.html הוא הדף שהדפדפן טוען. ב-body שלו יש אלמנט ריק אחד, <div id="root"></div>, ותגית script שטוענת את src/main.jsx. React מציירת את כל האפליקציה בתוך ה-div הזה.

src/main.jsx הוא נקודת הכניסה. הוא מחבר את React לדף:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot לוקח את האלמנט #root והופך את React לאחראית על כל מה שבתוכו. render(<App />) מצייר שם את הקומפוננטה העליונה שלכם. StrictMode הוא עוזר לזמן פיתוח שמריץ כמה בדיקות נוספות; אין לו השפעה ב-build של הפרודקשן (ראו Strict Mode). רק לעיתים רחוקות צריך לערוך את הקובץ הזה.

src/App.jsx היא הקומפוננטה הראשונה שלכם, והקובץ שאותו עורכים. הגרסה של Vite מייבאת שלוש תמונות (תמונת hero והלוגואים של Vite ו-React) ואת App.css, ומסתיימת ב-export default App. זה זהה לכתיבת export default function App() בראש הקובץ, הצורה שבה משתמשות הדוגמאות בדפים האלה.

העריכה הראשונה שלכם

פתחו את src/App.jsx, מחקו את מה שיש בו, והחליפו אותו בקומפוננטה משלכם. שמרו, והדפדפן מתעדכן. הנה אפליקציה ראשונה קטנה להקליד; נסו אותה כאן קודם:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

הקלידו בתיבה והכותרת עוקבת. אחר כך הוסיפו <Greeting name="Vite" /> שני מתחת לראשון: קומפוננטות ניתנות לשימוש חוזר, וכל עותק מקבל name משלו.

כש-App.jsx גדל, העבירו קומפוננטות לקבצים משלהן, כמו src/Greeting.jsx, ייצאו אותן וייבאו אותן במקום שבו אתם משתמשים בהן. הדף על קומפוננטות מראה איך.

Build לפרודקשן

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

npm run build
npm run preview

npm run build מקמפל JSX, מאגד ומכווץ את הקוד, וכותב קבצים סטטיים לתיקייה dist/. npm run preview מגיש את התיקייה הזו מקומית כדי שתוכלו לבדוק את ה-build האמיתי. העלו את dist/ לכל שירות אחסון סטטי. ב-build גם React עוברת למצב הפרודקשן שלה, שהוא מהיר יותר ומדלג על אזהרות הפיתוח.

Create React App הוצא משימוש

במשך שנים הדרך המקובלת להתחיל הייתה npx create-react-app my-app. בפברואר 2025 צוות React הוציא את Create React App משימוש, והוא כבר לא מתוחזק. הרבה מדריכים ישנים עדיין משתמשים בו, ולכן תראו בהם react-scripts start וקובץ כניסה src/index.js; הקומפוננטות עצמן עובדות אותו דבר בפרויקט Vite.

במה להשתמש במקום:

• Vite לאפליקציה בצד הלקוח, לפרויקט לימודי או לווידג'ט: ההגדרה שלמעלה.
• Framework כשצריך ניתוב, רינדור בצד השרת או טעינת נתונים מובנים. Next.js ומצב ה-framework של React Router הם הבחירות הנפוצות:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

כדי להעביר פרויקט Create React App קיים ל-Vite, אלה הצעדים העיקריים: התקינו את vite ואת @vitejs/plugin-react והסירו את react-scripts; הוסיפו vite.config.js שטוען את הפלאגין של React; העבירו את index.html מ-public/ לשורש הפרויקט, הסירו את ה-placeholders מסוג %PUBLIC_URL%, והוסיפו תגית <script type="module" src="/src/index.jsx"> לקובץ הכניסה; שנו את הסיומת של קבצים שמכילים JSX ל-.jsx; שנו משתני סביבה מ-REACT_APP_ ל-VITE_ וקראו אותם מ-import.meta.env; והחליפו את פקודות react-scripts ב-package.json ב-vite, vite build ו-vite preview.

הוספת React לדף קיים

React לא חייבת להחזיק את כל הדף. אפשר לרנדר אותה לתוך אלמנט אחד באתר קיים, כמו ווידג'ט של עגלת קניות בחנות שמרונדרת בשרת. עדיין צריך bundler כמו Vite כדי לקמפל JSX. התקינו את שתי החבילות:

npm install react react-dom

אחר כך צרו root על האלמנט ש-React אמורה לשלוט בו:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

כל מה שמחוץ ל-#cart נשאר כמו שהיה. אפשר ליצור כמה roots בדף אחד, אחד לכל אלמנט, וכל אחד רץ באופן עצמאי.