You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/managing-state.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,7 @@ Seiring berkembangnya aplikasi Anda, penting untuk memperhatikan bagaimana *stat
20
20
21
21
</YouWillLearn>
22
22
23
-
## Merespon masukan dengan *State* {/*reacting-to-input-with-state*/}
23
+
## Merespon masukan dengan state {/*reacting-to-input-with-state*/}
24
24
25
25
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.
26
26
@@ -86,7 +86,7 @@ export default function Form() {
86
86
}
87
87
88
88
functionsubmitForm(answer) {
89
-
//Pretend it's hitting the network.
89
+
//Anggap kode ini melakukan *request* ke jaringan.
90
90
returnnewPromise((resolve, reject) => {
91
91
setTimeout(() => {
92
92
let shouldError =answer.toLowerCase() !=='lima'
@@ -112,7 +112,7 @@ Baca **[Reacting to Input with State](/learn/reacting-to-input-with-state)** unt
112
112
113
113
</LearnMore>
114
114
115
-
## Memilih Struktur *State* {/*choosing-the-state-structure*/}
115
+
## Memilih struktur state {/*choosing-the-state-structure*/}
116
116
117
117
Mengatur struktur *state* dengan baik dapat membuat perbedaan antara komponen yang mudah dimodifikasi dan didebug, dan komponen yang selalu menjadi sumber kesalahan. Perlu dicatat bahwa *state* tidak boleh mengandung informasi yang tidak perlu atau duplikat. Karena jika ada *state* yang tidak perlu, mudah untuk lupa memperbarui *state* tersebut, yang akhirnya memperkenalkan masalah baru!
118
118
@@ -229,7 +229,7 @@ Baca **[Choosing the State Structure](/learn/choosing-the-state-structure)** unt
## Berbagi state antar komponen {/*sharing-state-between-components*/}
233
233
234
234
Terkadang, Anda ingin *state* dari dua komponen yang berbeda selalu berubah bersama. Untuk melakukannya, hapus *state* dari keduanya, pindahkan *state* tersebut ke bagian induk (*parent*) yang paling berdekatan, dan kemudian teruskan ke kedua komponen melalui *props*. Hal ini dikenal sebagai "menjunjung *state*" (*lifting state up*), dan ini adalah salah satu hal lumrah saat menulis kode React.
## Mempertahankan dan Mengatur Ulang *State* {/*preserving-and-resetting-state*/}
303
+
## Mempertahankan dan mengatur ulang state {/*preserving-and-resetting-state*/}
304
304
305
305
Saat Anda me-*render* ulang sebuah komponen, React perlu memutuskan bagian pohon mana yang dipertahankan (dan diperbarui), serta bagian mana yang harus dibuang atau dibuat kembali dari awal. Pada kebanyakan kasus, perilaku otomatis React ini sudah cukup baik. Secara *default*, React akan mempertahankan bagian-bagian pohon yang "cocok" dengan struktur pohon yang sebelumnya telah di-*render*.
306
306
@@ -500,7 +500,7 @@ Baca **[Preserving and Resetting State](/learn/preserving-and-resetting-state)**
500
500
501
501
</LearnMore>
502
502
503
-
## Mengekstrak logika *State* ke dalam *Reducer* {/*extracting-state-logic-into-a-reducer*/}
503
+
## Mengekstrak logika state ke dalam reducer {/*extracting-state-logic-into-a-reducer*/}
504
504
505
505
Komponen dengan banyak pembaruan *state* yang tersebar di banyak *event handler* dapat menjadi sangat membingungkan. Untuk kasus-kasus ini, Anda dapat mengkonsolidasikan semua logika pembaruan *state* di luar komponen Anda dalam sebuah fungsi tunggal, yang disebut "*reducer*". *Event handler* Anda menjadi lebih ringkas karena hanya menentukan "aksi" pengguna. Di bagian bawah file, fungsi reducer menentukan bagaimana *state* harus diperbarui sebagai respons terhadap setiap aksi!
506
506
@@ -697,7 +697,7 @@ Baca **[Extracting State Logic into a Reducer](/learn/extracting-state-logic-int
697
697
698
698
</LearnMore>
699
699
700
-
## Melewatkan data secara dalam dengan *Context* {/*passing-data-deeply-with-context*/}
700
+
## Melewatkan data secara dalam dengan context {/*passing-data-deeply-with-context*/}
701
701
702
702
Biasanya, Anda akan melewatkan informasi dari komponen induk ke komponen anak (*children*) melalui *props*. Namun, melewatkan *props* dapat menjadi merepotkan jika Anda perlu melewatkan beberapa *prop* melalui banyak komponen, atau jika banyak komponen membutuhkan informasi yang sama. *Context* memungkinkan komponen induk membuat beberapa informasi tersedia untuk setiap komponen di bawahnya—tidak peduli seberapa dalam itu—tanpa melewatkan secara eksplisit melalui *props*.
703
703
@@ -799,7 +799,7 @@ Baca **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-contex
799
799
800
800
</LearnMore>
801
801
802
-
## Peningkatan Skala dengan Reducer dan Context {/*scaling-up-with-reducer-and-context*/}
802
+
## Peningkatan skala dengan reducer dan context {/*scaling-up-with-reducer-and-context*/}
803
803
804
804
*Reducer* memungkinkan Anda mengonsolidasikan logika pembaruan *state* dari sebuah komponen. *Context* memungkinkan Anda melewatkan informasi ke komponen lain secara dalam. Anda dapat menggabungkan *reducer* dan *context* bersama-sama untuk mengelola *state* dari layar yang kompleks.
0 commit comments