6 En İyi ReactJS Tabanlı UI Altyapıları
Aslen ZeoLearn Blog'da yayınlandı
Ön geliştirme alanında çalışan herkes için bugün tanıtıma ihtiyaç duymayan bir kütüphane React (ReactJS). Bununla birlikte, reaksiyon js hakkında daha fazla ayrıntı burada bulunabilir. Bu yazıda Reactjs uygulamaları için önde gelen UI çerçevelerini inceleyeceğiz. Bu React UI bileşen kütüphaneleri, ilgili CSS çerçeve uygulamalarını, gelişiminizi daha kolay ve üretken kılan, kullanıma hazır olan tepki bileşenleri olarak uygulamıştır.
Başlayalım…
1. Malzeme Arayüzü
MaterialUI, Google’ın Materyal Tasarımı Kılavuzunu Uygulayan bir Tepki Bileşeni kümesidir. Önceden tanımlanmış bileşenlere, özellikle kullanıcı arayüzüne gelince, bulmamız gereken önemli bir şey, kaç adet kullanıcı arabirimi widget'ının kullanılabilir olduğu ve bunların yapılandırmalarla özelleştirilip özelleştirilemeyeceğidir. Material-UI, ihtiyacınız olan tüm bileşenlere sahiptir ve uygulamanız için özel bir renk teması tanımlamanıza izin veren önceden tanımlanmış renk paleti ve
Yüzlerce UI çerçevesinden, Malzeme UI, Malzeme Tasarımının en rafine uygulanmış en iyi Reactjs tabanlı UI çerçevelerinden biridir. 678 katılımcı ve 35K GitHub yıldızıyla en popüler ve aktif olarak korunan kütüphanelerden biri.
Material-ui projesi örneklerinde verilen örnek uygulamayı, hızlı bir demo için stackblitz'e kurdum. Buradaki koda bakın.
Şahsen, malzemenin kabiliyetinin ne olduğunu göstermek için kesinlikle basit bir başlangıç olmadığını göstermek için harika bir örnek olmadığını düşünüyorum. Resmi web sitesi ayrıca, iyi bir bilgi kaynağı olan bileşen başına iyi dokümantasyon ve demolara sahiptir.
2. Bootstrap tepki
Önyükleme en popüler ve en çok kullanılan CSS çerçevelerinden biridir. React ve Bootstrap ikilisine sahip olmak hiç de şaşırtıcı değil. React Bootstrap, Bootstrap çerçevesinin uygulanmasını sağlayan bir React bileşenleri setidir. React-Bootstrap şu anda Bootstrap v3'ü hedeflemektedir ve ekip aktif olarak Bootstrap v4 üzerinde çalışmaktadır.
204 katılımcı ve 12K github yıldızı ile popüler ve aktif olarak korunan kütüphanelerden biridir.
Unfortunatley reaksiyonu-önyükleme herhangi bir çalışma projesi örneği sağlamaz, ancak burada bulunabilecek her bileşen için örnekler vardır.
Belgeden bağımsız örneklerden 2'sini derleyerek stackblitz üzerine örnek bir uygulama hazırladım. Buradaki koda bakın.
3. Anlamsal UI
Anlamsal UI, insan dostu HTML kullanarak güzel, duyarlı mizanpajlar oluşturmanıza yardımcı olan bir geliştirme çerçevesidir. Bu çerçeve, her css sınıfı için anlam ifade eden semantik HTML tarzından daha fazla etkilenir. Semantik kullanıcı arayüzü, kelimeleri ve sınıfları değiştirilebilir kavramlar olarak görür. Sınıflar, isim / değiştirici ilişkisi, çoğulculuk, kelime sırası gibi doğal dilden sözdizimini, kavramlar arasında sezgisel bir bağ kurabilmek için kullanırlar. Semantik ayrıca işlevselliği tetikleyen davranışlar olarak adlandırılan basit ifadeleri kullanır.
Semantik UI React, Semantik UI için resmi React entegrasyon
175 katılımcı ve 6K github yıldızıyla popüler ve aktif olarak korunan kütüphanelerden biridir.
Unfortunatley tepki anlamında herhangi bir çalışma projesi örneği sağlamaz, ancak burada bulunabilecek her bileşen için örnekler vardır.
Kart bileşenini gösteren örnek bir uygulama burada incelenebilir
4. araç kutusu tepki
Google Materyal Tasarımı tabanlı kütüphanede başka bir tüy. React Toolbox, Google’ın Materyal Tasarımı kavramlarını izleyen bir UI kütüphanesidir ve CSS Modülleri (SASS ile yazılmış), Webpack ve ES6 gibi en popüler tekliflerin üzerine inşa edilmiştir. Kütüphane, Webpack iş akışınızla uyumlu bir şekilde bütünleşir ve kolayca özelleştirilebilir ve çok esnektir.
219 katılımcı ve 7k GitHub yıldızıyla popüler ve aktif olarak korunan kütüphanelerden biri.
Resmi web sitesi, burada keşfedilebilecek tüm bileşenlere örnekler sunar. Burada gördüğünüz güzel şey, oyun alanında yer alan özelliklerdir ve bu özellik, orada ve ek kurulum gerektirmeden özellikleri ve yetenekleri keşfetmenize yardımcı olur.
5. Karınca Tasarım
Kurumsal sınıf bir UI tasarım dili ve React tabanlı bir uygulama. Karınca tasarımı, TypeScript ile yazılmış kutudan çıkan yüksek kaliteli React bileşenlerinden oluşur. Tarayıcı, sunucu tarafı oluşturma ve Elektron ortamlarını destekler, birçok bileşene ve hatta Create-react-app ile bir öğreticiye sahiptir
443 katılımcı ve 24k GitHub yıldızıyla popüler ve aktif olarak korunan kütüphanelerden biridir.
Demoları buradan takip edebilirsiniz.
6. Vakıf Tepki
Önyükleme gibi, CSS framework Foundation da başka bir popüler CSS framework. Zurb Vakfı, zengin özelliklere sahip ve kolayca özelleştirilebilir bir kütüphanedir. React Foundation, React bileşenleri olarak Foundation adlı bir kütüphanedir.
React Foundation, çerçevenin en iyi uygulamalarını takip ederek Temel'in her bölümünü yeniden kullanılabilir React bileşenlerine sarmaktır. React Foundation'ı geliştirmenin arkasındaki ana amaç, kullanım kolaylığı ve genişletilebilirliktir.
Reactjs uygulamalarını geliştirmek için kullanılan diğer UI kitaplıklarının aksine, yukarıda incelediğimiz React Foundation'ın çok sınırlı katkıları ve çok düşük aktif gelişimi var.
Demoları buradan takip edebilirsiniz.