Adakah reaksi mempunyai perpustakaan komponen?

React mempunyai perpustakaan komponen; pustaka komponen ialah pelan reka bentuk yang menyusun komponen bersama-sama melalui gabungan pelbagai dimensi reka bentuk komponen adalah melalui pembongkaran, aruhan dan penyusunan semula elemen dalam fungsi dan ekspresi visual, dan Berdasarkan; untuk tujuan boleh diguna semula, komponen piawai dibentuk pustaka komponen yang biasa digunakan dalam tindak balas termasuk Bulma, AntDesign, Bootstrap, dsb.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

React mempunyai perpustakaan komponen

Reka bentuk komponen adalah melalui pembongkaran, ringkasan dan penyusunan semula elemen dalam ekspresi fungsional dan visual, dan berdasarkan tujuan untuk digunakan semula, komponen standard dibentuk melalui Multi -kombinasi dimensi digunakan untuk membina keseluruhan pelan reka bentuk, dan komponen ini disusun bersama untuk membentuk perpustakaan komponen.

Pustaka komponen tindak balas biasa:

Reka Bentuk Semut

• Pautan projek: Ant Reka bentuk

• Saiz himpunan (daripada BundlePhobia): 1.2mB selepas minifikasi, 349.2kB selepas mampatan gzip, dikurangkan dengan gegaran pokok.

Kebaikan:

• AntDesign didatangkan dengan dokumentasi sokongan yang meluas, mempunyai komuniti, termasuk satu dengan templat pra-dibuat Projek berasingan (AntDesignPro);

• Kelemahan:

Kurang kebolehaksesan

• Saiz Besar , dijangka memberi impak yang besar pada prestasi;

• mencemarkan CSS anda (jangka menambahkan !penting untuk menghalangnya daripada menggayakan komponen bukan Semut anda).

• Bootstrap

Sebenarnya, saya terutamanya menganggap Bootstrap sebagai perpustakaan UI. Ia tidak akan memenangi sebarang anugerah reka bentuk kepada anda, tetapi ia boleh digunakan untuk menyelesaikan beberapa projek kelebihan dan produk berdaya maju minimum.

Tetapi ia bergantung pada apa yang anda mahu gunakan. Jika anda baru menggunakan React, ia merupakan perpustakaan yang bagus untuk bermula. Untuk pembangun yang lebih berpengalaman, mereka mungkin melihat komponen gaya / Emosi.

Terdapat dua perpustakaan popular dengan React bindings untuk Bootstrap, secara peribadi saya hanya menggunakan Reactstrap.

Pautan projek: React Bootstrap

• Saiz himpunan (dari BundlePhobia): 111kB diminimumkan, gzip 34.4kB diminimumkan, melalui gegaran pokok Saiz yang dikurangkan

  Pautan projek: Reactstrap

• Saiz berkas (dari BundlePhobia): 152.1kB dikecilkan, dikecilkan 39.4kB selepas pemampatan gzip , kurangkan saiz dengan menggoncang pokok

  Kelebihan:

Dengan Terdapat Bootstrap perpustakaan dengan pengikatan React yang disukai oleh semua orang; tentang pepijat/isu;

• Bermula dengan cepat;

• Keburukan:
Ini ialah Bootstrap: jika anda tidak menyesuaikannya, tapak anda akan kelihatan berbeza daripada yang lain Laman web ini tidak berbeza.
Bulma

Bulma tidak sama dengan perpustakaan lain yang diperkenalkan dalam artikel ini, kerana Bulma ialah rangka kerja CSS tulen dan melakukan tidak memerlukan JS. Anda boleh memilih untuk menggunakan kelas daripada Bulma secara langsung atau menggunakan perpustakaan pembalut seperti react-bulma-components.

Pautan projek: Bulma

• Pautan projek: react-bulma-components

Saiz pek (dari BundlePhobia): 179kB dikecilkan, 20.1kB digzip

• Kelebihan:

• Won 't jadikan tapak web anda kelihatan seperti Bootstrap;

  • Sesuai untuk permulaan dan operasi yang pantas; ).

Keburukan:

Kebolehaksesan: Tidak mematuhi garis panduan WCAG secara ketat seperti perpustakaan lain, walaupun terdapat beberapa .
UI Chakra

