Komponen Pertama Anda
Komponen merupakan salah satu konsep inti dari React. Komponen adalah fondasi di mana Anda bangun antarmuka pengguna (UI), yang membuat komponen tempat yang sempurna untuk memulai perjalan React Anda!
You will learn
- Apa itu komponen
- Apa tugas yang dimainkan oleh komponen di dalam aplikasi React
- Bagaimana cara menulis komponen React pertama Anda
Komponen: Pembangun Balok UI
Di dalam web, HTML memungkinkan kita membuat dokumen-dokumen terstruktur yang kaya dengan kumpulan tag bawaannya seperti <h1>
dan <li>
:
<article>
<h1>Komponen Pertama Saya</h1>
<ol>
<li>Komponen: Pembangun Balok UI</li>
<li>Mendefinisikan suatu Komponen</li>
<li>Menggunakan suatu Komponen</li>
</ol>
</article>
Markup ini merepresentasikan artikel <article>
, heading <h1>
dan daftar isi (yang disingkat) sebagai daftar yang tersusun <ol>
. Markup seperti ini, digabung dengan CSS untuk style, dan JavaScript untuk interaktivitas, berada di belakang setiap sidebar, avatar, modal, dropdown—setiap potongan UI yang Anda liat di dalam web.
React memungkinkan Anda menggabung markup, CSS, dan JavaScript Anda menjadi “komponen” yang dibuat khusus, elemen UI yang dapat digunakan kembali untuk aplikasi Anda. Daftar isi yang Anda lihat di atas dapat diubah menjadi sebuah komponen <TableOfContents />
yang dapat Anda render pada setiap halaman. Dari belakang, itu tetap menggunakan tag HTML yang sama seperti <article>
, h1
, dll.
Sama seperti tag HTML, Anda dapat menggabung, mengurut, dan menyusun bertingkat komponen untuk mendesain halaman penuh. Misalnya, halaman dokumentasi ini yang Anda baca terbuat oleh komponen-komponen React:
<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">Docs</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>
Seiring berkembangnya proyek Anda, Anda akan memperhatikan bahwa banyak desain Anda bisa dikomposisi dengan menggunakan ulang komponen-komponen yang sudah Anda buat, mempercepatkan perkembangan proyek Anda. Daftar isi kita di atas bisa disertakan pada layar apapun dengan <TableOfContents />
! Anda bisa memulai proyek Anda dengan cepat menggunakan ribuan komponen-komponen yang dibagi oleh komunitas open source React seperti Chakra UI dan Material UI.
Mendefinisikan suatu komponen
Secara tradisional saat menciptakan halaman web, para pengembang web me-mark-up konten mereka kemudian menambahkan interaksi dengan sedikit JavaScript. Ini bekerja dengan baik ketika interaksi hanya menyenangkan-untuk-dimiliki di dalam web. Sekarang ini diharapkan banyak situs dan semua aplikasi. React mengutamakan interaktivitas dengan tetap menggunakan teknologi yang sama: Sebuah komponen React adalah sebuah fungsi JavaScript yang dapat Anda tambahkan dengan markup. Inilah tampilannya (Anda bisa sunting contoh di bawah ini):
export default function Profile() { return ( <img src="https://i.imgur.com/MK3eW3Am.jpg" alt="Katherine Johnson" /> ) }
Dan ini bagaimana cara membuat sebuah komponen:
Langkah 1: Eksport komponennya
awalan export default
adalah sebuah sintaksis JavaScript standar (tidak spesifik kepada React). Itu memungkinkan Anda menandai fungsi utama di sebuah file supaya Anda bisa mengimport itu dari file-file lain nantinya. (Lebih lanjut tentang mengimport di Mengimport dan Mengeksport Komponen!)
Langkah 2: Definisikan fungsinya
Dengan function Profile() { }
Anda mendefinisikan fungsi JavaScript dengan nama Profile
.
Langkah 3: Tambahkan markup
Komponen itu mengembalikan tag <img />
dengan atribut src
dan alt
. <img />
ditulis seperti HTML, tetapi ini sebenarnya merupakan JavaScript di belakang! Sintaksis ini disebut JSX, dan ini memungkinkan Anda untuk embed markup di dalam JavaScript.
Pernyataan-pernyataan yang dikembalikan bisa ditulis semua pada satu baris, seperti dalam komponen ini.
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
Tetapi jika markup Anda tidak semua ada di baris yang sama dengan keyword return
, Anda harus membungkus itu dalam tanda kurung:
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);
Menggunakan suatu komponen
Sekarang setelah Anda mendefinisikan komponen Profile
Anda, Anda bisa meletakkan itu di dalam komponen-komponen lain secara bertingkat. Misalnya, Anda bisa eksport sebuah komponen Gallery
yang menggunakan beberapa komponen Profile
:
function Profile() { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> ); } export default function Gallery() { return ( <section> <h1>Ilmuwan yang luar biasa</h1> <Profile /> <Profile /> <Profile /> </section> ); }
Apa yang dilihat oleh peramban
Perhatikanlah perbedaan pada huruf kapitalisasi:
<section>
dimulai dengan huruf kecil, supaya React mengetahui bahwa kita merujuk pada tag HTML.<Profile />
dimulai dengan huruf kapitalP
, supaya React mengetahui bahwa kita ingin menggunakan komponen kita bernamaProfile
.
Dan Profile
berisi lebih banyak HTML: <img />
. Pada akhirnya, inilah yang dilihat oleh peramban:
<section>
<h1>Ilmuwan yang luar biasa</h1>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>
Menyusun secara bertingkat dan mengorganisir komponen
Komponen adalah fungsi JavaScript biasa, sehingga Anda bisa menjaga beberapa komponen di dalam file yang sama. Ini nyaman ketika komponen-komponen relatif kecil atau saling terkait secara erat. Jika file ini menjadi ramai, Anda selalu bisa memindahkan Profile
kepada suatu file yang beda. Anda akan belajar bagaimana cara melakukan ini segera di halaman tentang import.
Karena komponen-komponen Profile
di-render di dalam Gallery
—bahkan beberapa kali!—kita dapat mengatakan bahwa Gallery
adalah sebuah komponen induk, yang me-render setiap Profile
sebagai sebuah “anak”. Ini merupakan bagian ajaib dari React: Anda bisa mendefinisikan suatu komponen sekali, kemudian digunakan di banyak tempat dan sebanyak kali yang Anda suka.
Deep Dive
Aplikasi React Anda dimulai dari suatu komponen ”root”. Biasanya, itu dibuat secara otomatis saat Anda memulai proyek baru. Misalnya, jika Anda menggunakan CodeSandbox atau Create React App, komponen root didefinisikan di src/App.js
. Jika Anda menggunakan framework Next.js, komponen root didefinisikan di pages/index.js
. Dalam contoh-contoh berikut, Anda telah mengeksport komponen-komponen root.
Sebagian besar aplikasi React menggunakan komponen sampai ke bawah. Ini berarti Anda tidak akan hanya menggunakan komponen untuk bagian-bagian yang dapat digunakan kembali seperti tombol, tetapi juga bagian-bagian yang lebih besar seperti sidebar, daftar, dan juga, halaman lengkap! Komponen adalah sebuah cara yang praktis untuk mengorganisir kode UI dan markup, bahkan jika beberapa darinya hanya digunakan sekali.
Framework-framework berbasis React mengambil ini selangkah lebih jauh. Daripada menggunakan sebuah file HTML yang kosong dan membiarkan React untuk “mengambil alih” dalam mengelola halamannya dengan JavaScript, mereka juga membuat HTML-nya secara otomatis dari komponen-komponen React Anda. Ini memungkinkan aplikasi Anda menampilkan beberapa konten sebelum kode JavaScript dimuat.
Namun, banyak website hanya menggunakan React untuk menambahkan interaktivitas kepada halaman HTML yang sudah ada. Mereka memiliki banya komponen root daripada satu untuk seluruh halaman. Anda dapat menggunakan React sebanyaknya-banyaknya—atau sesedikit mungkin—sesuai dengan yang dibutuhkan.
Recap
Anda baru saja mendapatkan rasa pertama Anda dari React! Mari kita rekap beberapa poin penting.
-
React memungkinkan Anda untuk membuat komponen, elemen UI yang dapat digunakan kembali untuk aplikasi Anda
-
Dalam suatu aplikasi React, setiap bagian dari UI adalah sebuah komponen.
-
Komponen React adalah fungsi JavaScript biasa kecuali:
- Nama mereka selalu dimulai dengan huruf kapital.
- Mereka selalu mengembalikan markup JSX.