React Native : Part 1 - Getting Started


Halo, di bagian ini saya akan menjelaskan bagian dasar untuk memulai coding dengan React Native. Sebelum itu, sebaiknya dipersiapkan alat dan bahannya terlebih dahulu ya. (saya menggunakan os Windows dalam contoh ini)

Tools:
Step:
  1. install nodejs
  2. install expo
  3. Create new project

1. Install nodejs

Install nodejs sampai selesai.

Untuk mengecek versi dari nodejs, anda dapat menggunakan command berikut di cmd

> npm -v

Maka akan tampil versi dari node anda, seperti berikut
check nodejs version
check nodejs version

2. Install Expo

Setelah install nodejs, langkah berikutnya adalah install expo. Untuk install expo via cmd, ketik command berikut kemudian enter (prosesnya cukup lama, tergantung koneksi pribadi)

> npm i -g expo-cli

Maka akan otomatis download, seperti berikut
install expo
install expo before

Jika sudah selesai maka akan seperti berikut
install expo after
install expo after

3. Create New Project React Native

Untuk membuat project react native, anda perlu menentukan path source akan disimpan terlebih dahulu. Di sini saya menggunakan path E:\React Native sebagai contoh.

Arahkan cmd anda ke direktori yang sudah ditentukan. Kemudian ketik command berikut

> expo init belajar-react-native

Maka anda akan diberikan 2 pilihan template, yaitu blank atau tabs. Untuk memilih, anda dapat menggunakan arrow up/down kemudian enter
choose template react native
choose template react native

Di sini saya memilih template blank. Jika proses init sudah selesai, maka akan tampil sebagai berikut

init expo done
init expo done

4. Running Application

Untuk menjalankan aplikasi pertama kali, anda masuk ke dalam direktori project kemudian ketik command berikut

> expo start

Jika berhasil, maka akan tampil sebagai berikut

Expo running
Expo running

Dan anda juga akan diarahkan ke browser seperti berikut

Expo running browser
Expo running browser

React Native dapat dijalankan di os Android dan IOS. Untuk running di handphone anda, silahkan download Expo di Google Play / Appstore

Dalam contoh ini saya menggunakan android. Scan QR Code menggunakan aplikasi Expo di handphone anda. Pastikan handphone dan PC anda dalam 1 jaringan ya.

Jika berhasil discan, maka dalam cmd anda akan muncul proses build
Expo build javascript bundle
Expo build javascript bundle

Jika sudah 100%, maka aplikasi sudah dapat dijalankan di handphone anda
tampilan aplikasi di handphone
tampilan aplikasi di handphone

Sekian untuk part 1 ini. Jika ada kendala, silahkan comment di bawah.

Comments

Popular posts from this blog

Shortcut CTRL + A sampai Z pada Microsoft Word yang Perlu Diketahui

DOWNLOAD: Virtual DJ pro 7.0.3 , skin pack, plugin, dll

DOWNLOAD: Emulator PlayStation 1 (PS1) for Windows