React memiliki pustaka komponen; pustaka komponen adalah rencana desain yang mengatur komponen bersama-sama untuk dibangun melalui kombinasi multidimensi melalui pembongkaran, induksi, dan reorganisasi elemen dalam fungsi dan ekspresi visual, dan didasarkan pada elemen yang dapat digunakan kembali. tujuannya adalah untuk membentuk komponen standar. Pustaka komponen yang umum digunakan untuk reaksi termasuk Bulma, AntDesign, Bootstrap, dll.
Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.
Desain komponen adalah membongkar, meringkas, dan mengatur ulang elemen dalam fungsi dan ekspresi visual, dan membentuk komponen standar berdasarkan tujuan penggunaan kembali. Seluruh rencana desain dibangun melalui kombinasi multi-dimensi, dan komponen-komponen ini disusun bersama terbentuk.
Pustaka komponen reaksi yang umum digunakan:
Desain Semut
Tautan proyek: Desain Semut
Ukuran bundel (dari BundlePhobia): 1,2mB setelah minifikasi, 349,2kB setelah minifikasi + kompresi gzip, kurangi ukurannya dengan menggoyang pohon.
keuntungan:
AntDesign hadir dengan dokumentasi dukungan yang luas, memiliki komunitas, termasuk proyek terpisah (AntDesignPro) dengan templat yang sudah jadi;
Pustaka UI yang dapat digunakan untuk mendesain aplikasi backend/internal dengan cepat.
kekurangan:
kurangnya aksesibilitas;
Hal ini besar dan diharapkan mempunyai dampak yang besar terhadap kinerja;
Mencemari CSS Anda (berharap untuk menambahkan !important untuk mencegahnya menata komponen non-Semut Anda).
tali sepatu
Faktanya, saya terutama menganggap Bootstrap sebagai perpustakaan UI. Ini tidak akan memberi Anda penghargaan desain apa pun, tetapi dapat digunakan untuk menyelesaikan beberapa proyek canggih dan produk minimum yang layak.
Tapi itu tergantung pada apa yang ingin Anda gunakan. Jika Anda baru mengenal React, ini adalah perpustakaan yang bagus untuk memulai. Untuk pengembang yang lebih berpengalaman, mereka mungkin melihat komponen gaya/Emosi.
Ada dua perpustakaan populer dengan React binding untuk Bootstrap, saya pribadi hanya menggunakan Reactstrap.
Tautan proyek: React Bootstrap
Ukuran bundel (dari BundlePhobia): 111kB setelah minifikasi, 34,4kB setelah minifikasi + gzip, kurangi ukurannya dengan menggoyangkan pohon
Tautan proyek: Reactstrap
Ukuran bundel (dari BundlePhobia): 152.1kB setelah minifikasi, 39.4kB setelah minifikasi + kompresi gzip, kurangi ukurannya dengan menggoyang pohon
keuntungan:
Pustaka Bootstrap dengan binding React yang disukai semua orang;
Mudah disesuaikan melalui CSS-in-JS;
Sudah cukup lama ada sehingga Anda tidak perlu khawatir tentang bug/masalah;
Mulailah dengan cepat;
Tidak ada ketergantungan jQuery karena telah diimplementasikan kembali sepenuhnya di React.
kekurangan:
Ini Bootstrap: jika Anda tidak menyesuaikannya, situs Anda akan terlihat seperti situs lainnya.
Bulma
Bulma berbeda dari perpustakaan lain yang diperkenalkan dalam artikel ini karena Bulma adalah kerangka CSS murni dan tidak memerlukan JS. Anda dapat memilih untuk menggunakan kelas dari Bulma secara langsung, atau menggunakan perpustakaan wrapper seperti react-bulma-components.
Tautan proyek: Bulma
Tautan proyek: komponen reaksi-bulma
Ukuran bundel (dari BundlePhobia): 179kB diperkecil, 20,1kB diperkecil + gzip dikompresi
keuntungan:
Itu tidak akan membuat situs web Anda terlihat seperti Bootstrap;
Sempurna untuk bangun dan berlari dengan cepat;
Fitur modern (mendasari Flexbox/Grid).
kekurangan:
Aksesibilitas: Ada beberapa, namun tidak seketat perpustakaan lain yang mematuhi pedoman WCAG.
UI Cakra
Tautan proyek: ChakraUI
Ukuran paket (dari BundlePhobia): 326.2kB setelah minifikasi, 101.2kB setelah minifikasi + kompresi gzip, kurangi ukurannya dengan menggoyangkan pohon
keuntungan:
Aksesibilitas: Mengikuti pedoman WAI-ARIA, komponen menggunakan tag aria;
Didukung oleh server Perselisihan;
Mudah untuk disesuaikan (dengan dukungan tema);
Sangat modular, sehingga pengocokan pohon sebenarnya akan menghapus kode yang tidak Anda gunakan.
kekurangan:
Cukup baru.
Melihat:
Ini sangat dekat dengan v1, jadi harap berhati-hati terhadap perubahan yang dapat mengganggu setelah v0.8.0.
UI Materi
MaterialUI adalah salah satu perpustakaan cinta-benci saya. Ini membantu saya melewati tenggat waktu proyek yang sangat menegangkan di masa lalu, namun pada akhirnya saya selalu menyelesaikannya secepat mungkin.
Di masa lalu, Anda hanya dapat menyesuaikan gaya MaterialUI dengan menulis JSS, namun untungnya kini Anda dapat mengganti gaya menggunakan komponen gaya dan Emosi.
Tautan proyek: UI Material
Ukuran bundel (dari BundlePhobia): 325,7kB diperkecil, 92kB diperkecil + gizp dikompresi, dikurangi dengan pengocokan pohon
keuntungan:
Dokumentasi lengkap
Perpustakaan ikon sangat besar
Sederhana dan mudah digunakan (situasi di awal)
kekurangan:
Sulit dan menyakitkan untuk disesuaikan, tetapi perlu (untuk meningkatkan visual);
Performa: terlalu banyak node DOM yang akan dirender;
Aplikasi Anda akan terlihat seperti produk Google (bagi sebagian orang, ini mungkin menunjukkan tampilan profesional).
UI semantik
Tautan proyek: UI Semantik
Semantik-UI-React
Ukuran paket (dari BundlePhobia): 300,8kB setelah minifikasi, 80,9kB setelah minifikasi + kompresi gzip, kurangi ukurannya dengan menggoyang pohon.
keuntungan:
Composable (melewati komponen menggunakan sebagai prop)
Mudah untuk disesuaikan
Dokumentasi yang berguna
Penggunanya terkenal (digunakan secara internal oleh Netflix dan digunakan oleh produk yang dirilis oleh Amazon)
Dukungan TypeScript
kekurangan:
Potensi ketidakpastian proyek sumber terbuka.
Lihat masalah:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
Garpu yang dikelola komunitas:
https://github.com/fomantic/Fomantic-UI
Sebutan Terhormat
Jangkau UI
ReachUI adalah pustaka komponen tingkat rendah yang memungkinkan pengembang membangun komponen React yang dapat diakses ke dalam sistem desain mereka.
Tidak ada ukuran paket yang tersedia karena setiap komponen diekspor satu per satu sebagai paket npmnya sendiri.
Reakit
Reakit adalah pustaka komponen tingkat rendah lainnya. Secara teknis ini adalah perpustakaan UI, tetapi tidak dilengkapi dengan CSS. Jadi, Anda masih perlu mencari solusi penataan gaya.
Ukuran paket (dari BundlePhobia): 119,9kB setelah minifikasi, 32,1kB setelah minifikasi + kompresi gzip, kurangi ukurannya dengan menggoyang pohon.
Rebas
Saya telah mengikuti Rebass untuk sementara waktu. Ini adalah pustaka komponen canggih yang tidak disertai tema, namun Anda dapat dengan mudah mengubah tema. Untuk contoh aksinya, lihat demonya.
Tautan proyek: Rebass
Ukuran bundel (dari BundlePhobia): 43kB setelah minifikasi, 14,4kB setelah minifikasi + kompresi gizp, kurangi ukurannya dengan menggoyang pohon.