أول تطبيق React لك مع Vite

أعدّ مشروع React حقيقياً، شغّله، وتعرّف على ما أُنشئ.

شاهد معي: إعداد المشروع

Vite (تُنطق «فيت»، فرنسية تعني «سريع») أداة تجهّز لك هيكل مشروع React جاهزاً. افتح الطرفية وانتقل إلى حيث تريد المشروع (مثل سطح المكتب):

cd Desktop
npm create vite@latest my-react-web -- --template react

قد يسألك Vite شيئاً – أكّد بـ Enter. ثم:

cd my-react-web
npm install
npm run dev -- --port 3901

npm install يحمّل كل ما يحتاجه المشروع (يأخذ لحظة – React ومساعدوه يُحمَّلون إلى مجلد node_modules).
npm run dev -- --port 3901 يشغّل خادم التطوير. ستظهر الطرفية العنوان http://localhost:3901. افتحه في متصفحك.

هل ترى شعاراً يدور وعنوان «Vite + React»؟ تهانينا – أول تطبيق React لك يعمل! 🎉

💡

ما هو localhost؟ «خادم» يعمل فقط على جهازك. أنت فقط تراه – ملعب اختبارك الخاص. والأفضل: عندما تغيّر الكود وتحفظ، الصفحة تحدّث نفسها فوراً. لا مزيد من F5 بلا نهاية!

جولة في المشروع

افتح مجلد my-react-web في VS Code (File → Open Folder). يبدو كثيراً من الملفات، لكن ثلاثة فقط تهمك الآن:

الملف	ما هو
`index.html`	HTML الوحيد في الموقع كله – شبه فارغ، فقط `<div id="root">`
`src/main.jsx`	المشغّل: يأخذ التطبيق ويدخله في ذلك الـ div
`src/App.jsx`	الـ component الرئيسي – هنا تكتب الكود
`src/App.css`	الأنماط – CSS عادي كما تعرفه

تجاهل الباقي الآن (لا تفتح ولا تحذف node_modules أبداً، وpackage.json قائمة حزم المشروع).

أول تغيير لك في الكود

افتح src/App.jsx. احذف كل شيء واكتب:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

احفظ – والصفحة في المتصفح تغيّرت وحدها. إليك ما تنظر إليه:

الـ component App دالة ترجع HTML (هذه الكتابة تسمى JSX).
{name} – الأقواس المعقوفة تُدخل JavaScript في HTML. أي شيء: متغير، حساب {2 + 3}، حتى شرط.
export default App – «أقدّم هذا الـ component لملفات أخرى» (main.jsx هو من يأخذه).

لـ JSX غرابتان تعتاد عليهما: بدل class تكتب className (class كلمة محجوزة في JavaScript)، والـ component يجب أن يرجع عنصر غلاف واحد (لذلك يوجد <div> حول كل شيء).

دورك الآن 💪

أعدّ المشروع حسب الدليل وشغّله.
عدّل App.jsx: عنوان باسمك، فقرة عمّا تبنيه، ومتغير age تعرضه في الجملة I am {age} years old.
احذف عمداً وسم إغلاق وانظر كيف يبدو الخطأ – Vite يعرضه مباشرة في المتصفح مع رقم السطر. ثم أصلحه.
أوقف الخادم (Ctrl+C في الطرفية) وأعد تشغيله (npm run dev -- --port 3901) – لتتعوّد الدورة كاملة تحت أصابعك.

✅

تحقق من نفسك: المشروع يعمل على localhost، تستطيع إيقافه وتشغيله، وعندما تعدّل App.jsx وتحفظ، المتصفح يعيد الرسم وحده. دورة المطوّر تدور!

ما ستخرج به من هذا الدرس

npm create vite@latest يعدّ مشروعاً، npm install يحمّل الحزم، npm run dev يشغّل localhost.
تكتب الكود في src/App.jsx: الـ component دالة ترجع JSX، و{} يُدخل JavaScript في HTML.
في JSX: className بدل class، دائماً عنصر غلاف واحد.

هذا الدرس جزء من مستوى مدفوع

شاهد معي: إعداد المشروع

جولة في المشروع

أول تغيير لك في الكود

دورك الآن 💪

ما ستخرج به من هذا الدرس