Belajar ReactJS - Component & JSX

#Pendahuluan

Inilah momen yang kalian tunggu: menulis component dan JSX sungguhan. JSX adalah bahasa yang akan kalian gunakan setiap hari — campuran HTML dan JavaScript yang membuat struktur UI mudah dibaca dan dianotasi dengan logika.

Episode 4 membahas komponen fungsional, aturan sintaks JSX, cara menyisipkan ekspresi JavaScript, lalu tiga pendekatan styling yang paling umum dipakai di ekosistem React: CSS biasa, CSS Modules, dan styled-components. Terakhir, kalian belajar composition — cara menyusun komponen kecil menjadi antarmuka besar.

#Komponen Fungsional dan UI Sederhana

#Fungsi yang Mengembalikan UI

Sebuah komponen fungsional hanyalah fungsi JavaScript yang mengembalikan JSX. Konvensinya: nama dimulai huruf kapital agar React mengenalinya sebagai komponen, bukan elemen HTML:

Komponen fungsional pertama

function Avatar({ nama, peran }) {
  return (
    <figure>
      <img src="/avatar-default.png" alt={nama} />
      <figcaption>{nama} - {peran}</figcaption>
    </figure>
  )
}

Komponen Avatar menerima props nama dan peran, lalu merendernya di dalam JSX. src="/avatar-default.png" adalah atribut biasa, sedangkan alt={nama} adalah ekspresi JavaScript — bedanya terletak pada kurung kurawal.

#Sintaks JSX dan Ekspresi JavaScript

#Aturan Dasar JSX

Beberapa aturan penting yang wajib diingat:

• Satu komponen mengembalikan satu elemen induk, dibungkus div atau fragment <>...</>.
• Atribut class ditulis className, bukan class.
• Ekspresi JavaScript disisipkan dengan kurung kurawal { ekspresi }.
• Setiap tag harus ditutup, termasuk tag kosong seperti <img />.

Aturan dasar JSX

const nama = "Dunia"
function Ucapan() {
  return (
    <>
      <h1 className="judul">Halo, {nama.toUpperCase()}</h1>
      <input placeholder="Ketik sesuatu" />
    </>
  )
}

{nama.toUpperCase()} memanggil method JavaScript di dalam JSX — apa pun yang bisa dievaluasi menjadi nilai boleh diletakkan di sana, termasuk panggilan fungsi dan ekspresi ternary.

#Komentar dan Kondisi di JSX

Komentar di dalam JSX ditulis dengan {/* isi komentar */} karena // akan dianggap sebagai ekspresi. Untuk kondisi, ekspresi ternary lebih disarankan daripada if statement karena if tidak bisa diletakkan langsung di dalam JSX.

#Styling Komponen

#CSS Biasa dan Class Name

Cara paling sederhana: import file CSS lalu pakai className. Gaya ini mudah dimulai tapi berisiko tabrakan nama class di proyek besar.

Pakai CSS biasa

import "./avatar.css"
 
function Avatar() {
  return <img className="avatar" src="/avatar-default.png" alt="avatar" />
}

#CSS Modules

CSS Modules mengubah nama class menjadi unik saat build, sehingga tidak saling tabrakan. File diberi akhiran .module.css:

CSS Modules

import styles from "./avatar.module.css"
 
function Avatar() {
  return <img className={styles.avatar} src="/avatar-default.png" alt="avatar" />
}

import styles from "./avatar.module.css" membuat objek styles berisi nama class unik hasil build. Gaya ini menjadi default banyak proyek produksi karena scoping-nya aman.

#Styled-Components

styled-components menulis CSS langsung di dalam komponen JavaScript memakai template literal. Install dulu:

npm install styled-components

Styling dengan styled-components

import styled from "styled-components"
 
const Tombol = styled.button`
  background: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
`
 
function App() {
  return <Tombol>Kirim</Tombol>
}

styled.button membuat elemen button dengan gaya CSS, lalu memakai kembali sebagai komponen Tombol. Pendekatan ini menempatkan style dan logika di satu tempat, populer untuk design system.

#Composition Props dan Children

#Memakai children

children adalah props khusus yang berisi konten di antara tag pembuka dan penutup sebuah komponen. Ini fondasi composition:

Komponen pembungkus

function Kotak({ judul, children }) {
  return (
    <section>
      <h2>{judul}</h2>
      <div>{children}</div>
    </section>
  )
}
 
function App() {
  return (
    <Kotak judul="Pengaturan">
      <label>Nama: <input /></label>
    </Kotak>
  )
}

{children} merender apa pun yang ditempatkan di antara <Kotak>...</Kotak>. Pola ini membuat komponen bisa dipakai untuk menyusun layout: Kotak sekali dibuat, isi bisa berbeda-beda setiap kali dipakai.

#Composition vs Inheritance

React tidak menganjurkan inheritance antar komponen. Gantinya, gunakan composition: komponen kecil diberi tanggung jawab spesifik, lalu disusun bersama. UI besar dibangun dari potongan kecil yang bisa diuji dan dipakai ulang secara terpisah.

#Penutup

Episode 4 membuat kalian produktif dengan React: menulis komponen fungsional, memahami aturan JSX, menyisipkan ekspresi JavaScript, memilih di antara tiga pendekatan styling, dan menyusun UI dengan pola composition dan children.

Inti yang harus dibawa pulang:

• Komponen fungsional adalah fungsi yang mengembalikan JSX, nama diawali huruf kapital.
• JSX memakai className dan ekspresi { ... }; setiap tag wajib ditutup.
• CSS biasa untuk proyek kecil, CSS Modules untuk scoping aman, styled-components untuk CSS-in-JS.
• children adalah props khusus untuk konten di antara tag komponen.
• Composition menggantikan inheritance: susun komponen kecil menjadi besar.
• Props membuat komponen reusable dengan data dan perilaku yang berbeda.

Di episode 5 selanjutnya kita akan membahas state & event handling — useState untuk local state, sistem synthetic event, controlled components untuk form, serta batching dan perilaku re-render. Ini titik di mana aplikasi kalian mulai benar-benar interaktif.