Cara Memasang React.js di VPS Windows

React.js adalah pustaka JavaScript yang kuat yang dikembangkan oleh Facebook untuk membangun antarmuka pengguna, terutama untuk aplikasi satu halaman. React.js memungkinkan pengembang untuk membuat aplikasi web besar yang dapat mengubah data, tanpa memuat ulang halaman. Jika Anda ingin mulai bekerja dengan React.js di mesin Windows Anda, panduan ini akan membantu Anda menyiapkannya dalam waktu singkat.

Prasyarat

Sebelum Anda menginstal React.js, pastikan Anda telah menginstal hal-hal berikut ini pada sistem Windows Anda:

• Node.js: React bergantung pada Node.js, yang menyediakan lingkungan runtime untuk mengeksekusi JavaScript di server dan menyertakan npm (Node Package Manager) untuk mengelola dependensi.
• Editor Teks: Anda akan membutuhkan editor teks seperti Visual Studio Code (VS Code), Sublime Text, atau IDE apa pun yang Anda sukai.

Mari kita mulai!

Langkah 1: Instal Node.js

1.1 Unduh Node.js

Untuk menginstal Node.js, ikuti langkah-langkah berikut:

1. Kunjungi situs web resmi Node.js: https://nodejs.org.
2. Unduh versi LTS (Long Term Support) terbaru dari Node.js untuk Windows.
3. Setelah pengunduhan selesai, jalankan penginstal.

1.2 Instal Node.js

Ikuti instruksi dalam penginstal Node.js:

1. Pilih Berikutnya pada layar selamat datang.
2. Terima perjanjian lisensi dan klik Berikutnya.
3. Pilih folder tujuan dan klik Berikutnya.
4. Pastikan “Node.js runtime,” “npm package manager,” dan alat lainnya dicentang, lalu klik Berikutnya.
5. Selesaikan penginstalan.

1.3 Verifikasi Instalasi Node.js dan npm

Setelah Node.js terinstal, Anda dapat memverifikasinya dengan membuka terminal (Command Prompt atau PowerShell) dan menjalankan perintah-perintah berikut:

Perintah ini akan menampilkan versi Node.js yang terinstal.

Perintah ini akan menampilkan versi npm (Node Package Manager) yang terinstal bersama dengan Node.js.

Jika kedua perintah tersebut menghasilkan nomor versi, Node.js dan npm telah berhasil diinstal.

Langkah 2: Menginstalasi Create React App Tool

Aplikasi React dibangun menggunakan Create React App tool, yang merupakan cara yang didukung secara resmi untuk membuat aplikasi React satu halaman dengan struktur standar dan konfigurasi build.

Untuk menginstalnya, ikuti langkah-langkah berikut ini:

2.1 Buka Command Prompt atau PowerShell

Buka jendela terminal baru (Command Prompt atau PowerShell).

2.2 Menginstalasi Aplikasi Buat Aplikasi React Secara Global

Untuk menginstal Create React App secara global pada sistem Anda, jalankan perintah npm berikut ini:

Ini akan menginstal paket create-react-app secara global sehingga Anda dapat membuat proyek React baru dari mana saja di sistem berkas Anda.

Langkah 3: Membuat Aplikasi React Baru

Setelah Create React App terinstal, Anda dapat membuat sebuah proyek React.js baru dengan mengikuti langkah-langkah berikut:

3.1 Arahkan ke Direktori Proyek Anda

Gunakan perintah cd untuk menavigasi ke folder di mana Anda ingin membuat aplikasi React yang baru. Sebagai contoh:

3.2 Membuat Proyek React Baru

Pada terminal, jalankan perintah berikut untuk membuat proyek React baru:

Ganti my-react-app dengan nama proyek Anda. Perintah ini akan membuat direktori baru dengan nama proyek Anda dan menginstal semua berkas dan dependensi yang diperlukan untuk aplikasi React.

