Pustaka komponen ui yang tersedia untuk bertindak balas ialah: 1. Bahan-UI, yang mempunyai komponen untuk susun atur, borang, navigasi, paparan data dan banyak widget lain 2. Reka Bentuk Semut, yang mempunyai lebih daripada 60 komponen, dengan penaip statik yang boleh diramalkan; 3. Blueprint, dengan lebih daripada 40 komponen; 4. React Bootstrap, menyediakan keserasian penuh dengan sejumlah besar tema Bootstrap sedia ada; komponen lain.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.
pustaka komponen bertindak balas
1 Bahan-UI
Material-UI ialah pustaka komponen React yang paling popular dan biasa digunakan di GitHub. Ia ringkas, ringan dan dibina mengikut spesifikasi Bahan-UI Google. Terdapat komponen untuk susun atur, borang, navigasi, paparan data dan banyak widget lain.
Anda boleh menggayakan komponen anda menggunakan @material-ui/styles, penyelesaian CSS-dalam-JS yang pantas dan berskala dengan faedah yang sama seperti komponen yang digayakan. Material-UI juga saling beroperasi dengan penyelesaian penggayaan utama yang lain, jadi anda tidak perlu menggunakan gayanya.
2. Ant Design
Ant Design ialah syarikat China dengan perpustakaan React, yang direka untuk aplikasi web syarikat besar. Contohnya termasuk Tencent, Alibaba dan Baidu. Pustaka ini mempunyai lebih 60 komponen yang ditulis dalam TypeScript dengan penaipan statik yang boleh diramal. Dokumen Cina dan Inggerisnya ringkas, ditulis dengan elegan dan kandungannya komprehensif.
Tetapi Ant Design bukan sekadar perpustakaan UI React. Ia adalah keseluruhan sistem reka bentuk yang dibina berdasarkan nilai pertumbuhan, makna, kepastian dan sifat. Semak sumber mereka untuk kit UI Figma, templat halaman pendaratan, pemalam Sketch dan banyak lagi, dan ini adalah perpustakaan komponen React yang kami perlukan.
3. Blueprint
Sebagai perpustakaan komponen React yang biasa digunakan, Blueprint menyediakan komponen yang kaya dan popular. Blueprint ialah perpustakaan UI React yang dibangunkan oleh Palantir, sebuah syarikat teknologi analisis data besar Amerika. Pustaka React mereka mempunyai lebih 40 komponen, dioptimumkan khusus untuk antara muka intensif data yang kompleks untuk aplikasi desktop.
Blueprint ditulis dalam TypeScript, begitu juga semua contoh kod dalam dokumentasi mereka. Pustaka menyokong Chrome, Firefox, Safari, IE 11 dan Microsoft Edge. IE10 dan ke bawah tidak disokong kerana kekurangan sokongan untuk reka letak fleksibel CSS.
4. React Bootstrap
React Bootstrap sebagai pengganti JavaScript Bootstrap. Setiap komponen dibina sebagai komponen React yang benar, jadi tidak perlu bergantung pada jQuery. React Bootstrap ialah salah satu perpustakaan React yang tertua dan telah berkembang dengan mantap dengan React sendiri Memandangkan terdapat sejumlah besar pengguna lama yang menggunakan Bootstrap, React Bootstrap juga merupakan pustaka komponen React yang lebih biasa digunakan.
Sistem grid Bootstrap bermakna reka letak anda akan mempunyai siri bekas, baris dan lajur yang responsif sepenuhnya. Anda boleh memilih antara berpuluh-puluh komponen, termasuk lencana, karusel, roti bakar dan jumbotron.
Ia menyediakan keserasian penuh dengan sejumlah besar tema Bootstrap sedia ada, serta senarai panjang komponen dengan jumlah kuasa untuk setiap tema. Kemas kini React Bootstrap keadaan ke dalam DOM maya, yang merupakan penyelesaian pembangunan yang lebih stabil dengan menyepadukan kefungsian Bootstrap ke dalam DOM maya React.
5. UI Onsen
UI Onsen ialah perpustakaan komponen Reac yang biasa digunakan yang direka untuk membina HTML5 dan aplikasi web mudah alih . Komponennya termasuk tab, menu sisi, navigasi tindanan, senarai, borang dan banyak lagi. Semua komponen menyokong reka bentuk bahan iOS dan Android dan menukar rupa apl anda secara automatik berdasarkan platform.
Di bawah tudung, Onsen terdiri daripada tiga lapisan: komponen CSS ditulis dalam cssnext, komponen web ditulis dalam JavaScript asli, pengikatan rangka kerja untuk penyepaduan mudah dengan React, dan Vue dan Angular.
6. Grommet
Grommet ialah perpustakaan komponen yang direka untuk projek web yang responsif, boleh diakses dan mengutamakan mudah alih. Ia menggabungkan kaedah reka bentuk atom dan membolehkan navigasi papan kekunci, tab pembaca skrin dan banyak lagi. Ia juga mempunyai senarai ikon svg.
Banyak syarikat besar termasuk Netflix, Uber, Boeing, HP, Samsung dan Twilio menggunakan Grommet untuk mereka bentuk aplikasi web mereka. Jika anda mahu reka bentuk anda berasa kurang "Googly", lihat komponen Grommet. , ia adalah perpustakaan komponen React yang sangat baik dan biasa digunakan dengan komponen yang sangat tampan.
7 Gestalt ialah satu set komponen UI React yang mempertingkatkan bahasa reka bentuk Pinterest. Tujuannya adalah untuk mencipta perpustakaan kongsi amalan terbaik reka bentuk. Perpustakaan menyokong mod dari kanan ke kiri, pengantarabangsaan dan gelap. Gestalt adalah penyelenggaraan yang agak rendah kerana reka bentuk automatik dan kemas kini kodnya yang menjalankan merentas platform. Apabila keluaran mengakibatkan perubahan pecah - dalam penggunaan atau input - ia menyediakan codemod untuk memudahkan proses naik taraf. 8. Semantic UI React React ialah pemalam UI Semantik rasmi. Ia adalah agnostik jQuery dan menampilkan API pengisytiharan, prop yang dipermudahkan, subkomponen, sambungan, kawalan automatik keadaan dan banyak lagi. Perpustakaan mempunyai koleksi lebih 50 komponen, termasuk serpihan, bar kemajuan, peralihan, penomboran dan banyak lagi. Semantic UI React menyediakan komponen, manakala Semantic UI menyediakan tema dalam bentuk lembaran gaya CSS. Anda juga boleh menggunakan 9 Rebass Rebass ialah perpustakaan komponen asal dan perpustakaan komponen React yang biasa digunakan, digayakan oleh pembinaan Sistem Brent Jackson . Ia dibina untuk mencipta UI yang konsisten dengan kekangan reka bentuk dan skala yang ditentukan pengguna. Jejak Rebass hanya 4KB, yang bermaksud reka bentuk dan pembangunan yang pantas. Rebass berharap untuk menjadi minimum, berguna, tidak terkekang, boleh dikembangkan dan boleh bertema dengan sokongan tema kelas pertama dan keserasian dengan UI Tema. 10. React Virtualized React Virtualized memfokuskan pada aspek khusus mana-mana UI dalam perpustakaan komponen React yang unik, menjadikan jadual pemaparan agak mudah dalam kebanyakan kes. Dengan React Virtualized, pembangun web boleh menghasilkan sejumlah besar data dengan mudah dengan menggunakan komponen seperti senarai, jadual, grid, koleksi, dll. Ia boleh digunakan untuk mencipta jadual yang lebih mesra pengguna. React Virtualized sudah mempunyai urutan lengkap arahan untuk menyediakannya. 11. Blueprint UI React Rangka kerja komponen Blueprint UI React ialah laluan pembangunan UI yang sama untuk semua aplikasi desktop dan web intensif data baharu. Ia ialah kit alat UI berasaskan React yang direka untuk mencipta antara muka intensif data yang kompleks untuk aplikasi desktop. Ini ialah pakej UI yang hebat yang bertujuan untuk menyediakan standard kebolehgunaan yang luar biasa untuk semua komponen dan memberi anda akses kepada mod tema terang dan gelap. 12. React Toolbox React Toolbox ialah satu siri komponen React yang melaksanakan keperluan Reka Bentuk Bahan Google. Ia berdasarkan beberapa cadangan yang paling biasa seperti Modul CSS (ditulis dalam SASS), Webpack dan ES6. Perpustakaan disepadukan rapat dengan aliran kerja pakej web anda, boleh dikonfigurasikan sepenuhnya dan serba boleh. Ia menyediakan banyak komponen seperti butang, kad, pemilih tarikh, dialog dan elemen biasa yang lain. Memperkasakan pembangun web untuk membina aplikasi web yang menakjubkan, perpustakaan ini juga menyertakan dokumentasi yang komprehensif. [Cadangan berkaitan: Tutorial video Redis]
Atas ialah kandungan terperinci Apakah perpustakaan komponen ui yang digunakan untuk bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
