كيفية تنظيم تطبيق رد الفعل الخاص بك

تصوير أندرو سيمان في أونسبلاش

أحد أفضل الأشياء التي يجب إضافتها إلى JavaScript هو نظام الوحدات النمطية. الحياة قبل الوحدات لم تكن سهلة. في الوقت الحاضر ، نحن قادرون على تنظيم التعليمات البرمجية الخاصة بنا في ملفات منفصلة تشجع مبادئ البرمجة الجيدة مثل D.R.Y. (لا تكرر نفسك) وأعد استخدام الشفرة وتجريد الشفرة.

لكنها ليست كل وردية. من خلال القدرة على تنظيم الشفرة الخاصة بنا في ملفات منفصلة ، أصبح لدينا الآن تحدٍ جديد: "تنظيم ملفاتنا". قد يكون العثور على التوازن الصحيح للفصل بين الرموز أمرًا صعبًا ، وكيف يمكن أن تعتمد ذلك اعتمادًا كبيرًا على تطبيقك والتقنيات انت تستخدم. هذا صحيح بالتأكيد في تطبيقات React.

كيفية تنظيم التعليمات البرمجية الخاصة بك شخصية للغاية وأنا لست على وشك محاولة القول إن هناك طريقة واحدة للقيام بذلك. ومع ذلك ، هناك بضعة مبادئ يمكنك استخدامها للمساعدة في الحفاظ على تنظيم الكود أثناء نموه.

لا تتعجل في إنشاء ملفات جديدة

صوفي ألبرت لخصت مؤخرا أنها سوف في هذه التغريدة:

في بعض الأحيان ، نشعر بالإثارة تجاه تقسيم الشفرة الخاصة بنا إلى ملفات منفصلة ، بحيث لا نعتبر ما يعنيه الحفاظ عليها. لنأخذ هذا الرمز كمثال:

في المثال المبسط للغاية الوارد أعلاه ، لا تأخذ الشفرة العديد من أسطر التعليمات البرمجية ، ولكن مع نموها ، يصبح من السهل جدًا تخيل مدى صعوبة إدارة كل ذلك في مكون واحد. لذلك قررنا تقسيم أقسام التنقل والرئيسية والجانبية إلى مكوناتها الخاصة. قد يكون من المغري للغاية وضعها في ملفات منفصلة ، لكن القيام بذلك يمكن أن يجعل الحفاظ على هذا المكون أمرًا صعبًا. قبل تقسيمها إلى ملفاتها الخاصة ، أوصي بعمل شيء مثل هذا:

يساعدك هذا في الحفاظ على الاستفادة من تجريد الرمز مع الحفاظ على إغلاق التعليمات البرمجية الشائعة معًا. أثناء قيامك بالرمز ، قد تجد الحاجة لسحبها إلى ملفات منفصلة ، على سبيل المثال ، قد تكون هناك حاجة إلى قسم التنقل في الصفحات الأخرى. عند هذه النقطة ، يجب عليك سحب هذا المكون في ملفه الخاص.

لا تتعجل في صنع الأدلة

يعد كل من الملفات والدلائل أدوات رائعة لتنظيم التعليمات البرمجية الخاصة بنا ، ولكن يتم استخدام الاثنين لأغراض مختلفة. تساعدنا الملفات في تجميع التعليمات البرمجية ذات الصلة والأدلة تساعدنا في تجميع الملفات ذات الصلة. ما يمكن أن يحدث غالبًا هو أن ينتهي بنا الأمر إلى إنشاء مجلدات ملفات بفهرس واحد. تحت الخوف من أننا قد نحتاج إلى إضافة ملفات ذات صلة ولا نريد إعادة تشكيل قاعدة الشفرات الخاصة بنا لاحقًا. لحسن الحظ ، يمكننا الحصول على كعكة لدينا وأكلها أيضًا. كيف؟ دعني اريك.

عندما تقوم بالاستيراد من ملف ، لن تضطر إلى وضع .js في النهاية حتى يظهر أعلى الملف على النحو التالي:

// اسم الملف هو Nav.js
استيراد Nav من './Nav' ؛

هذه ليست مشكلة كبيرة ، أنا متأكد من أنك فعلت هذا طوال الوقت أو أن محرر الكود فعل ذلك من أجلك دون أن تفكر فيه كثيرًا. الأمر الرائع حقًا في هذا هو أننا نفترض أنك تريد اختبار بعض التعليمات البرمجية في ملف منفصل ، لكنك لا تزال ترغب في تجميعها معًا ، أي أنك ترغب في تجميعها في دليل. يتم ذلك بسهولة جدا. كل ما عليك فعله هو إنشاء دليل يحمل نفس اسم المكون ، وانقل الملف إلى الدليل وأعد تسميته index.js. ليس عليك القيام بأي شيء لبيانات الاستيراد الخاصة بك لأن الاستيراد ذكي بما يكفي لاستخدام ملف index.js عند الاستيراد من دليل.

أكبر شيء يسلبه هذا هو عدم التسرع في حل المشكلات التي لا تواجهها. ابدأ بالبساطة ، واجعلها بسيطة ، ودع التعقيد يحدث بشكل طبيعي. سيكون ملفك أسهل في الصيانة إذا قمت بذلك.