Halo sahabat kodinger, pada tutorial sebelumnya kita telah belajar cara membuat Native Apps menggunakan Android Studio dan React Native. Pada tutorial kali ini kita akan belajar membuat native apps tanpa menggunakan Android Studio? Really?? Yeah Really.
Lalu pada tutorial ini kita hanya menggunakan terminal, text editor dan expo app yang di install pada smartphone man teman.
Penting:
Namun perlu di ketahui kita tetap harus menginstall NodeJS, GIT, dan beberapa package instalasi serta beberapa konfigurasi path yang telah dijelaskan pada tutorial -> Bagian I Belajar React Native dan Belajar GIT & GitHub
Create React Native App
Create React Native App adalah cara termudah untuk membuat suatu aplikasi dengan React Native. Dengan Create React Native App kamu bisa membuat aplikasi tanpa menginstall android studio, tentunya NodeJS sudah di install terlebih dahulu ya.
Expo
Expo (Exponent) adalah aplikasi yang dapat di install di smartphone yang berfungsi sebagai emulator untuk melihat preview project yang kita buat menggunakan create react native app.
Sebelum membuat project silahkan install expo pada smartphone masing-masing Android / IOS.
ketika expo telah di install di smartphone
setelah selesai menginstall expo mari kita masuk ke next step untuk membuat project.
Membuat Project
Kembali ke laptop, pada tutorial ini kita akan membuat project yang berada di drive C dengan nama folder myproject di komputer dengan sistem operasi windows.
Step-stepnya adalah:
Buka terminal atau CMD dan masuk ke drive C
cd c:/
buat folder myproject
mkdir myproject
dan masuk ke folder myproject
cd myproject
Jika benar hasilnya akan seperti gambar di bawah ini.
Berikutnya ketik perintah di bawah ini
npm install -g create-react-native-app
jika benar hasilnya akan seperti di bawah ini
selanjutnya ketik perintah di bawah ini
create-react-native-app rnproject
Dan tunggu hingga prosesnya selesai. Jika benar hasilnya akan seperti di bawah ini.
selanjutnya ketik perintah berikut dan enter.
cd rnproject
lalu ketik perintah berikut.
yarn start
Jika benar hasilnya akan seperti di bawah ini.
Lalu buka aplikasi expo di smartphone
Dari aplikasi expo klik scan QR code,
dan scan QR codenya yang tampil di CMD tadi.
Tunggu hingga proses loading selesai.
Setelah selesai loading, maka selamat project react native kamu sudah berjalan.
Kamu bisa mengganti text viewnya di bagian App.js
Caranya:
Buka text editor (sublime/atom/visual studio code atau lainnya) untuk merubah sintaks defaultnya.
lalu buka App.js pada folder rnproject.
Lebih lengkapnya kamu bisa lihat dan ganti teksnya seperti gambar di bawah ini.
Lalu save dan lihat hasilnya di smartphone. Otomatis teks di smartphone kamu akan berubah.
Untuk lebih memahami silahkan mencoba untuk merubah-ubah atau memodifikasi dari apa yang telah dipelajari. Kurang lebihnya saya mohon maaf jika ada kesalahan dalam penjelasan ini. Jika ada Koreksi silahkan beri komentar di bawah ini dan semoga tutorial ini bermanfaat.
Ikuti juga tutorial sebelumnya:
> Bagian I Belajar React Native
> Bagian II React Native – Props dan State
> Bagian III React Native – Style, JSX
> Bagian IV React Native – Handling
NB: Kami jelaskan kembali bahwa pada tutorial ini mengambil sumber dari Docs resmi React Native.
Kamu juga bisa ikut membantu orang lain untuk mudah belajar Mobile Apps dengan men-share tutorial ini. Happy koding 😀
