Pengertian Props dan State

 Menjelaskan Dari Beberapa Komponennya.

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

UI = f(data)

 jika ingin merubah UI maka rubahlah datanya.

Type data pada component react hanya ada dua yaitu Prop dan State.Dari sisi programming component react itu dibuat dengan function atau class, berikut contohnya:

 konsep dasarnya adalah :

1. Jika data berubah maka component berubah ( render ulang )
2. Ada 2 cara membuat component, functional component dan class component

Keduanya sama-sama baik.

Berikut beberapa perbedaanya:

•  functional component tidak memiliki state, itu sebabnya barang ini biasa disebut stateless component.
• Sedangkan class component bisa memiliki prop dan state.

2. Prop

Prop singkatan dari Property, 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’.

Functional Component

Class Component

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.

3. State

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. Berikut contohnya:

Cara kerja component ini sederhana :

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

1. Inisialisi state.
   Pada beberapa contoh inisialisasi di buat dengan menggunakan constructor().(cara yang simple)
2. Update State.
   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.
3. Read Component State.
   Untuk membaca state gunakan perintah this.state.keyName
4. Call Method.
   Semua perubahan state dilakukan di dalam method render()

Apakah component bisa 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 :

Berikut ada beberapa type componenet

yakni, Stateless dan Statefull.

1. Stateless Component — tidak memiliki state hanya prop. Umumnya component ini di buat dengan function karena codenya lebih ringkas
2. Statefull Component — memiliki state & props. Component ini dibuat dengan class. Kelebihan dari class component adalah memiliki lifecycle

Apakah setiap component wajib memiliki state atau props ?

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

Waktu yang tepat untuk menggunakan props atau state ?

Perubahan data pada props dan state akan merender ulang component.

• 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