Install Node.js & npm, Setup Project React (Create React App & Vite), dan Struktur Folder React

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Install Node.js & npm

Sebelum mulai bermain dengan React, kita butuh Node.js dan npm (Node Package Manager). Tanpa ini, kita tidak bisa menjalankan proyek React. Jangan khawatir, instalasinya gampang kok!

Cara Install Node.js & npm

1. Download Node.js dari situs resminya: nodejs.org.
2. Pilih versi LTS (Long-Term Support) agar lebih stabil.
3. Install seperti biasa (tinggal klik "Next-Next-Finish").
4. Cek apakah sudah terinstal dengan menjalankan perintah berikut di terminal atau command prompt:

   node -v
   npm -v
   

   Jika muncul versi Node.js dan npm, berarti instalasi berhasil!

2. Setup Project React

Setelah Node.js dan npm siap, sekarang saatnya bikin proyek React! Ada dua cara utama untuk memulainya: Create React App (CRA) dan Vite.

a. Menggunakan Create React App (CRA)

Create React App adalah tool resmi dari React untuk memulai proyek dengan cepat.

Cara Membuat Proyek dengan CRA

1. Buka terminal dan jalankan perintah berikut:

   npx create-react-app my-app
   

   Ganti my-app dengan nama proyekmu.
2. Tunggu sampai proses selesai, lalu masuk ke folder proyek:

   cd my-app
   

3. Jalankan React dengan:

   npm start
   

4. Buka browser dan akses http://localhost:3000. Voila! Aplikasi React pertamamu sudah berjalan!

b. Menggunakan Vite (Lebih Cepat dari CRA!)

Vite adalah alternatif modern yang lebih cepat dibandingkan CRA.

Cara Membuat Proyek dengan Vite

1. Jalankan perintah berikut di terminal:

   npm create vite@latest my-app --template react
   

2. Masuk ke folder proyek:

   cd my-app
   

3. Install dependensi:

   npm install
   

4. Jalankan proyek dengan:

   npm run dev
   

5. Buka http://localhost:5173 di browser. Proyek React-mu siap!

3. Struktur Folder React

Setelah proyek berhasil dibuat, kamu akan melihat struktur folder seperti ini:

my-app/
├── node_modules/    # Berisi dependensi yang diinstal
├── public/          # File statis seperti favicon dan index.html
├── src/             # Folder utama untuk kode React
│   ├── App.css      # Styling untuk komponen utama
│   ├── App.js       # Komponen utama React
│   ├── index.js     # Entry point aplikasi
│   ├── components/  # Folder untuk komponen tambahan
├── .gitignore       # File yang diabaikan Git
├── package.json     # Informasi proyek dan dependensi
├── README.md        # Dokumentasi proyek

Penjelasan Folder Penting

• src/ → Tempat kita menulis kode React.
• public/ → Berisi file statis (misalnya gambar, ikon, dan index.html).
• node_modules/ → Semua paket yang diinstal oleh npm ada di sini.
• package.json → Berisi informasi proyek, termasuk daftar dependensi yang dibutuhkan.

Kesimpulan

React bisa di-setup dengan Create React App (CRA) atau Vite. Kalau mau yang cepat dan ringan, Vite lebih direkomendasikan. Struktur folder React juga cukup sederhana dan mudah dipahami. Sekarang kamu sudah siap untuk mulai ngoding dengan React!