16 أدوات تفاعل لمطوري الواجهة



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

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

لذا ، نندفع إلى المسبح برؤوسنا ، ولا نتأخر في وقت لاحق:

تفاعل ورقة البيانات


أداة شبيهة ببرنامج Excel يمكنك تضمينها في تطبيقات React. يسمح باستخدام الصيغ الرياضية (القاعدة هي math.js). يمكن إضافة قوائم وأزرار منسدلة إلى خلايا الجدول.

التفاعل الأصلي للويب


حسنًا ، يتيح لك هذا المكون إضافة مؤشرات نشاط وأزرار وأشرطة تقدم (مؤشرات تقدم) ومفاتيح تحويل وأكثر من ذلك بكثير.

رد فعل


يتم وصف Reactide كأول أداة IDE متخصصة لتطوير التطبيقات باستخدام React. في الواقع ، هو تطبيق سطح مكتب متعدد الأنظمة الأساسية يسمح لك بتقديم المشاريع بسرعة بدون تكوين خادم ، مما يقلل من تعقيد التطوير ويوفر الوقت.

قصة




هذه الأداة هي واحدة من أقوى الأدوات وأكثرها شهرة. بمساعدتها ، يتم تجميع المكونات. يتحدث المطورون عنها كمكون تفاعلي لتطوير واجهة المستخدم. وهو يدعم React و React-مواطن و Vue و Angular. تتيح لك الأداة عرض جميع مكونات المشروع. في المجموعة - عدد كبير من الإضافات لتطوير المستندات والمكونات والاختبار.

رد فعل أسلوب رد الفعل




Styleguidist هي بيئة تطوير للمكونات مع خادم dev (مع إمكانية إعادة التشغيل السريع) ووثائق ممتازة. توفر الأداة فرصة للنظر في أمثلة على استخدام مكونات مختلفة.

كتالوج




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

رد فعل الاستوديو


هذه أداة تصميم تسمح لك بالحصول على مشروع تفاعل عالي الجودة بدون تشفير. التطبيق متوافق مع Sketch ، مما سيضيف المزيد من المتعة والمتعة للمطور. إذا لم تكن مشفرًا - بالتأكيد تستحق نظرة.

تفاعل الكون




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

محرر ORY


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

رد فعل البصر



أداة تصور ممتازة تسمح لك بتكوين كل ما يحتاجه المطور بسرعة.

إعادة تحديد Devtools




وأداة تصور أخرى تستخدم لتتبع طبقات التخزين المؤقت. لا مشاكل ولا تقلق - يتم عرض كل شيء بطريقة بصرية للغاية.

Redux DevTools مونيتور مونيتور




أداة رائعة لبدء وإيقاف ملف تعريف Javascript. إنشاء أداة تستند إلى Redux.

المنظار




Redux مراقبة الأحداث على أساس الجدول الزمني.

redux-وعد-الوسيطة مرات


import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import logTimes from 'redux-promise-middleware-times';
const store = createStore(thunk, promiseMiddleware(), logTimes());


الملحق الصغير إلى الوسيطة وعد الوعد. يسجل الوقت الذي يتم فيه تنفيذ حدث معين.

تفاعل مونوكلي




أداة تصوّر قوية تُظهر المكونات الفردية ، وحالتها ، وحالة Redux ، وتدمج هذا في مخطط مفهوم.

Hygen




إطار عمل منشئ الكود يمكن استخدامه في أي مشروع تقريبًا لتقليل حجم القالب. مثل هذا الإطار مرحب به للغاية لأولئك الذين يعملون مع React و Redux. يمكن أن يكون عدد القوالب هنا كبيرًا جدًا ، لأنه يتم إنشاؤها تقريبًا في كل مرحلة من مراحل العمل.

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

Source: https://habr.com/ru/post/ar416005/


All Articles