Tutorial React JS 2: Props, Komponen & State

Review Singkat Bagian 1

Di bagian pertama, kamu sudah:

Install React dan Node.js
Buat project React pertama
Kenalan sama komponen App
Nulis kode React dasar pakai JSX

Nah sekarang, kita naik level dikit

Props: Ngirim Data ke Komponen

Props itu singkatan dari properties, cara React buat kirim data antar komponen.

Contoh Sederhana

Kita akan bikin komponen baru bernama Halo.js:

src/Halo.js:

import React from 'react';

function Halo(props) {
  return <h2>Halo, {props.nama}!</h2>;
}

export default Halo;

props.nama berarti kita sedang menerima data bernama nama dari luar komponen.

Gunakan di App.js

import React from 'react';
import Halo from './Halo';

function App() {
  return (
    <div>
      <Halo nama="Sam" />
      <Halo nama="Ndruru" />
      <Halo nama="React Lover" />
    </div>
  );
}

export default App;

Membuat Komponen Lain Selain App

Di React, kamu bebas bikin banyak komponen untuk modularisasi UI.

Buat Komponen Profil.js

import React from 'react';

function Profil(props) {
  return (
    <div>
      <h3>Nama: {props.nama}</h3>
      <p>Umur: {props.umur}</p>
    </div>
  );
}

export default Profil;

Lalu panggil di App.js:

import Profil from './Profil';

<Profil nama="Sam" umur={25} />

Kamu bisa kirim string, number, bahkan objek sebagai props.

State: Data yang Bisa Berubah

Kalau props bersifat statis (dikirim dari luar), state itu dinamis (bisa berubah).

Kita pakai hook useState untuk bikin state.

Contoh: Counter

import React, { useState } from 'react';

function Counter() {
  const [jumlah, setJumlah] = useState(0);

  const tambah = () => {
    setJumlah(jumlah + 1);
  };

  return (
    <div>
      <h2>Jumlah: {jumlah}</h2>
      <button onClick={tambah}>Tambah</button>
    </div>
  );
}

export default Counter;

Gunakan di App.js:

import Counter from './Counter';

<Counter />

useState(0) artinya nilai awalnya 0. setJumlah akan mengubahnya saat tombol diklik.

Event Handling: Menangani Aksi

Contoh lainnya, input form dengan event onChange:

InputNama.js

import React, { useState } from 'react';

function InputNama() {
  const [nama, setNama] = useState('');

  const handleInput = (event) => {
    setNama(event.target.value);
  };

  return (
    <div>
      <input type="text" placeholder="Ketik nama..." onChange={handleInput} />
      <p>Halo, {nama}</p>
    </div>
  );
}

export default InputNama;

Looping: Menampilkan Daftar

React bisa tampilkan array pakai .map().

DaftarNama.js

import React from 'react';

function DaftarNama() {
  const namaList = ['Sam', 'Ndruru', 'React', 'Pemula'];

  return (
    <ul>
      {namaList.map((nama, index) => (
        <li key={index}>{nama}</li>
      ))}
    </ul>
  );
}

export default DaftarNama;

Penting: selalu pakai key saat looping untuk identifikasi unik.

Gabungkan Semua di App.js

App.js:

import React from 'react';
import Halo from './Halo';
import Profil from './Profil';
import Counter from './Counter';
import InputNama from './InputNama';
import DaftarNama from './DaftarNama';

function App() {
  return (
    <div>
      <Halo nama="Sam" />
      <Profil nama="Sam" umur={25} />
      <Counter />
      <InputNama />
      <DaftarNama />
    </div>
  );
}

export default App;

Kesimpulan Bagian 2

✅ Props: kirim data antar komponen

✅ Komponen baru: Halo, Profil, dll

✅ State: data dinamis

✅ Event handling: input & klik

✅ Looping: .map() untuk daftar

Lanjut ke Bagian 3?

Di Bagian 3, kita akan bahas: