KamusNgoding
Pemula React 4 menit baca

Mulai Cepat dengan React: Panduan Lengkap Membuat Aplikasi Pertamamu

#react #javascript #frontend #tutorial #pemula

Mulai Cepat dengan React: Panduan Lengkap Membuat Aplikasi Pertamamu

Pendahuluan

Bayangkan kamu sedang membangun sebuah rumah. Alih-alih membangun setiap kamar dari nol setiap kali dibutuhkan, kamu punya cetakan — cetak kamar tidur sekali, pakai di mana saja. Itulah inti dari React.

React adalah library JavaScript buatan Meta (Facebook) yang memungkinkanmu membangun antarmuka pengguna (UI) dari potongan-potongan kecil yang dapat digunakan ulang, disebut komponen. React bukan framework lengkap seperti Angular — ia fokus pada satu hal: menampilkan UI dengan efisien dan interaktif.

Mengapa React sangat populer?

  • Digunakan oleh Facebook, Instagram, Netflix, Airbnb
  • Ekosistem yang besar — ribuan library siap pakai
  • Sekali belajar, bisa juga digunakan untuk mobile (React Native)
  • Virtual DOM membuat update UI lebih cepat

Di artikel ini, kamu akan belajar dari nol sampai bisa membuat aplikasi To-Do List sendiri. Siap? Mari mulai.

Prasyarat dan Pengaturan Proyek React

Sebelum mulai, pastikan kamu sudah memiliki:

  • Node.js versi 18 atau lebih baru (cek dengan node -v)
  • npm atau pnpm sebagai package manager
  • Text editor — VS Code direkomendasikan

Membuat Proyek Baru dengan Vite

Cara paling cepat membuat proyek React adalah dengan Vite — tool build modern yang jauh lebih cepat dari Create React App.

# Membuat project React baru dengan Vite
npm create vite@latest aplikasi-pertamaku -- --template react

# Masuk ke folder project yang baru dibuat
cd aplikasi-pertamaku

# Menginstall semua dependency yang dibutuhkan
npm install

# Menjalankan server development
npm run dev

# Output:
#   ➜  Local:   http://localhost:5173/

Buka browser ke http://localhost:5173 — kamu sudah punya aplikasi React yang berjalan!

Struktur Folder Proyek

aplikasi-pertamaku/
├── src/
│   ├── App.jsx        ← komponen utama (di sinilah kita bekerja)
│   ├── main.jsx       ← titik masuk aplikasi
│   └── index.css      ← styling global
├── index.html
├── vite.config.js
└── package.json

Kita akan bekerja hampir sepenuhnya di dalam folder src/. Buka src/App.jsx dan hapus semua isinya — kita mulai dari nol.

Komponen Pertama: Mengenal JSX

React menggunakan JSX — sintaks yang terlihat seperti HTML tapi sebenarnya adalah JavaScript. Tulis komponen pertamamu di src/App.jsx:

// src/App.jsx
function App() {
  return (
    <div>
      <h1>Aplikasi To-Do List</h1>
      <p>Mari kita bangun sesuatu yang berguna!</p>
    </div>
  );
}

export default App;

Simpan file → browser langsung update otomatis (inilah HMR — Hot Module Replacement dari Vite).

Beberapa aturan JSX yang perlu diingat:

  • Setiap komponen harus mengembalikan satu elemen root (gunakan <div> atau <> sebagai pembungkus)
  • Atribut class HTML ditulis sebagai className di JSX
  • Ekspresi JavaScript di dalam JSX ditulis dengan kurung kurawal {}
function Salam() {
  const nama = "Developer";
  const tanggal = new Date().toLocaleDateString('id-ID');

  return (
    <div className="kartu">
      <h2>Halo, {nama}!</h2>
      <p>Hari ini: {tanggal}</p>
      <p>2 + 2 = {2 + 2}</p>
    </div>
  );
}

State dengan useState: Membuat UI yang Reaktif

State adalah data yang ketika berubah, menyebabkan komponen dirender ulang. Untuk mengelola state, React menyediakan hook useState.

import { useState } from 'react';

function Penghitung() {
  const [jumlah, setJumlah] = useState(0); // nilai awal: 0

  return (
    <div>
      <p>Klik: {jumlah} kali</p>
      <button onClick={() => setJumlah(jumlah + 1)}>
        Tambah
      </button>
      <button onClick={() => setJumlah(0)}>
        Reset
      </button>
    </div>
  );
}

useState(0) mengembalikan dua hal:

  1. jumlah — nilai state saat ini
  2. setJumlah — fungsi untuk mengubah state (dan memicu re-render)

