رتبها

مشروعي كبير كيف انظمه☹️؟
من اهم الامور الواجب على كل مطور تعلمها هي تنظيم هيكلة المشاريع.
دخلت في عالم الـ React js ؟ لازم لازم تتعلم كيف تنظم مشروعك زي المحترفين وتمشي على
React Architecture Pattern معين
تفضل معايا 🔥🚀.
⚡️THREAD⚡️

1⃣ يجب ان يكون لكل مشروع نقطة بداية "مجلد رئيسي":
وجود مجلد رئيسي يحتوي يشمل جميع مجلدات اجزاء المشروع مثل، assets, components, services, utils, pages الخ.. هو امر مهم لتنظيم المشروع. وكل مجلد يحتوي على تفرعاته استنادا الى وظائفها وما تحتويه.
⚡️👇⚡️

مثلا كحد ادنى من التنظيم بإنشاء مشروع React عن اداة "create-react-app" سينتج مشروع منظم بدائي بملف رئيسي مسمى "src" منظم كما هو موضح في الصورة.
⚡️👇⚡️

جميل! لكن في الحقيقة هذا التنظيم البدائي لن يصمد امام مشاريع ضخمه وكثيرة التفرعات ويصير مشروعك كبسة وبتاكله لوحدك🥲. لذلك على المطور اعادة هيكلة المشروع داخل "src" بشكل يمكننا من التوسع مع الحفاظ على التناسق والتنظيم.
ماذا لو قمنا باعادة هيكلة "src" كما هو الحال في الصورة👌😼⚡️

تقسيم الملفات باسماء بسيطة تشير الى اهدافها بشكل واضح وصريح يعطيك القدرة على التفرع بداخلها والتنظيم بشكل اكبر.
مثلا نستطيع نتفرع بداخل مجلد الـ Components نريد ان نقوم بكتابة Button و Nav وكتابة test و style و storybook لكل منهم.
⚡️👇⚡️

طيب كيف ممكن اضيف Custom Hooks ?
في الصورة الاولى بوضح كيف تقسم الملفات.
في الصورة الثانية مثال على Custom Hook
⚡️👇⚡️

2⃣ استخدام Absolute Imports
بشكل افتراضي React تقوم بالستعانة بالمجلد السابق كما في هو موضح في الصورة Before، وهو امر مزعج احيانا عند استخدام "../../../" وقد يعرض لحدوث اخطاء.
فكيف لنا ان نقوم بتحويل هذا الاسلوب المزعج الى شكل افضل كما في After ؟
⚡️👇⚡️

معلومة يتمناها الكثير من المبرمجين🤤⚡️🔥
بمنتهى البساطة بقليل من السحر في ملف jsconfig.json يمكننا فعل ذلك واعادة تحديد النقطة الرئيسية للـ Import Path كما هو موضح في الصورة
⚡️👇⚡️🤤

Let's light it up, LIT LIT LIT 🤤🔥
في حال كنت تستخدم Custom Webpack بداخل الملف المسمى بـ webpack.config.js
يمكنك تخصيص Prefix للاشارة الى عدة مجلدات
سأضع امثلة وطريقة التعديل على ملف webpack.config.js.
⚡️👇⚡️

3⃣ قم بفصل الـ Business Logic عن الـ UI
مثلا مجلد pages يجب ان يحتوي على UI لكل صفحة، كل صفحة ستحتوي على عدة components، فكتابة الـ APIs واستعلامها بداخل الصفحات قد يجعل من الصفحة معقدة بعض الشيء.
لذلك يمكننا اضافة Custom Hook للـ API Calls مثلا بهذا الاسلوب.
⚡️👇⚡️

4⃣ تجنب كتابة Context Provider واحد لحصر كل شيء
مما سيسهل عليك التعديل على الـ Global Values بشكل منظم وفعال.
مثلا قم بكتابة Context منفصلة للـ:
- App Themes
- App Languages
- Other Global State
- Cart State
- Redux State
- Zustand
الخ...
كما هو موضح في الصورة
⚡️👇⚡️

اعتذر عن قلة مشاركاتي في هذه الفترة، فقررت ما اشارك اليوم الا بمعلومات صاروخية وكريتكال تفيد الجميع وقابلة للتطوير والتوسع🤤🔥⚡️
اذا اعجبك الموضوع رتويت لتعم الفائدة🔃🧡🔥

التصنيفات

المزيد من هذا الكاتب

مواضيع ذات صلة

الأكثر اعجابا

التصنيفات

المزيد من هذا الكاتب

مواضيع ذات صلة

الأكثر اعجابا

فك الثريد