تثبيت 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»، الاستبدال الفوري للوحدات).

المتطلبات المسبقة: 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. افتحه في المتصفح.

يطرح المولّد بعد ذلك سؤالين: أي مدقق كود يُعدّ (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 هي الصفحة التي يحمّلها المتصفح. يحتوي جسمها على عنصر فارغ واحد، <div id="root"></div>، ووسم script يحمّل src/main.jsx. ترسم React التطبيق كله داخل ذلك العنصر.

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 أداة مساعدة أثناء التطوير تجري بعض الفحوص الإضافية؛ ولا أثر لها في بناء الإنتاج (راجع الوضع الصارم). نادرًا ما تحتاج إلى تعديل هذا الملف.

src/App.jsx هو مكوّنك الأول، والملف الذي تعدّله. نسخة Vite تستورد ثلاث صور (صورة رئيسية وشعاري 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، وصدّرها، واستوردها حيث تستخدمها. تشرح صفحة المكوّنات كيف.

البناء للإنتاج

خادم التطوير مخصص للعمل على الكود. عندما تكون جاهزًا للنشر، ابنِ التطبيق:

npm run build
npm run preview

يحوّل npm run build كود JSX، ويجمع الكود ويصغّره، ويكتب ملفات ثابتة في مجلد dist/. ويقدّم npm run preview ذلك المجلد محليًا لتتحقق من البناء الحقيقي. ارفع dist/ إلى أي استضافة للملفات الثابتة. تنتقل React أيضًا إلى وضع الإنتاج في البناء، وهو أسرع ويتخطى تحذيرات التطوير.

أُوقف Create React App

لسنوات كانت الطريقة المعتادة للبدء هي npx create-react-app my-app. في فبراير 2025 أوقف فريق React أداة Create React App، ولم تعد تُصان. ما زالت دروس قديمة كثيرة تستخدمها، لذا سترى فيها react-scripts start وملف دخول src/index.js؛ أما المكوّنات نفسها فتعمل بالطريقة نفسها في مشروع Vite.

ما تستخدمه بدلًا منها:

• Vite لتطبيق يعمل في المتصفح أو لمشروع تعليمي أو لعنصر واجهة صغير: الإعداد الموضح أعلاه.
• إطار عمل عندما تحتاج إلى التوجيه أو العرض على الخادم أو تحميل البيانات بشكل مدمج. Next.js ووضع إطار العمل في 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/ إلى جذر المشروع، واحذف العناصر النائبة %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 أن تملك الصفحة كلها. يمكنك عرضها داخل عنصر واحد من موقع قائم، مثل عنصر سلة مشتريات في متجر يُعرض على الخادم. ما زلت تحتاج إلى أداة تجميع مثل Vite لتحويل JSX. ثبّت الحزمتين:

npm install react react-dom

ثم أنشئ جذرًا على العنصر الذي تريد أن تتحكم فيه React:

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

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

كل ما هو خارج #cart يبقى كما كان. يمكنك إنشاء عدة جذور في صفحة واحدة، جذر لكل عنصر، ويعمل كل منها باستقلال.