Sebelumnya

Berikutnya

Tambahkan status ke aplikasi

Selesai

React mengelola status dalam beberapa cara. Kami akan fokus pada salah satu cara utama, React Hooks.

Hook adalah mekanisme yang memungkinkan Anda mengakses pekerjaan bagian dalam React. Anda dapat menggunakan Hook untuk menjalankan kode saat sesuatu berubah dalam React. Atau gunakan untuk mendaftarkan sesuatu dengan React, seperti status. Ketika kita membuat status dengan menggunakan Hook useState, misalnya, kita mendapatkan objek status dan fungsi pembaruan untuk memperbarui nilai Hook.

Skenario

Salah satu teknik umum yang digunakan banyak juru masak adalah mise en place, yaitu dari bahasa Prancis "menempatkan di tempat." Juru masak memastikan semua barang disiapkan sebelum mereka mulai memasak.

Dalam aplikasi resep kami, kami ingin mengizinkan pengguna untuk mengetuk bahan untuk menandainya sebagai sudah disiapkan. Kita akan mulai dengan membuat status dan meneruskan informasi tampilan ke komponen. Di unit berikutnya, kita akan menjelajahi cara menangani peristiwa.

Tambahkan status

Objek JavaScript atau jenis data apa pun dapat didaftarkan sebagai stateful di React. Fungsi yang digunakan untuk mendaftarkan objek adalah useState. Fungsi useState menentukan nilai awal. Ini mengembalikan objek stateful yang baru dibuat dan fungsi lain yang dapat Anda gunakan untuk memperbarui nilai.

Catatan

Dalam React, status bersifat tetap, yang berarti tidak dapat diubah. Untuk mengubah nilai objek stateful, ganti dengan instans baru yang berisi nilai yang sesuai. Fungsi yang dikembalikan oleh useState mengelola proses ini.

1. Di VS Code Explorer, perluas folder src, lalu buka file App.jsx. Perhatikan objek initialRecipe yang ada. Kita akan menggunakan objek ini sebagai nilai default untuk recipe stateful kita.

2. Buat objek status recipe dan fungsi setRecipe dari useState. Untuk melakukannya, tambahkan kode berikut di bawah baris yang berbunyi, TODO: Create recipe state.

   const [ recipe, setRecipe ] = useState(initialRecipe);
   

   Dalam kode ini, recipe adalah objek stateful. Fungsi setRecipe ini akan digunakan untuk mengganti recipe dengan versi baru apa pun.

3. Kita dapat menggunakan recipe untuk meneruskan alat peraga ke komponen. Dalam kode berikut, RecipeTitle komponen akan digunakan untuk menampilkan judul dan umpan balik. Teruskan nilai title dan feedback ke dalam RecipeTitle dengan menambahkan kode berikut setelah komentar yang berbunyi, TODO: Pass recipe metadata to RecipeTitle.

   <RecipeTitle title={recipe.title} feedback={recipe.feedback} />
   

4. Buka file RecipeTitle.jsx. Perhatikan komponen yang ada yang menampilkan prop title dan feedback.

Menguji halaman

1. Simpan semua file.

2. Kembali ke browser Anda dan segarkan. Anda sekarang akan melihat metadata resep yang ditampilkan di halaman.

   

Lanjutkan