3.3 Menavigasi ke Proyek React Anda

Setelah proyek selesai dibuat, arahkan ke direktori proyek Anda:

3.4 Memulai Server Pengembangan

Sekarang setelah proyek React Anda siap, Anda dapat memulai server pengembangan. Ini akan membuka aplikasi Anda di browser dan mengaktifkan pemuatan ulang panas, sehingga aplikasi Anda secara otomatis di-refresh setiap kali Anda membuat perubahan pada kode Anda.

Untuk memulai server pengembangan, jalankan:

Setelah beberapa saat, Anda akan melihat keluaran di terminal yang menunjukkan bahwa server pengembangan sedang berjalan, dan peramban Anda akan secara otomatis terbuka ke http://localhost:3000, menampilkan halaman default aplikasi React.

Jika tidak terbuka secara otomatis, Anda dapat membuka browser secara manual dan membuka http://localhost:3000.

Langkah 4: Buka Proyek Anda di Editor Teks

Pada titik ini, proyek React Anda sudah berjalan, dan Anda dapat mulai melakukan coding!

4.1 Instal Editor Teks (jika belum terinstal)

Anda akan membutuhkan sebuah editor teks untuk menulis kode Anda. Beberapa pilihan yang populer antara lain:

• Visual Studio Code (VS Code): Ringan, kuat, dan banyak digunakan untuk pengembangan React. VS Code memiliki dukungan yang bagus untuk JavaScript dan React.js.
• Sublime Text: Cepat dan sederhana, dengan dukungan untuk banyak bahasa pemrograman.
• Atom: Editor teks yang dapat disesuaikan dan diretas.

4.2 Membuka Proyek Anda di Editor

Setelah Anda menginstal editor teks, buka folder proyek React Anda (my-react-app) di dalam editor.

Pada Visual Studio Code, misalnya, Anda dapat membuka folder dengan memilih File > Open Folder dan menavigasi ke direktori proyek React Anda.

Anda sekarang dapat mulai memodifikasi file-file pada folder src untuk mulai membangun aplikasi React Anda.

Langkah 5: Membangun Aplikasi React Anda untuk Produksi

Ketika Anda siap untuk men-deploy aplikasi React Anda, Anda harus membuat build produksi. Hal ini akan meminimalisir ukuran file dan mengoptimalkan performa aplikasi.

Untuk membuat versi produksi, jalankan perintah berikut ini:

Perintah ini akan membuat versi aplikasi Anda yang dioptimalkan dalam folder

, yang dapat Anda terapkan ke server web.

Langkah 6: Pemecahan Masalah dan Masalah Umum

6.1 Perintah Tidak Dikenali

Jika Anda menemukan kesalahan “perintah tidak dikenali” untuk npm, itu mungkin karena Node.js tidak ditambahkan ke PATH sistem selama instalasi. Untuk memperbaikinya, ikuti langkah-langkah berikut:

1. Buka System Properties dengan menekan tombol Windows R, ketik sysdm.cpl, dan tekan Enter.
2. Klik Environment Variables pada tab Advanced.
3. Cari variabel Path di bawah Variabel Sistem dan klik Edit.
4. Tambahkan jalur ke instalasi Node.js (biasanya C:\Program Files\nodejs\) dan klik OK.

6.2 Masalah dengan Membuat Aplikasi React

Jika Anda mengalami masalah dengan create-react-app, coba hapus cache npm Anda dan instal ulang:

Kesimpulan

Selamat! Anda telah berhasil menginstal React.js pada mesin Windows Anda. Anda sekarang siap untuk mulai membangun aplikasi React Anda menggunakan JavaScript dan ekosistem yang kaya akan pustaka dan alat yang disediakan React. Baik Anda membuat aplikasi web atau aplikasi mobile, React menawarkan fleksibilitas dan kekuatan untuk membuat antarmuka pengguna yang dinamis.