Tutorial React Dasar Part 1: Cara Mudah Memulai Belajar React Menggunakan Vite

Assalamualaikum Wr. Wb.

Tutorial React Dasar Part 1: Cara Mudah Memulai Belajar React Menggunakan Vite | Setup Cepat, Struktur File & Komponen Pertama | Setelah di seri-seri sebelumnya kita sudah menguasai HTML, CSS modern, dan dasar JavaScript, langkah besar berikutnya untuk menjadi web developer profesional adalah mempelajari library frontend terpopuler di dunia, yaitu React. Dulu, memulai belajar React terasa sangat berat dan lambat karena kita harus menggunakan Create React App (CRA) yang memakan waktu instalasi hingga beberapa menit. Di era modern saat ini, standar industri telah beralih menggunakan Vite—build tool yang super ringan, instan dalam hitungan milidetik, dan langsung siap pakai. Kali ini admin akan membagikan panduan step-by-step membangun aplikasi React pertama Anda yang dijamin work 100%.

1. Mengapa Memilih Vite untuk Memulai React?

Vite menggantikan cara lama dengan berbagai keunggulan performa:

• Instalasi Kilat: Proses pembuatan template projek hanya butuh waktu kurang dari 5 detik.
• Hot Module Replacement (HMR) Instan: Setiap kali kita mengedit baris kode di editor, tampilan di browser akan terupdate seketika tanpa perlu me-refresh seluruh halaman.
• Ukuran Bundle Bersih: Tidak menumpuk konfigurasi dependensi lawas yang memberatkan kinerja komputer.

Langkah inisialisasi projek via Vite CLI di terminal dan preview server lokal di port 5173

2. Langkah Instalasi Projek React via Terminal

Pastikan komputer anda sudah terpasang Node.js, lalu buka terminal dan ikuti langkah berikut:

# 1. Buat folder projek baru berbasis Vite:
npm create vite@latest belajar-react -- --template react

# 2. Masuk ke folder projek yang baru dibuat:
cd belajar-react

# 3. Pasang semua paket dependensi yang dibutuhkan:
npm install

# 4. Jalankan local development server:
npm run dev

Buka browser favorit anda dan kunjungi alamat http://localhost:5173/ untuk melihat halaman awal React yang sedang berjalan.

3. Mengenal JSX & Menulis Komponen Pertama

React menggunakan format penulisan bernama JSX (JavaScript XML) yang memungkinkan kita menulis tag mirip HTML langsung di dalam file JavaScript. Buka file src/App.jsx menggunakan text editor (VS Code), lalu ubah isinya dengan komponen sederhana berikut:

// File: src/App.jsx
import { useState } from 'react';

function App() {
  // Membuat state untuk menyimpan angka counter
  const [angka, setAngka] = useState(0);

  return (
    <div style={{ textAlign: 'center', padding: '40px', fontFamily: 'Arial, sans-serif' }}>
      <h1 style={{ color: '#0284c7' }}>Halo, Selamat Datang di React!</h1>
      <p>Komponen ini dibuat menggunakan sintaks JSX yang dinamis.</p>

      <div style={{ margin: '20px 0' }}>
        <h2>Jumlah Klik: {angka}</h2>
        <button 
          onClick={() => setAngka(angka + 1)}
          style={{ padding: '10px 20px', backgroundColor: '#10b981', color: '#fff', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 'bold' }}
        >
          Tambah Angka (+)
        </button>
      </div>
    </div>
  );
}

export default App;

4. Aturan Penting Saat Menulis Kode JSX

• Wajib Menggunakan Satu Tag Pembungkus: Komponen React hanya boleh mengembalikan satu elemen induk (gunakan tag pembungkus <div> atau React Fragment <>...</>).
• Gunakan className, Bukan class: Karena kata class adalah kata kunci cadangan di JavaScript, ganti atribut HTML class menjadi className="...".
• Menyematkan Variabel dengan Kurung Kurawal: Nilai variabel atau fungsi matematika dapat langsung dipanggil di dalam JSX menggunakan tanda kurung kurawal tunggal {nama_variabel}.

Itulah langkah awal memulai belajar React menggunakan Vite. Saya sendiri selalu menyarankan pemula untuk mengawali dengan Vite karena proses pembelajarannya jauh lebih cepat dan menyenangkan tanpa terganggu oleh loading build yang lambat.

Sekian tutorial kali ini, silahkan share artikel ini jika anda rasa bermanfaat untuk teman atau sahabat yang baru ingin mulai belajar framework web modern.

Semoga Bermanfaat ^_^

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik React Vite