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:

  1. Instal Node.js di Windows (Lokal).
  2. Verifikasi Instalasi Node.js (Lokal).
  3. Instal React di Windows (Lokal).
  4. 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.

9. Klik kanan pada file build.zip, selanjutnya klik Extract.

10. Klik tombol Extract Files untuk melanjutkan proses.

11. Berikut adalah hasil extract file. Klik Close untuk menutup jendela ini.

12. Ekstraksi folder sudah selesai, ditandai dengan adanya folder build. Selanjutnya, hapus file build.zip, klik kanan lalu pilih Delete

13. Masuk ke website Anda untuk memeriksa keberhasilan upload folder build. Tampilan logo React menandakan proses unggah file telah berhasil.

Selamat! Anda telah berhasil menggunakan React di hosting Niagahoster.

Apakah artikel ini membantu?

Bagikan jika Anda menyukai halaman ini.

Artikel Serupa


related posts

Cara Klaim Domain Gratis (Unlimited Hosting Campaign)

Dibuat pada 3 November 2022 Kabar gembira bagi semua pengguna yang baru melakukan pembelian Unlimited Hosting (Paket Personal dan Bisnis) dengan durasi minimal satu tahun. Selama periode 7-24 November 2022, pengguna tersebut akan mendapatkan kode kupon gratis untuk domain .website, .online, .space, .store, .site, .tech, dan .xyz.  Setelah paket Unlimited Hosting aktif, Anda akan mendapatkan […]

Selengkapnya
related posts

Cara Melakukan Remote Import WordPress dari Softaculous

Remote Import adalah fitur dari Softaculous yang memungkinkan Anda untuk mengambil file instalasi server lain ke Softaculous yang berada pada server Anda secara local. Hal yang Perlu Anda Perhatikan: Sebelum memulai, Anda perlu memiliki: Panduan Remote Import pada Softaculous 1. Login ke akun cPanel pada server Anda, kemudian pilih menu Softaculous Apps Installer > WordPress 2. Pilih menu Import […]

Selengkapnya
related posts

Membuat Staging pada Softaculous Apps Installer

Staging sangat berguna apabila Anda ingin mengecek (mengetes) perubahan yang Anda lakukan pada website Anda. Dengan cara ini, Anda dapat mengecek ada atau tidaknya kendala sebelum memutuskan untuk membuat perubahan itu live dan dapat dilihat oleh seluruh pengunjung website. Cara membuat Staging sendiri sangat mudah, karena sudah langsung disediakan oleh Softaculous Apps Installer melalui cPanel. Untuk membuat Staging, ikuti langkah-langkah di […]

Selengkapnya