Unknown user: /* Pranala Menarik */

2025-04-08T03:51:07Z

Pranala Menarik

← Older revision		Revision as of 03:51, 8 April 2025
Line 165:		Line 165:
	==Pranala Menarik==		==Pranala Menarik==

	* [[Web ~~Programmming~~]]		* [[Web Programming]]

Unknown user at 03:50, 8 April 2025

2025-04-08T03:50:50Z

Show changes

Unknown user: Created page with "Berikut adalah modul praktik yang dirancang untuk membantu Anda memahami cara membuat komponen dan mengelola state dalam React.js sebagai bagian dari mata kuliah Pemrograman W..."

2025-04-06T02:22:52Z

Created page with "Berikut adalah modul praktik yang dirancang untuk membantu Anda memahami cara membuat komponen dan mengelola state dalam React.js sebagai bagian dari mata kuliah Pemrograman W..."

New page

Berikut adalah modul praktik yang dirancang untuk membantu Anda memahami cara membuat komponen dan mengelola state dalam React.js sebagai bagian dari mata kuliah Pemrograman Web. Modul ini menggunakan Ubuntu 24.04 sebagai lingkungan pengembangan dan disusun tanpa menggunakan alat dari Microsoft.

**Tujuan Pembelajaran:**

1. Memahami konsep komponen dalam React.js dan cara pembuatannya.
2. Mampu mengelola state dalam komponen React.js.
3. Mampu membuat aplikasi React.js sederhana yang memanfaatkan komponen dan state.

**Prasyarat:**

- Pemahaman dasar tentang HTML, CSS, dan JavaScript.
- Akses ke sistem yang menjalankan Ubuntu 24.04.
- Koneksi internet untuk menginstal paket yang diperlukan.

**Langkah 1: Instalasi Node.js dan npm**

React.js memerlukan Node.js dan npm (Node Package Manager) untuk pengelolaan paket dan dependensi.

1. **Perbarui daftar paket:**

```bash
sudo apt update
```



2. **Instal Node.js dan npm:**

```bash
sudo apt install nodejs npm
```



3. **Verifikasi instalasi:**

```bash
node -v
npm -v
```



Perintah di atas akan menampilkan versi Node.js dan npm yang telah diinstal.

**Langkah 2: Membuat Proyek React Baru**

Setelah Node.js dan npm terinstal, Anda dapat membuat proyek React baru menggunakan Vite, alat build yang cepat dan modern untuk proyek JavaScript.

1. **Buat proyek baru dengan Vite:**

```bash
npm create vite@latest my-react-app
```



Ikuti prompt yang muncul:

- Pilih nama proyek (misalnya, `my-react-app`).
- Pilih framework: **React**.
- Pilih varian: **JavaScript** atau **TypeScript** sesuai kebutuhan.

2. **Masuk ke direktori proyek dan instal dependensi:**

```bash
cd my-react-app
npm install
```



3. **Jalankan server pengembangan:**

```bash
npm run dev
```



Aplikasi React.js Anda sekarang berjalan dan dapat diakses melalui alamat yang ditampilkan, biasanya `http://localhost:5173`.

**Langkah 3: Membuat Komponen dalam React.js**

Komponen adalah blok bangunan utama dalam React.js yang memungkinkan Anda membagi UI menjadi bagian-bagian yang dapat digunakan kembali.

1. **Membuat Komponen Fungsional Sederhana:**

Buat file baru bernama `Greeting.js` dalam folder `src` dengan isi berikut:

```jsx
import React from 'react';

function Greeting(props) {
return <h1>Halo, {props.name}!</h1>;
}

export default Greeting;
```



Komponen `Greeting` menerima properti `name` dan menampilkan pesan sapaan.

2. **Menggunakan Komponen dalam `App.js`:**

Buka file `App.js` dan modifikasi menjadi:

```jsx
import React from 'react';
import Greeting from './Greeting';

function App() {
return (
<div>
<Greeting name="Budi" />
<Greeting name="Siti" />
</div>
);
}

export default App;
```



Dalam `App.js`, komponen `Greeting` digunakan dua kali dengan properti `name` yang berbeda, menunjukkan bagaimana komponen dapat digunakan kembali dengan parameter yang berbeda.

**Langkah 4: Mengelola State dalam Komponen React.js**

State adalah objek dalam React.js yang digunakan untuk menyimpan data atau informasi tentang komponen yang dapat berubah seiring waktu.

1. **Menggunakan Hook `useState`:**

React menyediakan hook `useState` untuk mengelola state dalam komponen fungsional.

Buat file baru bernama `Counter.js` dalam folder `src` dengan isi berikut:

```jsx
import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

const increment = () => {
setCount(count + 1);
};

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

export default Counter;
```



Komponen `Counter` memiliki state `count` yang diinisialisasi dengan nilai 0. Fungsi `increment` digunakan untuk menambah nilai `count` ketika tombol ditekan.

2. **Menggunakan Komponen `Counter` dalam `App.js`:**

Buka file `App.js` dan tambahkan komponen `Counter`:

```jsx
import React from 'react';
import Greeting from './Greeting';
import Counter from './Counter';

function App() {
return (
<div>
<Greeting name="Budi" />
<Greeting name="Siti" />
<Counter />
</div>
);
}

export default App;
```



Sekarang, aplikasi Anda memiliki komponen `Greeting` dan `Counter` yang menunjukkan penggunaan komponen dan state dalam React.js.

**Catatan Tambahan:**

- **Mengelola State yang Lebih Kompleks:** Untuk state yang lebih kompleks atau untuk berbagi state antar komponen, Anda dapat mempertimbangkan penggunaan Context API atau pustaka manajemen state seperti Redux.

- **Penggunaan Props:** Props digunakan untuk mengirim data dari komponen induk ke komponen anak, sedangkan state digunakan untuk data yang dikelola dalam komponen

Membuat komponen dan mengelola state - Revision history

Unknown user: /* Pranala Menarik */

Unknown user at 03:50, 8 April 2025

Unknown user: Created page with "Berikut adalah modul praktik yang dirancang untuk membantu Anda memahami cara membuat komponen dan mengelola state dalam React.js sebagai bagian dari mata kuliah Pemrograman W..."