تجهيز المشروع باستخدام Vite

مشروع React يحتاج إلى أكثر من React. المتصفّحات لا تفهم JSX، وكودك مقسّم إلى عشرات الـ modules، وأنت تريد أن تتحدّث الصفحة لحظة حفظ الملف. أداة البناء تتولّى كل ذلك. في 2026 الخيار الافتراضي لتطبيق React يعمل في المتصفّح هو Vite: يبدأ في أقل من ثانية، ويحدّث المتصفّح عند الحفظ، وينتج نسخة صغيرة محسّنة حين تكون جاهزًا للنشر.

أنشئ المشروع

تحقّق أولًا من إصدار Node.js. يحتاج Vite الحالي (7 و8) إلى Node 20.19 أو أحدث، أو 22.12 أو أحدث؛ وعمليًا ثبّت إصدار LTS حاليًا (22 أو 24)، لأن دعم Node 20 انتهى في أبريل 2026.

node -v
# v24.x or v22.x: a current LTS release

ثم أنشئ مشروع Watchlist:

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

الـ -- مهمّ هنا. هو يقول لـ npm «كل ما بعدي يخصّ الأداة التي أشغّلها»، فيصل --template react إلى create-vite بدل أن يبتلعه npm. يعطيك @latest دائمًا أحدث إصدار رئيسي من Vite (وهو Vite 8 وقت كتابة الدرس)، وكل ما في هذه الدورة يعمل بالطريقة نفسها على Vite 7 أو 8. وقد تعرض الإصدارات الحديثة من create-vite أن تثبّت الاعتماديات وتشغّل الخادم عنك؛ لا بأس بالموافقة.

تطبع الطرفية رابطًا محليًا: http://localhost:5173/. افتحه وسترى صفحة البداية الخاصة بـ Vite + React مع زر عدّاد.

كيف ترتبط القطع ببعضها

افتح المجلد في محرّرك. معظم الملفات إعدادات لن تلمسها كثيرًا. ثلاثة ملفات فقط تهمّ الآن، وهي تشكّل سلسلة واحدة.

يقع index.html في جذر المشروع، لا داخل مجلد public. يعامله Vite على أنه نقطة الدخول. يحتوي على <div id="root"></div> فارغ ووسم script واحد: <script type="module" src="/src/main.jsx"></script>.

أمّا 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 عقدة DOM حقيقية وتُرجع جذرًا تديره React من تلك اللحظة. كل ما داخل #root أصبح ملكًا لـ React؛ لا تغيّره بكود document.querySelector من عندك.

وsrc/App.jsx هو أول component لك، والمكان الذي ستقضي فيه معظم وقتك. استبدل محتواه بشيء من عندك لتتأكّد أن السلسلة تعمل:

export default function App() {
  return <h1>My Watchlist</h1>;
}

احفظ، وسيتحدّث المتصفّح من دون إعادة تحميل. هذا هو الـ hot module replacement (HMR) مع React Fast Refresh، ويجهّزه الـ plugin المسمّى @vitejs/plugin-react في vite.config.js. يمكنك أيضًا حذف src/App.css وإفراغ src/index.css؛ ستنسّق التطبيق كما يجب لاحقًا.

StrictMode باختصار

يضيف <StrictMode> فحوصًا إضافية أثناء التطوير. فهو يرسم كل component مرتين ويشغّل الـ effects مرتين (تركيب، ثم تنظيف، ثم تركيب من جديد) ليكشف الكود الذي لا يحتمل التكرار. إذا رأيت سطرًا يُطبع مرتين أثناء التطوير، فهذا هو السبب. لا يفعل شيئًا في الإنتاج، لذا اتركه مفعّلًا. ستظهر أهميته حين تصل إلى الـ effects في القسم 3.

السكربتات الأربعة

يعرّف package.json الأوامر التي ستستخدمها:

بقية المجلد أدوار مساندة. يسرد package.json اعتمادياتك (react وreact-dom) وأدوات التطوير (vite و@vitejs/plugin-react وأداة فحص). وnode_modules/ هو المكان الذي يضعها فيه npm install؛ حجمه كبير، ويُعاد بناؤه من package.json في أي وقت، ولا يدخل Git أبدًا. ويحتوي public/ على ملفات تُقدَّم كما هي من جذر الموقع، مثل الـ favicon. أمّا ملف إعدادات أداة الفحص فيختلف بحسب إصدار القالب: القوالب الحالية تستخدم Oxlint (.oxlintrc.json)، والقوالب الأقدم وخيار ESLint تستخدم eslint.config.js.

أمّا dist/ فمخرجات مولَّدة. لا تعدّل ملفاته أبدًا، ولا تضفه إلى Git؛ ملف .gitignore في المشروع الجاهز يستثنيه أصلًا. وحين تنشر في القسم الأخير، سيشغّل Vercel الأمر npm run build نيابةً عنك.

مشروعك يعمل الآن، وتعرف أين تُركَّب React. إذا دخل خادم التطوير يومًا في حالة غريبة بعد تثبيت حزمة أو إعادة تسمية ملفات، أوقفه بـ Ctrl+C وشغّل npm run dev من جديد. إعادة التشغيل تستغرق ثانية وتحلّ مشاكل أكثر مما ينبغي. في الدرس التالي تكتب أول component حقيقي لك في App.jsx وتقسّم Watchlist إلى قطع قابلة لإعادة الاستخدام.