Membuat Tampilan Interaktif Dengan State Reactjs - Universitas Safin Pati

 Hola Amigos!!!

Bertemu kembali bersama saya dalam blog yang membahas tentang Web Development menggunakan framework frontend React js. Kali ini kita akan belajar membuat tampilan interaktif dengan state. 

Apa sih state itu? 

State adalah data pribadi / private dari sebuah component. Data ini hanya tersedia untuk component tersebut dan tidak bisa di akses dari component lain. Berbeda dengan props yang bersifat read only, component dapat mengupdate state-nya sendiri, karena sifat dasar dari state adalah berubah. 

Lebih jelasnya kita akan Latihan dari file HelloWorld.js sebelumnya dan edit sintaknya menjadi seperti ini: 

file App.js:

Hasilnya:

Hasil ketika buttonnya diklik:

Keterangan Sintak diatas:

• Tahap pertama dalam penerapan state dalam suatu component, yaitu pengenalan / inisialisasi state yang dinyatakan dengan constructor.
• Constructor merupakan fungsi yang dipanggil Ketika suatu class digunakan dimanapun, dalam component HelloWorld, fungsi constructor akan mengambil props hanya sebagai argument yang dinyatakan oleh code constructor (props).
• Kemudian kita definisikan sebagai parent constructor yang dinyatakan oleh code super(props), dimana ini akan menjadi rujukan bagi setiap component. 
• Selanjutnya kita set data untuk state melalui code this.state yang mempunyai satu data dengan nama greeting yang memiliki nilai awal (default) adalah Hello. 

• Syntak diatas yaitu membuat tombol salam untuk unsur interaktifnya, dimana Ketika tombol Salam di klik (even onClick) akan menjalankan fungsi greet().

Berikut adalah beberapa perilaku state yang perlu di fahami: 

1. Inisialisasi state Umumnya, inisialisasi state dibuat didalam konstruktor(). 
2. Update State Untuk mengubah state, gunakan perintah this.setState(). Ketika state berubah, maka otomatis component di render ulang sebelum disajikan ke dalam layer. Agar proses render ulang tepat sasaran, maka harus di bind bisa juga menggunakan arrow function atau tanda panah. 
3. Read Componen State Untuk membaca State, gunakan peprintah dengan format this.state.name 
4. Call Method Semua perubahan state akan dilakukan didalam method render 

IT'S A WRAP!!! Akhirnya usai sudah pembahasan kita mengenai state. Terima kasih atas kunjungannya, sampai berjumpa kembali pada blog selanjutnya. SEE YOU AMIGOS!!! CIAO!!!

Nama: Gina Ferlindawati
NIM: 2022102004
Prodi: Teknik Informatika
Matkul: Advance Web Programming
Dosen: Sutrisno, M.Kom.