Membuat komponen dan mengelola state

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

Halo, {props.name}!

;

  }

  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 (

        <Greeting name="Budi" />
        <Greeting name="Siti" />

    );
  }

  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 (

Nilai: {count}

        <button onClick={increment}>Tambah</button>

    );
  }

  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 (

        <Greeting name="Budi" />
        <Greeting name="Siti" />
        <Counter />

    );
  }

  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