ما هو MUI وكيف يمكنك استخدامه في مشاريع ReactJS الخاصة بك؟

في سبتمبر 2021 ، غيرت الشركة المعروفة سابقًا باسم Material-UI اسمها إلى MUI. حدث هذا التغيير بشكل أساسي لأن العديد من الأشخاص لم يتمكنوا من التمييز بين واجهة المستخدم المادية والتصميم متعدد الأبعاد (نظام تصميم).

بدأت MUI كتنفيذ لتصميم المواد المصمم خصيصًا لتطبيقات React. تتوسع العلامة التجارية اليوم وتتطلع إلى إنشاء نظام تصميم جديد ، والذي سيكون بديلاً للتصميم متعدد الأبعاد.

يعني اختصار MUI مادة لبناء واجهات المستخدم ، وفي هذه المقالة ، ستتعلم بالضبط كيفية استخدام MUI لبناء واجهات مستخدم React.

كيفية الوصول إلى MUI في React؟

MUI متاح كحزمة npm. لذلك ، كل ما عليك فعله للوصول إليه هو تنفيذ السطر التالي من التعليمات البرمجية في مشروع React الخاص بك:

npm install @ mui / material @ العاطفة / رد فعل @ العاطفة / على غرار

بافتراض أنك قمت بذلك بالفعل تم تثبيت React على جهازك، لديك وصول كامل إلى مكتبة MUI وجميع مكوناتها. يحتوي MUI على أكثر من مائة مكون مختلف تقع في إحدى الفئات التالية:

• المدخلات
• عرض البيانات
• استجابة
• الأسطح
• التنقل
• تخطيط
• Utils
• شبكة بيانات
• التاريخ / الوقت

بعد تثبيت MUI كحزمة npm ، يكون استخدام المكتبة داخل مشروعك أمرًا بسيطًا مثل استيراد ملف المكون المطلوب في الملف المناسب وإدراج تفضيلات التصميم الخاصة بك في مواقع محددة طوال الوقت واجهة المستخدم.

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

إنشاء مكون تسجيل الدخول إلى React

لإنشاء مكون جديد في React ، ما عليك سوى الانتقال إلى مجلد src الخاص بـ React وإنشاء مجلد مكون جديد. يمكن أن يكون مجلد المكون موطنًا لجميع مكوناتك ، بدءًا من مكون تسجيل الدخول.

متعلق ب: ما هو ReactJS وما الذي يمكن استخدامه؟

ملف Signin.js

استيراد رد من "رد فعل" ؛
وظيفة تسجيل الدخول () {
إرجاع (

);
}
تصدير الافتراضي تسجيل الدخول ؛

بعد إنشاء مكون تسجيل الدخول الخاص بك ، حان الوقت لربطه بتطبيق React الخاص بك عن طريق استيراده إلى مكون التطبيق الخاص بك (الموجود داخل مجلد src).

ملف App.js المحدث

استيراد رد من "رد فعل" ؛
استيراد تسجيل الدخول من "./components/Signin" ؛
وظيفة التطبيق () {
إرجاع (






);
}
تصدير التطبيق الافتراضي ؛

يمكنك الآن البدء في استكشاف مكونات MUI التي تريد استخدامها في صفحة تسجيل الدخول الخاصة بك.

ما هو مكون الطباعة؟

ينتمي مكون الطباعة إلى فئة عرض بيانات MUI ويحتوي على ثلاثة عشر متغيرًا افتراضيًا. وتشمل هذه:

• h1
• h2
• h3
• h4
• h5
• h6
• العنوان الفرعي 1
• العنوان الفرعي 2
• الجسم 1
• الجسم 2
• زر
• شرح
• تسطير

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

استخدام مثال مكون الطباعة

استيراد رد من "رد فعل" ؛
استيراد الطباعة من "@ mui / المواد / الطباعة" ؛
وظيفة تسجيل الدخول () {
إرجاع (


 تسجيل الدخول 



);
}
تصدير الافتراضي تسجيل الدخول ؛

من الأمور الهامة المستقاة من الشفرة أعلاه أنه في كل مرة تقوم فيها بإدخال مكون جديد في واجهة المستخدم الخاصة بك ، ستحتاج أيضًا إلى استيراده في الجزء العلوي من ملف مكون React. سيؤدي تحديث مكون تسجيل الدخول باستخدام مكون الطباعة (كما هو موضح في الكود أعلاه) إلى إنتاج المخرجات التالية في متصفحك:

ما هو مكون حقل النص؟

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

استخدام مثال مكون حقل النص

استيراد رد من "رد فعل" ؛
استيراد TextField من "@ mui / material / TextField" ؛
استيراد الطباعة من "@ mui / المواد / الطباعة" ؛
وظيفة تسجيل الدخول () {
إرجاع (


 تسجيل الدخول 
التسمية = "عنوان البريد الإلكتروني"
مطلوب
معرف = "البريد الإلكتروني"
الاسم = "البريد الإلكتروني"
/>
التسمية = "كلمة المرور"
مطلوب
معرف = "كلمة المرور"
الاسم = "كلمة المرور"
اكتب = "كلمة المرور"
/>



);
}
تصدير الافتراضي تسجيل الدخول ؛

