6 En İyi ReactJS tabanlı UI Altyapıları

Aslen Zeolearn'de 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ştirmeye daha kolay ve üretken kılan, kullanıma hazır reaksiyon 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 bileşeni ile çok yapılandırılabilir.

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.

Materyal-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ıyla 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 bir örnek uygulama kurdum. Buradaki koda bakın.

3. Anlamsal Kullanıcı Arabirimi

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'nin resmi React entegrasyonudur

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ı ile 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 bir kurulum yapmadan ö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 bir Temel Vakfı uygulanmıştır.

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.