diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index c88ae3796..ac56005a3 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -1,30 +1,30 @@ --- -title: Managing State +title: Mengelola State --- -As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. In this chapter, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components. +Seiring berkembangnya aplikasi Anda, penting untuk memperhatikan bagaimana *state* Anda diatur dan memperhatikan bagaimana data mengalir diantara komponen-komponen yang ada. *State* yang redundan atau duplikat adalah sumber dari *bug* dikemudian hari. Dalam babak ini, Anda akan belajar bagaimana menata *state* dengan baik, bagaimana menjaga logika pembaruan *state* agar mudah dikelola, dan bagaimana Anda dapat berbagi *state* dengan komponen yang berjauhan. -* [How to think about UI changes as state changes](/learn/reacting-to-input-with-state) -* [How to structure state well](/learn/choosing-the-state-structure) -* [How to "lift state up" to share it between components](/learn/sharing-state-between-components) -* [How to control whether the state gets preserved or reset](/learn/preserving-and-resetting-state) -* [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer) -* [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context) -* [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context) +* [Bagaimana memikirkan perubahan UI sebagai perubahan *state*](/learn/reacting-to-input-with-state) +* [Bagaimana mengatur *state* dengan baik](/learn/choosing-the-state-structure) +* [Bagaimana "menjunjung *state*" untuk dibagikan ke komponen lain](/learn/sharing-state-between-components) +* [Bagaimana menentukan apakah *state* akan dipertahankan atau dimusnahkan](/learn/preserving-and-resetting-state) +* [Bagaimana menggabungkan logika *state* yang kompleks dalam sebuah fungsi](/learn/extracting-state-logic-into-a-reducer) +* [Bagaimana mengirimkan informasi tanpa "*prop drilling*"](/learn/passing-data-deeply-with-context) +* [Bagaimana meningkatkan manajemen *state* saat aplikasi masih dikembangkan](/learn/scaling-up-with-reducer-and-context) -## Reacting to input with state {/*reacting-to-input-with-state*/} +## Merespon masukan dengan *State* {/*reacting-to-input-with-state*/} -With React, you won't modify the UI from code directly. For example, you won't write commands like "disable the button", "enable the button", "show the success message", etc. Instead, you will describe the UI you want to see for the different visual states of your component ("initial state", "typing state", "success state"), and then trigger the state changes in response to user input. This is similar to how designers think about UI. +Dalam React, Anda tidak perlu mengubah kode secara langsung untuk mengubah antar muka (UI). Misalnya, menulis baris perintah "nonaktifkan tombol ketika", "aktifkan tombol ketika", "tampilkan pesan sukses ketika", dll disetiap baris. Melainkan, cukup menggambarkan antar muka yang ingin ditampilkan sebagai *states* visual dari komponen Anda ("*state* awal", "*state* mengetik", "*state* sukses"), dan kemudian memicu perubahan *state* sebagai respons terhadap masukan pengguna. Sekilas mirip dengan bagaimana desainer merencanakan antar muka. -Here is a quiz form built using React. Note how it uses the `status` state variable to determine whether to enable or disable the submit button, and whether to show the success message instead. +Berikut contoh formulir kuis yang dibangun menggunakan React. Perhatikan bagaimana ia menggunakan variabel *state* `status` untuk menentukan apakah tombol kirim diaktifkan atau dinonaktifkan, dan apakah pesan sukses ditampilkan sebagai gantinya. @@ -37,7 +37,7 @@ export default function Form() { const [status, setStatus] = useState('typing'); if (status === 'success') { - return

That's right!

+ return

Itu Benar!

} async function handleSubmit(e) { @@ -58,9 +58,9 @@ export default function Form() { return ( <> -

City quiz

+

Kuis Kota

- In which city is there a billboard that turns air into drinkable water? + Di kota manakah terdapat papan reklame yang mengubah udara menjadi air minum?