Membuat Aplikasi To-Do dengan React Native

Hari minggu kemarin saya sedang memperlajari bagaimana membuat aplikasi menggunakan react-native. React native itu semacam framework javascript yang dapat digunakan untuk menulis kode javascript dan di transform menjadi native ke android maupun iOS. Syntax / design codenya seperti React sehingga kamu yang sudah terbiasa dengan framework React.js pasti akan terbiasa dengan gaya / design nya si react-native ini.

With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

Menariknya, react-native itu tidak seperti Cordova, Ionic atau hypbrid app lainya. Kalau hybrid app seperti cordova, seperti menjalankan web app di dalam browser internal, sedangkan si cordova nya yang menjembatani akses ke system hardware seperti sensor, kamera, file system, dll.

React dan React native ini dikembangkan oleh Facebook dan komunitas (Open Source). Lebih lengkapnya, silahkan menuju tautan berikut ini.

Aplikasi Pertama, React To-Do

Pada sesi belajar react-native ini saya mengikuti artikel dan videonya kang Simon. Jadi tujuan akhirnya, kita bisa membuat aplikasi to-do-list sederhana yang terintegrasi dengan realtime database-nya firebase.

Persiapan

Sebelum memulainya kita harus persiapkan beberapa piranti lunak yang harus di pasang, antara lain:

  1. npm / yarn Karena react native ini adalah javascript, kita harus menginstall npm di sistem kita.
  2. react-native Selanjutnya kita butuh react-native cli tool untuk generate project di komputer kita. Selengkapnya bisa chek disini.
  3. Android Studio Selanjutnya kita juga butuh android studio, atau cukup dengan android sdk saja sih. Tapi lebih baik install android studio skalian :D

Show me the code

Dan berikut ini adalah code hasil belajar saya kemarin, sudah saya unggah di repositori gitlab: showcheap/react-native-todo.

Hasilnya

Screenshot Hasilnya

Kesan pertama saat belajar react-native, sedikit bingung. Serasa lebih ribet gitu. Mungkin karena belum terbiasa juga sih. Stylingnya juga berbeda dengan gaya Android Native (xml). Mungkin karena saya langsung lompat ke react-native sebelum mempelajari React.js itu sendiri. Tapi ada beberapa hal yang justru lebih ringkas dibanding cara pembuatan di android native, misalnya membuat listview. Di android membuat listview / recyclerview cukup memakan waktu, karena harus membuat adapter, dan printilanya. Sedangkan di react-native cukup beberapa baris kode saja sudah bisa membuat ListView. Akankah murtad dari Android Native (java, xml) ke react-native (js)??.