ستنتج الشفرة أعلاه المخرجات التالية في متصفحك:

كما يوحي الاسم ، يعمل مكون الارتباط بنفس طريقة ارتباط CSS العادي. يندرج ضمن فئة التنقل ولديه دعائم href والهدف التقليدية. بالإضافة إلى ذلك ، لها لون ومتغير ودعم تسطير.

متعلق ب: كيفية استخدام الدعائم في ReactJS

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

لذلك ، ما عليك سوى تضمين خاصيّة التسطير في المكوّن الخاص بك عندما لا تريد وضع تسطير أو عندما تريد أن يكون لها حالة تحويم.

نسيت كلمة السر؟

سيؤدي إدخال الرمز أعلاه في مكون تسجيل الدخول الحالي إلى إنتاج المخرجات التالية في متصفحك:

ما هو مكون الزر؟

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

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

استخدام مثال مكون الزر

 تسجيل الدخول

سيؤدي إدخال الرمز أعلاه في مكون تسجيل الدخول إلى تحديث واجهة المستخدم الخاصة بك لتبدو كما يلي:

الآن لديك زر تفاعلي يحوم عند تحريك الماوس فوقه. لكن كل المكونات أفقية ولا تبدو رائعة.

ما هو مكوّن الصندوق؟

Theboxcomponent هو بالضبط ما تحتاجه لتنظيم مكونات الأداة المساعدة (مثل مكون الزر) في تطبيق React الخاص بك. يستخدم مكون الصندوق خاصية ansx ، والتي لها حق الوصول إلى جميع خصائص النظام (مثل الارتفاع والعرض) التي تحتاجها لتنظيم المكونات في واجهة المستخدم الخاصة بك.

استخدام مثال مكون الصندوق

استيراد رد من "رد فعل" ؛
استيراد ارتباط من "@ mui / material / Link" ؛
استيراد TextField من "@ mui / material / TextField" ؛
استيراد الطباعة من "@ mui / المواد / الطباعة" ؛
استيراد {Button، Box} من "@ mui / material" ؛
وظيفة تسجيل الدخول () {
إرجاع (


sx = {{
بلدي: 8 ،
عرض: "فليكس" ،
flexDirection: "العمود" ،
محاذاة العناصر: "مركز" ،
}}>
 تسجيل الدخول 
التسمية = "عنوان البريد الإلكتروني"
مطلوب
معرف = "البريد الإلكتروني"
الاسم = "البريد الإلكتروني"
الهامش = "عادي"
/>
التسمية = "كلمة المرور"
مطلوب
معرف = "كلمة المرور"
الاسم = "كلمة المرور"
اكتب = "كلمة المرور"
الهامش = "عادي"
/>
href = "#"
sx = {{mr: 12، mb: 2}}
>
نسيت كلمة السر؟

المتغير = "مضمّن"
sx = {{mt: 2}}
>
تسجيل الدخول





);
}
تصدير الافتراضي تسجيل الدخول ؛

من خلال لف مكون الصندوق حول مكونات الأداة المساعدة (واستخدام خاصية sx) في الكود أعلاه ، ستنشئ بنية عمود مرنة بشكل فعال. ستنتج الشفرة أعلاه صفحة تسجيل الدخول التالية إلى React في متصفحك:

ما هو مكون شبكة MUI؟

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

• XS (صغير جدًا ويبدأ عند 0 بكسل)
• سم (صغير ويبدأ عند 600 بكسل)
• م (متوسط ​​ويبدأ عند 900 بكسل)
• إل جي (كبير ويبدأ عند 1200 بكسل)
• XL (كبير جدًا ويبدأ عند 1536 بكسل)

يعمل MUIgridcomponent بنفس طريقة خاصية Flexbox CSS من حيث أنه يحتوي على نظام أحادي الاتجاه بين الوالدين والطفل يعتمد على نوعين من التخطيطات - الحاوية (الأصل) والعناصر (الفرعية). ومع ذلك ، فإن مكون شبكة MUI يسهل الشبكة المتداخلة ، حيث يمكن أن يكون العنصر أيضًا حاوية.

اكتشف خيارات التصميم الأخرى لتطبيقات ReactJS

تعلمك هذه المقالة كيفية تثبيت مكتبة MUI واستخدامها في تطبيقات React. تتعلم كيفية استخدام بعض المكونات الأساسية (مثل الطباعة) وبعض المكونات الهيكلية الأكثر تقدمًا (مثل مكون الصندوق).

مكتبة MUI سهلة الاستخدام وفعالة وتعمل بشكل رائع مع تطبيقات React. لكن هذا لا يعني أنه خيار التصميم الوحيد المتاح لمطوري React. إذا كنت بصدد إنشاء تطبيق React ، فأنت حر في استخدام مكتبة MUI أو أي إطار عمل CSS لتصميم تطبيقك.

قاديشا كين (33 مقالة منشورة)

قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مادة يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).

المزيد من Kadeisha Kean