MUI Nedir ve ReactJS Projelerinizde Nasıl Kullanabilirsiniz?

Eylül 2021'de daha önce Material-UI olarak bilinen şirket adını MUI olarak değiştirdi. Bu değişiklik, esas olarak, birçok kişinin Material-UI'yi Material Design'dan (bir tasarım sistemi) ayırt edememesi nedeniyle gerçekleşti.

MUI, React uygulamaları için uyarlanmış bir Materyal Tasarımı uygulaması olarak başladı. Bugün marka genişliyor ve Materyal Tasarımına alternatif olacak yeni bir tasarım sistemi yaratmaya çalışıyor.

MUI kısaltması, UI'ler oluşturmak için Malzeme anlamına gelir ve bu makalede, React UI'leri oluşturmak için MUI'yi tam olarak nasıl kullanacağınızı öğreneceksiniz.

React'te MUI'ye Nasıl Erişilir?

MUI, bir npm paketi olarak mevcuttur. Bu nedenle, ona erişmek için yapmanız gereken tek şey, React projenizde aşağıdaki kod satırını yürütmektir:

npm install @mui/material @emotion/react @emotion/styled

Zaten olduğunu varsayarsak cihazınızda yüklü React, MUI kitaplığına ve tüm bileşenlerine tam erişiminiz vardır. MUI, aşağıdaki kategorilerden birine giren yüzden fazla farklı bileşene sahiptir:

• girişler
• Veri görüntüleme
• Geri bildirim
• yüzeyler
• Navigasyon
• Düzen
• araçlar
• Veri şebekesi
• Tarih/Saat

MUI'yi bir npm paketi olarak kurduktan sonra, projenizde kütüphaneyi kullanmak, gerekli bileşeni uygun dosyaya yerleştirmek ve stil tercihlerinizi baştan sona belirli konumlara eklemek kullanıcı arayüzü.

React uygulamanız için bir oturum açma sayfası oluşturmak istiyorsanız, bunlar zaman kazandıracak ve temiz bir tasarım oluşturmanıza yardımcı olacak kullanabileceğiniz birkaç MUI bileşenidir.

React Oturum Açma Bileşenini Oluşturma

React'te yeni bir bileşen oluşturmak için, React'in src klasörüne gidin ve yeni bir bileşen klasörü oluşturun. Bileşen klasörü, oturum açma bileşeninden başlayarak tüm bileşenlerinizin evi olabilir.

İlgili: ReactJS Nedir ve Ne İçin Kullanılabilir?

Signin.js Dosyası

React'i 'react'ten içe aktarın;
function Oturum Açma() {
dönüş (

);
}
varsayılan Oturum Açmayı dışa aktar;

Oturum açma bileşeninizi oluşturduktan sonra, uygulama bileşeninize (src klasöründe bulunur) içe aktararak onu React uygulamanıza bağlamanın zamanı geldi.

Güncellenmiş App.js Dosyası

React'i 'react'ten içe aktarın;
Signin'i './components/Signin'den içe aktarın;
işlev Uygulama() {
dönüş (






);
}
varsayılan Uygulamayı dışa aktar;

Artık oturum açma sayfanızda kullanmak istediğiniz MUI bileşenlerini keşfetmeye başlayabilirsiniz.

Tipografi Bileşeni Nedir?

Tipografi bileşeni, MUI'nin veri görüntüleme kategorisine aittir ve on üç varsayılan değişkene sahiptir. Bunlar şunları içerir:

• h1
• h2
• h3
• h4
• h5
• h6
• altyazı1
• altyazı2
• vücut1
• vücut2
• buton
• altyazı
• üst çizgi

Seçtiğiniz varyant, görüntülemek istediğiniz metne bağlı olmalıdır. Örneğin, bir başlık görüntülemek istiyorsanız, kullanıcı arayüzünüzdeki altı başlık değişkeninden herhangi birini kullanmakta özgürsünüz. Tipografi bileşenine varyant prop'unu ve seçilen değeri eklemeniz yeterlidir.

Tipografi Bileşenini Kullanma Örneği

React'i 'react'ten içe aktarın;
Tipografiyi '@mui/material/Typography'den içe aktar;
function Oturum Açma() {
dönüş (


 Kayıt olmak 



);
}
varsayılan Oturum Açmayı dışa aktar;

