Cara Instal React di Hosting Melalui Windows

Dibuat pada 22 Agustus 2022

React (juga dikenal sebagai React.js atau ReactJS) adalah library JavaScript yang biasa digunakan saat membangun UI suatu website atau aplikasi web. Sesuai dengan namanya, React merupakan perpustakaan berisi berbagai kode JavaScript yang sudah tertulis (pre-written). Library ini bersifat open source. Artinya, Anda dapat mengambil kode yang ingin digunakan dan turut dapat berpartisipasi dalam memodifikasi kode di dalamnya.

Sebelum menginstal dan membuat project React, Anda harus melakukan instalasi Node.js dan NPM (Node Package Manager). Node.js adalah runtime environment untuk JavaScript yang bersifat open-source dan cross-platform. Dengan Node.js kode JavaScript dapat dijalankan di mana pun, tidak hanya terbatas pada lingkungan browser.

Sementara, NPM (Node Package Manager) adalah pengelola package JavaScript bawaan Node.js. Package manager merupakan tools yang fungsinya untuk mengelola package secara otomatis.

Panduan ini akan terbagi menjadi empat tahap, yaitu:

Instal Node.js di Windows (Lokal).
Verifikasi Instalasi Node.js (Lokal).
Instal React di Windows (Lokal).
Unggal File Build ke Hosting.

Tahap 1 Instal Node.js di Windows (Lokal)

1. Akses halaman unduh Node.js melalui tautan https://nodejs.org/en/download, klik tab LTS Recommended For Most Users untuk mengunduh versi Node.js yang direkomendasikan. Pada panduan ini, versi yang direkomendasikan adalah 16.17.0 LTS yang termasuk dengan NPM versi 8.5.5.

Catatan: Di halaman tersebut ada versi lain yang tersedia (versi yang lebih baru dan lama). Jika Anda memiliki sistem yang lebih lama, silakan memilih Node.js versi 32-bit. Anda juga dapat beralih dari versi LTS ke versi terbaru. Namun, jika Anda baru mengenal Node.js atau tidak memerlukan versi tertentu, silakan pilih LTS.

2. Setelah selesai mengunduh, buka folder yang berisi file Node.js. Selanjutnya, klik 2x pada file tersebut.

3. Klik tombol Next pada Node.js Setup Wizard.

4.Silakan tinjau perjanjian lisensi, klik Next jika Anda menyetujui persyaratan.

5. Anda akan diminta mengkonfirmasi lokasi pemasangan, lokasi default C:\Program Files\nodejs\ dipilih dalam panduan ini. Kemudian, klik tombol Next.

6. Anda dapat memilih komponen untuk disertakan atau dihapus dari instalasi. Klik tombol Next jika Anda tidak memiliki kebutuhan khusus.

7. Klik Next untuk melanjutkan instalasi Node.js.

8. Klik tombol Install untuk memulai instalasi Node.js.

9. Klik Finish untuk menyelesaikan proses instalasi.

Tahap 2 Verifikasi Instalasi Node.js dan NPM (Lokal)

Buka Command Prompt atau Windows PowerShell, masukkan perintah berikut untuk menampilkan versi Node.js yang telah diinstal pada sistem Anda:

node -v

Anda dapat melakukan hal yang sama untuk menampilkan versi NPM:

npm -v

Tahap 3 Instal React di Windows (Lokal)

1. Buat folder baru untuk lokasi instalasi React. Contohnya di C:\React.

2. Buka Command Prompt atau Windows PowerShell. Masuk ke folder instalasi React yang baru Anda buat. Ketik perintah:

cd\

cd C:\React (Anda bisa mengganti “React” dengan nama folder yang Anda buat)

3. Ketik perintah di bawah untuk menginstal dan membuat project React:

npx create-react-app my-app (Anda dapat mengganti “my-app” dengan nama project yang lain.)

4. Untuk memeriksa kesuksesan proses instalasi dan pembuatan project, ketik perintah berikut secara berturut-turut:

cd my-app

dir

5. Buka folder yang telah dibuat sebelumnya. Pada panduan ini, folder yang dibuka adalah C:\React\my-app. Selanjutnya, buka file package.json melalui notepad atau code editor yang tersedia.

6. Pada bagian bawah “private”: true, tambahkan code berikut:

“homepage”: “https://namadomain.com”,

Nama domain disesuaikan dengan website Anda. Selanjutnya, simpan file package.json.

7. Silakan kembali lagi ke Command Prompt atau PowerShell Anda. Ketik perintah berikut:

npm run build

8. Selanjutnya, buka kembali folder C:\React\my-app. Ekstrak folder build dengan cara klik kanan, pilih menu Send to dan klik Compressed (zipped) folder.

9. Selamat! Anda telah berhasil mengkompres folder build.

Tahap 4 Unggah File Build ke Hosting

1. Akses halaman website Niagahoster. Klik tombol Login yang ada di sebelah kanan atas.

2. Masukkan Email dan Password Anda, kemudian klik tombol MASUK SEKARANG JUGA. Jika menggunakan social login, silakan pilih salah satu opsi antara Facebook atau Google.

3. Anda akan diarahkan ke Beranda Member Area Niagahoster, gulir ke bagian Layanan Anda. Pilih tab Hosting, kemudian klik tombol Kelola Hosting.

4. Pilih tab cPanel, lalu klik menu File Manager.

5. Buka folder public_html sesuai dengan domain atau subdomain yang akan digunakan.

6. Klik tombol Upload untuk mengunggah file build.zip yang telah dibuat sebelumnya.

7. Anda akan diarahkan ke laman pilih file. Klik tombol Select File dan cari file build.zip.

8. Jika sudah proses unggah telah selesai, akan muncul bar proses yang sudah berjalan 100% dan pesan complete. Kemudian, klik Go Back to untuk kembali ke folder sebelumnya.