Berkongsi Komponen UI: Salin VS Pasang

Dalam beberapa tahun kebelakangan ini, terdapat perubahan ketara dalam cara pembangun mendekati perpustakaan UI, beralih daripada memasang keseluruhan perpustakaan komponen melalui pakej npm dan ke arah terus menyalin-menampal kod ke dalam pangkalan kod mereka.

Arah aliran ini sebahagian besarnya telah dipopularkan oleh Shadcn/UI, sebuah perpustakaan yang menyediakan pembangun dengan komponen siap sedia dan boleh disesuaikan yang boleh disalin terus ke dalam projek untuk fleksibiliti maksimum.

Mengapa Menyalin Menang untuk Komponen Kompleks

Pendekatan salin-tampal bersinar, terutamanya untuk elemen UI yang kompleks seperti halaman pengesahan, papan pemuka terperinci atau visualisasi data yang rumit. Komponen ini memerlukan penyesuaian diperhalusi yang sukar dicapai melalui pakej npm yang tidak boleh diubah.

Daripada mengatasi API perpustakaan dengan pilihan konfigurasi yang tidak berkesudahan, pendekatan ini membolehkan pembangun memanfaatkan sifat boleh gubah dan deklaratif rangka kerja bahagian hadapan moden, membolehkan kawalan yang lebih besar ke atas setiap bahagian komponen.

Daripada pemilih CSS yang panjang dan kompleks, anda boleh terus menggunakan gaya pada elemen dalam komponen. Daripada menyuntik komponen menggunakan logik suntikan kebergantungan yang kompleks, anda hanya meletakkan atau menyusun semula komponen mengikut pilihan anda.

Carta shadcnui interaktif pada Platform Bit

Pendekatan ini telah mendapat kepentingan yang lebih besar dengan pengenalan pembantu pengekodan AI. Daripada menjana komponen dari awal melalui AI dengan gesaan yang panjang dan kompleks — atau terlibat dalam perbualan yang panjang dengan pembantu — anda boleh mulakan dengan gubahan terbina hampir dengan perkara yang anda perlukan.

Dengan membenamkan kod ke dalam projek anda, anda memberikan pembantu AI konteks yang khusus dan ketara. Dari situ, anda boleh memintanya membuat pelarasan tambahan, seperti mengubah gaya, menambahkan ciri kebolehaksesan atau menukar reka letak.

Komponen Bit: Pakej yang anda boleh edit terus

Bit telah memperkenalkan entiti baharu kepada dunia pembangunan web: Komponen Bit. Pendek kata, komponen Bit boleh dianggap sebagai pakej super. Anda boleh mengongsinya, memasangnya, menyalinnya dan juga bekerjasama padanya secara bebas daripada sebarang persediaan projek tertentu.

Untuk memudahkan, kami boleh membahagikan komponen UI kepada dua kumpulan: komponen sistem reka bentuk dan komponen blok. Dalam sistem reka bentuk, komponen asas seperti Kad adalah blok binaan asas. Sementara itu, komponen blok, seperti MediaCard, terdiri daripada elemen sistem reka bentuk tetapi menawarkan fungsi yang lebih maju.

Pilihan 1: Mengarang dengan Komponen Sistem Reka Bentuk

Apabila mencipta komponen baharu, pilihan pertama ialah mengarang daripada sistem reka bentuk anda. Contohnya, untuk membina kad tersuai, anda mungkin perlu menggabungkan komponen seperti Kad, Butang dan Tipografi.

Komponen berasaskan MUI dikongsi pada Platform Bit

Komponen ini boleh dipasang dalam projek anda melalui pemasangan npm, pnpm, benang atau Bit:

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

Pilihan 2: Menggunakan Komponen Blok

Apabila memilih komponen blok pra-bina, anda mempunyai beberapa pilihan fleksibel selain pemasangan mudah.

Laluan paling mudah ialah memasang pakej komponen secara terus dan menggunakan APInya. Pendekatan ini berfungsi dengan baik jika komponen itu sesuai dengan keperluan anda di luar kotak atau hanya memerlukan tweak kecil.

Untuk senario di mana anda perlu membuat perubahan yang meluas, perintah garpu Bit membolehkan anda menyalin kod penuh komponen ke dalam projek anda. Ini termasuk fail sumber, kebergantungan dan konfigurasi (termasuk alat pembangun komponen).

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

Sebagai contoh, untuk menyalin komponen MediaCard dan konfigurasinya, kami akan menjalankan bit fork dan lulus ID komponennya (bukan nama pakej) sebagai hujah:

bit fork learnbit-react.material-ui-blocks/content/media-card

Perlu diingat bahawa Bit juga menyediakan arahan import bit, yang membolehkan anda membuat perubahan pada komponen dan mengeluarkan versi baharu. Pilihan ini memerlukan anda mempunyai kebenaran yang betul untuk mengubah suai komponen (tidak seperti arahan bit fork, yang tidak menjejaskan komponen asal).

Mengeluarkan fail sumber kebergantungan

Apabila memotong komponen dengan kebergantungan, Bit memasangnya secara automatik untuk kemudahan. Walau bagaimanapun, jika anda memerlukan akses terus kepada kod sumber kebergantungan, anda juga boleh menghentikan kebergantungan tersebut.

Sebagai contoh, jika anda ingin menyalin komponen Butang, anda juga boleh mengambilnya daripada koleksi pasukan anda di Bit Platform:

bit fork bitdesign.material-ui/inputs/button

Atas ialah kandungan terperinci Berkongsi Komponen UI: Salin VS Pasang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!