تحتوي React على مكتبة مكونات؛ مكتبة المكونات عبارة عن خطة تصميم تنظم المكونات معًا للبناء من خلال مجموعات متعددة الأبعاد. يتم تصميم المكونات من خلال تفكيك العناصر وتحريضها وإعادة تنظيمها في الوظائف والتعبيرات المرئية، وهي مبنية على قابلية إعادة الاستخدام. الغرض من ذلك هو تكوين مكتبات المكونات القياسية المستخدمة بشكل شائع للتفاعل، بما في ذلك Bulma وAntDesign وBootstrap وما إلى ذلك.
بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار التفاعل 17.0.1، كمبيوتر Dell G3.
تصميم المكونات هو تفكيك وتلخيص وإعادة تنظيم العناصر في الوظائف والتعبيرات المرئية، وتشكيل مكونات موحدة بناءً على الغرض من إعادة الاستخدام. يتم إنشاء خطة التصميم بأكملها من خلال مجموعة متعددة الأبعاد، ويتم تنظيم هذه المكونات معًا يتم تشكيل.
مكتبات مكونات التفاعل شائعة الاستخدام:
تصميم النمل
رابط المشروع: تصميم النمل
حجم الحزمة (من BundlePhobia): 1.2 ميجا بايت بعد التصغير، 349.2 كيلو بايت بعد التصغير + ضغط gzip، تقليل الحجم عن طريق هز الشجرة.
ميزة:
يأتي AntDesign مع وثائق دعم واسعة النطاق، ويحتوي على مجتمع، بما في ذلك مشروع منفصل (AntDesignPro) مع قوالب معدة مسبقًا؛
مكتبة واجهة المستخدم التي يمكن استخدامها لتصميم التطبيقات الخلفية/الداخلية بسرعة.
عيب:
عدم إمكانية الوصول؛
إنه كبير ومن المتوقع أن يكون له تأثير كبير على الأداء؛
قم بتلويث CSS الخاص بك (توقع إضافة !important لمنعه من تصميم المكونات غير التابعة لـ Ant).
بوتستراب
في الواقع، أفكر بشكل أساسي في Bootstrap كمكتبة لواجهة المستخدم. لن يفوز بأي جوائز تصميم، ولكن يمكن استخدامه لإكمال بعض المشاريع المتطورة والحد الأدنى من المنتجات القابلة للتطبيق.
ولكن ذلك يعتمد على ما تريد استخدامه من أجله. إذا كنت جديدًا في React، فهي مكتبة رائعة للبدء بها. بالنسبة للمطورين الأكثر خبرة، قد ينظرون إلى styled-components/Emotion.
هناك مكتبتان مشهورتان مع روابط React لـ Bootstrap، وأنا شخصيًا أستخدم Reactstrap فقط.
رابط المشروع: React Bootstrap
حجم الحزمة (من BundlePhobia): 111 كيلو بايت بعد التصغير، 34.4 كيلو بايت بعد التصغير + gzip، تقليل الحجم عن طريق هز الشجرة
رابط المشروع: Reactstrap
حجم الحزمة (من BundlePhobia): 152.1 كيلو بايت بعد التصغير، 39.4 كيلو بايت بعد التصغير + ضغط gzip، تقليل الحجم عن طريق هز الشجرة
ميزة:
مكتبة Bootstrap مع روابط React التي يحبها الجميع؛
يمكن تخصيصه بسهولة عبر CSS-in-JS؛
لقد مضى وقت طويل بما فيه الكفاية بحيث لا داعي للقلق بشأن الأخطاء/المشكلات؛
ابدأ بسرعة؛
لا توجد تبعية jQuery حيث تمت إعادة تنفيذها بالكامل في React.
عيب:
هذا هو Bootstrap: إذا لم تقم بتخصيصه، فسيبدو موقعك مثل أي موقع آخر.
بولما
تختلف Bulma عن المكتبات الأخرى المقدمة في هذه المقالة لأن Bulma عبارة عن إطار عمل CSS خالص ولا يتطلب JS. يمكنك اختيار استخدام فئات من Bulma مباشرة، أو استخدام مكتبة مجمعة مثل مكونات رد فعل bulma.
رابط المشروع: بولما
رابط المشروع: مكونات رد فعل بولما
حجم الحزمة (من BundlePhobia): 179 كيلو بايت مصغر، 20.1 كيلو بايت مصغر + مضغوط بصيغة gzip
ميزة:
لن يجعل موقع الويب الخاص بك يبدو مثل Bootstrap؛
مثالية للنهوض والجري بسرعة؛
الميزات الحديثة (Flexbox/Grid الأساسية).
عيب:
إمكانية الوصول: هناك بعض المكتبات، ولكنها ليست صارمة مثل المكتبات الأخرى التي تلتزم بإرشادات WCAG.
واجهة المستخدم شقرا
رابط المشروع: ChakraUI
حجم الحزمة (من BundlePhobia): 326.2 كيلو بايت بعد التصغير، 101.2 كيلو بايت بعد التصغير + ضغط gzip، تقليل الحجم عن طريق هز الشجرة
ميزة:
إمكانية الوصول: وفقًا لإرشادات WAI-ARIA، تستخدم المكونات علامات aria؛
مدعوم من خادم Discord؛
سهل التخصيص (مع دعم السمة)؛
معياري للغاية، لذا فإن اهتزاز الشجرة سيؤدي فعليًا إلى إزالة التعليمات البرمجية التي لا تستخدمها.
عيب:
جديد تمامًا.
يلاحظ:
إنه قريب جدًا من الإصدار 1، لذا يرجى الانتباه إلى حدوث تغييرات بعد الإصدار 0.8.0.
واجهة المستخدم المادية
تعد MaterialUI إحدى مكتبات الحب والكراهية الخاصة بي. لقد ساعدني ذلك في اجتياز بعض المواعيد النهائية المرهقة للغاية للمشروعات في الماضي، ولكن في النهاية كنت دائمًا أخرجها من الطريق في أسرع وقت ممكن.
في الماضي، لم يكن بإمكانك تخصيص أنماط MaterialUI إلا عن طريق كتابة JSS، ولكن لحسن الحظ يمكنك الآن تجاوز الأنماط باستخدام المكونات المصممة والعاطفة.
رابط المشروع: واجهة المستخدم المادية
حجم الحزمة (من BundlePhobia): 325.7 كيلو بايت مصغر، 92 كيلو بايت مصغر + gizp مضغوط، تم تقليله عن طريق اهتزاز الشجرة
ميزة:
توثيق كامل
مكتبة الأيقونات ضخمة
بسيطة وسهلة الاستخدام (الوضع في البداية)
عيب:
من الصعب والمؤلم التخصيص، ولكنه ضروري (لتحسين العناصر المرئية)؛
الأداء: سيتم عرض عدد كبير جدًا من عقد DOM؛
سيبدو تطبيقك كأحد منتجات Google (بالنسبة للبعض، قد يمثل هذا مظهرًا احترافيًا).
واجهة المستخدم الدلالية
رابط المشروع: واجهة المستخدم الدلالية
الدلالية واجهة المستخدم رد الفعل
حجم الحزمة (من BundlePhobia): 300.8 كيلو بايت بعد التصغير، 80.9 كيلو بايت بعد التصغير + ضغط gzip، تقليل الحجم عن طريق هز الشجرة.
ميزة:
قابل للتركيب (تمرير المكونات باستخدام كدعامة)
من السهل التخصيص
وثائق مفيدة
المستخدم معروف جيدًا (يتم استخدامه داخليًا بواسطة Netflix واستخدامه بواسطة المنتجات التي تصدرها Amazon)
دعم تايب سكريبت
عيب:
عدم اليقين المحتمل للمشاريع مفتوحة المصدر.
عرض المشكلة:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
شوكة يديرها المجتمع:
https://github.com/fomantic/Fomantic-UI
تنويه مشرف
الوصول إلى واجهة المستخدم
ReachUI هي مكتبة مكونات منخفضة المستوى تسمح للمطورين ببناء مكونات React يمكن الوصول إليها في أنظمة التصميم الخاصة بهم.
لا يوجد حجم حزمة متاح لأنه يتم تصدير كل مكون على حدة كحزمة npm خاصة به.
ريكيت
Reakit هي مكتبة مكونات أخرى منخفضة المستوى. من الناحية الفنية هي مكتبة واجهة المستخدم، ولكنها لا تأتي مع CSS. لذلك لا تزال بحاجة إلى إيجاد حل التصميم.
حجم الحزمة (من BundlePhobia): 119.9 كيلو بايت بعد التصغير، 32.1 كيلو بايت بعد التصغير + ضغط gzip، تقليل الحجم عن طريق هز الشجرة.
ريباس
لقد كنت أتابع Rebass لفترة من الوقت. إنها مكتبة مكونات قوية لا تأتي مع سمة، ولكن يمكنك تغيير السمة بسهولة. للحصول على مثال على ذلك أثناء العمل، راجع العرض التوضيحي الخاص به.
رابط المشروع: ريباس
حجم الحزمة (من BundlePhobia): 43 كيلو بايت بعد التصغير، 14.4 كيلو بايت بعد التصغير + ضغط gizp، تقليل الحجم عن طريق هز الشجرة.