Membuat komponen dan mengelola state

From OnnoWiki
Jump to navigation Jump to search

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


Pranala Menarik

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Membuat_komponen_dan_mengelola_state&oldid=72470"