React Native State Dan Event

Meskipun Anda dapat mengganggap props sebagai argumen yang dapat digunakan untuk mengkonfigurasi bagaimana component dirender, state dapat dianggap seperti penyimpanan data pribadi dari sebuah component. State berguna untuk mengani data yang berubah seiring waktu atau yang berasal dari interaksi user.

Praktikum: State & Event

Latihan 1 :

1. Buat aplikasi dimana terdapat dua kucing lapar yang sedang menunggu untuk diberi makan. Rasa lapar mereka yang berubah seriring waktu akan disimpan ke dalam state. Untuk memberi makan kucing, Anda dapat menekan tombolnya – dimana akan memperbaharui state nya.
2. Anda dapat menambah state ke sebuah component dengan memanggil hook useState milik React. Hook adalah sejenis fungsi yang memungkinkan Anda “menghubungkan” fitur-fitur React.
3. Pada Latihan 2 ini, useState adalah Hook yang memungkinkan Anda menambah state ke dalam component function.

Langkah-Langkah dalam menyelesaikan Latihan 1:

Step 1:

Buka url https://expo.io/ dan login dengan Account Anda

Step 2:

Setelah masuk dashboard, klik Snack

Step 3:

Klik “New Snack” dengan nama “LatihanState1”

Step 4:

Pada file App.js, hapus semua source code yang ada

Step 5:

Pada Snack ketik perintah seperti yang ditampilkan pada slide berikutnya.

Kode program Latihan :

Latihan 2:

1. Buat aplikasi yang digunakan untuk menginput nama melalui TextInput, lalu hasilnya langsung ditampilkan Ketika user mengetik. Ketika user klik tombol submit, maka hasilnya ditampilkan via alert.
2. Tampilannya seperti dibawah ini

Langkah-Langkah dalam menyelesaikan Latihan 2:
Step 1:

Buka url https://expo.io/ dan login dengan Account Anda
Step 2:
Setelah masuk dashboard, klik Snack
Step 3:
Klik “New Snack” dengan nama “LatihanState2”
Step 4:
Pada file App.js, hapus semua source code yang ada
Step 5:
Pada Snack ketik perintah seperti yang ditampilkan pada slide berikutnya.

Kode program Latihan 2 :

Sumber Referensi : reactnative.dev