BERPIKIR DENGAN REACT

Untuk memahami React, kita perlu mengubah cara berpikir kita tentang bagaimana aplikasi web dibangun. Kita akan fokus pada komponen kecil yang menyusun tampilan aplikasi.

🧩 UI Adalah Kumpulan Komponen

Saat membangun frontend sebelumnya, kamu mungkin berpikir seperti ini:

“Satu halaman = satu file HTML”

Tapi di React, kita tidak membangun halaman sebagai satu kesatuan besar. Kita membangun UI dari bagian-bagian kecil yang disebut komponen.

Contoh: Tampilan Produk

Bayangkan kamu ingin menampilkan daftar produk seperti ini:

📦 Nama Produk
💰 Harga
🛒 Tombol Beli

Kita tidak akan menulisnya semua pada satu file yang sama, tapi perlu memecahnya jadi komponen seperti:

• ProductList → menampilkan semua produk
• ProductItem → menampilkan satu produk
• BuyButton → tombol beli

Komponent Parent dan Child

Komponen di React bisa memiliki hubungan seperti pohon:

ProductList 
├── ProductItem (parent)
|   ├── ProductImage (child)
│   ├── BuyButton (child)
└── ProductItem (parent)
    ├── ProductImage (child)
    └── BuyButton (child)

Kita bisa mengurai UI kita seperti cabang cabang, di mana setiap item bisa punya komponen bawahan (child) yang lebih spesifik.

Alur Kerja “Berpikir dengan React”

1. Rancang UI berdasarkan komponen Pecah tampilan jadi komponen kecil-kecil yang reusable.

2. Bangun hierarki komponen Tentukan komponen mana yang “parent” dan mana yang “child”.

3. Tentukan data dan flow-nya Data biasanya disimpan di parent dan dikirim ke child lewat props.

Rangkuman

Jangan berpikir “halaman HTML”. Mulailah berpikir “bagian UI kecil yang bisa digabung.”

Itulah mindset penting untuk benar-benar memahami dan menikmati React.