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 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):

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.

Pitfall

Komponen React adalah fungsi JavaScript biasa, tetapi nama mereka harus dimulai dengan huruf kapital atau tidak akan berfungsi!

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>
);

Pitfall

Tanpa tanda kurung, kode apa pun di baris-baris setelah return akan diabaikan!

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 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.

Pitfall

Komponen dapat me-render komponen lain, tetapi Anda tidak boleh menyusun definisinya secara bertingkat:

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

Potongan di atas sangat lambat dan mengakibatkan bug. Sebagai gantinya, definisikan setiap komponen di tingkat atas:

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

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

Ketika suatu komponen anak membutuhkan data dari suatu induk, operkan data melalui props daripada menyusun definisinya secara bertingkat.

Deep Dive

Komponen sampai ke bawah

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:

    1. Nama mereka selalu dimulai dengan huruf kapital.
    2. Mereka selalu mengembalikan markup JSX.

Challenge 1 of 4:
Eksport komponen tersebut

Sandbox ini tidak dapat bekerja karena komponen root tidak dieksport:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

Coba perbaiki sendiri sebelum melihat pada solusinya!