Yukarıdaki koddan önemli bir çıkarım, kullanıcı arayüzünüze her yeni bileşen eklediğinizde, aynı zamanda onu React bileşen dosyanızın en üstüne içe aktarmanız gerekeceğidir. Tipografi bileşeniyle oturum açma bileşeninizi güncellemek (yukarıdaki kodda görüldüğü gibi) tarayıcınızda aşağıdaki çıktıyı üretecektir:

Metin Alanı Bileşeni Nedir?

Metin alanı bileşeni, giriş kategorisine aittir. Bu bileşenin iki basit işlevi vardır; kullanıcıların bir kullanıcı arayüzündeki metni girmesine veya düzenlemesine olanak tanır. Metin alanı bileşeni, ana hatları çizilmiş, doldurulmuş ve standart olmak üzere üç çeşit kullanır ve ana hatları çizilmiş varyant varsayılandır. Bu nedenle, varsayılan metin alanı bileşenini kullanmak istiyorsanız, varyant prop'unu eklemeniz gerekmez. Metin alanı bileşeni ayrıca etiket, gerekli, tür, kimlik, devre dışı, vb. dahil olmak üzere birkaç başka destek kullanır.

Metin Alanı Bileşenini Kullanma Örneği

React'i 'react'ten içe aktarın;
TextField'i '@mui/material/TextField' öğesinden içe aktarın;
Tipografiyi '@mui/material/Typography'den içe aktar;
function Oturum Açma() {
dönüş (


 Kayıt olmak 
label="E-posta Adresi"
gereklidir
id="e-posta"
isim = "e-posta"
/>
etiket="Şifre"
gereklidir
id="parola"
isim = "şifre"
type="şifre"
/>



);
}
varsayılan Oturum Açmayı dışa aktar;

Yukarıdaki kod, tarayıcınızda aşağıdaki çıktıyı üretecektir:

Adından da anlaşılacağı gibi, bağlantı bileşeni, düz bir CSS bağlantısıyla aynı şekilde çalışır. Navigasyon kategorisine girer ve geleneksel href ve hedef aksesuarlara sahiptir. Ek olarak, bir rengi, bir çeşidi ve bir alt çizgi desteği vardır.

İlgili: ReactJS'de Props Nasıl Kullanılır

Ancak, bağlantınızın benzersiz görünmesini istemediğiniz sürece herhangi bir ek donanım kullanmanıza gerek yoktur. Örneğin, altı çizili destek öğesinin varsayılan değeri "her zaman"dır ve pervaneye atayabileceğiniz diğer iki değer "yok" ve "vurgulu"dur.

Bu nedenle, alt çizgi desteğini bileşeninize yalnızca alt çizgi istemediğinizde veya fareyle üzerine gelme durumuna sahip olmasını istediğinizde eklemeniz gerekir.

şifreyi unut?

Yukarıdaki kodu mevcut oturum açma bileşeninize eklemek, tarayıcınızda aşağıdaki çıktıyı üretecektir:

Düğme Bileşeni Nedir?

Düğme bileşeni ayrıca giriş kategorisine aittir ve genel düğme işlevselliğine bağlıdır ve bir kullanıcının eylemlerini uygulamanıza iletir. Bu bileşen, üç değişkenden (metin, içerilen ve anahat) birini kullanır ve her bir değişken, birincil, devre dışı ve bağlantılı olmak üzere üç durumdan birinde görünebilir.

Bir düğme bileşeni varsayılan değişkeni metindir. Bu nedenle, bir kapsayıcı anahat düğmesi istiyorsanız, bunu belirtmek için varyant prop'u kullanmanız gerekir. Düğme bileşeninin varyant desteğine ek olarak, diğerlerinin yanı sıra bir onclick işleyicisi ve bir renk desteği vardır.

Düğme Bileşenini Kullanma Örneği

 Kayıt olmak

Yukarıdaki kodu oturum açma bileşeninize eklemek, kullanıcı arayüzünüzü aşağıdaki gibi görünecek şekilde günceller:

Artık, fare üzerine geldiğinde gezinen etkileşimli bir düğmeniz var. Ancak tüm bileşenler yatay ve harika görünmüyor.

Kutu Bileşeni Nedir?

