Sunday 17 November 2019

Memulai React Native di Windows

cara install react native beserta bahannya -  React native adalah program untuk membuat aplikasi mobile yang ditulis dalam bahasa javascript. React native mendukung 2 sistem operasi yaitu ios dan android hanya dengan sekali program. Hasil dari aplikasi yang dibuat dengan react native adalah aplikasi mobile yang benar-benar native (bukan web view).

Baca Juga: Cara Terima Semua Lisensi SDK Android di Windows/Linux

Artikel kali ini akan menjelaskan secara singkat dan lengkap tentang apa saja yang dibutuhkan untuk memulai react native sebagai persiapan awal dan cara installnya.

A. Perlengkapan Yang Harus Diinstall
1. Android Studio. Download Disini
2. Java Development Kit (JDK). Download Disini
3. Node Js. Download Disini
4. Genymotion Android Emulator + Virtual Box. Download Disini
5. Python2. Download Disini

Pastikan seluruh perlengkapan sudah terinstall dengan sempurna.

B. Setting Environment Variable
1. Klik start, lalu cari environment variables

Buka System Environment Variables
Buka System Environment Variables

2. Klik Environment Variables

Buka Environment Variables Windows
Buka Environment Variables Windows

3. Pada User Variable, klik New, lalu tambahkan seperti yang ada di kotak merah

Tambah User Variables
Tambah User Variables

*Keterangan: Untuk value ANDROID_HOME dan JAVA_HOME, silahkan sesuaikan dengan lokasi folder SDK (bersama Android Stuido) dan JDK di komputer mu. Jika kamu menginstall Android Studio dan JDK secara default, kamu bisa memasukan value berikut ini.

ANDROID_HOME:
C:\Users\USERNAME_KOMPUTER_MU\AppData\Local\Android

JAVA_HOME:
C:\Program Files\Java\jdkVERSI_JDK_MU

C. Install React Native
1. Buka CMD sebagai admin

Buka CMD Sebagai Administrator
Buka CMD Sebagai Administrator

2. Masukan perintah:

npm i -g react-native

Install React Native
Install React Native

3. Tutup CMD

D. Menjalankan Android Emulator
1. Buka aplikasi Genymotion (aplikasi android emulator yang cukup ringan).

2. Pilih device android/ios mana yang ingin dijadikan emulator. Lalu klik ikon titik 3 vertikal, lalu Install

Install Device Android
Install Device Android

3. Setelah device diinstall, scroll ke paling atas. Kamu akan menemukan My Installed Device. Start device yang sudah diinstall tadi.

Start Device Emulator
Start Device Emulator

4. Emulator akan terbuka. Biarkan emulator tetap terbuka

Emulator Berhasil Berjalan
Emulator Berhasil Berjalan

E. Membuat Projek React Native
1. Buat folder untuk install aplikasi react native, lalu buka cmd dan arahkan ke folder tersebut.

Buka CMD di Directory Khusus React Native
Buka CMD di Directory Khusus React Native

2. Masukan perintah berikut

react-native init reactnative1

Init React Native
Init React Native

3. Akan muncul folder bernama reactnative1 yang sudah berisi program react native

Folder Yang Berisi Program React Native
Folder Yang Berisi Program React Native

4. Change Directory cmd ke folder reactnative1. Masukan perintah berikut.

cd reactnative1

5. Karena tadi saya install device Samsung Galaxy S9 di Genymotion (Android), maka untuk menjalankan react native di emulator, masukan perintah berikut ini.

react-native run android

Jika kamu menginstall device lain dengan OS ios di emulator, masukan perintah.

react-native run-ios

Run React Native
Run React Native

6. Buka emulator Genymotion

Emulator Berhasil Berjalan
Emulator Berhasil Berjalan

G. Coba-coba edit React Native
1. Buka folder reactnative1 di text editor

2. Buka App.js, lalu coba-coba edit deh..

Edit React Native
Edit React Native
Oke, itulah tutorial singkat tentang cara install react native di windows dan bahan apa saja yang diperlukan. Semoga bermanfaat! Terima kasih!

1 komentar:

  1. ada error waktu install react di cmd gan solusinya gimana gan ???
    ... sblumnya makasih udah nulis tutornya
    C:\Users\WIN10> npm i -g react-native
    npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411)
    npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
    npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
    npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
    npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
    npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
    npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
    npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    C:\Users\WIN10\AppData\Roaming\npm\react-native -> C:\Users\WIN10\AppData\Roaming\npm\node_modules\react-native\cli.js
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\react-native\node_modules\jest-haste-map\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN react-native@0.63.1 requires a peer of react@16.13.1 but none is installed. You must install peer dependencies yourself.
    npm WARN @react-native-community/cli@4.10.1 requires a peer of react-native@^0.62.0-rc.0 but none is installed. You must install peer dependencies yourself.
    npm WARN use-subscription@1.4.1 requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.

    ReplyDelete

Hai, Mohon Komentar Yang Relevan Dan Tidak OOT!