Component Reusable Pada React Native
Sebelum masuk ke dalam inti dari artikel ini. Ijinkanlah saya untuk memberi pengantar singkat mengenai “React Native”.
What is React Native ?
React Native adalah “hype saat ini dan trend di masa mendatang”, React Native merupakan javascript framework open source untuk membuat aplikasi multi-platform (android dan ios), dan sesuai dengan deskripsi di situs resminya “Learn once, write anywhere”.
Why React Native ?
Lalu kenapa harus menggunakan React Native, apa kelebihan, keunggulan dan kemudahan dari React Native. Silahkan luangkan waktu kalian untuk membaca artikel yang diulas oleh teman saya.
Buat yang masih bingung darimana atau bagaimana harus memulainya, kalian bisa membaca dokumentasi React Native atau React Native Express. Jika kalian masih bingung untuk konfigurasi React Native kalian bisa membaca panduan singkat “Install React Native Without Android Studio”.
Setelah selesai proses installasi selesai maka kita ready to go untuk membangun aplikasi React Native.
Salah satu keuntungan membuat component reusable adalah dapat menghemat waktu dan memungkinkan kita menulis sedikit code. Okay.. lanjut pada intinya pertama-tama buka terminal kalian kemudian jalankan perintah berikut:
react-native init FirstProject
cd FirstProjectSetelah selesai membuat project React Native jangan lupa untuk menkoneksikan device android kalian. Aktifkan developer mode dan aktifkan usb debugging. Untuk menjalankan aplikasi kalian cukup jalankan perintah dibawah ini:
react-native run-android
react-native start
Jika berhasil menjalankan perintah diatas maka otomatis aplikasi akan tampil.
Dalam folder project tersebut terdapat file index.android.js, file tersebut adalah file yang pertama kali dieksekusi setelah aplikasi dijalankan. Di bawah ini adalah isi dari index.android.js.
Pada artikel ini saya akan membuat component button sederhana. Salah satu metode yang paling sering digunakan adalah Pass data via props. Method ini sangat umum digunakan. Ketika membuat component kita perlu memikirkan tentang jeins props yang dapat digunakan kembali dengan nilai yang berbeda. Kali ini akan saya jelaskan memalui contoh <Button> component. Pada component ini memiliki nilai awal yang akan di set pada props antara lain, label dengan text yang akan ditampilkan pada tombol, buttonStyle dengan style dari component, textColor untuk style dari text, dan onPress untuk aksi pada saat tombol ditekan.
<Button> component siap untuk digunakan, tapi jika kita hendak menggunakannya untuk kebutuhan tertentu secara sederhana kita bisa mengganti value via props. Hal ini sering dilakukan ketika kita harus memodifikasi style atau text pada view yang berbeda.
Dengan begitu kita dapat mengunakan <Button> component secara berkali-kali dalam berbagai skenario yang berbeda. Hal ini sangatlah memudahkan kita dalam mengembangkan sebuah aplikasi yang besar. Hal lain yang harus diperhatikan adalah ketika kalian membuat sebuah component reusable pastikan kalian mengeksport component itu sendiri, dan ketika hendak digunakan component tersebut haruslah di import dan pastikan path sesuai dengan lokasi file component disimpan.
Berikut adalah hasil dari component <Button>.
Sekian dulu yang bisa saya bagi. Jika kalian masih mengalami kesulitan bacalah refresi dokumentasi React Native atau React Native Express. React Native adalah open source, up to date dan hingga saat ini sudah jutaan contoh project React Native. So.. rajin-rajinlah mengekspor.
Semoga setelah membaca artikel ini kalian dapat mempelajari bagaimana mengoptimasi code yang kalian buat dan membuat component reusable. Tidak semua component yang kita gunakan harus kita buat reusable. Namun jika componen yang kita gunakan banyak kesamaannya baiklah jika kita buat menjadi reusable sebab sangatlah menghemat waktu dalam mengerjakan tasks.
Jangan lupa untuk Share dan Rekomendasikan kepada teman-teman kalian.
