Cara Install React JS di Windows, MacOS, dan Linux

React JS adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna (User Interface). Berbeda dengan aplikasi desktop biasa yang cukup diunduh dan diinstal (next-next-finish), React JS bekerja di atas lingkungan Node.js.

Artikel ini akan memandu Anda langkah demi langkah untuk menyiapkan lingkungan kerja React JS di Windows, MacOS, dan Linux.

Persiapan Utama: Instalasi Node.js

Sebelum menginstal React, Anda wajib memiliki Node.js dan npm (Node Package Manager) di komputer Anda. React membutuhkan Node.js untuk menjalankan proses development server dan build tools.

1. Untuk Pengguna Windows

Cara termudah di Windows adalah menggunakan installer resmi.

1. Kunjungi situs resmi Node.js.

2. Unduh versi LTS (Long Term Support). Versi ini adalah yang paling stabil dan direkomendasikan untuk kebanyakan pengguna.

3. Buka file .msi yang telah diunduh.

4. Ikuti petunjuk instalasi (klik Next, setujui lisensi, dan pastikan opsi "Add to PATH" terpilih).

5. Setelah selesai, buka Command Prompt (CMD) atau PowerShell dan ketik perintah berikut untuk memverifikasi:

   node -v
   npm -v
   

   Jika muncul nomor versi, instalasi berhasil.

2. Untuk Pengguna MacOS

Ada dua cara umum untuk pengguna Mac: menggunakan Installer atau Homebrew (direkomendasikan untuk developer).

Opsi A: Menggunakan Installer (Mudah)

1. Buka Node.js dan unduh versi LTS untuk macOS (.pkg).

2. Instal seperti aplikasi biasa.

Opsi B: Menggunakan Homebrew (Direkomendasikan) Jika Anda sudah memiliki Homebrew, buka terminal dan ketik:

brew install node

Setelah selesai, cek versi dengan perintah:

node -v
npm -v

3. Untuk Pengguna Linux (Ubuntu/Debian)

Di Linux, disarankan menginstal dari repositori NodeSource agar mendapatkan versi terbaru, karena repositori bawaan distro seringkali ketinggalan zaman.

1. Buka Terminal.

2. Update paket sistem Anda terlebih dahulu (opsional tapi disarankan):

   sudo apt update
   sudo apt install curl
   

3. Unduh skrip setup Node.js (contoh untuk versi 20.x/LTS):

   curl -fsSL [https://deb.nodesource.com/setup_lts.x](https://deb.nodesource.com/setup_lts.x) | sudo -E bash -
   

4. Instal Node.js:

   sudo apt-get install -y nodejs
   

5. Verifikasi instalasi:

   node -v
   npm -v
   

Tahap Instalasi: Membuat Project React

Sebenarnya, kita tidak "menginstal" React secara global seperti aplikasi Word atau Photoshop. Sebaliknya, kita membuat project baru yang di dalamnya sudah terinstal library React.

Saat ini ada dua cara populer: menggunakan Vite (Modern & Cepat) atau Create React App (Klasik/Standard Lama).

Metode 1: Menggunakan Vite (Sangat Direkomendasikan)

Vite (dibaca: "veet") adalah build tool modern yang jauh lebih cepat daripada Create React App. Ini adalah standar industri saat ini.

1. Buka Terminal (Mac/Linux) atau CMD/PowerShell (Windows).

2. Arahkan ke folder di mana Anda ingin menyimpan project (misalnya Desktop):

   cd Desktop
   

3. Jalankan perintah pembuatan project:

   npm create vite@latest nama-project-anda -- --template react
   

   (Ganti nama-project-anda dengan nama folder yang diinginkan).

4. Masuk ke folder project:

   cd nama-project-anda
   

5. Instal dependensi (library pendukung):

   npm install
   

6. Jalankan aplikasi:

   npm run dev
   

Terminal akan menampilkan alamat lokal, biasanya http://localhost:5173. Buka alamat tersebut di browser, dan selamat! Aplikasi React Anda sudah jalan.

Metode 2: Menggunakan Create React App (CRA)

Ini adalah cara lama yang masih banyak ditemukan di tutorial-tutorial lawas.

1. Buka terminal.

2. Jalankan perintah:

   npx create-react-app nama-project-anda
   

   (Proses ini biasanya memakan waktu agak lama karena CRA mengunduh paket yang sangat besar).

3. Masuk ke folder:

   cd nama-project-anda
   

4. Jalankan aplikasi:

   npm start
   

Aplikasi akan berjalan secara otomatis di http://localhost:3000.

Struktur Folder React

Setelah instalasi berhasil, Anda akan melihat beberapa file penting di dalam folder project Anda:

• node_modules/: Folder super besar tempat semua library tersimpan (jangan diedit).

• public/: Berisi file statis seperti gambar atau index.html.

• src/: Ini adalah tempat kerja utama Anda. File komponen React seperti App.js atau App.jsx ada di sini.

• package.json: File konfigurasi yang mencatat library apa saja yang digunakan project Anda.

Kesimpulan

Menginstal React JS sebenarnya adalah proses menyiapkan Node.js dan kemudian membuat kerangka project.

• Jika Anda pemula yang ingin mengikuti standar industri terbaru dan menginginkan performa cepat, gunakan Vite.

• Pastikan Node.js selalu terinstal dengan versi LTS agar stabil.

Selamat berkarya dengan React JS!