1. توزيع البيانات بشكل منطقي بين حالة التطبيق المحلية والعالمية
React هي مكتبة مسؤولة عن إدارة واجهة المستخدم بناءً على الحالة الحالية للتطبيق. مهمة المبرمج هي تنظيم العمل مع الدولة بعقلانية. يفضل بعض المطورين تخزين جميع البيانات الموجودة تحت تصرفهم في مستودع Redux. هذا يسمح لهم بتنظيم المعالجة المركزية لجميع بيانات التطبيق.
ولكن عند التفكير في البيانات التي يجب تضمينها في حالة التطبيق ، يجدر النظر فيما إذا كان سيتم تمرير إجراء إلى نظام إدارة الدولة لمجرد ، على سبيل المثال ، فتح قائمة منسدلة بسيطة. الأمر نفسه ينطبق ، على سبيل المثال ، على البيانات التي يدخلها المستخدم في نموذج الملاحظات. هل تحتاج جميع أجزاء الطلب إلى معرفة ما يتم إدخاله في مثل هذا النموذج؟ عندما يتعلق الأمر بما يتم إدخاله في النموذج ، عادةً ما تتم معالجة هذه البيانات بواسطة التطبيق في غضون فترة زمنية قصيرة نسبيًا. علاوة على ذلك ، يتم استخدامها فقط بواسطة المكون المسؤول عن عرض النموذج على الشاشة.
بدلاً من استخدام متجر Redux لتخزين كل شيء يعمل به التطبيق ، من الأفضل تخزين بعض البيانات في الحالة المحلية للمكونات. سيؤدي ذلك إلى تجنب تعقيد بنية التطبيق.
عند التفكير في المكان الذي تحتاج فيه بالضبط لتخزين بعض البيانات ، يجدر بك أن تسأل نفسك الأسئلة التالية :
- هل تحتاج إلى الوصول إلى هذه البيانات في أجزاء مختلفة من التطبيق؟
- هل تحتاج إلى القدرة على تكوين شيء جديد بناءً على هذه البيانات؟
- هل المكونات المختلفة تستخدم نفس البيانات؟
- هل من المفيد بالنسبة لك أن تكون قادرًا على استعادة حالة التطبيق ، والتي تتضمن هذه البيانات ، وإعادتها إلى النموذج الذي كانت فيه في وقت معين (أي ، هل أنت مهتم بالتصحيح مع القدرة على التحرك على طول مسار تنفيذ التعليمات البرمجية في الاتجاه المعاكس)؟
- هل تخطط لتخزين هذه البيانات مؤقتًا (أي استخدام الحالة الحالية إذا كان التطبيق يحتوي عليها بالفعل ، بدلاً من إعادة تحميلها)؟
- هل أحتاج إلى الاحتفاظ بهذه البيانات عند إعادة تحميل المكونات على الساخن (أثناء هذه العملية ، يمكن فقد الحالة الداخلية للمكونات)؟
تشير الإجابات الإيجابية على الأسئلة أعلاه إلى أن البيانات تُستخدم بطريقة ما خارج المكون. هذا يعني أنه من المنطقي تخزينها في الحالة العالمية للتطبيق. ومع ذلك ، تجدر الإشارة إلى أن المكونات التي تستخدم الدولة المحلية أكثر استقلالية ويمكن التنبؤ بها.
2. تعلم كيفية اختبار التطبيقات وتجهيز مشاريعك بالاختبارات من البداية
يعد إنشاء الاختبارات الآلية أمرًا مهمًا للغاية. الحقيقة هي أنه في مرحلة معينة من العمل في مشروع React ، فإن الاختبار اليدوي له سيستغرق الكثير من الوقت والموارد.
في بداية المشروع ، عندما لا تزال قاعدة بياناته صغيرة نسبيًا ، من السهل جدًا أن تقرر أنك لست بحاجة إلى كتابة اختبارات له. إذا كان التطبيق يحتوي على خمسة إلى عشرة مكونات ، فإن إنشاء الاختبارات الآلية يبدو وكأنه مهمة روتينية لا طائل منها تقريبًا. ولكن إذا نما المشروع ليشمل أكثر من 50 مكونًا ويحتوي على العديد من المكونات عالية الترتيب ، فقد يستغرق الاختبار اليدوي يوم عمل كاملًا. وحتى مع هذا النهج ، قد تبقى فيه أخطاء لن يلاحظها أحد.
بالإضافة إلى ذلك ، تساعد كتابة الاختبارات على تحسين بنية الكود الخاص بك عن طريق تقسيمها إلى وحدات. سيساعدك هذا في العثور على الأخطاء بشكل أسرع وحماية المشروع من فشل الإنتاج. الهدف من الاختبار الآلي هو أنه يساعد مشروعًا متناميًا على التطور في مرحلة لم يعد فيها الاختبار اليدوي قادرًا على تأكيد عمل الكود بشكل صحيح.
صحيح ، إذا لم تكن معتادًا على إنشاء الاختبارات ، فلن تتمكن من كتابتها فورًا من خلال مشروع كبير إلى حد ما. لهذا السبب عليك أن تبدأ في كتابة الاختبارات من البداية. إذا لم تكن متأكدًا من مكان بدء اختبار مشروعك ، فابدأ باختبارات التكامل . النقطة المهمة هي أن أهم شيء في الاختبار هو التأكد من أن مكوناتك تتفاعل بشكل صحيح مع بعضها البعض.
3. تطبيق أدوات إضافية تساعد في توسيع نطاق التطبيق
عادة ، في بداية عملية تطوير مشاريع React ، ليست هناك حاجة لاستخدام الكثير من الأدوات المساعدة. ولكن نظرًا لأننا نتحدث عن مشاريع يمكن أن تصبح كبيرة جدًا ، فمن الجدير بالذكر أن الأدوات المتخصصة ستسهل العمل عليها بشكل كبير. فيما يلي وصف لبعض منهم:
- يساعد استخدام Prettier و ESLint المبرمجين في الفريق على كتابة تعليمات برمجية متسقة. يمكن أن تساعد هذه الأدوات في تقليل بناء الجملة والأخطاء الأخرى في التعليمات البرمجية الخاصة بك. إن استخدام المكتبات المساعدة مثل React Router و date-fns و response -hook-form يفيد أيضًا المشاريع .
- TypeScript Redux , , . , .
- - , React , .
- يتيح لك استخدام Bit تنظيم العمل مع المكونات ، التي يتم تقديمها على أنها كتل بناء مستقلة للتطبيق. هذا يعني أنه يمكنك اختبار المكونات وعرضها بشكل منفصل. هذا النهج للعمل مع المكونات يسهل صيانتها وإعادة استخدامها.
- بدلاً من إنشاء التطبيق التفاعلي ، يمكنك استخدام أدوات Next.js المقابلة لإنشاء تطبيقات React جديدة .
ستساعدك هذه الأدوات في الحفاظ على قاعدة بيانات كبيرة لتطبيق React. ولكن عند اختيار الأدوات ، ضع في اعتبارك أن كل منها يزيد من مستوى تعقيد المشروع. قبل تضمين أي شيء في مشروعك ، ادرس كل شيء جيدًا واتخذ قرارًا مستنيرًا.
4. انتبه إلى هيكل ملف المشروع
من أفضل النصائح التي صادفتها لتطوير تطبيقات React القابلة للتطوير أن تنظيم ملفات مشروعك وتسميتها بحكمة يمكن أن يساعد في تسريع الأمور. بعض المطورين في كثير من الأحيان مثل الملف الرئيسي في المجلدات التي يتم تخزينها في الدليل
components، يتم استخدام index.js.
تتم تسمية الملفات ذات المكونات المختلفة
بنفس الاسم ، ويبدو أن هذا الأسلوب في تنظيم المشروع معقول تمامًا ، لأنه عند استيراد مكون في ملف ما ، تكون التعليمات المقابلة بسيطة للغاية:
import Button from '../components/Button';
لكن ماذا لو فتحت ملفات هذه المكونات في محرر؟
في كل مكان - index.js فقط
سيكون من غير الملائم التنقل فيها. ليس من السهل تحديد المكون الذي ينتمي إليه كل منهم
index.js. ومع ذلك ، إذا أعدت تسمية هذه الملفات لتتطابق مع أسماء المكونات ، فستبدو تعليمات الاستيراد أقل جاذبية:
import Button from '../components/Button/Button';
كيف تكون في هذه الحالة؟ على سبيل المثال ، توصل فريقي إلى الحل التالي: يوجد في مجلد المكون ملف برمز يتوافق اسمه مع اسم المكون ، وبجانبه الملف
index.jsالذي يصدر المكون.
ملف كود المكوّن و index.js لتصدير المكوّن ،
وضعنا أيضًا ملفات اختبار CSS والوحدة في دليل المكوّن. باستخدام هذا النهج ، يحتوي كل دليل مكون على كل ما له صلة بالمكون المقابل.
مكون قائم بذاته
5. إنشاء مكتبة من المكونات
من الأفضل أن تبدأ في بناء مكتبة من المكونات في وقت مبكر من مشروعك ، بدلاً من انتظار نموها. المكونات ، في عملية العمل عليها ، يمكن تصميمها ككتل قائمة بذاتها مناسبة للاستخدام المتكرر. يمكن إنشاء مكتبة من المكونات باستخدام Bit ، إما باستخدام مصدر bit.dev ، أو عن طريق نشر النظام في المنزل.
6. افصل منطق المكونات عن نفسها باستخدام الخطافات
مع نمو المشروع ، قد تلاحظ أن منطق بعض المكونات يتم استخدامه مرارًا وتكرارًا في أماكن مختلفة. يمكنك استخدام خطاطيف الملكية لتنظيم مشاركة منطق المكون.
على سبيل المثال ، لدينا تطبيق لحساب النقاط في لعبة كرة السلة.
طلب التسجيل في لعبة كرة السلة
اذا نظرتم الى رمز لهذا التطبيق، فإنه يبدو أنه في الملفات
HomeTeam.jsوAwayTeam.jsاستخدام نفس المنطق للعمل مع متر. في مثل هذه الحالة ، عند استخدام نفس الكود لإدارة الواجهة ، يمكنك فصل هذا الرمز عن المكون ووضعه في ملف منفصل. لقد قمت
هنا بفصل الكود الخاص بتخزين حالة العداد ومنطق زيادة العداد في ملف منفصل
util.js. يتم استيراد هذا الملف إلى مكونات.
الخطافات ، في جوهرها ، وظائف عادية تعيد بعض القيمة. بمساعدتهم ، يمكنك تصميم الكود الذي يُراد إعادة استخدامه في مكونات مختلفة.
النتيجة
ضع في اعتبارك دائمًا أن تطوير تطبيقات React واسعة النطاق هي مهمة معقدة تتطلب اتخاذ قرارات تأخذ في الاعتبار مصالح مستخدمي ومطوري هذه التطبيقات. يعتمد اختيار التوصيات التي يكون من المنطقي اتباعها عند العمل في كل مشروع محدد على مدى جودة هذه التوصيات لأولئك الذين يستخدمون المشروع وأولئك الذين يطورونه.
عند اختيار الأدوات والتقنيات لاستخدامها في تطوير المشروع ، فإن الأمر يستحق التجربة. سيسمح لك هذا باختيار ما سيفيد تطبيق React بالضبط. آمل أن تكون النصائح التي شاركتها معك اليوم مفيدة لك.
ما أدوات وتقنيات التطوير التي تستخدمها عند إنشاء مشاريع React التي تحتاج إلى توسيع نطاقها بشكل جيد؟
