Komponen Solid — SolidJS

Komponen Solid adalah fungsi biasa yang return JSX — dijalankan sekali saja. Function Component function Greeting() { return Selamat datang! } function App()…

Komponen adalah fungsi yang mengembalikan JSX. Dengan komponen, halaman dipecah jadi bagian-bagian bernama (Header, KartuBuku, Footer) yang dirakit di satu komponen utama, App. Bayangin Kak Nadia punya satu cetakan kartu buku untuk rak Toko Buku Kak Nadia. Tiap kali ada buku dipajang, cetakan itu dipakai sekali dan jadilah satu kartu. Kartu yang sudah jadi gak dicetak ulang: kalau ada yang memesan, Kak Nadia cuma mengganti angka pesanan di kartu itu. Fungsi komponen adalah cetakannya, <KartuBuku /> satu kali pemakaian, dan angka pesanan yang diganti adalah signal di dalam kartu.

🧪 Tebakan cepat: App memakai <KartuBuku /> tiga kali, dan KartuBuku berisi console.log("KartuBuku jalan"). Sesudah halaman terbuka, kamu klik tombol Pesan di kartu kedua dua kali. Total berapa kali KartuBuku jalan tercetak: 1, 3, atau 5? Jawabannya ada di bagian "Sekali per pemakaian".

Komponen adalah fungsi

function Header() {
  return (
    <header>
      <h1>Toko Buku Kak Nadia</h1>
    </header>
  )
}

function Footer() {
  return (
    <footer>
      <p>© 2026</p>
    </footer>
  )
}

Komponen didefinisikan sebagai function biasa. Arrow function juga boleh: const Footer = () => <footer>...</footer>.
Fungsinya harus return JSX. Tanpa return, fungsinya mengembalikan undefined dan gak ada yang tampil.
Namanya diawali huruf besar. <Header /> artinya "pakai komponen Header", sedangkan <header> huruf kecil adalah tag HTML biasa.
<header> dan <footer> di dalamnya adalah tag HTML semantik untuk bagian atas dan bawah halaman.

Menyusun halaman dari komponen

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  )
}

<Header /> ditulis seperti tag yang menutup dirinya sendiri. Di tempat itu, Solid memasang apa pun yang dikembalikan Header.
Hasilnya di halaman: <div><header><h1>Toko Buku Kak Nadia</h1></header><footer><p>© 2026</p></footer></div>. Nama Header dan Footer gak muncul di DOM, yang muncul cuma isinya.
Compiler Solid 1.9 menulis tiap pemakaian sebagai _$createComponent(Header, {}): panggil fungsi Header sekali, lalu sisipkan hasilnya.

Latihan pelajaran ini sama bentuknya, dengan isi lain: Header merender <header> berisi <h1>Hyper Sheets</h1>, Footer merender <footer> berisi <p>© 2026</p>, dan keduanya dipakai di dalam App sebagai <Header /> dan <Footer />. Simbol © boleh disalin dari brief, atau ditulis © di JSX.

Sekali per pemakaian

Kartu buku ini punya signal-nya sendiri, dipesan, yang naik tiap tombol Pesan ditekan:

import { createSignal } from "solid-js"

function KartuBuku() {
  const [dipesan, setDipesan] = createSignal(0)
  console.log("KartuBuku jalan")

  return (
    <div class="kartu">
      <h2>Laskar Pelangi</h2>
      <button onClick={() => setDipesan(d => d + 1)}>Pesan</button>
      <p>Dipesan: {dipesan()}</p>
    </div>
  )
}

function App() {
  return (
    <div>
      <Header />
      <KartuBuku />
      <KartuBuku />
      <KartuBuku />
      <Footer />
    </div>
  )
}

Kejadian	Console	Yang berubah di halaman
Halaman dibuka	`KartuBuku jalan` 3 kali	3 kartu dibuat
Klik `Pesan` di kartu ke-2		kartu ke-2: `Dipesan: 0` jadi `Dipesan: 1`
Klik lagi		kartu ke-2: `Dipesan: 1` jadi `Dipesan: 2`

Total KartuBuku jalan tercetak 3 kali: sekali untuk tiap pemakaian, dan gak bertambah saat diklik. Itu jawaban tebakannya. Jadi console.log di badan komponen muncul sekali per pemakaian, bukan tiap ada perubahan.

Tiap <KartuBuku /> menjalankan fungsinya sendiri, jadi tiap kartu punya signal dipesan sendiri. Klik di kartu kedua gak mengubah kartu pertama atau ketiga.
Ketiga kartunya sama persis (Laskar Pelangi), karena KartuBuku belum bisa menerima data dari luar. Itu tugas props, di pelajaran berikutnya.

Kenapa dipecah jadi komponen

Dipakai ulang. Satu fungsi KartuBuku, berapa pun kartunya.
Mudah dibaca. App berisi <Header />, <KartuBuku />, <Footer />, seperti daftar isi halaman.
Perubahan di satu tempat. Ganti isi Footer sekali, semua halaman yang memakainya ikut berubah.

Isi Header boleh saja diketik langsung di App, dan tampilannya sama persis. Tapi latihan ini memeriksa kodemu: <Header /> dan <Footer /> harus benar-benar dipakai di App.

⚠️ Jebakan yang sering ketemu

Nama komponen huruf kecil. function header() lalu <header /> gak memanggil fungsimu: Solid menganggapnya tag HTML <header> kosong. Awali nama komponen dengan huruf besar.
Lupa return. function Footer() { <footer>...</footer> } mengembalikan undefined, jadi footer-nya gak muncul.
Mengira console.log di komponen jalan tiap klik. Dia jalan sekali per pemakaian. Yang jalan saat diklik cuma bagian yang membaca signal, misalnya {dipesan()}.
Mengetik isi komponen langsung di App. Tampilannya sama, tapi gak ada komponen yang bisa dipakai ulang, dan latihannya gagal di pemeriksaan <Header /> dan <Footer />.

TL;DR: Komponen Solid adalah function bernama huruf besar yang me-return JSX, misalnya function Header() { return <header><h1>Hyper Sheets</h1></header> }. Komponen dipakai seperti tag, <Header />, dan isinya yang muncul di halaman. Fungsi komponen jalan sekali untuk tiap pemakaian: tiga <KartuBuku /> mencetak KartuBuku jalan tiga kali, lalu klik berikutnya cuma mengganti teks yang membaca signal. Tiap pemakaian punya signal-nya sendiri. Huruf kecil berarti tag HTML, dan tanpa return gak ada yang tampil.