Dasar Component di React
1. Latar Belakang
Pengembangan aplikasi web modern membutuhkan struktur kode yang terorganisir agar aplikasi lebih mudah dikembangkan dan dipelihara. Salah satu teknologi yang banyak digunakan untuk membangun antarmuka pengguna adalah React. React menggunakan pendekatan berbasis komponen, yaitu membagi tampilan aplikasi menjadi bagian-bagian kecil yang dapat dibuat dan dikelola secara terpisah. Pendekatan ini membantu pengembang dalam menyusun struktur aplikasi secara lebih rapi dan efisien.
Dasar dari penggunaan React adalah memahami konsep component, yaitu unit penyusun utama dalam pembuatan tampilan aplikasi. Setiap component bertanggung jawab untuk menampilkan bagian tertentu dari antarmuka, seperti header, sidebar, atau konten halaman. Dengan memahami dasar component di React, pengembang dapat membuat kode yang lebih modular, mudah digunakan kembali, serta mempermudah proses pengembangan aplikasi yang lebih kompleks.
2. Alat dan Bahan
a. Perangkat Lunak
• Terminal / Command Prompt
• Text Editor (VS Code)
• Web Browser (Firefox / Chrome)
• Node.js & npm (unduh di nodejs.org)
b. Perangkat Keras
• Laptop / Komputer
3. Pembahasan
3.1 Apa Itu Component?
Component adalah potongan kecil UI yang mandiri dan reusable. Setiap bagian tampilan mulai dari tombol, form, navbar, hingga seluruh halaman bisa dibuat menjadi sebuah component di React. Component menerima input (disebut props) dan mengembalikan elemen React yang mendeskripsikan tampilan di layar.
3.2 Jenis-Jenis Component
React mengenal dua jenis component:
• Function Component — Cara modern dan paling umum. Ditulis sebagai fungsi JavaScript yang mengembalikan JSX.
• Class Component — Cara lama sebelum Hooks. Masih valid, namun Function Component lebih direkomendasikan.
3.3 Membuat Function Component
Berikut contoh membuat dan menggunakan Function Component:
function Salam({ nama }) {
return <h1>Halo, {nama}!</h1>;
}
// Penggunaan di component lain:
<Salam nama="Budi" />
<Salam nama="Ani" />
3.4 Aturan Penulisan Component
1. Nama component harus diawali dengan huruf kapital (contoh: MyButton, bukan myButton).
2. Setiap component hanya boleh mengembalikan satu elemen induk (gunakan Fragment <> jika perlu).
3. Component harus bersifat pure, hasil yang sama untuk input yang sama.
3.5 Menyusun Component
Kekuatan React terletak pada kemampuan menyusun (compose) component. Component bisa saling digunakan di dalam component lain, membentuk hierarki UI yang terstruktur seperti pohon.
function App() {
return (
<div>
<Navbar />
<KontenUtama />
<Footer />
</div>
);
}
4. Daftar Pustaka
Dicoding Indonesia. (2022). Memulai pemrograman dengan React. https://www.dicoding.com/blog/memulai-pemrograman-dengan-react/
Niagahoster. (2023). Apa itu React JS? Pengertian, fungsi, dan cara kerjanya. https://www.niagahoster.co.id/blog/react-js/
Petani Kode. (2021). Tutorial ReactJS untuk pemula. https://www.petanikode.com/reactjs-untuk-pemula/
Dewaweb. (2022). Mengenal React JS: Pengertian, kelebihan, dan cara kerjanya. https://www.dewaweb.com/blog/apa-itu-react-js/
0 Komentar