Penting: Jangan pernah mengubah state langsung (jumlah = 5 — salah!). Selalu gunakan fungsi setter (setJumlah(5) — benar).

Membangun Aplikasi To-Do List

Sekarang kita gabungkan semua yang sudah dipelajari untuk membuat aplikasi To-Do List lengkap.

Langkah 1 — State untuk daftar tugas

import { useState } from 'react';

function App() {
  const [tugas, setTugas] = useState([
    { id: 1, teks: 'Belajar React', selesai: false },
    { id: 2, teks: 'Membuat project pertama', selesai: false },
  ]);
  const [inputBaru, setInputBaru] = useState('');

  return (
    <div style={{ maxWidth: '500px', margin: '40px auto', fontFamily: 'sans-serif' }}>
      <h1>To-Do List</h1>
    </div>
  );
}

export default App;

Langkah 2 — Menampilkan daftar tugas

// Tambahkan di dalam return, setelah <h1>
<ul style={{ listStyle: 'none', padding: 0 }}>
  {tugas.map(item => (
    <li
      key={item.id}
      style={{
        padding: '10px',
        marginBottom: '8px',
        background: item.selesai ? '#e8f5e9' : '#fff3e0',
        borderRadius: '6px',
        textDecoration: item.selesai ? 'line-through' : 'none',
      }}
    >
      {item.teks}
    </li>
  ))}
</ul>

Langkah 3 — Menambah tugas baru

function tambahTugas() {
  if (!inputBaru.trim()) return; // abaikan input kosong

  const tugasBaru = {
    id: Date.now(), // id unik berdasarkan timestamp
    teks: inputBaru.trim(),
    selesai: false,
  };

  setTugas([...tugas, tugasBaru]); // tambah ke array (jangan mutasi langsung!)
  setInputBaru(''); // kosongkan input
}

Form input-nya:

