كيفية إعداد تطبيق React باستخدام Parcel: بديل خفيف لـ create-react-app

Updated يونيو 14, 2026 4 min read

Aldawsari

دقائق القراءة: 4

لطالما شكلت أداة Webpack عقبة كبيرة أمام المطورين الراغبين في تعلم مكتبة React. فعملية إعدادها تتطلب الكثير من التكوينات المعقدة والنمطية (boilerplate)، مما قد يكون محيرًا للغاية، خاصة للمبتدئين في عالم React. حتى في المحاولات لتبسيط عملية الإعداد، يظل فهم كل خطوة من خطوات التكوين مهمة شاقة.

بعد فترة وجيزة من خروج React من مرحلتها التجريبية (beta)، قدم فريق فيسبوك أداة create-react-app. كان الهدف منها تبسيط عملية إنشاء تطبيقات React (بنسخة غنية بالميزات) لتصبح سهلة بمجرد كتابة أمر واحد في سطر الأوامر:

npx create-react-app my-app

بكل صراحة، هذه الطريقة لإنشاء تطبيق React جديد رائعة إذا كنت تبحث عن تطبيق جاهز بميزات متعددة من البداية، ولا تمانع في أن يكون تطبيقك ثقيلاً نسبياً أو كبيراً الحجم. هذه “الثقل” يأتي من العدد الكبير من التبعيات (dependencies) والمحملات (loaders) والإضافات (plugins) وغيرها، التي يتم تثبيتها تلقائياً في مجلد node_modules، والتي تستهلك مساحة كبيرة لكل تطبيق. الصورة أدناه توضح حجم مجلد node_modules من أحد تطبيقات create-react-app الخاصة بي:

تقديم Parcel: مجمع وحدات الويب فائق السرعة وبلا تكوين

يُعرف Parcel بأنه “مجمع وحدات تطبيقات الويب فائق السرعة وبلا تكوين” (Blazing fast, zero configuration web application bundler). هذا يعني أنه يتولى معالجة الكثير من مهام تجميع الوحدات المعقدة خلف الكواليس، مما يتيح لك إنشاء إعداد خفيف نسبياً لتطبيق React (أو أي مشروع ويب آخر يتطلب تجميع الوحدات). دعنا نرى ما يلزم لإعداد تطبيق React بسيط يعرض رسالة “Hello World” داخل عنصر h1.

خطوات إعداد تطبيق React باستخدام Parcel

الخطوة 1: إنشاء مجلد جديد للمشروع

ابدأ بإنشاء مجلد جديد لمشروعك. يمكنك تسميته أي اسم تريده، مثل my-parcel-react-app.

الخطوة 2: إنشاء ملف package.json

في نافذة الطرفية (Terminal)، انتقل إلى المجلد الجديد الذي أنشأته باستخدام الأمر cd، ثم قم بتشغيل الأمر التالي لإنشاء ملف package.json بشكل تلقائي:

npm init -y

سيقوم هذا الأمر بإنشاء ملف package.json الذي سيحتوي على معلومات مشروعك وتفاصيل التبعيات.

الخطوة 3: تثبيت Parcel و React و ReactDOM

الآن، حان وقت تثبيت التبعيات الأساسية: Parcel كمجمع وحدات، و React و ReactDOM كمكتبات لإنشاء واجهة المستخدم. قم بتشغيل الأوامر التالية في الطرفية:

npm install --save-dev parcel # أو الاختصار: npm i -D parcel
npm install react react-dom # أو الاختصار: npm i react react-dom
# ملاحظة: سيقوم npm الآن بحفظ التبعيات تلقائياً في package.json، لذا لم تعد بحاجة إلى استخدام --save

هذه الأوامر ستقوم بتثبيت Parcel كاعتماد تطوير (development dependency) و React و ReactDOM كاعتمادات أساسية للمشروع.

الخطوة 4: إضافة سكريبت “start” إلى package.json

افتح ملف package.json، وفي قسم "scripts"، أضف السكريبت التالي باسم "start":

 "start": "parcel index.html --open"

هذا السكريبت سيمكنك من تشغيل تطبيقك بسهولة باستخدام الأمر npm start، حيث سيقوم Parcel بتجميع الملف index.html وفتح التطبيق في متصفحك الافتراضي.

الخطوة 5: إنشاء ملف index.html وإضافة المحتوى الأساسي

في محرر الأكواد الخاص بك (مثل VS Code)، أنشئ ملفاً جديداً باسم index.html. يمكنك استخدام اختصار Emmet المدمج لإنشاء هيكل HTML قياسي بسرعة عن طريق كتابة علامة تعجب ! ثم الضغط على مفتاح Tab.

اكتب ! واضغط على مفتاح Tab:

قبل المتابعة، نحتاج إلى إضافة عنصرين أساسيين داخل قسم <body> في ملف index.html:

عنصر div يعمل كحاوية لتطبيق React الخاص بنا.
وسم script لقراءة ملف JavaScript الرئيسي (الذي سننشئه في الخطوة التالية).

أضف الكود التالي داخل وسم <body> في ملف index.html:

<body>
    <div id="root"></div>
    <script src="./index.js"></script>
</body>

الخطوة 6: إنشاء ملف index.js

أنشئ ملفاً جديداً باسم index.js في نفس المجلد، وأدخل كود React الأساسي التالي:

// index.js
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    <h1>Hello world!</h1>,
    document.getElementById("root")
);

هذا الكود يقوم باستيراد مكتبتي React و ReactDOM، ثم يعرض عنصر h1 يحتوي على النص “Hello world!” داخل العنصر الذي يحمل المعرف "root" في ملف index.html.

الخطوة 7: تشغيل التطبيق

هذا كل شيء! الآن، من نافذة الطرفية، قم بتشغيل الأمر التالي:

npm start

سيتولى Parcel بقية المهام، وستحصل على تطبيق React يعمل بكامل طاقته ويفتح تلقائياً في متصفحك.

الخلاصة التقنية

يُقدم Parcel حلاً ممتازاً للمطورين الذين يبحثون عن طريقة سريعة وخالية من التعقيدات لإعداد مشاريع React. على عكس create-react-app الذي يأتي محملاً بالعديد من التبعيات والتكوينات الافتراضية، يتيح لك Parcel بناء تطبيقات خفيفة الوزن بفضل فلسفته “صفر تكوين”. هذا لا يوفر فقط مساحة تخزين أقل لمجلد node_modules (كما رأينا في المقارنة)، بل يقلل أيضاً من منحنى التعلم للمبتدئين، مما يسمح لهم بالتركيز على بناء الميزات بدلاً من قضاء الوقت في إعداد بيئة التطوير. إن دعمه المدمج للعديد من امتدادات الويب والمحولات البرمجية (transpilers) يجعله خياراً قوياً وفعالاً لأي مشروع ويب حديث.

إذا كنت مهتماً، خصص بعض الوقت لتصفح وثائق Parcel لفهم جميع الميزات الرائعة التي يقدمها دون الحاجة إلى أي تكوين من جانبك. يدعم Parcel بشكل افتراضي جميع أنواع امتدادات تطوير الويب الشائعة، والمحولات البرمجية، والصيغ النحوية، وغير ذلك الكثير. وعلى الرغم من أنه ليس “صغيراً” تماماً، إلا أن مجلد node_modules لتطبيق Parcel يستهلك مساحة أقل بنسبة 50% على جهاز الكمبيوتر الخاص بك مقارنة بتطبيق create-react-app: