Blogger Jateng

Menerapkan Aplikasi React Pertama Anda

Bagi pengembang yang baru pertama kali menggunakan aplikasi React Native, menerapkan aplikasi React Native dapat menjadi tantangan tersendiri, namun dengan mengambil langkah yang tepat dapat membuat aplikasi Anda langsung tersedia untuk umum dalam waktu singkat. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat, membangun, dan men-deploy aplikasi React Native Anda. 

Langkah 1: Membuat Aplikasi React Anda

Jika Anda belum membuat aplikasi React, Anda dapat menggunakan CRA untuk mengatur aplikasi Anda dengan cepat. Buka terminal Anda dan jalankan perintah ini:

npx create-react-app my-first-react-app

Perintah ini akan membuat sebuah proyek React baru dalam sebuah folder bernama my-first-react-app dengan semua konfigurasi yang dibutuhkan. Kemudian arahkan ke folder proyek tersebut setelah pengaturan selesai:

cd my-first-react-app

Untuk memastikan semuanya berfungsi, jalankan server pengembangan:

npm start

Aplikasi Anda sekarang seharusnya sudah berjalan di http://localhost:3000 di browser Anda.

sumber: leravio.com

Langkah 2: Aplikasi Anda Siap untuk Penerapan

Oleh karena itu, sebelum menerapkan, Anda perlu membangun versi produksi aplikasi Anda. Build untuk produksi membangun aplikasi untuk produksi dengan minifikasi. Di direktori proyek Anda, jalankan perintah:

npm run build

Perintah ini akan menghasilkan folder build dengan file yang dioptimalkan yang siap untuk diterapkan.

Langkah 3: Memilih Layanan Hosting

Ada beberapa layanan hosting aplikasi React. Beberapa opsi populer meliputi:

Vercel

Netlify

Halaman GitHub

AWS Amplify

Firebase Hosting

Untuk mempermudah, kita akan melihat cara menerapkan ke Vercel dan GitHub Pages.

Menerapkan ke Vercel

1. Mendaftar dan Menginstal Vercel CLI

  • Daftar untuk mendapatkan akun gratis di Vercel.
  • Instal CLI Vercel secara global: 

npm install -g vercel

2. Menerapkan Aplikasi Anda

  • Jalankan perintah berikut di direktori proyek Anda: 

vercel

  • Ikuti petunjuk untuk menautkan proyek Anda ke akun Vercel. Setelah selesai, Vercel akan memberikan URL langsung untuk aplikasi Anda.

Menerapkan ke Halaman GitHub

1. Menginstal Paket Halaman GitHub

  • Instal paket gh-pages sebagai ketergantungan pengembangan:

npm install --save-dev gh-pages

2. *Perbarui *paket.json

  • Tambahkan bidang beranda ini ke dalamnya, ganti nama pengguna dan nama-repositori dengan nama pengguna dan nama repositori GitHub Anda:

"homepage": "https://username.github.io/repository-name"

  • Di bagian skrip, tambahkan skrip penerapan:

"scripts": {

  "predeploy": "npm run build",

  "deploy": "gh-pages -d build"

}

3. Dorong Kode Anda ke GitHub

  • Jika Anda belum melakukannya, inisialisasi repositori Git:

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/username/repository-name.git

git push -u origin main

4. Menyebarkan Aplikasi

  • Terapkan dengan menjalankan perintah berikut:

npm run deploy

  • Aplikasi Anda akan dihosting di URL dari bidang beranda. 

Langkah 4: UJI APLIKASI YANG DITERBITKAN

Setelah aplikasi Anda diterapkan, buka tautan yang disediakan untuk memastikan semuanya berfungsi seperti yang diharapkan.Promise Carilah masalah seperti tautan yang rusak atau aset yang hilang dan perbaiki seperlunya.

Kiat Terakhir

  • Optimalkan Aplikasi Anda: Sebelum men-deploy, pastikan Anda telah mengoptimalkan kinerja aplikasi dengan menghapus dependensi dan aset yang tidak digunakan.
  • Kontrol Versi: Gunakan sistem kontrol versi seperti Git untuk mengelola basis kode Anda secara efektif.
  • Lacak Kinerja: Anda dapat menganalisis dan mengoptimalkan performa aplikasi Anda dengan alat bantu seperti Google Lighthouse.

Selamat karena Anda telah menerapkan aplikasi React Native pertama Anda, Anda sekarang secara resmi selangkah lebih maju dalam peran web developer. Setelah Anda memiliki lebih banyak aplikasi, lihat dan mulailah bermain dengan lebih banyak opsi penerapan dan kemampuan hosting yang lebih canggih yang sesuai dengan kebutuhan proyek Anda.

kembali ke>>>>  React.js untuk Pemula: Membangun Aplikasi Pertama Anda