// Tambahkan di atas <ul>
<div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
  <input
    type="text"
    value={inputBaru}
    onChange={e => setInputBaru(e.target.value)}
    onKeyDown={e => e.key === 'Enter' && tambahTugas()}
    placeholder="Tulis tugas baru..."
    style={{ flex: 1, padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
  />
  <button onClick={tambahTugas} style={{ padding: '8px 16px' }}>
    Tambah
  </button>
</div>

Langkah 4 — Menandai tugas sebagai selesai & menghapus

function toggleSelesai(id) {
  setTugas(tugas.map(item =>
    item.id === id ? { ...item, selesai: !item.selesai } : item
  ));
}

function hapusTugas(id) {
  setTugas(tugas.filter(item => item.id !== id));
}

Update tampilan item agar bisa diklik:

<li key={item.id} style={{ /* ... styling ... */ }}>
  <span
    onClick={() => toggleSelesai(item.id)}
    style={{ cursor: 'pointer', flex: 1 }}
  >
    {item.selesai ? '✅' : '⬜'} {item.teks}
  </span>
  <button
    onClick={() => hapusTugas(item.id)}
    style={{ marginLeft: '8px', color: 'red', border: 'none', background: 'none', cursor: 'pointer' }}
  >
    Hapus
  </button>
</li>

Kode Lengkap

import { useState } from 'react';

function App() {
  const [tugas, setTugas] = useState([
    { id: 1, teks: 'Belajar React', selesai: false },
    { id: 2, teks: 'Membuat project pertama', selesai: false },
  ]);
  const [inputBaru, setInputBaru] = useState('');

  function tambahTugas() {
    if (!inputBaru.trim()) return;
    setTugas([...tugas, { id: Date.now(), teks: inputBaru.trim(), selesai: false }]);
    setInputBaru('');
  }

  function toggleSelesai(id) {
    setTugas(tugas.map(item =>
      item.id === id ? { ...item, selesai: !item.selesai } : item
    ));
  }

  function hapusTugas(id) {
    setTugas(tugas.filter(item => item.id !== id));
  }

  const jumlahSelesai = tugas.filter(t => t.selesai).length;

  return (
    <div style={{ maxWidth: '500px', margin: '40px auto', fontFamily: 'sans-serif', padding: '0 16px' }}>
      <h1>To-Do List 📝</h1>
      <p style={{ color: '#666' }}>{jumlahSelesai} dari {tugas.length} tugas selesai</p>

      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
        <input
          type="text"
          value={inputBaru}
          onChange={e => setInputBaru(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && tambahTugas()}
          placeholder="Tulis tugas baru..."
          style={{ flex: 1, padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
        />
        <button onClick={tambahTugas} style={{ padding: '8px 16px' }}>
          Tambah
        </button>
      </div>

      <ul style={{ listStyle: 'none', padding: 0 }}>
        {tugas.map(item => (
          <li
            key={item.id}
            style={{
              display: 'flex',
              alignItems: 'center',
              padding: '10px',
              marginBottom: '8px',
              background: item.selesai ? '#e8f5e9' : '#fff3e0',
              borderRadius: '6px',
            }}
          >
            <span
              onClick={() => toggleSelesai(item.id)}
              style={{
                cursor: 'pointer',
                flex: 1,
                textDecoration: item.selesai ? 'line-through' : 'none',
                color: item.selesai ? '#888' : '#333',
              }}
            >
              {item.selesai ? '✅' : '⬜'} {item.teks}
            </span>
            <button
              onClick={() => hapusTugas(item.id)}
              style={{ border: 'none', background: 'none', cursor: 'pointer', color: '#e53935' }}
            >
              🗑️
            </button>
          </li>
        ))}
      </ul>

      {tugas.length === 0 && (
        <p style={{ textAlign: 'center', color: '#aaa' }}>
          Belum ada tugas. Tambahkan yang pertama! 🎉
        </p>
      )}
    </div>
  );
}

export default App;

Jalankan npm run dev dan coba aplikasinya — kamu bisa menambah, mencentang, dan menghapus tugas secara real-time!

Troubleshooting: Error yang Sering Muncul

npm create vite@latest gagal atau hang

Penyebab: Versi Node.js terlalu lama atau koneksi npm registry bermasalah.

Solusi:

# Cek versi Node.js (minimal 18)
node -v

# Jika versi lama, update via nvm
nvm install 20
nvm use 20

# Atau coba dengan registry alternatif
npm create vite@latest my-app -- --template react --registry https://registry.npmjs.org

Port 5173 sudah dipakai, dev server tidak bisa jalan

Penyebab: Aplikasi lain sudah menggunakan port tersebut.

Solusi:

# Jalankan di port lain
npm run dev -- --port 3000

# Atau tambahkan di vite.config.js
export default {
  server: {
    port: 3000,
  },
}

Module not found setelah install dependency

Penyebab: Folder node_modules korup atau belum ter-install sempurna.

Solusi:

# Hapus dan install ulang
rm -rf node_modules package-lock.json
npm install

Pertanyaan yang Sering Diajukan

Apa perbedaan React dan framework seperti Angular atau Vue?

React adalah library yang fokus hanya pada UI layer. Angular adalah framework lengkap dengan opini kuat. Vue berada di tengah-tengah. React memberi kebebasan lebih, tapi kamu perlu memilih sendiri library routing, state management, dll.

Apakah harus pakai Vite? Bagaimana dengan Create React App?

Create React App (CRA) sudah tidak direkomendasikan karena lambat dan jarang di-maintain. Vite jauh lebih cepat untuk development. Pilihan lain: Next.js (untuk SSR/SSG), Remix, atau Astro.

Mengapa React menggunakan Virtual DOM?

Virtual DOM adalah representasi ringan dari DOM asli. React membandingkan Virtual DOM lama dan baru (proses disebut reconciliation), lalu hanya mengupdate bagian DOM yang benar-benar berubah — jauh lebih efisien daripada merender ulang seluruh halaman.

Apakah React bisa digunakan untuk mobile?

Ya! React Native menggunakan konsep yang sama (komponen, state, props) tapi merender ke komponen native iOS dan Android, bukan HTML. Belajar React web adalah fondasi terbaik sebelum ke React Native.

Kesimpulan

Selamat — kamu baru saja membangun aplikasi React pertamamu! Dalam satu artikel ini kamu sudah memahami JSX, komponen, state dengan useState, event handling, dan rendering list. Semua konsep ini adalah fondasi dari hampir semua aplikasi React yang ada di dunia nyata.

React membuka pintu menuju pengembangan web modern — dan perjalananmu baru saja dimulai. Lanjutkan ke artikel berikutnya untuk menguasai komponen dan props agar UI-mu makin modular dan reusable!

Langkah selanjutnya: Komponen dan Props di React — cara membangun UI yang reusable dengan komponen dan props.

Artikel Terkait

go Tutorial Go (Golang) untuk Pemula: Dari Instalasi hingga 'Hello, World!' nextjs Apa itu Next.js? Penjelasan Lengkap untuk Pemula react Membangun Blog Sederhana dengan React dan Markdown: Tutorial Step-by-Step