Pelajari betapa mudahnya berbagi kode dan kolaborasi, dengan pendekatan intuitif Bit terhadap komponen React yang dapat digunakan kembali.
Selamat datang di masa depan, di mana komponen React adalah elemen penyusun web!
Pada tahun 2023, penggunaan kembali dan berbagi komponen-komponen ini menjadi lebih penting dari sebelumnya. Dengan teknologi dan kerangka kerja baru yang bermunculan setiap hari (berkat JavaScript!), sangatlah penting untuk memiliki sistem yang dapat mengelola dan mendistribusikan komponen Anda secara efisien.
Pada artikel ini, saya akan menunjukkan kepada Anda sebuah alat hebat yang memungkinkan Anda membuat, menggunakan kembali, dan berbagi komponen React sendiri atau sebagai bagian dari upaya tim.
Jadi, mari selami dan pelajari cara membangun yang lebih baik bersama-sama!
Memperkenalkan Sedikit
Bit akan menjadi alat yang menjawab semua pertanyaan Anda untuk artikel ini.
- Bagaimana cara berbagi komponen React dengan orang lain? Sedikit
- Bagaimana Anda dapat dengan mudah menggunakan kembali komponen React dari orang lain di aplikasi Anda? Sedikit
Dan itu juga akan menjawab beberapa pertanyaan yang belum Anda pikirkan, seperti:
- Bagaimana cara menangani pembuatan versi komponen saya? Dengan Bit, Anda bisa!
- Bagaimana cara memberikan akses kepada orang lain sehingga mereka dapat menyumbangkan kode mereka sendiri ke komponen saya? Dengan Bit, Anda bisa!
Maksud saya, tentu saja, alat lain memungkinkan Anda melakukan beberapa hal tersebut secara individual, namun tidak banyak yang benar-benar dapat melakukan semuanya.
Bit adalah platform yang memungkinkan Anda membuat, menggunakan kembali, dan berbagi komponen yang dapat dikomposisi sebagai potongan kode modular yang dapat dengan mudah digunakan kembali di seluruh proyek dan tim. Bit membantu menyederhanakan proses pengembangan dengan menyediakan fitur seperti kontrol versi, alat kolaborasi, dan manajemen paket, sehingga memudahkan pengembang untuk bekerja sama dan membangun perangkat lunak yang lebih baik dengan lebih cepat.
Cari tahu lebih lanjut di sini:
Secara keseluruhan, Bit menyediakan cara yang efisien dan terukur untuk mengelola dan berbagi komponen, memungkinkan tim untuk fokus dalam membangun perangkat lunak yang inovatif dan berkualitas tinggi.
Pada artikel ini, saya akan menggunakan Bit untuk menunjukkan kepada Anda bagaimana Anda dapat menggunakan kembali dan berbagi komponen Anda dengan orang lain.
Pengaturan
Sebelum melanjutkan, mari kita instal Bit dengan cepat:
npx @teambit/bvm install
Itu saja, Anda telah menginstal Bit. Selamat!
Jika Anda mempunyai masalah dengan metode ini, lihat dokumentasinya untuk lebih jelasnya.
Menggunakan kembali komponen React dengan Bit
Katakanlah Anda memiliki aplikasi yang berfungsi dan Anda ingin menambahkan beberapa komponen siap pakai yang Anda temukan saat menjelajahi situs Bit.cloud.
Saya akan memilih "yang ini", yang merupakan header bagus yang menambahkan ikon di samping konten header.
Berikut tampilan komponen saat dirender:
BTW, Anda dapat dengan mudah mengubah kode di sebelah kiri dan hasilnya akan diperbarui di sebelah kanan.
Mari tambahkan ke proyek Next.js yang sudah saya kerjakan. Proyek ini adalah situs web statis yang sangat mendasar, menampilkan satu halaman beranda. Tidak ada yang mewah, tapi saya ingin headernya memiliki ikon yang bagus, jadi mari kita instal komponen kita.
Anda dapat menggunakan Yarn atau NPM untuk melakukan ini, tapi karena kita berbicara tentang Bit, mari kita gunakan.
Pertama, kita harus memulai ruang kerja, jika tidak, Bit CLI tidak akan membiarkan Anda menginstal apa pun:
bit init
Dan itu saja. Anda sekarang siap untuk mulai memasang komponen.
Yang dapat Anda lakukan dengan:
bit install @semantic-org/semantic-ui-react.header
Hasilnya, Anda akan melihat sesuatu seperti ini:
Resolving component dependencies for workspace: 'my-workspace-name' ✔ importing components installing dependencies in workspace using teambit.dependencies/pnpm ✔ deduping dependencies for installation ✔ linking components ✔ running pre install subscribers WARN Moving react-dom that was installed by a different package manager to "node_modules/.ignored WARN Moving react that was installed by a different package manager to "node_modules/.ignored WARN Moving next that was installed by a different package manager to "node_modules/.ignored WARN Moving eslint-config-next that was installed by a different package manager to "node_modules/.ignored WARN Moving eslint that was installed by a different package manager to "node_modules/.ignored WARN 1 other warnings Downloading registry.npmjs.org/next/13.1.6: 9.59 MB/9.59 MB, done Downloading registry.npmjs.org/@next/swc-darwin-arm64/13.1.6: 26.4 MB/26.4 MB, done Already up to date Packages are hard linked from the content-addressable store to the virtual store. Content-addressable store is at: /Users/fernandodoglio/.pnpm-store/v3 Virtual store is at: node_modules/.pnpm Progress: resolved 307, reused 55, downloaded 240, added 295, done dependencies: + @bit/semantic-org.semantic-ui-react.header 0.88.2 + @next/font 13.1.6 (13.2.3 is available) + eslint 8.34.0 (8.35.0 is available) + eslint-config-next 13.1.6 (13.2.3 is available) + next 13.1.6 (13.2.3 is available) + react 18.2.0 + react-dom 18.2.0 ------------------------- ✔ installing dependencies using pnpm ✔ running post install subscribers ✔ linking components ✔ deduping dependencies for installation Successfully resolved dependencies for 0 component(s) in 23.294 seconds
Sekarang komponen sudah terinstal, bagaimana cara menggunakannya? Mudah! Seperti yang Anda lakukan dengan paket eksternal apa pun. Seperti ini:
import Header from '@bit/semantic-org.semantic-ui-react.header' const style = <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css'/> const HeaderExampleIconProp = () => <Header as='h2' icon='plug' content='Welcome to the main site' />
Anda memiliki pernyataan import di sana, itulah yang Anda pedulikan. Selebihnya hanya menunjukkan kepada Anda bagaimana komponen tersebut dapat digunakan. Anda dapat melihat pada tangkapan layar di bawah ini di mana saya menambahkan gaya baru dan komponen baru, sisanya adalah kode yang sudah ada:
Seperti yang Anda lihat, proses penggunaan komponen dari repositori pusat Bit sangatlah sederhana.
Sekarang mari kita lihat bagaimana kita dapat berbagi komponen kita sendiri dengan menambahkan komponen khusus baru ke dalam kode lalu mengekstraknya dan membagikannya kepada dunia.
Apakah Anda menyukai apa yang Anda baca? Pertimbangkan untuk berlangganan buletin GRATIS saya, tempat saya membagikan kebijaksanaan saya selama 2 dekade di industri TI kepada semua orang. Bergabunglah dengan “Ocehan pengembang lama” !
Membuat komponen Anda sendiri dengan Bit
Baiklah, jadi sekarang kita akan melakukan yang sebaliknya, daripada menarik sesuatu dari repo komponen pusat, kita akan membuat yang baru dan memasukkannya ke Bit.cloud.
Ini adalah langkah-langkahnya:
- Kami akan membuat cakupan di Bit.cloud tempat komponen kami akan dikelompokkan.
- Kami akan menggunakan perintah
bit createuntuk membuat template untuk komponen baru. - Kami kemudian akan memperbarui template dengan kode komponen sebenarnya.
- Kami kemudian akan menandai kode tersebut sebagai versi pertama.
- Kami akan mempublikasikan kodenya.
- Dan terakhir, sebagai bonus tambahan, kita akan memasang dan menggunakan kembali komponen kita sendiri di proyek lain.
Jadi ayo berangkat.
1. Membuat ruang lingkup
Cakupan adalah “grup” tempat Anda dapat memasukkan komponen. Dalam kasus kami, kami akan pergi ke Bit.cloud (Saya berasumsi Anda sudah memiliki akun di sini, jika tidak, lanjutkan dan daftar).
Klik tombol “Baru” di pojok kanan atas dan kemudian pada opsi “Cakupan”.
Ini akan membawa Anda ke halaman “cakupan baru”:
Di sini saya menetapkan milik saya sebagai lingkup publik pribadi dengan nama "kartu". Anda dapat memilih apa pun yang Anda inginkan, cukup catat nama pengguna (atau nama organisasi jika Anda menggunakan “Tim”), dan nama cakupannya, Anda akan memerlukannya sebentar lagi. Terakhir, klik "Buat".
Dengan cakupan yang siap, buka file workspace.jsonc Anda (harus terletak di root proyek Anda). Perbarui kunci defaultScope ke nama cakupan Anda.
2. Membuat komponen
Kami sekarang siap untuk membuat komponen kami, kami akan melakukannya dengan perintah bit create. Perintah ini sangat menarik karena berfungsi dengan template. Kami akan menggunakan template React, tetapi Anda memiliki banyak template lain yang dapat dipilih (atau buat template Anda sendiri). Klik di sini jika Anda ingin mengetahui lebih banyak tentang perintah ini.
Komponen yang akan kita buat adalah komponen kartu sederhana, yang dapat menampung lebih banyak komponen di dalamnya dan akan membuat pembungkus visual yang bagus di sekelilingnya.
Ini adalah perintah yang Anda perlukan:
bit create react ui/cards --scope=deleteman.card
Inilah arti semuanya:
- Bagian “reaksi” adalah templatnya. Anda dapat menentukan yang lain seperti HTML, MDX atau bahkan React Native.
- Bagian “ui/cards” adalah folder tempat komponen kita akan dibuat. Anda dapat melihat akar proyek Anda. Anda akan melihat folder bernama “‹scope›” (dalam kasus kami, “card”), di dalamnya ada folder bernama “ui”, dan di dalamnya ada folder lain bernama “cards”. Di sinilah kami akan bekerja sebentar lagi.
- Terakhir, bagian “ — scope=deleteman.card” adalah cakupan yang ditentukan. Dengan begitu, setelah kami menerbitkan komponennya, Bit akan mengetahui di mana harus meletakkannya.
3. Memperbarui kode template
Struktur folder untuk komponen yang baru dibuat terlihat seperti ini:
Secara default, Bit telah membuat beberapa file, termasuk card.docs.mdx , card.composition.tsx (di sinilah Anda akan menambahkan contoh yang menunjukkan cara menggunakan komponen Anda) dan card.spec.tsx . Semuanya memiliki konten umum di dalamnya. Tugas Anda adalah menulis dokumen dan tes yang sebenarnya.
Untuk tujuan artikel ini, mari fokus pada file card.tsx:
import styles from './card.module.css'
export function Card({children}) {
return (
<div className={styles.my_card}>
{children}
</div>
)
}
Seperti yang Anda lihat, tidak ada yang istimewa darinya, ini adalah komponen yang sangat sederhana dan umum. Itu juga mengimpor gaya dari file card.module.css lokal.
4. Menandai kode
Dengan kode yang sudah siap, kita sekarang harus memikirkan untuk menyebarkannya ke dunia luar.
Namun sebelum melakukan itu, pastikan tidak ada dependensi yang hilang dengan perintah bit status. Jika ada yang salah dengan komponen Anda, pastikan untuk memperbaikinya sebelum melanjutkan.
Jika Anda mendapatkan keluaran seperti ini, maka Anda siap untuk melanjutkan:
Sekarang kita harus “memberi tag” pada komponen kita, yang setara dengan menjalankan git add dan git commit secara bersamaan.
Jadi dengan baris berikut, kita dapat membuat versi 1.0.0 untuk komponen kita:
bit tag deleteman.cards/ui/[email protected]
Outputnya akan sangat bertele-tele, tetapi jika pada akhirnya, Anda melihat baris-baris ini, berarti Anda berhasil:
new components
(first version for components)
> ui/[email protected]
💡 Catatan: Dengan Bit, Anda juga dapat membandingkan dua versi komponen yang memberi Anda gambaran terpadu tentang semua perubahan dalam versi yang berbeda. Pelajari lebih lanjut "di sini".
5. Menerbitkan komponen
Langkah selanjutnya dari proses ini yang akan membantu Anda membagikan komponen yang dapat digunakan kembali adalah mengunggahnya ke Bit.cloud.
Jika Anda sudah mengikuti perkembangannya hingga saat ini, itu semudah menulis:
bit export
Itu dia! Saya tau?!
Jika semuanya berjalan sesuai rencana, Anda akan melihat keluaran seperti ini:
Dan jika Anda membuka Bit.cloud, Anda akan melihat komponennya aktif, seperti ini:
Itu adalah komponen kami dan siap digunakan oleh siapa saja!
💡 Anda dapat mempelajari lebih lanjut tentang mengekstraksi dan menggunakan kembali komponen yang sudah ada sebelumnya di sini.
6. Menggunakan kembali komponen kita sendiri
Sekarang untuk contoh praktis tentang cara menemukan komponen yang tepat dan cara memanfaatkannya, mari kita coba temukan komponen kita sendiri di Bit.cloud lalu cari tahu bagaimana kita dapat menambahkannya ke proyek baru.
Mari kita pergi ke Bit.cloud dan di bilah pencarian atas, masukkan kata “kartu”. Anda akan melihat sesuatu yang mirip dengan ini:
Komponen Anda yang cocok akan muncul terlebih dahulu, tetapi Anda juga dapat melihat komponen saya jika menelusuri hasil komunitas.
Saya akan memilih komponen saya, yang berarti saya akan melihat sesuatu seperti ini:
Dokumen menunjukkan cara menggunakannya, dan ada juga taman bermain langsung (di bawah judul “Render hello world!”) yang dapat Anda mainkan untuk melihat hasil langsung di sebelah kanan.
Nah untuk menggunakannya kita mempunyai beberapa pilihan. Jika Anda mengklik tombol "Gunakan" di kanan atas, Anda akan melihatnya:
Anda dapat menggunakan Bit itu sendiri untuk menginstal atau mengimpornya (lebih lanjut tentang itu sebentar lagi), Anda juga dapat menggunakan NPM, Yarn, atau bahkan PNPM. Anda akan mendapatkan semua informasi yang Anda perlukan jika mengeklik setiap tab opsi.
Untuk contoh ini, saya akan tetap menggunakan Bit. Tapi saya sudah menunjukkan cara "memasang" sebuah komponen, jadi saya akan "mengimpornya" ke proyek baru. Perbedaannya adalah ketika Anda menginstalnya, Anda mengunduh ketergantungannya dan paket tersebut tersedia untuk Anda gunakan seperti paket NPM lainnya, tetapi tidak ada yang lain.
Namun, ketika Anda “mengimpornya”, itu akan disalin ke root proyek Anda. Sebuah symlink dibuat di dalam node_modules sehingga Anda dapat terus menggunakannya seperti paket NPM normal, tetapi sekarang Anda memiliki akses ke kode tersebut.
Lihatlah keadaan proyek saya setelah saya mengimpor komponen Card:
Anda dapat melihat kode sumber sebenarnya dari komponen tersebut. Ini adalah sesuatu yang benar-benar baru dibandingkan dengan DX ketika menggunakan NPM atau manajer paket lainnya. Sekarang Anda dapat memperbarui kode dengan aman jika perlu (berapa kali kami ingin mengubah kode ketergantungan!), dan kemudian, melalui Bit, menerbitkan versi baru.
Fitur ini luar biasa ketika Anda perlu berkolaborasi dengan tim lain dalam beberapa komponen lintas proyek. Dengan cara ini Anda dapat membuat semua perubahan yang diperlukan, mengujinya di dalam proyek yang Anda gunakan, dan menerbitkan versi baru tanpa harus melakukan solusi aneh apa pun.
Dan untuk membuktikan pendapat saya, berikut tampilan penggunaan paket yang diimpor ini dari kodenya:
Dengan kata lain, tidak ada yang berubah, saya masih merujuknya seolah-olah saya akan melakukannya jika saya menginstalnya melalui NPM atau opsi lainnya!
Dan itulah cara Anda melakukannya.
Kesuksesan!
Suka atau tidak suka, React hampir ada di mana-mana di web. Cepat atau lambat Anda akan mengalaminya. Baik Anda sedang membangun sesuatu dengan Next atau Remix, atau jika Anda hanya membangun situs statis dengan Astro. Kemungkinannya adalah, kepala Anda akan terbentur.
Meskipun demikian, membuat, berbagi, dan menggunakan kembali komponen tidak harus menyusahkan, bahkan bisa menyenangkan!
Berkat Bit Anda dapat dengan cepat berbagi pekerjaan Anda dengan orang lain atau menggunakan milik orang lain dengan satu perintah.
→ Cobalah
Bangun Aplikasi React dengan komponen yang dapat digunakan kembali, seperti Lego
Alat sumber terbuka Bitmembantu 250.000+ pengembang membuat aplikasi dengan komponen.
Ubah UI, fitur, atau halaman apa pun menjadi komponen yang dapat digunakan kembali — dan bagikan ke seluruh aplikasi Anda. Lebih mudah untuk berkolaborasi dan membangun lebih cepat.
Pisahkan aplikasi menjadi beberapa komponen untuk mempermudah pengembangan aplikasi, dan nikmati pengalaman terbaik untuk alur kerja yang Anda inginkan:
