React Native - Environment Setup

React Native - Environment Setup

 

Halo semuanya, dalam artikel ini saya akan sedikit membahas mengenai React Native - Environment Setup.

Yuk langsung aja kita simak..

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

Cara menginstal NodeJS :

Langkah 1: Instal create-react-native-app

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

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


Langkah 2: Buat proyek

Jelajahi melalui folder yang diperlukan dan buat proyek React Narative 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 yang ditentukan dibuat dengan konten berikut.


Langkah 3: NodeJS Python Jdk8

Pastikan Kalian telah menginstal Python NodeJS dan jdk8 di sistem Kalian. Selain itu, disarankan untuk menginstal versi terbaru untuk menghindari masalah tertentu.

Langkah 4: Instal React Native CLI

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

npm install -g react-native-cli


Langkah 5: Mulai react native

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

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

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

Seperti yang diinstruksikan, salah satu cara untuk menjalankan reaksi aplikasi Native di perangkat Android Kalian adalah menggunakan expo. Instal klien pameran di perangkat android Kalian dan pindai kode QR yang diperoleh di atas.

Langkah 6: Keluarkan proyek

Jika Kalian ingin menjalankan emulator android menggunakan android studio, keluar dari baris perintah saat ini dengan menekan ctrl + c.
Kemudian, jalankan perintah  run eject command sebagai

npm jalankan eject

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

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

Meskipun proyek Kalian berhasil terlontar, Kalian mungkin mendapatkan kesalahan sebagai -

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

reaksi-asli run-android

Tapi, sebelum itu Kalian 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 itu, klik dua kali dan lanjutkan dengan instalasi.

Langkah 8: Mengkonfigurasi AVD Manager

Untuk mengkonfigurasi AVD Manager klik pada ikon masing-masing di bilah menu.

Langkah 9: Mengkonfigurasi AVD Manager

Pilih definisi perangkat, Nexus 5X disarankan.

Klik pada tombol Next Kalian akan melihat jendela System Image. Pilih tab Gambar x86.

Lalu, pilih Marshmallow dan klik berikutnya.

Terakhir, klik tombol Selesai untuk menyelesaikan konfigurasi AVD.

Setelah mengonfigurasi perangkat virtual Kalian, klik tombol play di bawah kolom Actions untuk memulai emulator android Kalian.

Langkah 10: Menjalankan Android

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

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

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

Langkah 11: properti lokal

Buka folder android di folder proyek Kalian SampleReactNative / android (dalam hal ini). Buat file dengan nama local.properties dan tambahkan path berikut di dalamnya.

sdk.dir = / C: \\ Pengguna \\ Generasibisa \\ AppData \\ Lokal \\ Android \\ Sdk

di sini, ganti Generasibisa dengan nama pengguna Kalian.

Langkah 12: Hot Reload

Dan untuk membangun aplikasi, modifikasi App.js dan perubahan akan diperbarui secara otomatis di emulator android.

Jika tidak, klik emulator Android, tekan ctrl + m lalu, pilih opsi Enable Hot Reloading.

 

 

Download Tutorial