إعداد بيئة العمل المتميزة: إنشاء مشروع React حديث وسريع باستخدام أداة Vite

مرحباً أيها المطورون! في هذا الدرس، سنتعلم كيفية إعداد بيئة عمل React متميزة وفعالة للغاية باستخدام أداة البناء السريعة Vite. سنقوم بإنشاء مشروع React حديث خطوة بخطوة.

الخطوة 1: تهيئة المشروع باستخدام Vite

سنبدأ بإنشاء هيكل المشروع الأساسي باستخدام أمر Vite الرسمي. تأكد من تثبيت Node.js و npm (أو Yarn) على جهازك.

ملاحظة تقنية: Vite هي أداة بناء (build tool) توفر تجربة تطوير أسرع بكثير لتطبيقات الويب الحديثة، خاصة مع مكتبات مثل React و Vue و Svelte، بفضل استخدامها لوحدات ES الأصلية (Native ES Modules).

افتح الطرفية (Terminal أو Command Prompt) ونفّذ الأوامر التالية:

# أمر إنشاء مشروع Vite جديد، يحدد اسم المجلد ونوع القالب (React)
npm create vite@latest my-react-app -- --template react

# الانتقال إلى مجلد المشروع الذي تم إنشاؤه حديثاً
cd my-react-app

الخطوة 2: تثبيت الاعتمادات وتشغيل خادم التطوير

بعد إنشاء المشروع والانتقال إلى مجلده، نحتاج إلى تثبيت جميع الحزم والاعتمادات اللازمة لتشغيل تطبيق React. بعد ذلك، سنقوم بتشغيل خادم التطوير المحلي.

# تثبيت جميع الحزم والاعتمادات المذكورة في ملف package.json
npm install

# تشغيل خادم التطوير المحلي. سيقوم Vite بتجميع وتشغيل التطبيق على منفذ محدد (عادةً 5173)
npm run dev

بعد تنفيذ npm run dev، ستظهر لك رسالة في الطرفية تخبرك بأن التطبيق يعمل على عنوان محلي مثل http://localhost:5173/. افتح هذا الرابط في متصفحك وسترى تطبيق React الافتراضي.

الخطوة 3: تعديل مكون React الرئيسي (App.jsx)

الآن، دعنا نعدّل المكون الرئيسي App.jsx لإظهار فهمنا لكيفية عمل React. سنقوم بإنشاء عداد بسيط.

افتح ملف src/App.jsx في محرر الأكواد الخاص بك واستبدل محتواه بما يلي:

import { useState } from 'react'; // استيراد هوك useState من React لإدارة الحالة في المكونات الوظيفية
import './App.css'; // استيراد ملف التنسيق CSS الخاص بالمكون

function App() {
  // تعريف حالة 'count' باستخدام useState، مع قيمة ابتدائية 0.
  // 'count' هو المتغير الذي يحمل القيمة الحالية، و 'setCount' هي الدالة لتحديثه.
  const [count, setCount] = useState(0);

  return (
    <>
      {/* عنوان رئيسي للمشروع */}
      <h1>مشروعي الأول مع React و Vite!</h1>
      <div className="card">
        {/* زر لزيادة العداد. عند النقر، يتم استدعاء setCount لزيادة قيمة count بواحد */}
        <button onClick={() => setCount((currentCount) => currentCount + 1)}>
          العداد هو {count}
        </button>
        <p>
          انقر على الزر لزيادة العداد.
        </p>
      </div>
      {/* فقرة سفلية توضيحية */}
      <p className="read-the-docs">
        هذا تطبيق React بسيط تم إنشاؤه بواسطة Vite.
      </p>
    </>
  );
}

export default App; // تصدير المكون App ليكون متاحاً للاستخدام في ملفات أخرى (مثل main.jsx)

بمجرد حفظ التغييرات، سيقوم Vite تلقائياً بتحديث المتصفح (Hot Module Replacement) وسترى التغييرات فوراً.

الكود النهائي الكامل

هذا هو الكود الكامل لملف src/App.jsx بعد التعديلات:

import { useState } from 'react';
import './App.css';

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

  return (
    <>
      <h1>مشروعي الأول مع React و Vite!</h1>
      <div className="card">
        <button onClick={() => setCount((currentCount) => currentCount + 1)}>
          العداد هو {count}
        </button>
        <p>
          انقر على الزر لزيادة العداد.
        </p>
      </div>
      <p className="read-the-docs">
        هذا تطبيق React بسيط تم إنشاؤه بواسطة Vite.
      </p>
    </>
  );
}

export default App;

ملف src/main.jsx (عادةً لا يحتاج لتعديل لهذه البداية، ويقوم بتصيير المكون App إلى DOM):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

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

النتيجة المتوقعة

عند فتح المتصفح على العنوان الذي يوفره Vite (عادةً http://localhost:5173/)، سترى صفحة ويب بسيطة تحتوي على عنوان "مشروعي الأول مع React و Vite!" وزر يحمل النص "العداد هو 0". كلما نقرت على الزر، سيزداد الرقم المعروض عليه، مما يدل على أن مكون React يعمل بشكل صحيح ويتفاعل مع المستخدم.

← السابقالفهرسالتالي →