6 أفضل ReactJS القائم على أطر العمل

نشرت أصلا على Zeolearn

React (ReactJS) مكتبة لا تحتاج إلى أي مقدمة اليوم لأي شخص يعمل في مجال التطوير الأمامي. ومع ذلك ، يمكن العثور على مزيد من التفاصيل حول رد الفعل js هنا. في هذه المقالة ، سنستكشف أطر عمل واجهة المستخدم الرائدة لتطبيقات Reactjs. طبقت مكتبات مكونات React UI هذه ممارسات إطار عمل CSS ذات الصلة كعناصر تفاعل جاهزة للاستخدام مما يجعل تطويرك أكثر سهولة وإنتاجية.

هيا بنا نبدأ…

1. المواد واجهة المستخدم

MaterialUI هي مجموعة من مكونات React التي تنفذ إرشادات تصميم المواد من Google. عندما يتعلق الأمر بمكونات محددة مسبقًا ، لا سيما واجهة المستخدم ، فإن أحد الأشياء المهمة التي نحتاج إلى إيجادها هو عدد أدوات واجهة المستخدم المتاحة وما إذا كان يمكن تخصيصها مع التكوينات. يحتوي Material-UI على جميع المكونات التي تحتاج إليها وهو قابل للتكوين للغاية مع لوحة ألوان محددة مسبقًا ومكون والذي يسمح لك بتحديد سمة لون مخصصة لتطبيقك.

من بين المئات من أطر عمل واجهة المستخدم الموجودة هناك ، تعد واجهة المستخدم الخاصة بالمواد واحدة من أفضل أطر واجهة المستخدم القائمة على Reactjs والتي لديها أكثر تنفيذ محسن لتصميم المواد. مع 678 مشاركًا ونجوم 35K GitHub ، تعد واحدة من المكتبات الأكثر شعبية والتي يتم الحفاظ عليها بنشاط.

لقد قمت بإعداد نموذج التطبيق المقدم في أمثلة مشروع material-ui على stackblitz للحصول على عرض توضيحي سريع. الرجوع إلى رمز هنا.

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

2. رد فعل Bootstrap

يعد Bootstrap أحد أكثر أنظمة CSS انتشارًا والأكثر استخدامًا. ليس من المستغرب أن يكون لديك الثنائي من React و Bootstrap. React Bootstrap عبارة عن مجموعة من مكونات React التي تقوم بتنفيذ إطار عمل Bootstrap. يستهدف React-Bootstrap حاليًا Bootstrap v3 ويعمل الفريق بنشاط على Bootstrap v4.

مع وجود 204 مشاركًا ونجوم github بحجم 12 ألفًا ، تعد واحدة من المكتبات الشهيرة التي يتم الحفاظ عليها بنشاط.

لا يوفر تطبيق Respon-bootstrap لـfortunatley أي مثال لمشروع عملي ، ولكن هناك أمثلة لكل مكون يمكن العثور عليه هنا.

لقد قمت بإعداد تطبيق نموذج على stackblitz من خلال تجميع 2 من الأمثلة المستقلة من الوثائق. الرجوع إلى رمز هنا.

3. الدلالي واجهة المستخدم

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

الدلالي UI React هو تكامل React الرسمي لـ UI الدلالي

مع 175 مساهما ونجوم github 6K ، فهي واحدة من المكتبات الشعبية والتي يتم صيانتها بنشاط.

لا يقدم رد الفعل المؤسف أي مثال لمشروع عملي ولكن هناك أمثلة لكل مكون يمكن العثور عليه هنا.

يمكن استكشاف تطبيق نموذج يوضح مكون البطاقة هنا

4. رد فعل الأدوات

ريشة أخرى في مكتبة مواد تصميم Google. React Toolbox هي مكتبة واجهة المستخدم التي تتبع مفاهيم تصميم المواد من Google وهي مبنية على قمة بعض المقترحات الأكثر حداثة مثل CSS Modules (مكتوبة في SASS) و Webpack و ES6. تتكامل المكتبة بشكل متناغم مع سير عمل Webpack وهي قابلة للتخصيص ومرنة للغاية.

مع 219 مشاركًا ونجوم GitHub 7k ، تعد واحدة من المكتبات الشعبية التي يتم صيانتها بنشاط.

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

5. تصميم النمل

لغة تصميم واجهة المستخدم على مستوى المؤسسات والتنفيذ القائم على رد الفعل. تم تصميم تصميم النمل من مكونات React عالية الجودة خارج الصندوق والتي تمت كتابتها في TypeScript. وهو يدعم المستعرض والتقديم من جانب الخادم وبيئات الإلكترون ، ويحتوي على العديد من المكونات وحتى البرنامج التعليمي مع تطبيق Create-react-app

مع 443 مشاركًا ونجوم GitHub 24k ، تعد واحدة من المكتبات الشعبية التي يتم الحفاظ عليها بنشاط.

يمكنك الرجوع إلى العروض التوضيحية هنا

6. مؤسسة رد الفعل

مثل التمهيد ، CSS framework Foundation هو إطار CSS شعبي آخر. Foundation من Zurb هي مكتبة غنية بالميزات وقابلة للتخصيص بسهولة. React Foundation هي مؤسسة تنفذها مكتبة كمكونات React.

React Foundation هي أساس كل جزء من المؤسسة في مكونات React القابلة لإعادة الاستخدام باتباع أفضل ممارسات الإطار. الهدف الرئيسي وراء تطوير React Foundation هو سهولة الاستخدام والتوسعة.

على عكس مكتبات واجهة المستخدم الأخرى لتطوير تطبيقات Reactjs التي قمنا باستكشافها أعلاه ، يحتوي React Foundation على عدد محدود جدًا من المساهمين والتطوير النشط للغاية.

يمكنك الرجوع إلى العروض التوضيحية هنا