React Native - Pengaturan Lingkungan

Ada beberapa hal yang perlu Anda instal untuk mengatur lingkungan React Native. Kami akan menggunakan OSX sebagai platform bangunan kami.

Sr.No.	Perangkat lunak	Deskripsi
1	NodeJS dan NPM	Anda dapat mengikuti tutorial Pengaturan Lingkungan NodeJS kami untuk menginstal NodeJS.

Langkah 1: Instal create-react-native-app

Setelah berhasil menginstal NodeJS dan NPM di sistem Anda, Anda dapat melanjutkan dengan instalasi create-react-native-app (secara global seperti yang ditunjukkan di bawah).

C:\Users\Tutorialspoint> npm install -g create-react-native-app

Langkah 2: Buat proyek

Jelajahi folder yang diperlukan dan buat proyek react native baru seperti yang ditunjukkan di bawah ini.

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

Setelah menjalankan perintah di atas, folder dengan nama tertentu dibuat dengan konten berikut.

Langkah 3: NodeJS Python Jdk8

Pastikan Anda menginstal Python NodeJS dan jdk8 di sistem Anda, jika tidak, instal. Selain itu, disarankan untuk memasang benang versi terbaru untuk menghindari masalah tertentu.

Langkah 4: Instal React Native CLI

Anda dapat menginstal antarmuka baris perintah react native di npm, menggunakan perintah install -g react-native-cli seperti yang ditunjukkan di bawah ini.

npm install -g react-native-cli

Langkah 5: Mulai bereaksi asli

Untuk memverifikasi instalasi, telusuri folder proyek dan coba mulai proyek menggunakan perintah start.

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

Jika semuanya berjalan dengan baik Anda akan mendapatkan kode QR seperti yang ditunjukkan di bawah ini.

Seperti yang diinstruksikan, salah satu cara untuk menjalankan aplikasi react native pada perangkat android Anda adalah dengan menggunakan expo. Instal klien expo di perangkat android Anda dan pindai kode QR yang diperoleh di atas.

Langkah 6: Keluarkan proyek

Jika Anda ingin menjalankan emulator android menggunakan android studio, keluar dari baris perintah saat ini dengan menekan ctrl+c.

Kemudian, jalankan run eject command sebagai

npm run eject

Ini meminta Anda opsi untuk mengeluarkan, pilih yang pertama menggunakan panah dan tekan enter.

Kemudian, Anda harus menyarankan nama aplikasi di layar beranda dan nama proyek studio Android dan proyek Xcode.

Meskipun proyek Anda berhasil dikeluarkan, Anda mungkin mendapatkan kesalahan karena -

Abaikan kesalahan ini dan jalankan react native untuk android menggunakan perintah berikut -

react-native run-android

Tapi, sebelumnya Anda perlu menginstal studio android.

Langkah 7: Menginstal Android Studio

Kunjungi halaman web https://developer.android.com/studio/ dan unduh studio android.

Setelah mengunduh file instalasi, klik dua kali di atasnya dan lanjutkan dengan instalasi.

Langkah 8: Mengonfigurasi AVD Manager

Untuk mengkonfigurasi AVD Manager, klik ikon terkait di bilah menu.

Langkah 9: Mengonfigurasi AVD Manager

Pilih definisi perangkat, Nexus 5X disarankan.

Klik pada tombol Next Anda akan melihat jendela System Image. Pilihx86 Images tab.

Kemudian, pilih Marshmallow dan klik berikutnya.

Terakhir, klik tombol Selesai untuk menyelesaikan konfigurasi AVD.

Setelah mengkonfigurasi perangkat virtual Anda, klik tombol putar di bawah kolom Tindakan untuk memulai emulator android Anda.

Langkah 10: Menjalankan android

Buka command prompt, telusuri folder proyek Anda dan, jalankan react-native run-android perintah.

Kemudian, eksekusi aplikasi Anda dimulai di prompt lain, Anda dapat melihat statusnya.

Di emulator android Anda, Anda dapat melihat eksekusi aplikasi default sebagai -

Langkah 11: local.properties

Buka android folder di folder proyek Anda SampleReactNative/android(pada kasus ini). Buat file dengan namalocal.properties dan tambahkan jalur berikut di dalamnya.

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

di sini, ganti Tutorialspoint dengan nama pengguna Anda.

Langkah 12: Hot Reload

Dan untuk membangun aplikasi memodifikasi App.js dan perubahannya akan otomatis terupdate pada emulator android.

Jika tidak, klik tekan emulator android ctrl+m lalu, pilih Enable Hot Reloading pilihan.