في هذا الدرس 6تصفّح المواضيع
تنفذ المتصفحات قياسياً ملفات HTML وCSS وJavaScript النقية، بينما تحتاج ملفات .jsx إلى خطوة تحويل سريعة تترجم صياغة العناصر إلى دوال يفهمها المتصفح. لذلك تعتمد مشاريع الإنتاج الحقيقية على أداة بناء حديثة (Build Tool) تتولى ترجمة JSX ودمج ملفات التنسيق وضغط الصور وتشغيل خادم تطوير محلي فوري.
function ViteProjectCard() {
const port = 5173;
return (
<section className="vite-card">
<h2>Vite + React 18 Workspace</h2>
<p>Local Dev Server Port: {port}</p>
</section>
);
}في السنوات الماضية اعتمدت الدروس القديمة أداة تقليدية كانت تجمّع كامل ملفات المشروع مسبقاً قبل فتح المتصفح، مما جعل بدء التشغيل يستغرق عشرات الثواني وقد توقف دعم تلك الأداة رسمياً. أما اليوم فتُعد أداة Vite المعيار الصناعي المعتمد لتأسيس مشاريع React المستقلة؛ إذ تعتمد على وحدات ES Modules الأصيلة في المتصفح وتبدأ العمل في أقل من ثلث ثانية مهما كبر حجم المشروع.
لتأسيس مشروع React قياسي نظيف على جهازك، افتح موجه الأوامر ونفّذ الخطوات المتتابعة البسيطة: أنشئ القالب بالأمر npm create vite@latest my-react-app -- --template react، ثم ادخل للمجلد عبر cd my-react-app، وثبّت الحزم بالأمر npm install، وأخيراً شغّل خادم التطوير بالأمر npm run dev.
يضم مجلد مشروع Vite هيكلة واضحة خالية من الحشو الزائد:
index.html: مستند الصفحة الوحيد في جذر المشروع ويحتوي حاوية<div id="root">واستدعاء ملف البداية.package.json: يسجل حزمتي التشغيل الأساسيتينreactوreact-domوأوامر التشغيل.vite.config.js: ملف إعداد خفيف يفعّل إضافة React الرسمية لدعم التحويل والتحديث السريع.public/مقابلsrc/: توضع الملفات الثابتة المباشرة كالأيقونة فيpublic/، بينما توضع كافة المكونات والتنسيقات داخلsrc/.
function FolderGuide() {
return (
<div className="guide">
<h3>Vite Project Files</h3>
<ul>
<li>index.html — Host #root container</li>
<li>src/main.jsx — React entry point</li>
<li>src/App.jsx — Root UI component</li>
</ul>
</div>
);
}أثناء تشغيل خادم التطوير، يفعّل Vite تقنية الاستبدال الساخن للوحدات (Hot Module Replacement — HMR) مع التحديث السريع لـ React؛ فبمجرد حفظ أي تعديل على ملف src/App.jsx يُستبدل ذلك المكون وحده في المتصفح خلال أجزاء من الثانية دون إعادة تحميل الصفحة أو ضياع المدخلات.
عند جاهزية تطبيقك للنشر الفعلي، نفّذ الأمر npm run build لحذف الكود غير المستخدم وضغط الحزمة النهائية داخل مجلد dist/، ثم اختبر النسخة المضغوطة محلياً بالأمر npm run preview. يقارن الجدول التالي بين أوامر وسلوكيات المشروع:
| الأمر أو المسار | الوظيفة الهندسية | سلوك المخرجات |
|---|---|---|
| npm create vite@latest | إنشاء قالب مشروع React جديد | يولّد ملفات البداية النظيفة وإعدادات Vite |
| npm run dev | تشغيل خادم التطوير المحلي | يخدم الوحدات لحظياً مع دعم التحديث الفوري HMR |
| npm run build | تجهيز وضغط حزمة الإنتاج | ينتج ملفات مصغرة وعالية الأداء داخل مجلد dist/ |
| npm run preview | معاينة نسخة الإنتاج محلياً | يختبر عمل مجلد dist/ الفعلي قبل رفعه للاستضافة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس دور أداة البناء الحديثة Vite ولماذا حلت محل الأدوات المتوقفة، وخطوات تأسيس المشروع وتشغيله، ووظيفة كل ملف أساسي، والفرق بين وضع التطوير السريع HMR وبناء حزمة الإنتاج النهائية. الخطوة التالية: انتقل الآن إلى الدرس رقم 4 «نقطة التركيب والوضع الصارم وأدوات مطوري React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Vite أداة البناء Vite
- أداة بناء حديثة فائقة السرعة تعتمد وحدات ES الأصيلة في التطوير وتنتج حزماً مضغوطة محكمة للنشر.
- للمراجعة
- 02 Tree Shaking استبعاد الكود غير المستخدم
- عملية تحسين أثناء بناء الإنتاج تحذف تلقائياً الدوال والملفات التي لم يتم استيرادها فعلياً لتقليص الحجم.
- للمراجعة
- 03 Fast Refresh التحديث السريع للمكونات
- آلية تدمج React مع HMR لتحديث المكون المعدّل فوراً على الشاشة مع الحفاظ على حالة المكونات المحيطة.
- للمراجعة
- 04 Entry Point نقطة انطلاق التطبيق
- ملف البداية البرمجي src/main.jsx الذي يحمله المتصفح أولاً لتركيب شجرة React داخل الصفحة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HMR HMR
- Hot Module Replacement
- حقن الوحدات البرمجية المعدلة مباشرة في المتصفح المفتوح دون الحاجة لإعادة تحميل الصفحة.
- للمراجعة
- 02 ESM ESM
- ECMAScript Modules
- نظام الوحدات القياسي الرسمي للغة JavaScript المدعوم مباشرة في المتصفحات الحديثة.
- للمراجعة
- 03 CLI CLI
- Command-Line Interface
- واجهة سطر الأوامر المستخدمة لتنفيذ تعليمات إنشاء المشروع وتشغيله وبنائه.
- للمراجعة
- 04 LTS LTS
- Long-Term Support
- إصدار الدعم طويل الأمد المستقر من بيئة Node.js والموصى به لتشغيل أدوات البناء.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
تنقل بين تبويبات index.html وsrc/main.jsx وpackage.json في المختبر لتتبع تسلسل إقلاع المشروع.
-
افتح مثال قائمة ملفات المشروع في محرر التجريب وأضف عنصر قائمة رابعاً يشرح وظيفة vite.config.js.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما الأمر القياسي الحديث المعتمد لتأسيس مشروع React مستقل جديد؟
يُعد الأمر npm create vite@latest الطريقة الحديثة السريعة المعتمدة لإنشاء مشاريع React المستقلة.
توقفت أداة create-react-app القديمة رسمياً ولا يُنصح باستخدامها في مشاريع React الجديدة.
صواب؛ فقد أُوقفت الأداة القديمة رسمياً وحلت محلها أدوات حديثة سريعة في مقدمتها Vite.
لماذا يبدأ خادم التطوير في Vite خلال أجزاء من الثانية حتى في المشاريع الكبيرة؟
لأنه يخدم وحدات ES الأصيلة للمتصفح عند الطلب مباشرة دون تجميع كامل المشروع مسبقاً.
أين يقع ملف index.html في مشروع Vite وكيف يستدعي ملف البداية main.jsx؟
يقع index.html في جذر المشروع مباشرة ويستدعي /src/main.jsx عبر وسم script بسمة type="module".
ماذا تفعل تقنية HMR عند حفظ تعديل داخل ملف مكون أثناء التطوير؟
تحدّث المكون المعدل فوراً في المتصفح المفتوح دون إعادة تحميل الصفحة بالكامل.
ما الأمر الذي يترجم ويضغط مشروع Vite في مجلد dist/ استعداداً للنشر الفعلي؟
ينشئ الأمر npm run build حزمة الإنتاج المضغوطة النهائية داخل مجلد dist/.
من الآمن تخزين كلمات مرور قاعدة البيانات السرية داخل متغيرات بيئة تبدأ بـ VITE_ في الواجهة.
خطأ؛ فالمتغيرات البادئة بـ VITE_ تُرسل للمتصفح ويمكن لأي زائر قراءتها من أدوات المطور.
ما الحزمتان الأساسيتان لتشغيل React في المتصفح داخل قسم dependencies بملف package.json؟
توفر حزمة react منطق المكونات بينما تربط حزمة react-dom تلك المكونات بشجرة المتصفح.
ما الغرض من تشغيل الأمر npm run preview بعد إتمام npm run build؟
يشغّل خادماً محلياً لمعاينة واختبار ملفات الإنتاج الفعلية الموجودة في مجلد dist/ قبل رفعها.
تُستخدم بيئة Node.js على جهاز المطور لتشغيل Vite وnpm، بينما تعمل مكونات React نفسها داخل متصفح الزائر.
صواب؛ فـ Node.js تشغّل أدوات البناء أثناء التطوير، أما المخرج النهائي فيعمل في متصفح المستخدم.