دعونا نناقش بعض الأدوات الرائعة التي تجعل مطوري React أكثر إنتاجية وتحسن جودة عملهم.
عادةً ، عندما أبدأ مشروعًا جديدًا ، أستخدم القالب الخاص بي للأدوات التي أضفتها إلى هذه القائمة. أنا أعمل أيضًا مع أدوات أخرى مثل Material UI. قمت بدراستها ، وأنشأت العديد من التطبيقات بمساعدتهم ونفذت مشروعين صغيرين ، وبعد ذلك قررت مشاركة النتائج.
لذلك دعونا نلقي نظرة على القائمة النهائية.
ESLint
لدى ESLint الكثير لتغييره لأي مطور JavaScript ، بما في ذلك عشاق React. تقدم الخدمة خوارزميات ذكية تحلل الشفرة بسرعة ، وتبحث عن الأخطاء المحتملة.
بالإضافة إلى ذلك ، يسمح لك بإصلاح المشكلات التي تم العثور عليها تلقائيًا دون تغيير بناء الجملة.
للبدء ، أوصي باستخدام التكوين الذي اقترحه المطورون في Airbnb. أنه يحتوي على:
- دعم مدمج لمكتبة React (على سبيل المثال ، دعم قواعد استخدام الخطافات).
- ركز على أفضل الممارسات.
يعد ESLint أمرًا ضروريًا لأي مشروع ، وتكوين Airbnb هو أحد الإعدادات المفضلة لدي. لقد أضفت شيئًا إليها ، لكن 90٪ من التكوين الأولي متبقية.
قليلا
يوفر Bit شيئًا يحتاجه مطورو React كمنصة تعاون. يسمح للفرق بالعمل معًا على المكونات الفردية.
إنها أداة مساعدة لسطر الأوامر تتيح لك كتابة تعليمات برمجية قابلة لإعادة الاستخدام. Bit مفتوح المصدر تمامًا وهذا أحد أسباب شعبيته.
ترتبط معظم الوظائف بإنشاء مكونات ذرية ، بحيث يمكن مشاركتها بسهولة مع مطورين آخرين. بالإضافة إلى ذلك ، هناك أيضًا القدرة على التحقق من تبعيات المكونات ، واختبارها بشكل منفصل عن المشروع الرئيسي.
أنشئ تطبيق React
بصفتك مطورًا لـ React ، فأنت تعرف جيدًا المدة التي يستغرقها بدء مشروع جديد. لتوفير الوقت ، اقترح مطورو Facebook إنشاء تطبيق React .
هذا هو "المنشئ" الأولي الذي يسمح لك بالتركيز على تطوير React وليس تخصيصها. كل ما عليك القيام به هو تشغيل أمر my-app npx create-reaction-app. ثم لديك تطبيق مهيأ بالكامل للمشروع.
سيؤدي إنشاء تطبيق React إلى زيادة كفاءتك بشكل كبير إذا كنت تعمل كمستقل في React لعدة عملاء في نفس الوقت.
رياكت كوزموس
React Cosmos هي بيئة مطورة مصممة لإنشاء واجهات مستخدم عالية الجودة وقابلة للتطوير.
تتيح الخدمة إمكانية المشاركة بسهولة في النماذج الأولية واختبار مكونات الواجهة الفردية. بالإضافة إلى ذلك ، يمكنك تكرارها دون خوف من كسر التعليمات البرمجية الخاصة بك. يسهل عملية التصحيح عن طريق عزل المكونات.
يُفضل استخدام React Cosmos للعمل مع التطبيقات على مستوى المؤسسات. يتيح تقسيم المشروع إلى مكونات صغيرة قابلة لإعادة الاستخدام إمكانية كتابة رمز جودة يسهل الحفاظ عليه.
رد فعل Toolbox
في بداية هذه المقالة ، ذكرت أنني أستخدم واجهة المستخدم المادية لمعظم المشاريع. هناك سبب لذلك: أنا أحب التصميم متعدد الأبعاد وواجهة المستخدم المادية هي ما يناسبني تمامًا.
لكن هناك أيضًا بدائل. واحد منهم هو React Toolbox . هذه مجموعة من المكونات شائعة الاستخدام تم تطويرها باستخدام التصميم متعدد الأبعاد. يستخدم وحدات CSS لمزيد من المرونة.
في وقت كتابة هذا التقرير ، كان React Toolbox يحتوي على 28 مكونًا. بعضها عبارة عن درج التطبيق ، منتقي التاريخ ، الجلاد ، وشريط الوجبات الخفيفة.
رد فعل Bootstrap
يعتبر موقع الويب المتوافق مع الجوّال معيارًا حديثًا. يتوقع المستخدمون أداء موقعك بشكل جيد على أي جهاز. المواقع ذات التصميم سريع الاستجابة تجعل حتى محركات البحث مميزة.
يستخدم العديد من المطورين Bootstrap لإنشاء مواقع ويب سريعة الاستجابة وقابلة للتطوير بتصميمات احترافية. تكمن المشكلة في أن Bootstrap يأتي مع مكونات أصلية غير متكاملة مع React.
الحل هو حزمة React Bootstrap مفتوحة المصدر . تم تعديل جميع مكونات Bootstrap خصيصًا لمطوري React.
رد فعل مقلاع
هل تريد تسريع تطوير تطبيق React الخاص بك؟ حاول تقييم React Slingshot . إنه قالب يجمع بين React و Redux و Babel.
الميزة الأكثر أهمية في Slingshot التي تميزه عن الأدوات الأخرى هي ردود الفعل السريعة. تعمل هذه الميزة على أتمتة عملية الفحص واختبار الوحدة وإعادة التحميل الساخن في كل مرة يتم فيها تحديث التطبيق. بهذه الطريقة ، يمكنك التركيز على منطق الأعمال بدلاً من المهام الدخيلة.
رد فعل
يقولون أن المطور جيد مثل محرره. ربما هذا ليس صحيحًا تمامًا ، لكن المحرر مفيد جدًا في عملنا. أنا شخصياً من أشد المعجبين بـ JetBrains و WebStorm. خياري هو IDE ، لكنني أجرب البدائل من وقت لآخر.
على سبيل المثال ، وجدت أن Reactide هو IDE لـ React . لقد فوجئت جدًا بهذا الاكتشاف وجربت الأداة.
اتضح أن لديها ميزات مثيرة للاهتمام. على سبيل المثال ، يمكنك عرض مكونات مشروعك مباشرةً في IDE. يوجد أيضًا خادم Node.js مدمج مدمج مع محاكي المتصفح.
أداة مثيرة للاهتمام ، على الرغم من أنني لا أعتقد أنني سأتحول إليها تمامًا. لكن هذا خيار جيد لأولئك الذين يعملون مع React أو يتعلمونها ولا يريدون مواجهة مشاكل حتى أثناء مرحلة التكوين.
مكتبة اختبار التفاعل
"الاختبارات أولاً!" - ما أكرره باستمرار.
بعبارة أخرى ، من المهم امتلاك مجموعة من أدوات الاختبار. مكتبة اختبار React عبارة عن مكتبة صغيرة. يسمح لك باختبار كود React الخاص بك دون الكثير من المتاعب. المكتبة سهلة الاستخدام وتضيف إمكانات إلى المكتبات القياسية مثل رد فعل دوم وتفاعل دوم / أدوات الاختبار.
الوثائق الرائعة مع بعض الأمثلة الجيدة ستساعدك على العمل بسرعة.
القصص القصيرة
يوفر Storybook بيئة تطوير تفاعلية يمكنك من خلالها إنشاء مكونات جديدة أو اختبارها أو تحديد المكونات الموجودة من مكتبة.
Storybook مرن بدرجة كافية للعمل مع أي إطار عمل JavaScript رئيسي. على سبيل المثال React و Vue.js و Angular و Svelte و Marko وحتى HTML الخام.
أفضل شيء في Storybook هو أنه يأتي مع العديد من الوظائف الإضافية. فيما يلي عدد من الإضافات التي أجدها ممتعة:
- google-analytics (تضيف دعم Google Analytics للمكونات) ؛
- دعابة .
- لقطات (فحص المكونات باستخدام اللقطات) ؛
- منفذ العرض (تغيير الترميز للمكونات سريعة الاستجابة)
آمل أن تقدر هذه القائمة. إذا كنت تستخدم أدوات رائعة أخرى غير مذكورة في النص ، فاكتب عنها في التعليقات!