Komponen adalah potongan tampilan yang punya nama dan bisa dipakai berulang kali. Di React, komponen cuma function JavaScript yang namanya diawali huruf kapital dan mengembalikan JSX. Mirip stempel: dibuat sekali, dicap berkali-kali, dan tiap capnya sama persis. Kalau desain stempelnya diubah, semua cap berikutnya ikut berubah.
🧪 Tebakan cepat: kamu membuat
function greeting()(huruf kecil semua) yang mengembalikan<p>Selamat datang!</p>, lalu menulis<greeting />diApp. Apa yang tampil? Jawabannya ada di bagian "Kenapa harus huruf kapital".
Bikin komponen, lalu pakai
function Greeting() {
return <p>Selamat datang!</p>
}
function App() {
return (
<div>
<Greeting />
<Greeting />
<Greeting />
</div>
)
}
DOM yang dibuat React:
<div>
<p>Selamat datang!</p>
<p>Selamat datang!</p>
<p>Selamat datang!</p>
</div>
function Greeting()membuat komponen. Namanya diawali huruf kapital, dan dia mengembalikan JSX.<Greeting />memakai komponen itu, seperti tag HTML. Komponen yang gak punya isi ditulis dengan tag yang menutup sendiri: ada/sebelum>.- Tiap
<Greeting />membuat React memanggil functionGreetingsekali. Tiga tag, tiga panggilan, tiga paragraf. - Nama
Greetinggak muncul di DOM. Yang masuk ke halaman cuma JSX yang dikembalikannya, di sini<p>.
Komponen juga boleh ditulis dengan arrow function: const Greeting = () => <p>Selamat datang!</p>. Hasilnya sama.
Kenapa harus huruf kapital
Di pelajaran JSX kamu sudah tahu tiap tag diubah jadi React.createElement(...). Huruf pertama nama tag menentukan apa yang dikirim:
| JSX | Jadi | Artinya |
|---|---|---|
<Greeting /> |
React.createElement(Greeting) |
panggil function Greeting |
<greeting /> |
React.createElement("greeting") |
buat elemen HTML bernama greeting |
Nama berhuruf kecil dianggap nama tag HTML dan dikirim sebagai teks "greeting". Function-mu gak pernah dipanggil. React membuat elemen <greeting></greeting> yang kosong, jadi gak ada yang tampil, dan di console muncul peringatan The tag <greeting> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. Itu jawaban tebakannya: gak muncul apa-apa.
Jadi nama komponen selalu PascalCase: huruf kapital di awal tiap kata, seperti Greeting, ProductCard, dan UserAvatar.
Merakit halaman dari beberapa komponen
function Header() {
return (
<header>
<h1>Hyper Sheets</h1>
</header>
)
}
function Footer() {
return (
<footer>
<p>© 2026</p>
</footer>
)
}
function App() {
return (
<div>
<Header />
<Greeting />
<Footer />
</div>
)
}
Appmemakai tiga komponen. Komponen yang memakai disebut parent (di siniApp), yang dipakai disebut child (Header,Greeting,Footer).- Tiap komponen ditulis terpisah, sejajar, di luar komponen lain. Mau mengubah footer? Cukup ubah
Footer, dan semua halaman yang memakainya ikut berubah. - Simbol
©boleh diketik langsung, atau ditulis©di dalam JSX. Hasilnya sama:© 2026.
Kapan sebuah bagian dijadikan komponen? Kalau bagian itu dipakai di lebih dari satu tempat (tombol, kartu produk, navbar), atau kalau satu komponen sudah terlalu panjang untuk dibaca. Teks pendek yang cuma muncul sekali boleh tetap di dalam App.
⚠️ Jebakan yang sering ketemu
- Nama huruf kecil.
<greeting />gak menampilkan apa-apa. PakaiGreeting. returnsendirian di satu baris. Kalau JSX-nya mulai di baris di bawahreturn, JavaScript menambahkan titik koma otomatis tepat setelahreturn, jadi komponennya mengembalikanundefineddan gak tampil apa-apa. Taruh kurung buka di baris yang sama:return (.- Komponen dibuat tapi gak dipakai. Menulis
function Greetingbelum menampilkan apa pun. Komponen baru tampil kalau<Greeting />ditulis di dalam komponen yang ditampilkan, di latihan iniApp. - Komponen ditulis di dalam komponen lain.
function App() { function Greeting() {...} }membuatGreetingjadi function baru tiap kaliAppjalan. React menganggapnya komponen yang berbeda, jadi isinya dibuat ulang dari nol. Tulis tiap komponen di luar, sejajar.
TL;DR: Komponen adalah function yang namanya diawali huruf kapital dan mengembalikan JSX, misalnya function Greeting() { return <p>Selamat datang!</p> }. Pakai dengan menulis <Greeting /> di dalam komponen lain; tiap tag berarti satu panggilan, dan nama komponennya gak ikut masuk DOM. Nama huruf kecil (<greeting />) dianggap tag HTML, jadi function-mu gak pernah dipanggil dan gak ada yang tampil. Halaman dirakit dari komponen yang ditulis terpisah: App (parent) memakai Header, Greeting, dan Footer (child). Tulis return ( dengan kurung di baris yang sama.
