Bagikan melalui

Instal React di Subsistem Windows untuk Linux

Panduan ini akan membahas penginstalan React pada distribusi Linux (yaitu, Ubuntu) yang berjalan di atas Subsistem Windows untuk Linux (WSL) menggunakan tooling frontend vite.

Sebaiknya ikuti instruksi ini jika Anda membuat aplikasi satu halaman (SPA) yang ingin Anda gunakan perintah atau alat Bash dengan dan/atau berencana untuk menyebarkan ke server Linux atau menggunakan kontainer Docker. Jika Anda baru menggunakan React dan hanya tertarik untuk belajar, Anda mungkin ingin mempertimbangkan untuk menginstal dengan vite langsung di Windows.

Untuk informasi umum selengkapnya tentang React, memutuskan antara React (aplikasi web), React Native (aplikasi seluler), dan React Native untuk Desktop (aplikasi desktop), lihat Gambaran umum React.

Prasyarat

  • Instal versi terbaru Windows 10 (Versi 1903+, Build 18362+) atau Windows 11
  • Instal Subsistem Windows untuk Linux (WSL), termasuk distribusi Linux (seperti Ubuntu) dan pastikan itu berjalan dalam mode WSL 2. Anda dapat memeriksanya dengan membuka PowerShell dan memasukkan: wsl -l -v
  • Instal Node.js di WSL 2: Instruksi ini menggunakan Node Version Manager (nvm) untuk penginstalan, Anda akan memerlukan versi terbaru NodeJS untuk menjalankan vite, serta versi terbaru Dari Node Package Manager (npm).

Penting

Menginstal distribusi Linux dengan WSL akan membuat direktori untuk menyimpan file: \\wsl\Ubuntu-20.04 (mengganti Ubuntu-20.04 dengan distribusi Linux apa pun yang Anda gunakan). Untuk membuka direktori ini di Windows File Explorer, buka baris perintah WSL Anda, pilih direktori beranda Anda menggunakan cd ~, lalu masukkan perintah explorer.exe . Hati-hati untuk tidak menginstal NodeJS atau menyimpan file yang akan Anda kerjakan pada drive C yang dipasang (/mnt/c/Users/yourname$). Melakukannya akan memperlambat waktu penginstalan dan build Anda secara signifikan.

Menginstal React

Untuk menginstal toolchain React lengkap di WSL, sebaiknya gunakan vite.

  1. Buka baris perintah WSL (yaitu. Ubuntu).

  2. Buat folder proyek baru: mkdir ReactProjects dan masukkan direktori tersebut: cd ReactProjects.

  3. Instal React menggunakan vite :

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

  4. Setelah diinstal, ubah direktori ke aplikasi baru Anda ("my-react-app" atau apa pun yang Anda pilih untuk memanggilnya): cd my-react-app, instal dependensi: npm install lalu mulai server pengembangan lokal Anda: npm run dev

    Perintah ini akan memulai server Node.js dan meluncurkan jendela browser baru yang menampilkan aplikasi Anda. Anda dapat menggunakan Ctrl + c untuk berhenti menjalankan aplikasi React di baris perintah Anda.

Catatan

Vite menyertakan alur build frontend menggunakan Babel, esbuild , dan Rollup, tetapi tidak menangani logika backend atau database. Jika Anda ingin membangun situs web yang dirender server dengan React yang menggunakan backend Node.js, sebaiknya instal Next.js, daripada penginstalan Vite ini, yang lebih ditujukan untuk aplikasi satu halaman (SPAs). Anda mungkin juga ingin mempertimbangkan untuk menginstal Gatsby jika Anda ingin membangun situs web berorientasi konten statis.

  1. Saat Anda siap untuk menyebarkan aplikasi web ke produksi, gunakan npm run build untuk membuat build aplikasi Anda di folder "dist". Anda dapat mempelajari lebih lanjut dalam Menyebarkan Situs Statis.

Sumber Daya Tambahan:

  • Last updated on