Assalamualaikum warahmatullahi wabarakatuh.

Prop & State, dua hal yang sering membuat bingung bagi yang baru masuk ke dunia react. Keduanya terlihat mirip tapi ada bedanya ? Kapan harus menggunakan State ? Kapan harus menggunakan Prop ?

1. Mari kita mulai dari Component
UI = f(data)

React is all about components. Component adalah bagian-bagian kecil dari suatu aplikasi. Komponen-komponen ini nantinya diracik menjadi sebuah aplikasi. Sebagai tukang racik yang budiman anda harus paham bahwa ada 2 unsur penting dalam component yaitu UI (User Interface) & Data, rumusnya

Gak perlu mules dengan rumus diatas, itu cuma rumus sederhana artinya jika ingin merubah UI maka rubahlah datanya.

Type data pada component react itu cuma dua yaitu Prop dan State.Dari sisi programming component react itu dibuat dengan function atau class, wujudnya kira-kira seperti ini:

Ok sejauh ini ingat saja konsep dasarnya adalah :

1. Jika data berubah maka component berubah ( render ulang )

1. Ada 2 cara membuat component, functional component dan class component

• Untuk sekarang ingat saja functional component tidak memiliki state, itu sebabnya barang ini biasa disebut stateless component.

• Sedangkan class component bisa memiliki prop dan state.

Lalu mana yang terbaik ?

Lalu bedanya apa ?

Prop singkatan dari Property. Ini cukup simple, apalagi jika anda sudah terbiasa dengan HTML, ini mirip seperti atrribute pada tag HTML. Dalam pembuatannya, jika dalam functional component maka prop ini adalah parameternya. Jika componentnya dalam bentuk class maka prop ini property dari class nya yang di akses melalui keyword ‘this’. Ahh ribet ini contohnya :

Berikut beberapa poin penting dalam Prop

• Prop itu read-only. Perhatikan contoh function ComponentA diatas, function ini hanya bisa membaca parameter props tetapi tidak bisa merubahnya. Yang bisa merubahnya adalah pemanggilnya yaitu <ComponentA />

• Prop umumnya digunakan untuk komunikasi data component dari parent komponent ke child component.

State adalah data private sebuah component. Data ini hanya tersedia untuk component tersebut dan tidak bisa di akses dari component lain. Component dapat merubah statenya sendiri. Supaya lebih jelas mari kita lihat implementasi pada component counter.

Cara kerja component ini sederhana :

1. default valuenya adalah 0.
2. ada tombol minus dan plus untuk mengubah value nya.

Mari kita kupas satu persatu:

1. Inisialisi state.
2. Pada beberapa contoh inisialisasi di buat dengan menggunakan constructor(). Tapi saya lebih memilih style ini. karena lebih simple
3. Update State.

1. Untuk merubah state gunakan perintah this.setState(). Ketika state berubah secara otomatis component akan di render ulang. method disini menggunakan arrow function untuk menghindari problem javascript bind.
2. Read Component State.
3. Untuk membaca state gunakan perintah this.state.keyName
4. Call Method.
5. Semua perubahan state dilakukan di dalam method render()

4. Tanya dong
Bisa gak sih component memiliki state & props sekaligus ?

Bisa. Sebagai contoh kasus, kita akan membuat component counter lebih dinamis. Component tersebut harus dapat di set default valuenya.

dan component counternya menjadi seperti ini :

Ada berapa sih type component ?

1. Stateless Component — tidak memiliki state hanya prop. Umumnya component ini di buat dengan function karena codenya lebih ringkas

1. Statefull Component — memiliki state & props. Component ini dibuat dengan class. Kelebihan dari class component adalah memiliki lifecycle

Cuma 2, Stateless dan Statefull

Tidak. State & Props digunakan untuk membuat component yang lebih dinamis.

Ada. Caranya dengan dengan callback atau dengan kata lain child component merequest ke parent component untuk merubah prop nya.

Kapan saat yang tepat untuk menggunakan props atau state ?

• Gunakan props untuk komunikasi data antar komponent ( parent to child component )

• Gunakan state untuk komunikasi data internal, hanya dalam component itu sendiri

• props dan state bisa memiliki default value

Perubahan data pada props dan state akan merender ulang component.

Assalamualaikum warahmatullahi wabarakatuh.

Mungkin teman-teman bekerja dan duduk didepan komputer selama 8 jam atau lebih dan bisa mengakibatkan RSI (Repetitive Strain Injuries). RSI adalah sejenis cedera pada persendian akibat ketegangan pada otot atau saraf karena aktivitas fisik yang terus menerus atau dilakukan dalam jangka waktu yang lama, ciri-cirinya rasa sakit pada pergelangan tangan hingga pundak, punggung, juga leher, kesemutan, dan mati rasa.

