Mulai Cepat dengan React: Panduan Lengkap Membuat Aplikasi Pertamamu

Pendahuluan

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

React adalah library JavaScript buatan Meta (Facebook) yang memungkinka memungkinkanmu membangun antarmuka pengguna (UI) dari potongan-potongan kec kecil yang dapat digunakan ulang, disebut komponen. React bukan framewo 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- 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

# Contoh output:
# Local:   http://localhost:5173/

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

Struktur Folder Proyek

aplikasi-pertamaku/
├── src/
│   ├── App.jsx        ← komponen utama
│   ├── main.jsx       ← titik masuk aplikasi
│   └── index.css      ← styling global
├── index.html
└──

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