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?

4
7

Bagikan jika Anda menyukai halaman ini.

Artikel Serupa


related posts

Operasi Dasar di File Manager cPanel

Untuk mengakses File Manager, buka cPanel -> Files: Tombol Bar File Manager Di bagian ini, Anda bisa mencari file tertentu di direktori yang dipilih dan juga mengubah pengaturan File Manager, misalnya memilih direktori root agar terbuka secara default pada saat Anda mengakses File Manager, menampilkan file tersembunyi (dotfiles), dan menonaktifkan dialog verifikasi pengkodean karakter. Context […]

Selengkapnya
related posts

Penjelasan Niagahoster Web Hosting | Shared Web Hosting, Cloud Hosting

Memilih paket hosting yang tepat bisa jadi sulit, terutama jika Anda seorang pemula. Ini tidak menjadi lebih mudah dengan banyaknya pilihan yang tersedia – shared hosting, WordPress hosting, cloud hosting, VPS (Virtual Private Server) hosting, dan banyak lagi. Setelah menonton tutorial ini, Anda akan memiliki pemahaman yang lebih baik tentang berbagai paket yang ditawarkan oleh Niagahoster, […]

Selengkapnya
related posts

Cara Memperbarui Permintaan Migrasi Situs Web

Jika ada detail yang berubah setelah meminta migrasi situs web, dan status migrasi masih Tertunda , Anda dapat menghapus permintaan saat ini dan mengirimkan permintaan baru . Buka halaman Permintaan Migrasi , cari permintaan yang dipermasalahkan, dan klik hapus : Kemudian, klik Tambahkan permintaan dan kirimkan permintaan migrasi situs web baru dengan menentukan informasi yang […]

Selengkapnya