Sayangnya rasa sakit ini sering kali di anggap sepele padahal jika di biarkan akan semakin parah seperti kehilangan kekuatan tangan bahkan sampai tidak dapat digerakan lagi.
Karena itu penting untuk teman-teman Luangkan waktu setiap hari untuk menjaga kesehatan fisik seperti jogging, bersepeda, senam, dan lain sebagainya.
Jika kamu bosan melakukan ini sendirian, kamu bisa mengajak teman kamu atau pergi ke tempat gym atau taman, hal ini tidak hanya akan membuat badan kamu merasa sehat, tetapi kehidupan sosial kamu juga akan lebih baik.
Bila cara tersebut dirasa menyita waktu dan tidak dapat dilakukan beberapa tips yang bisa anda lakukan:
Peregangan Leher
Peregangan Telapak Tangan
Peregangan Kaki
Peregangan Tulang Belakang
Peregangan Bahu
Peregangan Trisep
Peregangan Tangan

Mulailah dengan peregangan leher yang mudah namun dapat mengurangi sakit punggung, caranya adalah miringkan kepalamu sehingga telinga menyentuh bahu dan tahan selama beberapa detik. Kamu juga bisa berdiri di depan pintu dan merentangkan tangan sehingga kedua tanganmu menyentuh kusen pintu, kemudian berjalan sampai kamu merasakan peregangan di bagian dada. Terakhir, letakkan tangan di pinggang kemudian lengkungkan tubuhmu ke belakang.

Berdiri di depan mejamu, letakkan kedua tanganmu di atas meja, dengan posisi jari-jari menghadap ke arahmu. Kemudian, turunkan tubuhmu perlahan hingga kamu merasakan peregangan. Tahan selama 15 detik, kemudian kembali berdiri tegak.

Duduk di kursimu dan panjangkan satu kaki lurus di depanmu, tahan posisi tersebut selama dua detik, kemudian naikkan setinggi mungkin, tahan lagi dua detik, kemudia turunkan kakimu secara perlahan ke posisi semua. Ulangi 15 kali untuk masing-masing kaki.

Duduk tegak di kursimu dan angkat kedua tanganmu ke atas, letakkan tangan kirimu di atas meja, sentuh bagian belakang kursimu dengan tangan kanan, dan putar perlahan ke arah kanan. Tahan selama 10 detik, lalu kembali ke posisi semula, dan angkat kedua tanganmu ke atas lagi, ulangi ke arah sebaliknya.

Duduk tegak di kursimu dan lipat lengan kirimu, letakkan di belakang punggung dengan telapak tangan menghadap ke atas. Angkat tangan kananmu ke atas dan tekuk, sehingga menyentuh telapak kanan kirimu. Jika kamu bisa, tahan 10 detik, namun jika tidak bisa jangan di paksakan Pegang saja bajumu.

Berdirilah membelakangi mejamu dengan bokong menempel pada sisi meja, kemudian letakkan telapak tanganmu di pinggir meja. Rapatkan kakimu tekuk siku, dan bawa badanmu turun. Tahan selama 10 detik, kemudian naik lagi. Ulangi 20 kali.

Duduk tegak di kursimu dan angkat kedua tanganmu. Genggam pergelangan tangan kananmu dengan tangan kiri dan tarik untuk meregangkan tubuh bagian kananmu. Tahan posisi ini selama 10 detik, sebelum kembali ke posisi semua. Lakukan hal yang sama dengan tangan lainnya dan ulangi masing-masing 5 kali tiap sisi.

Jika teman-teman malas melakukan hal tersebut dikarenakan tidak dapat mengatur waktu antara pekerjaan dan olahraga. teman-teman bisa menggunakan aplikasi ini untuk memandu teman-teman melakukan pemanasan atau peregangan otot yang terjadwal.

Aplikasi Sworkit - Workouts & Fitness Plans for Everyone

• Sworkit aplikasi pelatih pribadi olahraga yang mudah untuk digunakan dengan dukungan video instruktur agar memudahkan Anda untuk melakukan setiap gerakan. Fitur yang tersedia cukup lengkap untuk gerakan mulai peregangan, yoga, strength and cardio workouts.

• Video instruktur dapat anda stel dengan durasi yang Anda butuhkan. Ini memudahkan jika Anda memiliki sedikit waktu untuk aktifitas olahraga.

• Hanya 5 menit untuk lakukan olahraga secara rutin setiap hari dan itu sangat tidak menggangnggu kesibukan Anda. Anda dapat menambahkan durasi kapanpun Anda telah siap melakukan gerakan-gerakan tersebut untuk waktu yang lebih lama.