Bagikan melalui

Instal React di Subsistem Windows untuk Linux

Panduan ini menjelaskan cara menyiapkan lingkungan pengembangan React di WSL (Subsistem Windows untuk Linux) menggunakan alat frontend Vite .

WSL disarankan jika Anda berencana untuk menyebarkan ke server Linux, menggunakan kontainer Docker, atau bekerja dengan alat berbasis Bash. Jika Anda baru mengenal React dan hanya ingin memulai dengan cepat, pertimbangkan untuk menginstal React langsung di Windows sebagai gantinya.

Untuk latar belakang tentang React dan skenario yang berbeda — aplikasi web, aplikasi seluler (React Native), dan aplikasi desktop asli (React Native for Desktop) — lihat gambaran umum React.

Prasyarat

  • WSL 2: Instal WSL dengan distribusi Linux (disarankan Ubuntu) dan konfirmasikan berjalan dalam mode WSL 2: wsl -l -v. Memerlukan Windows 10 versi 2004 atau yang lebih baru, atau Windows 11.
  • Node.js di WSL 2: Instal Node.js di dalam distribusi WSL Anda menggunakan nvm. Jangan gunakan versi Node.js yang diinstal Windows di dalam WSL.

Penting

Simpan file proyek Anda di dalam sistem file WSL (misalnya, ~/projects), bukan pada drive Windows yang dipasang (/mnt/c/). Bekerja di seluruh batas sistem file secara signifikan memperlambat waktu penginstalan dan build.

Membuat aplikasi React Anda

  1. Buka terminal WSL Anda (misalnya, Ubuntu).

  2. Buat folder proyek baru dan masukkan:

    mkdir ~/ReactProjects
cd ~/ReactProjects

  3. Buat aplikasi React baru menggunakan Vite:

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

    Vite akan membangun proyek React baru di my-react-app folder.

  4. Navigasikan ke folder aplikasi baru dan instal dependensi:

    cd my-react-app
npm install

  5. Mulai server pengembangan lokal:

    npm run dev

    Aplikasi Anda akan tersedia di http://localhost:5173. Gunakan Ctrl+C untuk menghentikan server.

  6. Saat Anda siap untuk menyebarkan, buat paket produksi.

    npm run build

    Output ditempatkan di dalam folder dist. Lihat Menyebarkan Situs Statis untuk opsi hosting.

Catatan

Vite sangat ideal untuk aplikasi satu halaman (SPAs). Jika Anda memerlukan penyajian sisi server atau backend Node.js, pertimbangkan Next.js sebagai gantinya. Untuk pembuatan situs statis, lihat Gatsby.

Sumber Daya Tambahan:

  • Last updated on