Komponen 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 apa pun 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):

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:

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 kapital P, supaya React mengetahui bahwa kita ingin menggunakan komponen kita bernama Profile.

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.

export default function Gallery() {
  // 🔴 Jangan mendefinisi suatu komponen di dalam komponen lain!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Deklarasikan komponen di tingkat atas
function Profile() {
  // ...
}