Lihat sumber 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:'''

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

Kemudian digunakan di `App.jsx`:

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

==2. Mengelola State==

'''Apa Itu State?'''

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

'''Contoh: Counter dengan `useState`'''

<pre>
 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;
</pre>

==3. Mengoper Data dengan Props==

'''Apa Itu Props?'''

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

'''Contoh Props:'''

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

==4. Interaksi antar Komponen==

'''Parent dan Child Component'''

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

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

'''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]]