React Functional Component Untuk Pemula
Beberapa tahun lalu, saya sangat mendambakan antusias kuat dari teman sejurusan untuk belajar lebih tentang pemrograman, terkhusus pemrograman web. Anehnya, teman-teman jurusan IT malah takut dengan pemrograman. Tapi Alhamdulillah setelah 2 tahun menanti, akhirnya mulai terlihat rasa penasaran yang tinggi dari mereka. Tak peduli karena alasan terdesak tugas atau alasan tulus untuk belajar pemrograman. Yang penting, tak boleh menyiakan semangat belajar itu.
Agar menghemat waktu dan mengurangi pengulangan materi, saya mencoba untuk menulis lagi setelah vakum sekitar hampir satu tahun — Doakan saya supaya lebih rajin untuk menulis. Artikel ini tidak menyertakan cara installasi React. karena sudah banyak sekali artikel di luar sana yang menjelaskannya. teman-teman cukup menginstall Node JS, dan create-react-app.
Membuat Functional Component
Mengenalkan React bukanlah hal yang mudah, terlebih pada para pemula yang baru mengenal apa itu HTML, CSS dan Javascript. Ooops, maksud saya jQuery. Beberapa cara sudah dicoba, dan sepertinya pengenalan react melalui Functional Component lebih mudah untuk diterima.
Functional Component atau biasa disebut Stateless Component adalah component yang didefinisikan menggunakan function yang sangat simpel, tanpa harus belajar class, this context, state, dan lain sebagainya. Syaratnya hanya cukup mengerti bagaimana function javascript bekerja.
diatas adalah contoh simple dari definisi function pada javascript. Ketika kita menjalankan function greeting(), maka mendapat nilai balikan yaitu string “Halo Dunia”. Sedangkan saat kita konversikan function tersebut dalam bentuk React Functional component maka akan menjadi seperti ini.
Mirip sekali bukan? hanya saja function Hello() mempunyai nilai balikan berupa JSX Tag atau gampangnya syntax HTML / XML di javascript yang nantinya akan dirender menjadi React element.
Konsep Component Based
Cara memakai Component diatas cukuplah mudah. dengan cara import file component lalu memasangnya sesuai dengan nama variable import.
komponen <Hello> bisa digunakan dimanapun dan berapakalipun. Ini lah yang disebut konsep component based. Jadi bayangkan setiap component React adalah sebuah potongan lego puzzle yang bisa dipasang dimana saja dan bisa digunakan secara berulang.
Ini lah yang menjadi keuntungan saat menggunakan React. Jika komponen <Hello> rusak atau error atau nge-bug, kita cukup memperbaikkinya dalam satu file yaitu file Hello.js.
Komputasi Atau Proses Pada Function
Kemampuan function tentu tidak hanya memberi nilai balikan berupa string saja. Function juga mampu melakukan komputasi atau mengadakan proses di dalamnya, sehingga menghasilkan output yang diharapkan. Justru inilah fungsi utama dari function, yaitu mengadakan proses pada input untuk dijadikan suatu output.
Function sejatinya bertujuan untuk membungkus suatu proses yang sering digunakan, sehingga bisa dipakai secara berulang tanpa harus copy paste proses yang sama.
Input yang didapat berasal dari argumen function, yaitu variable a dan variable b yang nantinya akan diproses sehingga menghasilkan String bertuliskan “Hasil: x”
Hal ini juga berlaku pada Functional Component. Functional Component juga bisa menerima input lalu memprosesnya menjadi suatu output.
Props Component
Pada penggunaanya, tidak boleh lupa untuk memberikan input berupa variable a dan variable b. Ini biasa disebut dengan props atau data yang turun dari parent. Data-data yang turun ini lah yang nantinya bisa digunakan sebagai input untuk diproses lebih lanjut melalui sebuah komponen.
Event Pada Functional Component
“Yaah, Fal, kalau nampilin gini doang mah anak bayi baru lahir juga bisa…”
“Sabar….”
Di Functional Component React, kita juga bisa mengadakan event seperti event saat komponen diklik, diketik, discroll, dll. Untuk contoh, mari mencoba event onClick pada component.
Tak hanya onClick, di React terdapat banyak sekali jenis event seperti onClick, onMouseOver, onKeyDown, onKeyUp, onInput, onChange, onFocus, onBlur, dll ini semua tergantung pada DOM event yang ada di element.
Semisal, element <input /> mempunyai onChange, onBlur, onFocus, dan onInput sedangkan element <h1> tidak punya. Untuk referensi event type apa saja yang tersedia pada element, teman-teman bisa mencarinya disini.
Kesimpulan
“Yaaah, kok udah kesimpulan? Kok nggak bikin app atau studi kasus?”
Tulisan kali ini bertujuan untuk mengenalkan React pada para pemula — Yap, pemula banget. Ada baiknya teman-teman minimal paham dulu konsep apa itu function, apa itu props, apa itu event, dan apa itu konsep “component based”.
Untuk sementara, teman-teman bisa explore sendiri lebih lanjut tentang React. Kalau ada request suatu pembahasan tentang frontend things bisa kontak saya.
Penutup
Setiap detil isi konten dalam artikel ini tidak bermaksud untuk show off, menyinggung, menyindir, ataupun sejenisnya. Melainkan hanya menuliskan tutorial sederhana untuk para pemula.
Sangat terbuka untuk kritik dan saran. Kalau saya salah, mohon dengan sangat untuk diingatkan. Semoga bermanfaat dan jangan lupa Like and Share~
Let’s talk about some projects with me
Just Contact Me At:
- Email: bosnaufalemail@gmail.com
- Skype Id: bosnaufal254
- twitter: @BosNaufal
- telegram: @BosNaufal
