Admin: ←Membuat halaman berisi '==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. Verifika...'

2025-05-10T14:43:32Z

←Membuat halaman berisi '==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. Verifika...'

Halaman baru

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

Membuat komponen dan mengelola state - Riwayat revisi