Halo teman-teman semuanya, pada seri artikel kali ini kita akan bersama-sama mempelajari konsep-konsep dasar React mulai dari pengenalan, instalasi, hingga membangun proyek sederhana.
Semoga dengan seri ini, kita bisa memahami pondasi React dengan lebih kuat dan siap untuk melangkah ke tahap berikutnya.
Apa Itu React?
React adalah sebuah library JavaScript yang digunakan untuk membangun antarmuka pengguna (User Interface). React pertama kali dibuat oleh Facebook (sekarang Meta) dan kini menjadi salah satu library paling populer dalam pengembangan web modern.
Dengan React, kita bisa membuat komponen-komponen UI yang dapat digunakan kembali (reusable), mengelola data dengan mudah, dan membangun aplikasi single-page (SPA) yang cepat dan interaktif.
Jika diibaratkan:
- HTML bertugas membangun struktur halaman,
- CSS bertugas mengatur tampilan,
- maka React hadir untuk mengatur bagaimana tampilan (UI) berubah secara dinamis ketika data berubah.
Kenapa Harus Belajar React?
- Populer & Banyak Digunakan: Hampir semua perusahaan teknologi besar maupun startup menggunakan React.
- Komunitas Besar: Banyak dokumentasi, tutorial, dan dukungan dari komunitas.
- Ekosistem Luas: Didukung oleh banyak library seperti React Router, Redux, Zustand, dan TanStack Query.
- Reusable Component: Membuat kode lebih terstruktur, rapi, dan mudah dipelihara.
Langkah 1 - Installasi Node.js
Sebelum mulai belajar React, ada beberapa hal yang harus kita siapkan, yaitu Node.js. React membutuhkan Node.js untuk menjalankan server pengembangan (development server) dan mengelola dependensi dengan NPM.
Silakan teman-teman download Node.js di situs resmi dan pilih versi LTS (Long Term Support) agar lebih stabil.
https://nodejs.org/en/download
Setelah selesai, pastikan instalasi berhasil dengan perintah berikut di terminal/CMD:
node --version
npm --version
Jika muncul versi Node.js dan NPM, artinya instalasi berhasil.
Langkah 2 - Membuat Proyek React dengan Vite
Pada awalnya, banyak developer menggunakan Create React App (CRA) untuk membuat proyek React. Namun saat ini, banyak yang sudah beralih ke Vite karena lebih cepat, ringan, dan modern.
Silahkan teman-teman masuk ke dalam folder dimana akan menyimpan proyek-nya, kemudian buka terminal, dan jalankan perintah berikut:
npm create vite@latest belajar-react-dasar
Setelah itu:
-
Pilih framework: React
-
Pilih variant: JavaScript.
-
Masuk ke folder proyek:
cd belajar-react-dasar
-
Install dependensi:
npm install
-
Jalankan server:
npm run dev
Jika berhasil, buka browser lalu ketik http://localhost:5173. Maka, proyek React pertama kita sudah berjalan.
Struktur Folder Proyek React (Vite)
Setelah membuat proyek, berikutnya adalah memahami struktur folder dasarnya:
belajar-dasar-react/
│
├── node_modules/ # Folder berisi dependensi
├── public/ # Asset statis (gambar, favicon, dll)
├── src/ # Tempat utama kode React
│ ├── assets/ # File aset tambahan
│ ├── App.jsx # Komponen utama aplikasi
│ ├── main.jsx # Entry point React
│
├── package.json # Informasi & dependensi proyek
├── vite.config.js # Konfigurasi Vite
Kita akan banyak bekerja di dalam folder src/ karena di sanalah komponen React kita dibuat.
Kesimpulan
Pada artikel ini, kita sudah berkenalan dengan React, memahami kenapa penting untuk dipelajari, menyiapkan Node.js dan NPM, serta membuat proyek React pertama menggunakan Vite. Kita juga sudah mengenal struktur folder proyek React secara dasar.
Di artikel berikutnya, kita akan belajar lebih dalam tentang JSX, yang menjadi dasar penulisan kode di React.
Terima kasih