Membuat komponen dan mengelola state

Tujuan Pembelajaran:

Setelah mempelajari modul ini, mahasiswa diharapkan mampu:

Memahami konsep komponen dalam framework frontend modern
Membedakan antara komponen stateless dan stateful
Mengelola state menggunakan React Hooks (`useState`)
Membuat interaksi antar komponen menggunakan props dan state

Persiapan di Ubuntu 24.04

1. Install Node.js dan npm

sudo apt update
sudo apt install nodejs npm -y

2. Verifikasi versi

node -v
npm -v

3. Install Vite (alternatif lebih ringan dari create-react-app)

npm create vite@latest nama-proyek -- --template react
cd nama-proyek
npm install
npm run dev

> Proyek React siap dijalankan di `http://localhost:5173`

1. Konsep Komponen

Apa Itu Komponen?

Komponen adalah blok bangunan UI yang dapat digunakan kembali. Dalam React, komponen bisa ditulis sebagai function.

Contoh Komponen Sederhana:

 // File: src/components/Header.jsx
 function Header() {
   return <h1>Selamat Datang di Web Saya</h1>;
 }
 export default Header;

Kemudian digunakan di `App.jsx`:

 import Header from './components/Header';
 
 function App() {
   return (
     <div>
       <Header />
     </div>
   );
 }

2. Mengelola State

Apa Itu State?

State adalah data yang dikelola di dalam komponen yang bisa berubah seiring interaksi user.

Contoh: Counter dengan `useState`

 import { useState } from 'react';
 
 function Counter() {
   const [count, setCount] = useState(0); 

   return ( 
     <div>
       <p>Nilai: {count}</p>
       <button onClick={() => setCount(count + 1)}>Tambah</button>
     </div>
   );
 }

 export default Counter;

3. Mengoper Data dengan Props

Apa Itu Props?

Props (properties) digunakan untuk mengirim data dari satu komponen ke komponen lain.

Contoh Props:

 function Welcome(props) {
   return <h2>Halo, {props.name}!</h2>;
 }
 
 // Di App.jsx
 <Welcome name="Dzaq" />

4. Interaksi antar Komponen

Parent dan Child Component

Misal: `App.jsx` mengelola state dan mengirimkan ke `ChildComponent`

 function Child({ message }) {
   return <p>Pesan dari parent: {message}</p>;
 }
 
 function App() {
   const [msg, setMsg] = useState("Halo Dunia");
 
   return (
     <div>
       <Child message={msg} />
     </div>
   );
 }

Struktur Proyek yang Disarankan

src/
│
├── components/
│   ├── Header.jsx
│   ├── Counter.jsx
│   └── Footer.jsx
│
├── App.jsx
└── main.jsx

Tugas Praktik Mahasiswa

Tujuan:

Membuat halaman sederhana dengan komponen dinamis menggunakan state dan props.

Instruksi:

Buat komponen `Header`, `Counter`, dan `Footer`
`Counter` memiliki 2 tombol: Tambah & Kurangi
`Footer` menampilkan total klik tombol (dikirim dari `App` via props)
Gunakan minimal 2 state dan 1 props
Jalankan dan screenshot hasilnya

Tugas Diskusi (Kelompok)

Topik: "State vs Props – Kapan Kita Gunakan Salah Satunya?"

Buat presentasi mini 5 menit
Sertakan contoh kode
Bandingkan penggunaan state dan props dalam komponen kompleks (misal: form input, shopping cart, dsb.)

Referensi

[React Docs – Components and Props](https://react.dev/learn/passing-props-to-a-component)
[React Docs – State: A Component’s Memory](https://react.dev/learn/state-a-components-memory)
[Vite + React Setup](https://vitejs.dev/guide/)

Pranala Menarik

Web Programming