Skip to content

Commit af1f93a

Browse files
resir014r17x
andauthored
Apply suggestions from code review
Co-authored-by: RiN <ri7nz@evilfactory.id>
1 parent c4256cd commit af1f93a

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

src/content/learn/thinking-in-react.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@ Setelah Anda mengidentifikasi komponen-komponen dalam rancang bangun, susunlah k
7373

7474
## Langkah 2: Buat versi statis di React {/*step-2-build-a-static-version-in-react*/}
7575

76-
Setelah Anda memiliki hierarki komponen, sekarang saatnya mengimplementasikan aplikasi Anda. Pendekatan yang paling mudah adalah membuat versi yang merender UI dari model data Anda tanpa menambahkan interaktivitas apa pun... untuk sementara! Sering kali lebih mudah untuk membuat versi statis terlebih dahulu dan menambahkan interaktivitas kemudian. Membangun versi statis membutuhkan banyak pengetikan dan tidak perlu berpikir, tetapi menambahkan interaktivitas membutuhkan banyak pemikiran dan tidak perlu banyak pengetikan.
76+
Setelah Anda memiliki hierarki komponen, sekarang saatnya mengimplementasikan aplikasi Anda. Pendekatan yang paling mudah adalah membuat versi yang me-*render* UI dari model data Anda tanpa menambahkan interaktivitas apa pun... untuk sementara! Sering kali lebih mudah untuk membuat versi statis terlebih dahulu dan menambahkan interaktivitas kemudian. Membangun versi statis membutuhkan banyak pengetikan dan tidak perlu berpikir, tetapi menambahkan interaktivitas membutuhkan banyak pemikiran dan tidak perlu banyak pengetikan.
7777

78-
Untuk membuat versi statis dari aplikasi Anda yang merender model data Anda, Anda perlu membuat [komponen](/learn/your-first-component) yang menggunakan kembali komponen lain dan mengirimkan data menggunakan [props.](/learn/passing-props-to-a-component) Props adalah cara untuk mengoper data dari induk ke anak. (Jika Anda sudah terbiasa dengan konsep [state](/learn/state-a-components-memory), jangan gunakan state sama sekali untuk membangun versi statis ini. State hanya diperuntukkan bagi interaktivitas, yaitu data yang berubah seiring waktu. Karena ini adalah versi statis dari aplikasi, Anda tidak memerlukannya).
78+
Untuk membuat versi statis dari aplikasi Anda yang me-*render* model data Anda, Anda perlu membuat [komponen](/learn/your-first-component) yang menggunakan kembali komponen lain dan mengirimkan data menggunakan [props.](/learn/passing-props-to-a-component) Props adalah cara untuk mengoper data dari induk ke anak. (Jika Anda sudah terbiasa dengan konsep [state](/learn/state-a-components-memory), jangan gunakan state sama sekali untuk membangun versi statis ini. State hanya diperuntukkan bagi interaktivitas, yaitu data yang berubah seiring waktu. Karena ini adalah versi statis dari aplikasi, Anda tidak memerlukannya).
7979

8080
Anda bisa membangun "dari atas ke bawah" dengan memulai membangun komponen yang lebih tinggi dalam hierarki (seperti `FilterableProductTable`) atau "dari bawah ke atas" dengan bekerja dari komponen yang lebih rendah (seperti `ProductRow`). Dalam contoh yang lebih sederhana, biasanya lebih mudah untuk bekerja dari atas ke bawah, dan pada proyek yang lebih besar, lebih mudah untuk bekerja dari bawah ke atas.
8181

@@ -197,7 +197,7 @@ td {
197197

198198
(Jika kode ini terlihat menyeramkan, bacalah [Quick Start](/learn/) terlebih dahulu!)
199199

200-
Setelah membuat komponen, Anda akan memiliki pustaka komponen yang dapat digunakan kembali untuk merender model data Anda. Karena ini adalah aplikasi statis, komponen-komponennya hanya akan mengembalikan JSX. Komponen di bagian atas hirarki (`FilterableProductTable`) akan mengambil model data Anda sebagai props. Ini disebut _aliran data satu arah (one-way data flow)_ karena data mengalir turun dari komponen tingkat atas ke komponen di bagian bawah pohon.
200+
Setelah membuat komponen, Anda akan memiliki pustaka komponen yang dapat digunakan kembali untuk me-*render* model data Anda. Karena ini adalah aplikasi statis, komponen-komponennya hanya akan mengembalikan JSX. Komponen di bagian atas hirarki (`FilterableProductTable`) akan mengambil model data Anda sebagai *props*. Ini disebut *aliran data satu arah (one-way data flow)* karena data mengalir turun dari komponen tingkat atas ke komponen di bagian bawah pohon.
201201

202202
<Pitfall>
203203

@@ -254,12 +254,12 @@ Setelah mengidentifikasi data state minimal aplikasi Anda, Anda perlu mengidenti
254254

255255
Untuk setiap bagian state dalam aplikasi Anda:
256256

257-
1. Identifikasi *setiap* komponen yang merender sesuatu berdasarkan state tersebut.
257+
1. Identifikasi *setiap* komponen yang me-*render* sesuatu berdasarkan *state* tersebut.
258258
2. Temukan komponen induk yang paling dekat--komponen yang berada di atas semua komponen dalam hirarki.
259-
3. Tentukan di mana state tersebut harus berada:
260-
1. Sering kali, Anda dapat meletakkan state secara langsung ke dalam induknya.
261-
2. Anda juga dapat menempatkan state ke dalam beberapa komponen di atas induknya.
262-
3. Jika Anda tidak dapat menemukan komponen yang masuk akal untuk memiliki state, buatlah komponen baru hanya untuk menyimpan state dan tambahkan di suatu tempat di dalam hirarki di atas komponen induk umum.
259+
3. Tentukan di mana *state* tersebut harus berada:
260+
1. Sering kali, Anda dapat meletakkan *state* secara langsung ke dalam induknya.
261+
2. Anda juga dapat menempatkan *state* ke dalam beberapa komponen di atas induknya.
262+
3. Jika Anda tidak dapat menemukan komponen yang masuk akal untuk memiliki *state*, buatlah komponen baru hanya untuk menyimpan *state* dan tambahkan di suatu tempat di dalam hirarki di atas komponen induk umum.
263263

264264
Pada langkah sebelumnya, Anda menemukan dua bagian status dalam aplikasi ini: teks input pencarian, dan nilai kotak centang. Dalam contoh ini, keduanya selalu muncul bersamaan, sehingga masuk akal untuk meletakkannya di tempat yang sama.
265265

@@ -445,7 +445,7 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T
445445
446446
</ConsoleBlock>
447447
448-
Pada *sandbox* di atas, `ProductTable` dan `SearchBar` membaca props `filterText` dan `inStockOnly` untuk merender tabel, input, dan kotak centang. Sebagai contoh, berikut ini cara `SearchBar` mengisi nilai input:
448+
Pada *sandbox* di atas, `ProductTable` dan `SearchBar` membaca props `filterText` dan `inStockOnly` untuk me-*render* tabel, input, dan kotak centang. Sebagai contoh, berikut ini cara `SearchBar` mengisi nilai input:
449449
450450
```js {1,6}
451451
function SearchBar({ filterText, inStockOnly }) {

0 commit comments

Comments
 (0)