Kutu bileşeni, React uygulamanızdaki yardımcı program bileşenlerini (düğme bileşeni gibi) düzenlemek için tam olarak ihtiyacınız olan şeydir. Box bileşeni, bileşenleri kullanıcı arayüzünüzde düzenlemek için ihtiyaç duyduğunuz tüm sistem özelliklerine (yükseklik ve genişlik gibi) erişimi olan ansx prop'u kullanır.

Kutu Bileşeni Örneğinin Kullanılması

React'i 'react'ten içe aktarın;
Bağlantıyı '@mui/material/Link'ten içe aktar;
TextField'i '@mui/material/TextField' öğesinden içe aktarın;
Tipografiyi '@mui/material/Typography'den içe aktar;
'@mui/material' öğesinden { Düğme, Kutu } içe aktarın;
function Oturum Açma() {
dönüş (


sx={{
benim: 8,
ekran: 'esnek',
flexDirection: 'sütun',
alignItems: 'merkez',
}}>
 Kayıt olmak 
label="E-posta Adresi"
gereklidir
id="e-posta"
isim = "e-posta"
kenar boşluğu = "normal"
/>
etiket="Şifre"
gereklidir
id="parola"
isim = "şifre"
type="şifre"
kenar boşluğu = "normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
şifreyi unut?

varyant = "içerir"
sx={{mt: 2}}
>
Kayıt olmak





);
}
varsayılan Oturum Açmayı dışa aktar;

Kutu bileşenini yukarıdaki kodda yardımcı program bileşenlerinin etrafına sararak (ve sx prop'u kullanarak), etkili bir şekilde esnek bir sütun yapısı oluşturacaksınız. Yukarıdaki kod, tarayıcınızda aşağıdaki React oturum açma sayfasını oluşturacaktır:

MUI Izgara Bileşeni Nedir?

Izgara bileşeni, öğrenilmesi gereken başka bir yararlı MUI bileşenidir. MUI'nin düzen kategorisine girer ve yanıt vermeyi kolaylaştırır. Bir geliştiricinin 12 sütunlu yerleşim sistemi nedeniyle duyarlı tasarım elde etmesine olanak tanır. Bu düzen sistemi, herhangi bir ekran boyutuna uyum sağlayan uygulamalar oluşturmak için MUI'nin beş varsayılan kesme noktasını kullanır. Bu kesme noktaları şunları içerir:

• xs (çok küçük ve 0 pikselden başlar)
• sm (küçük ve 600 pikselden başlar)
• md (orta ve 900 pikselden başlar)
• lg (büyük ve 1200 pikselden başlar)
• xl (ekstra büyük ve 1536 pikselden başlar)

MUIgrid bileşeni, iki tür düzene (kapsayıcı (üst) ve öğeler (alt) dayalı tek yönlü bir üst-alt sistemine sahip olması bakımından CSS flexbox özelliğiyle aynı şekilde çalışır). Bununla birlikte, MUI ızgara bileşeni, bir öğenin aynı zamanda bir kapsayıcı olabileceği yuvalanmış bir ızgarayı kolaylaştırır.

ReactJS Uygulamaları için Diğer Şekillendirme Seçeneklerini Keşfedin

Bu makale, MUI kitaplığını React uygulamalarınızda nasıl kuracağınızı ve kullanacağınızı öğretir. Bazı temel bileşenleri (tipografi gibi) ve bazı daha gelişmiş yapısal bileşenleri (kutu bileşeni gibi) nasıl kullanacağınızı öğrenirsiniz.

MUI kitaplığının kullanımı kolaydır, etkilidir ve React uygulamalarıyla harika çalışır. Ancak bu, React geliştiricileri için mevcut olan tek stil seçeneği olduğu anlamına gelmez. Bir React uygulaması oluşturuyorsanız, uygulamanıza stil vermek için MUI kitaplığını veya herhangi bir CSS çerçevesini kullanmakta özgürsünüz.

Kadeisha Kean (33 Makale Yayınlandı)

Kadeisha Kean, Full-Stack Yazılım Geliştirici ve Teknik/Teknoloji Yazarıdır. En karmaşık teknolojik kavramların bazılarını basitleştirme konusunda belirgin bir yeteneğe sahiptir; herhangi bir teknoloji acemi tarafından kolayca anlaşılabilecek malzeme üretmek. Yazmak, ilginç yazılımlar geliştirmek ve dünyayı gezmek (belgeseller aracılığıyla) konusunda tutkulu.

Kadeisha Kean'dan Daha Fazla