هيكلة المشروع في React

 عند إنشاء مشروع React باستخدام create-react-app، ستحصل على هيكلية ملفات مشابهة للتالي:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── ...



شرح الملفات والمجلدات:

  • node_modules/: يحتوي على جميع الحزم والتبعيات التي تم تثبيتها بواسطة npm.
  • public/: يحتوي على الملفات الثابتة مثل index.html وأي ملفات أخرى تحتاج إلى الوصول إليها مباشرة.
    • index.html: هذا هو الملف الرئيسي الذي يتم تحميله عند فتح التطبيق في المتصفح. لا يُنصح بتعديله إلا إذا كنت تعرف ما تفعله.
  • src/: يحتوي على جميع ملفات المصدر لتطبيقك.
    • App.js: هذا هو المكون الرئيسي لتطبيقك. يمكنك تعديل هذا الملف لإضافة مكونات جديدة أو تعديل المكونات الحالية.
    • index.js: هذا هو نقطة الدخول لتطبيقك. يقوم بربط المكونات بـ index.html. لا يُنصح بحذف هذا الملف.
    • App.css و index.css: ملفات الأنماط (CSS) لتطبيقك. يمكنك تعديلها لتغيير تصميم التطبيق.
    • App.test.js: يحتوي على اختبارات الوحدة لمكون App. يمكنك تعديل هذا الملف لإضافة اختبارات جديدة.
    • logo.svg: شعار React الافتراضي. يمكنك استبداله بشعارك الخاص.


الملفات التي لا يُنصح بتعديلها أو حذفها:

  • index.html: تعديل هذا الملف قد يؤثر على كيفية تحميل التطبيق في المتصفح.
  • index.js: هذا هو نقطة الدخول لتطبيقك، وحذفه سيؤدي إلى تعطل التطبيق.
  • package.json: يحتوي على معلومات حول مشروعك والتبعيات. تعديل هذا الملف يجب أن يتم بحذر.


نصائح إضافية:

  • المكونات (Components): يُفضل تنظيم المكونات في مجلدات فرعية داخل src لتسهيل إدارة المشروع.
  • الخدمات (Services): يمكنك إنشاء مجلد services داخل src لوضع جميع الخدمات مثل استدعاءات API.
  • الأنماط (Styles): يمكنك إنشاء مجلد styles لوضع جميع ملفات CSS أو SCSS.

تعليقات

المشاركات الشائعة

ما هو JSX في React؟

إضافة الأنماط في React

المكونات (Components) في React

مثال بسيط يوضح كيفية استخدام createContext و useContext لتمرير البيانات بين المكونات في React

مفهوم إعادة الاستخدام (Reusability)

الأمر npx create-react-app my-app

مثال لتمرير مصفوفة عن طريق useState

عرض القوائم باستخدام JSX في React.

شرح Object Destructuring