• Pautan projek: ChakraUI

Saiz himpunan (dari BundlePhobia): 326.2kB selepas minifikasi, 101.2kB selepas mampatan gzip, dikurangkan dengan gegaran pokok

• Kelebihan:

Kebolehaksesan: Mengikuti garis panduan WAI-ARIA, komponen menggunakan tag aria; dengan sokongan tema);

Sangat modular jadi gegaran pokok sebenarnya akan mengalih keluar kod yang anda tidak gunakan.
• Keburukan:

Agak baharu.

• Nota:

Ia sangat hampir dengan v1, jadi sila ambil perhatian tentang perubahan yang rosak selepas v0.8.0.

• UI Bahan

  

  MaterialUI ialah salah satu perpustakaan yang saya suka benci. Ia telah membantu saya melalui beberapa tarikh akhir projek yang sangat tertekan pada masa lalu, tetapi akhirnya saya sentiasa menyelesaikannya secepat mungkin.

  Pada masa lalu, anda hanya boleh menyesuaikan gaya MaterialUI dengan menulis JSS, tetapi syukurlah anda kini boleh menggantikan gaya menggunakan komponen gaya dan Emosi.

  • Pautan projek: UI Bahan

  • Saiz himpunan (dari BundlePhobia): 325.7kB diminimumkan, diminimumkan gizp 92kB dimampatkan, dikurangkan oleh gegaran pokok Saiz

  Kelebihan:

  • Dokumentasi sempurna

  • Ikon perpustakaan Besar

  • Mudah dan mudah digunakan (pada permulaan)

  Kelemahan:

  • Sukar dan menyakitkan untuk disesuaikan, tetapi perlu (untuk menambah baik kesan visual); 🎜>Apl anda akan kelihatan seperti produk Google (bagi sesetengah orang, ini mungkin mewakili gaya profesional).

  • UI Semantik

  Pautan projek: UI Semantik

  Semantic-UI-React

  • Saiz himpunan (dari BundlePhobia): 300.8kB selepas minifikasi, 80.9kB selepas pemampatan gzip, kurangkan saiz dengan gegaran pokok.

  • • Kelebihan:

  Boleh digubah (gunakan sebagai prop untuk lulus komponen)

  Mudah untuk disesuaikan

  • Dokumentasi yang baik

  • Terkenal oleh pengguna (digunakan secara dalaman oleh Netflix, diterbitkan oleh Produk Amazon juga digunakan)

  • Sokongan TypeScript

  • Kelemahan:
  Potensi ketidakpastian projek sumber terbuka.

  Lihat isu:

  • https://github.com/Semantic-Org/Semantic-UI/issues/6109

  • https://github.com/Semantic-Org/Semantic-UI/issues/6413

    Garpu kendalian komuniti:
    https://github.com/fomantic/Fomantic-UI

  • Sebutan Yang Dihormati

    • Reach UI

    ReachUI ialah perpustakaan komponen peringkat rendah yang membolehkan pembangun membina komponen React yang boleh diakses ke dalam sistem reka bentuk mereka.
  Tiada saiz pakej tersedia kerana setiap komponen dieksport secara individu sebagai pakej npmnya sendiri.

  Reakit

  Reakit ialah satu lagi perpustakaan komponen peringkat rendah. Secara teknikal ia adalah perpustakaan UI, tetapi ia tidak disertakan dengan CSS. Jadi anda masih perlu mencari penyelesaian penggayaan.

  Saiz himpunan (dari BundlePhobia): 119.9kB diminimumkan, 32.1kB dizip, dikurangkan dengan gegaran pokok.

  Rebass

  • Saya telah mengikuti Rebass untuk seketika. Ia adalah perpustakaan komponen yang berkuasa yang tidak disertakan dengan tema, tetapi anda boleh menukar tema dengan mudah. Untuk contoh ia dalam tindakan, lihat demonya.
  Pautan projek: Rebass

  

  Saiz himpunan (dari BundlePhobia): 43kB selepas minifikasi, mampatan gizp 14.4kB, kurangkan saiz dengan gegaran pokok .

  • [Cadangan berkaitan:

    tutorial video javascript
  ,
  • bahagian hadapan web

    ]

Atas ialah kandungan terperinci Adakah reaksi mempunyai perpustakaan komponen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!