From 726e69851f88725febef9aef786b1597f3062ffc Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Sat, 29 Apr 2023 17:57:35 +0700 Subject: [PATCH 01/30] docs: translate title and intro --- src/content/learn/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index b57655bc4..d8bf79a18 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -1,10 +1,10 @@ --- -title: Quick Start +title: Mulai Cepat --- -Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis. +Selamat datang di dokumentasi React! Halaman ini akan memberikan Anda pengenalan tentang 80% konsep React yang akan Anda gunakan sehari-hari. From c9c0b274cddbfe912994ed06ae6c2ca5c38890e8 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Sat, 29 Apr 2023 18:13:33 +0700 Subject: [PATCH 02/30] docs: translate you will learn (toc) --- src/content/learn/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index d8bf79a18..cc2b3ee5a 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -10,12 +10,12 @@ Selamat datang di dokumentasi React! Halaman ini akan memberikan Anda pengenalan -- How to create and nest components -- How to add markup and styles -- How to display data -- How to render conditions and lists -- How to respond to events and update the screen -- How to share data between components +- Cara membuat dan menyarangkan (*nest*) komponen-komponen +- Cara menambahkan *markup* dan penggayaan (*styles*) +- Cara menampilkan data +- Cara me-render kondisi dan daftar (*lists*) +- Cara merespons *events* dan memperbarui layar +- Cara berbagi data antar komponen From 0fc8feabefac7d7ebaad53a10986f526745e975e Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Sat, 29 Apr 2023 18:20:40 +0700 Subject: [PATCH 03/30] docs: use me-*render* --- src/content/learn/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index cc2b3ee5a..f261e7886 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -13,7 +13,7 @@ Selamat datang di dokumentasi React! Halaman ini akan memberikan Anda pengenalan - Cara membuat dan menyarangkan (*nest*) komponen-komponen - Cara menambahkan *markup* dan penggayaan (*styles*) - Cara menampilkan data -- Cara me-render kondisi dan daftar (*lists*) +- Cara me-*render* kondisi dan daftar (*lists*) - Cara merespons *events* dan memperbarui layar - Cara berbagi data antar komponen From a2917c6fdc0929f439ee14c5d8d319e70a0306d6 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 03:20:56 +0700 Subject: [PATCH 04/30] docs(quick-start): creating and nesting components --- src/content/learn/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index f261e7886..979f820b9 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -19,16 +19,16 @@ Selamat datang di dokumentasi React! Halaman ini akan memberikan Anda pengenalan -## Creating and nesting components {/*components*/} +## Membuat dan menyarangkan (nesting) komponen {/*components*/} -React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. +Aplikasi React dibuat dari *komponen*. Komponen adalah bagian dari UI (*user interface*, antarmuka pengguna) yang memiliki logika dan tampilan tersendiri. Sebuah komponen dapat berukuran sekecil tombol, atau sebesar seluruh halaman. -React components are JavaScript functions that return markup: +Komponen React adalah fungsi JavaScript yang mengembalikan *markup*: ```js function MyButton() { return ( - + ); } ``` From 65f9bd6912503fe1014da9cb225851b0b3e551d6 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 03:25:51 +0700 Subject: [PATCH 05/30] docs(quick-start): creating and nesting components --- src/content/learn/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 979f820b9..35b3b2382 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -33,13 +33,13 @@ function MyButton() { } ``` -Now that you've declared `MyButton`, you can nest it into another component: +Sekarang setelah Anda mendeklarasikan `MyButton`, Anda dapat menyarangkannya dengan komponen lain: ```js {5} export default function MyApp() { return (
-

Welcome to my app

+

Selamat datang di aplikasi saya

); From 17d2bd13a67f0e8f5e996fc965b4a896f473ba63 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 03:29:39 +0700 Subject: [PATCH 06/30] docs(quick-start): creating and nesting components --- src/content/learn/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 35b3b2382..ee5ce8a99 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -46,9 +46,9 @@ export default function MyApp() { } ``` -Notice that `` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase. +Perhatikan bahwa `` dimulai dengan huruf kapital. Dengan cara itulah Anda mengetahui bahwa itu adalah sebuah komponen React. Nama komponen React harus selalu dimulai dengan huruf kapital, sedangkan *tag* HTML harus menggunakan huruf kecil. -Have a look at the result: +Lihatlah hasilnya: From 3720fb99f271afda9c1b08a455be6d964580c5f3 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 03:33:44 +0700 Subject: [PATCH 07/30] docs(quick-start): creating and nesting components --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index ee5ce8a99..ca6899117 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -56,7 +56,7 @@ Lihatlah hasilnya: function MyButton() { return ( ); } @@ -64,7 +64,7 @@ function MyButton() { export default function MyApp() { return (
-

Welcome to my app

+

Selamat datang di aplikasi saya

); @@ -73,7 +73,7 @@ export default function MyApp() { -The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references. +Kata kunci `export default` menentukan komponen utama di dalam berkas (*file*). Jika Anda tidak terbiasa dengan beberapa bagian dari sintaksis JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) dan [javascript.info] (https://javascript.info/import-export) memiliki referensi yang bagus. ## Writing markup with JSX {/*writing-markup-with-jsx*/} From 55dc58b4fb713ff3b1bc05b0adbab3c399f39175 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 03:56:16 +0700 Subject: [PATCH 08/30] docs(quick-start): next steps --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index ca6899117..5be725a7b 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -531,8 +531,8 @@ button { -## Next Steps {/*next-steps*/} +## Langkah Selanjutnya {/*next-steps*/} -By now, you know the basics of how to write React code! +Sekarang, Anda telah mengetahui dasar-dasar cara menulis kode React! -Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React. +Lihat [Tutorial](/learn/tutorial-tic-tac-toe) untuk mempraktikkannya dan membangun aplikasi mini pertama Anda dengan React. From 8ce4d776c00201e396b652da4e6944eab2a84cd0 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 22:07:49 +0700 Subject: [PATCH 09/30] docs(quick-start): translate writing markup with jsx --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 5be725a7b..0b47bd616 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -75,11 +75,11 @@ export default function MyApp() { Kata kunci `export default` menentukan komponen utama di dalam berkas (*file*). Jika Anda tidak terbiasa dengan beberapa bagian dari sintaksis JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) dan [javascript.info] (https://javascript.info/import-export) memiliki referensi yang bagus. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Menulis markup dengan JSX {/*writing-markup-with-jsx*/} -The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box. +Sintaksis markup yang Anda lihat di atas disebut dengan *JSX*. JSX ini opsional, tetapi sebagian besar proyek React menggunakan JSX untuk kenyamanannya. Semua [alat yang kami rekomendasikan untuk pengembangan lokal] (/learn/installation) mendukung JSX secara langsung. -JSX is stricter than HTML. You have to close tags like `
`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `
...
` or an empty `<>...` wrapper: +JSX lebih ketat daripada HTML. Anda harus menutup tag seperti `
`. Komponen Anda juga tidak boleh mengembalikan beberapa tag JSX. Anda harus membungkusnya menjadi induk bersama (*shared parent*), seperti `
...
` atau sebuah pembungkus kosong `<>...`: ```js {3,6} function AboutPage() { From f22a76d28b09ab2c077491db3022402403f6cb93 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 22:19:42 +0700 Subject: [PATCH 10/30] docs(quick-start): writing markup with jsx --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 0b47bd616..6b7e03d1b 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -85,14 +85,14 @@ JSX lebih ketat daripada HTML. Anda harus menutup tag seperti `
`. Komponen function AboutPage() { return ( <> -

About

-

Hello there.
How do you do?

+

Tentang

+

Halo.
Apa kabar?

); } ``` -If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx) +Jika Anda memiliki banyak HTML untuk di-*porting* ke JSX, Anda dapat menggunakan [konverter online.](https://transform.tools/html-to-jsx). ## Adding styles {/*adding-styles*/} From c24f91757b9839bcfbcd76fb94a23220fe0c6710 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 22:26:58 +0700 Subject: [PATCH 11/30] docs(quick-start): adding styles --- src/content/learn/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 6b7e03d1b..109919759 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -94,24 +94,24 @@ function AboutPage() { Jika Anda memiliki banyak HTML untuk di-*porting* ke JSX, Anda dapat menggunakan [konverter online.](https://transform.tools/html-to-jsx). -## Adding styles {/*adding-styles*/} +## Menambahkan styles {/*adding-styles*/} -In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute: +Di React, Anda menentukan kelas (*class*) CSS dengan `className`. Ini bekerja dengan cara yang sama seperti atribut HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class): ```js ``` -Then you write the CSS rules for it in a separate CSS file: +Kemudian Anda menulis aturan CSS untuk itu di dalam berkas CSS terpisah: ```css -/* In your CSS */ +/* Di dalam CSS Anda */ .avatar { border-radius: 50%; } ``` -React does not prescribe how you add CSS files. In the simplest case, you'll add a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project. +React tidak mengatur (*prescribe*) bagaimana cara Anda menambahkan berkas CSS. Di dalam kasus yang paling sederhana, Anda akan menambahkan tag [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) ke HTML Anda. Jika Anda menggunakan *build tool* atau *framework*, bacalah dokumentasinya untuk mempelajari bagaimana cara menambahkan berkas CSS ke dalam proyek Anda. ## Displaying data {/*displaying-data*/} From b67755f86fdb87979abd94ff651e2eabec61239a Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 22:39:42 +0700 Subject: [PATCH 12/30] docs(quick-start): displaying data --- src/content/learn/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 109919759..3a26026ac 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -113,9 +113,9 @@ Kemudian Anda menulis aturan CSS untuk itu di dalam berkas CSS terpisah: React tidak mengatur (*prescribe*) bagaimana cara Anda menambahkan berkas CSS. Di dalam kasus yang paling sederhana, Anda akan menambahkan tag [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) ke HTML Anda. Jika Anda menggunakan *build tool* atau *framework*, bacalah dokumentasinya untuk mempelajari bagaimana cara menambahkan berkas CSS ke dalam proyek Anda. -## Displaying data {/*displaying-data*/} +## Menampilkan data {/*displaying-data*/} -JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`: +JSX memungkinkan Anda memasukkan *markup* ke dalam JavaScript. Kurung kurawal (*curly braces*) memungkinkan Anda "melarikan diri" (*escape back*) ke dalam JavaScript sehingga Anda dapat menyematkan (*embed*) beberapa variabel dari kode Anda dan menampilkannya kepada pengguna. Sebagai contoh, ini akan menampilkan `user.name`: ```js {3} return ( From 60c84046b850b055fe1dffa0c36bb88b3cc9e34c Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Mon, 1 May 2023 22:43:45 +0700 Subject: [PATCH 13/30] docs(quick-start): writing markup with jsx: revise porting --- src/content/learn/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 3a26026ac..511efe704 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -92,7 +92,7 @@ function AboutPage() { } ``` -Jika Anda memiliki banyak HTML untuk di-*porting* ke JSX, Anda dapat menggunakan [konverter online.](https://transform.tools/html-to-jsx). +Jika Anda memiliki banyak HTML untuk dipindahkan (*port*) ke JSX, Anda dapat menggunakan [konverter online.](https://transform.tools/html-to-jsx). ## Menambahkan styles {/*adding-styles*/} From 0e4b9c14d4365d9d54babc6c58656cfc41ea245d Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Sun, 7 May 2023 19:55:32 +0700 Subject: [PATCH 14/30] docs(quick-start): displaying data --- src/content/learn/index.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 511efe704..cc57b4a34 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -115,7 +115,7 @@ React tidak mengatur (*prescribe*) bagaimana cara Anda menambahkan berkas CSS. D ## Menampilkan data {/*displaying-data*/} -JSX memungkinkan Anda memasukkan *markup* ke dalam JavaScript. Kurung kurawal (*curly braces*) memungkinkan Anda "melarikan diri" (*escape back*) ke dalam JavaScript sehingga Anda dapat menyematkan (*embed*) beberapa variabel dari kode Anda dan menampilkannya kepada pengguna. Sebagai contoh, ini akan menampilkan `user.name`: +JSX memungkinkan Anda memasukkan *markup* ke dalam JavaScript. Kurung kurawal (*curly braces*) memungkinkan Anda "kembali" (*escape back*) ke dalam JavaScript sehingga Anda dapat menanamkan (*embed*) beberapa variabel dari kode Anda dan menampilkannya kepada pengguna. Sebagai contoh, ini akan menampilkan `user.name`: ```js {3} return ( @@ -127,6 +127,8 @@ return ( You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute: +Anda juga dapat "kembali ke JavaScript" dari atribut JSX, tetapi Anda harus menggunakan tanda kurung kurawal *daripada* tanda kutip (*quotes*). Sebagai contoh, `className="avatar"` meneruskan *string* `"avatar"` sebagai kelas CSS (*CSS class*), tetapi `src={user.imageUrl}` membaca nilai variabel JavaScript `user.imageUrl`, dan kemudian meneruskan nilai tersebut sebagai atribut `src`: + ```js {3,4} return ( @@ -154,7 +156,7 @@ export default function Profile() { {'Photo -In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables. +Pada contoh di atas, `style={{}}` bukanlah sintaksis khusus, melainkan objek `{}` biasa di dalam kurung kurawal JSX. Anda dapat menggunakan atribut `style` ketika *styles* Anda bergantung pada variabel JavaScript. ## Conditional rendering {/*conditional-rendering*/} From 1e760c69755c85ae7bc9fbf6a4691f01ee4038da Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Tue, 9 May 2023 16:52:35 +0700 Subject: [PATCH 15/30] docs(quick-start): conditional rendering --- src/content/learn/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index cc57b4a34..1172953b1 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -181,9 +181,9 @@ export default function Profile() { Pada contoh di atas, `style={{}}` bukanlah sintaksis khusus, melainkan objek `{}` biasa di dalam kurung kurawal JSX. Anda dapat menggunakan atribut `style` ketika *styles* Anda bergantung pada variabel JavaScript. -## Conditional rendering {/*conditional-rendering*/} +## Pe-render-an secara kondisional {/*conditional-rendering*/} -In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX: +Di dalam React, tidak ada sintaksis khusus untuk menulis kondisi. Sebagai gantinya, Anda akan menggunakan teknik yang sama dengan yang Anda gunakan saat menulis kode JavaScript biasa. Sebagai contoh, Anda dapat menggunakan pernyataan (*statement*) [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) untuk menyertakan JSX secara kondisional: ```js let content; @@ -199,7 +199,7 @@ return ( ); ``` -If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX: +Jika Anda lebih menyukai kode yang lebih ringkas, Anda dapat menggunakan [operator kondisional `?`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Tidak seperti `if`, operator ini bekerja di dalam JSX: ```js
@@ -211,7 +211,7 @@ If you prefer more compact code, you can use the [conditional `?` operator.](htt
``` -When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): +Ketika Anda tidak membutuhkan cabang (*branch*) `lain`, Anda juga dapat menggunakan sintaksis [logika `&&` yang lebih pendek](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): ```js
@@ -219,7 +219,7 @@ When you don't need the `else` branch, you can also use a shorter [logical `&&`
``` -All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`. +Semua pendekatan ini juga dapat digunakan untuk menentukan atribut secara kondisional. Jika Anda tidak terbiasa dengan beberapa sintaksis JavaScript ini, Anda dapat memulai dengan selalu menggunakan `if...else`. ## Rendering lists {/*rendering-lists*/} From ee6210887cfa2df0db44eb20da8f58e899d1c761 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 16:05:08 +0700 Subject: [PATCH 16/30] docs(quick-start): markup and styles --- src/content/learn/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 1172953b1..fa63dc9c7 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -11,7 +11,7 @@ Selamat datang di dokumentasi React! Halaman ini akan memberikan Anda pengenalan - Cara membuat dan menyarangkan (*nest*) komponen-komponen -- Cara menambahkan *markup* dan penggayaan (*styles*) +- Cara menambahkan *markup* dan *styles* - Cara menampilkan data - Cara me-*render* kondisi dan daftar (*lists*) - Cara merespons *events* dan memperbarui layar @@ -77,7 +77,7 @@ Kata kunci `export default` menentukan komponen utama di dalam berkas (*file*). ## Menulis markup dengan JSX {/*writing-markup-with-jsx*/} -Sintaksis markup yang Anda lihat di atas disebut dengan *JSX*. JSX ini opsional, tetapi sebagian besar proyek React menggunakan JSX untuk kenyamanannya. Semua [alat yang kami rekomendasikan untuk pengembangan lokal] (/learn/installation) mendukung JSX secara langsung. +Sintaksis *markup* yang Anda lihat di atas disebut dengan *JSX*. JSX ini opsional, tetapi sebagian besar proyek React menggunakan JSX untuk kenyamanannya. Semua [alat yang kami rekomendasikan untuk pengembangan lokal] (/learn/installation) mendukung JSX secara langsung. JSX lebih ketat daripada HTML. Anda harus menutup tag seperti `
`. Komponen Anda juga tidak boleh mengembalikan beberapa tag JSX. Anda harus membungkusnya menjadi induk bersama (*shared parent*), seperti `
...
` atau sebuah pembungkus kosong `<>...`: From dcaa21690632898bbd742ce430b25fc1fc968fb7 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 16:08:50 +0700 Subject: [PATCH 17/30] docs(quick-start): tag and tags --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index fa63dc9c7..52f5f365f 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -79,7 +79,7 @@ Kata kunci `export default` menentukan komponen utama di dalam berkas (*file*). Sintaksis *markup* yang Anda lihat di atas disebut dengan *JSX*. JSX ini opsional, tetapi sebagian besar proyek React menggunakan JSX untuk kenyamanannya. Semua [alat yang kami rekomendasikan untuk pengembangan lokal] (/learn/installation) mendukung JSX secara langsung. -JSX lebih ketat daripada HTML. Anda harus menutup tag seperti `
`. Komponen Anda juga tidak boleh mengembalikan beberapa tag JSX. Anda harus membungkusnya menjadi induk bersama (*shared parent*), seperti `
...
` atau sebuah pembungkus kosong `<>...`: +JSX lebih ketat daripada HTML. Anda harus menutup *tag* seperti `
`. Komponen Anda juga tidak boleh mengembalikan beberapa *tag* JSX. Anda harus membungkusnya menjadi induk bersama (*shared parent*), seperti `
...
` atau sebuah pembungkus kosong `<>...`: ```js {3,6} function AboutPage() { @@ -111,7 +111,7 @@ Kemudian Anda menulis aturan CSS untuk itu di dalam berkas CSS terpisah: } ``` -React tidak mengatur (*prescribe*) bagaimana cara Anda menambahkan berkas CSS. Di dalam kasus yang paling sederhana, Anda akan menambahkan tag [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) ke HTML Anda. Jika Anda menggunakan *build tool* atau *framework*, bacalah dokumentasinya untuk mempelajari bagaimana cara menambahkan berkas CSS ke dalam proyek Anda. +React tidak mengatur (*prescribe*) bagaimana cara Anda menambahkan berkas CSS. Di dalam kasus yang paling sederhana, Anda akan menambahkan *tag* [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) ke HTML Anda. Jika Anda menggunakan *build tool* atau *framework*, bacalah dokumentasinya untuk mempelajari bagaimana cara menambahkan berkas CSS ke dalam proyek Anda. ## Menampilkan data {/*displaying-data*/} @@ -458,7 +458,7 @@ function MyButton() { ``` -Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: +Kemudian, *oper state ke bawah* dari `MyApp` ke setiap `MyButton`, bersama dengan penangan klik bersama (*shared click handler*). Anda dapat mengoper informasi ke `MyButton` menggunakan kurung kurawal JSX, seperti yang sebelumnya Anda lakukan dengan *tag* bawaan seperti ``: ```js {11-12} export default function MyApp() { From 845b64239afe8f52f698e9370274f3fc943ee3c3 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 16:41:33 +0700 Subject: [PATCH 18/30] docs(quick-start): rendering lists --- src/content/learn/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 52f5f365f..f7fcb8ca4 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -221,17 +221,17 @@ Ketika Anda tidak membutuhkan cabang (*branch*) `lain`, Anda juga dapat mengguna Semua pendekatan ini juga dapat digunakan untuk menentukan atribut secara kondisional. Jika Anda tidak terbiasa dengan beberapa sintaksis JavaScript ini, Anda dapat memulai dengan selalu menggunakan `if...else`. -## Rendering lists {/*rendering-lists*/} +## Me-render daftar (*lists*) {/*rendering-lists*/} -You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components. +Anda akan mengandalkan fitur JavaScript seperti perulangan [`for`] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) dan [fungsi senarai (*array*) `map()`] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) untuk me-render daftar komponen. -For example, let's say you have an array of products: +Sebagai contoh, katakanlah Anda memiliki serangkaian (*array*) produk: ```js const products = [ - { title: 'Cabbage', id: 1 }, - { title: 'Garlic', id: 2 }, - { title: 'Apple', id: 3 }, + { title: 'Kubis', id: 1 }, + { title: 'Bawang Putih', id: 2 }, + { title: 'Apel', id: 3 }, ]; ``` From b2d32a9c980c7d2256294535aa8014c975f0a119 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 16:47:36 +0700 Subject: [PATCH 19/30] docs(quick-start): rendering lists --- src/content/learn/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index f7fcb8ca4..679821f63 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -237,6 +237,8 @@ const products = [ Inside your component, use the `map()` function to transform an array of products into an array of `
  • ` items: +Di dalam komponen Anda, gunakan fungsi `map()` untuk mengubah serangkaian produk menjadi serangkaian *item* `
  • `: + ```js const listItems = products.map(product =>
  • @@ -249,7 +251,7 @@ return ( ); ``` -Notice how `
  • ` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items. +Perhatikan bagaimana `
  • ` memiliki atribut `key`. Untuk setiap *item* dalam daftar, Anda harus mengoper *string* atau angka yang secara unik mengidentifikasi *item* tersebut di antara saudara-saudaranya (*siblings*). Biasanya, *key* harus berasal dari data Anda, seperti ID basis data (*database*). React menggunakan *key* untuk mengetahui apa yang terjadi jika Anda menyisipkan (*insert*), menghapus, atau mengurutkan ulang *item*. From 002c514c760f3f8579bf45b600466c173cbaaa02 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 16:47:59 +0700 Subject: [PATCH 20/30] docs(quick-start): rendering lists --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 679821f63..422a69eac 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -257,9 +257,9 @@ Perhatikan bagaimana `
  • ` memiliki atribut `key`. Untuk setiap *item* dalam da ```js const products = [ - { title: 'Cabbage', isFruit: false, id: 1 }, - { title: 'Garlic', isFruit: false, id: 2 }, - { title: 'Apple', isFruit: true, id: 3 }, + { title: 'Kubis', isFruit: false, id: 1 }, + { title: 'Bawang Putih', isFruit: false, id: 2 }, + { title: 'Apel', isFruit: true, id: 3 }, ]; export default function ShoppingList() { From 252d99c14795cbbd1b4e881efebe56f306c833ea Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 16:49:11 +0700 Subject: [PATCH 21/30] docs(quick-start): rendering lists --- src/content/learn/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 422a69eac..a9d9eaef7 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -235,8 +235,6 @@ const products = [ ]; ``` -Inside your component, use the `map()` function to transform an array of products into an array of `
  • ` items: - Di dalam komponen Anda, gunakan fungsi `map()` untuk mengubah serangkaian produk menjadi serangkaian *item* `
  • `: ```js From a12073142cf5bee2ebb4bf57c3f7b24db6d3da09 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 17:01:23 +0700 Subject: [PATCH 22/30] docs(quick-start): handler related words --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index a9d9eaef7..d6e9c86ef 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -280,9 +280,9 @@ export default function ShoppingList() { -## Responding to events {/*responding-to-events*/} +## Merespon ke event {/*responding-to-events*/} -You can respond to events by declaring *event handler* functions inside your components: +Anda dapat merespon ke *event* dengan mendeklarasikan fungsi *event handler* di dalam komponen Anda: ```js {2-4,7} function MyButton() { @@ -458,7 +458,7 @@ function MyButton() { ``` -Kemudian, *oper state ke bawah* dari `MyApp` ke setiap `MyButton`, bersama dengan penangan klik bersama (*shared click handler*). Anda dapat mengoper informasi ke `MyButton` menggunakan kurung kurawal JSX, seperti yang sebelumnya Anda lakukan dengan *tag* bawaan seperti ``: +Kemudian, *oper state ke bawah* dari `MyApp` ke setiap `MyButton`, bersama dengan *shared click handler*. Anda dapat mengoper informasi ke `MyButton` menggunakan kurung kurawal JSX, seperti yang sebelumnya Anda lakukan dengan *tag* bawaan seperti ``: ```js {11-12} export default function MyApp() { From f81354187e73e326d2129ba4c079af4258ac6f2d Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 17:04:41 +0700 Subject: [PATCH 23/30] docs(quick-start): responding to events --- src/content/learn/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index d6e9c86ef..6b770d464 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -298,7 +298,7 @@ function MyButton() { } ``` -Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button. +Perhatikan bagaimana `onClick={handleClick}` tidak memiliki tanda kurung (*parentheses*) di bagian akhir! Jangan _memanggil_ fungsi *event handler*: Anda hanya perlu *mengopernya ke bawah*. React akan memanggil *event handler* Anda ketika pengguna mengklik tombol. ## Updating the screen {/*updating-the-screen*/} From 235393369e05e6fafae286a8e56cd3580c9f57f1 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 17:09:58 +0700 Subject: [PATCH 24/30] docs(quick-start): updating the screen --- src/content/learn/index.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 6b770d464..9899b6211 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -287,12 +287,12 @@ Anda dapat merespon ke *event* dengan mendeklarasikan fungsi *event handler* di ```js {2-4,7} function MyButton() { function handleClick() { - alert('You clicked me!'); + alert('Anda mengklik saya!'); } return ( ); } @@ -300,17 +300,17 @@ function MyButton() { Perhatikan bagaimana `onClick={handleClick}` tidak memiliki tanda kurung (*parentheses*) di bagian akhir! Jangan _memanggil_ fungsi *event handler*: Anda hanya perlu *mengopernya ke bawah*. React akan memanggil *event handler* Anda ketika pengguna mengklik tombol. -## Updating the screen {/*updating-the-screen*/} +## Memperbarui layar {/*updating-the-screen*/} -Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component. +Sering kali, Anda ingin komponen Anda "mengingat" beberapa informasi dan menampilkannya. Sebagai contoh, mungkin Anda ingin menghitung berapa kali sebuah tombol diklik. Untuk melakukan hal ini, tambahkan *state* ke komponen Anda. -First, import [`useState`](/reference/react/useState) from React: +Pertama, impor [`useState`](/reference/react/useState) dari React: ```js import { useState } from 'react'; ``` -Now you can declare a *state variable* inside your component: +Sekarang Anda dapat mendeklarasikan *variabel state* di dalam komponen Anda: ```js function MyButton() { @@ -318,9 +318,9 @@ function MyButton() { // ... ``` -You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`. +Anda akan mendapatkan dua hal dari `useState`: *state* saat ini (`count`), dan fungsi yang memungkinkan Anda memperbaruinya (`setCount`). Anda dapat memberi nama apa saja, tetapi konvensi yang berlaku adalah menulis `[something, setSomething]`. -The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter: +Saat pertama kali tombol ditampilkan, `count` akan menjadi `0` karena Anda mengoper `0` ke `useState()`. Ketika Anda ingin mengubah *state*, panggil `setCount()` dan berikan nilai baru padanya. Mengklik tombol ini akan menambah penghitung (*counter*): ```js {5} function MyButton() { @@ -332,15 +332,15 @@ function MyButton() { return ( ); } ``` -React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on. +React akan memanggil fungsi komponen Anda lagi. Kali ini, `count` akan menjadi `1`. Kemudian akan menjadi `2`. Dan seterusnya. -If you render the same component multiple times, each will get its own state. Click each button separately: +Jika Anda me-*render* komponen yang sama beberapa kali, masing-masing akan mendapatkan *state*-nya sendiri. Klik setiap tombol secara terpisah: @@ -350,7 +350,7 @@ import { useState } from 'react'; export default function MyApp() { return (
    -

    Counters that update separately

    +

    Penghitung yang diperbarui secara terpisah

    @@ -366,7 +366,7 @@ function MyButton() { return ( ); } @@ -381,7 +381,7 @@ button {     -Notice how each button "remembers" its own `count` state and doesn't affect other buttons. +Perhatikan bagaimana setiap tombol "mengingat" *state* `count`-nya sendiri dan tidak memengaruhi tombol lainnya. ## Using Hooks {/*using-hooks*/} From 9eef9c52155330f7b1871598fd2900941f8e0a01 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 17:12:50 +0700 Subject: [PATCH 25/30] docs(quick-start): using hooks --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 9899b6211..458173b9a 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -383,11 +383,11 @@ button { Perhatikan bagaimana setiap tombol "mengingat" *state* `count`-nya sendiri dan tidak memengaruhi tombol lainnya. -## Using Hooks {/*using-hooks*/} +## Mengggunakan Hooks {/*using-hooks*/} -Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [API reference.](/reference/react) You can also write your own Hooks by combining the existing ones. +Fungsi yang dimulai dengan `use` disebut dengan *Hooks*. `useState` adalah *Hook* bawaan yang disediakan oleh React. Anda dapat menemukan *Hooks* bawaan lainnya di [referensi API.](/reference/react) Anda juga dapat menulis *Hooks* Anda sendiri dengan menggabungkan *Hooks* yang sudah ada. -Hooks are more restrictive than other functions. You can only call Hooks *at the top* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there. +*Hooks* lebih terbatas dibandingkan fungsi-fungsi lainnya. Anda hanya bisa memanggil *Hooks* *di bagian atas* komponen Anda (atau *Hooks* lainnya). Jika Anda ingin menggunakan `useState` dalam sebuah kondisi atau perulangan, ekstrak komponen baru dan letakkan di sana. ## Sharing data between components {/*sharing-data-between-components*/} From 25734121fdbb0f7dd25ebd3c731709c3669c62cc Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 17:26:55 +0700 Subject: [PATCH 26/30] docs(quick-start): sharing data between components --- src/content/learn/index.md | 52 +++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 458173b9a..2cef98719 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -287,7 +287,7 @@ Anda dapat merespon ke *event* dengan mendeklarasikan fungsi *event handler* di ```js {2-4,7} function MyButton() { function handleClick() { - alert('Anda mengklik saya!'); + alert('Anda mengeklik saya!'); } return ( @@ -298,7 +298,7 @@ function MyButton() { } ``` -Perhatikan bagaimana `onClick={handleClick}` tidak memiliki tanda kurung (*parentheses*) di bagian akhir! Jangan _memanggil_ fungsi *event handler*: Anda hanya perlu *mengopernya ke bawah*. React akan memanggil *event handler* Anda ketika pengguna mengklik tombol. +Perhatikan bagaimana `onClick={handleClick}` tidak memiliki tanda kurung (*parentheses*) di bagian akhir! Jangan _memanggil_ fungsi *event handler*: Anda hanya perlu *mengopernya ke bawah*. React akan memanggil *event handler* Anda ketika pengguna mengeklik tombol. ## Memperbarui layar {/*updating-the-screen*/} @@ -320,7 +320,7 @@ function MyButton() { Anda akan mendapatkan dua hal dari `useState`: *state* saat ini (`count`), dan fungsi yang memungkinkan Anda memperbaruinya (`setCount`). Anda dapat memberi nama apa saja, tetapi konvensi yang berlaku adalah menulis `[something, setSomething]`. -Saat pertama kali tombol ditampilkan, `count` akan menjadi `0` karena Anda mengoper `0` ke `useState()`. Ketika Anda ingin mengubah *state*, panggil `setCount()` dan berikan nilai baru padanya. Mengklik tombol ini akan menambah penghitung (*counter*): +Saat pertama kali tombol ditampilkan, `count` akan menjadi `0` karena Anda mengoper `0` ke `useState()`. Ketika Anda ingin mengubah *state*, panggil `setCount()` dan berikan nilai baru padanya. Mengeklik tombol ini akan menambah penghitung (*counter*): ```js {5} function MyButton() { @@ -389,51 +389,51 @@ Fungsi yang dimulai dengan `use` disebut dengan *Hooks*. `useState` adalah *Hook *Hooks* lebih terbatas dibandingkan fungsi-fungsi lainnya. Anda hanya bisa memanggil *Hooks* *di bagian atas* komponen Anda (atau *Hooks* lainnya). Jika Anda ingin menggunakan `useState` dalam sebuah kondisi atau perulangan, ekstrak komponen baru dan letakkan di sana. -## Sharing data between components {/*sharing-data-between-components*/} +## Berbagi data antar komponen {/*sharing-data-between-components*/} -In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed: +Pada contoh sebelumnya, setiap `MyButton` memiliki `count` tersendiri, dan ketika setiap tombol diklik, hanya `count` untuk tombol yang diklik yang berubah: - + -Initially, each `MyButton`'s `count` state is `0` +Awalnya, setiap *state* `count` `MyButton` adalah `0` - + -The first `MyButton` updates its `count` to `1` +`MyButton` pertama memperbarui `count`-nya menjadi `1` -However, often you'll need components to *share data and always update together*. +Namun, sering kali Anda memerlukan komponen untuk *berbagi data dan selalu diperbarui bersamaan*. -To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. +Untuk membuat kedua komponen `MyButton` menampilkan `count` yang sama dan memperbarui secara bersamaan, Anda harus memindahkan *state* dari masing-masing tombol "ke atas" ke komponen terdekat yang berisi semuanya. -In this example, it is `MyApp`: +Dalam contoh ini, adalah `MyApp`: - + -Initially, `MyApp`'s `count` state is `0` and is passed down to both children +Awalnya, *state* `count` `MyApp` adalah `0` dan diturunkan ke kedua anak (*children*) - + -On click, `MyApp` updates its `count` state to `1` and passes it down to both children +Saat diklik, `MyApp` memperbarui *state* `hitung` menjadi `1` dan meneruskannya ke kedua anak -Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. +Sekarang ketika Anda mengeklik salah satu tombol, `count` di `MyApp` akan berubah, yang akan mengubah kedua hitungan di `MyButton`. Berikut adalah cara untuk mengekspresikannya di dalam kode. -First, *move the state up* from `MyButton` into `MyApp`: +Pertama, *pindahkan state ke atas* dari `MyButton` ke `MyApp`: ```js {2-6,18} export default function MyApp() { @@ -445,7 +445,7 @@ export default function MyApp() { return (
    -

    Counters that update separately

    +

    Penghitung yang diperbarui secara terpisah

    @@ -453,7 +453,7 @@ export default function MyApp() { } function MyButton() { - // ... we're moving code from here ... + // ... kita memindahkan kode dari sini ... } ``` @@ -478,21 +478,21 @@ export default function MyApp() { } ``` -The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons. +Informasi yang Anda berikan seperti ini disebut *props*. Sekarang komponen `MyApp` berisi *state* `count` dan *event handler* `handleClick`, dan *meneruskan keduanya sebagai props* ke masing-masing tombol. -Finally, change `MyButton` to *read* the props you have passed from its parent component: +Terakhir, ubah `MyButton` untuk *membaca* *props* yang telah Anda lewati dari komponen induknya: ```js {1,3} function MyButton({ count, onClick }) { return ( ); } ``` -When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components. +Ketika Anda mengeklik tombol, *handler* `onClick` akan dijalankan (*fires*). *Prop* `onClick` pada setiap tombol diatur ke fungsi `handleClick` di dalam `MyApp`, sehingga kode di dalamnya dapat berjalan. Kode tersebut memanggil `setCount(count + 1)`, yang menambah variabel *state* `count`. Nilai `count` yang baru diteruskan sebagai *prop* ke setiap tombol, sehingga semuanya menampilkan nilai yang baru. Hal ini disebut "mengangkat state ke atas" (*"lifting state up"*). Dengan mengangkat *state* ke atas, Anda telah membagikannya di antara komponen. @@ -508,7 +508,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    Penghitung yang diperbarui bersamaan

    @@ -518,7 +518,7 @@ export default function MyApp() { function MyButton({ count, onClick }) { return ( ); } From d4d69927b6320726af713fde6f018a169ced61dc Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 17:32:33 +0700 Subject: [PATCH 27/30] docs(quick-start): count word --- src/content/learn/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 2cef98719..bba3fbb45 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -425,7 +425,7 @@ Awalnya, *state* `count` `MyApp` adalah `0` dan diturunkan ke kedua anak (*child -Saat diklik, `MyApp` memperbarui *state* `hitung` menjadi `1` dan meneruskannya ke kedua anak +Saat diklik, `MyApp` memperbarui *state* `count` menjadi `1` dan meneruskannya ke kedua anak From 25b1867b6d2f77a71a6b3f96b096af4a1e2b637f Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 17:34:30 +0700 Subject: [PATCH 28/30] docs(quick-start): pass & passes word --- src/content/learn/index.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index bba3fbb45..2153d6d25 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -125,9 +125,7 @@ return ( ); ``` -You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute: - -Anda juga dapat "kembali ke JavaScript" dari atribut JSX, tetapi Anda harus menggunakan tanda kurung kurawal *daripada* tanda kutip (*quotes*). Sebagai contoh, `className="avatar"` meneruskan *string* `"avatar"` sebagai kelas CSS (*CSS class*), tetapi `src={user.imageUrl}` membaca nilai variabel JavaScript `user.imageUrl`, dan kemudian meneruskan nilai tersebut sebagai atribut `src`: +Anda juga dapat "kembali ke JavaScript" dari atribut JSX, tetapi Anda harus menggunakan tanda kurung kurawal *daripada* tanda kutip (*quotes*). Sebagai contoh, `className="avatar"` mengoper *string* `"avatar"` sebagai kelas CSS (*CSS class*), tetapi `src={user.imageUrl}` membaca nilai variabel JavaScript `user.imageUrl`, dan kemudian mengoper nilai tersebut sebagai atribut `src`: ```js {3,4} return ( @@ -425,7 +423,7 @@ Awalnya, *state* `count` `MyApp` adalah `0` dan diturunkan ke kedua anak (*child -Saat diklik, `MyApp` memperbarui *state* `count` menjadi `1` dan meneruskannya ke kedua anak +Saat diklik, `MyApp` memperbarui *state* `count` menjadi `1` dan menurunkannya ke kedua anak @@ -478,7 +476,7 @@ export default function MyApp() { } ``` -Informasi yang Anda berikan seperti ini disebut *props*. Sekarang komponen `MyApp` berisi *state* `count` dan *event handler* `handleClick`, dan *meneruskan keduanya sebagai props* ke masing-masing tombol. +Informasi yang Anda berikan seperti ini disebut *props*. Sekarang komponen `MyApp` berisi *state* `count` dan *event handler* `handleClick`, dan *mengoper keduanya sebagai props* ke masing-masing tombol. Terakhir, ubah `MyButton` untuk *membaca* *props* yang telah Anda lewati dari komponen induknya: @@ -492,7 +490,7 @@ function MyButton({ count, onClick }) { } ``` -Ketika Anda mengeklik tombol, *handler* `onClick` akan dijalankan (*fires*). *Prop* `onClick` pada setiap tombol diatur ke fungsi `handleClick` di dalam `MyApp`, sehingga kode di dalamnya dapat berjalan. Kode tersebut memanggil `setCount(count + 1)`, yang menambah variabel *state* `count`. Nilai `count` yang baru diteruskan sebagai *prop* ke setiap tombol, sehingga semuanya menampilkan nilai yang baru. Hal ini disebut "mengangkat state ke atas" (*"lifting state up"*). Dengan mengangkat *state* ke atas, Anda telah membagikannya di antara komponen. +Ketika Anda mengeklik tombol, *handler* `onClick` akan dijalankan (*fires*). *Prop* `onClick` pada setiap tombol diatur ke fungsi `handleClick` di dalam `MyApp`, sehingga kode di dalamnya dapat berjalan. Kode tersebut memanggil `setCount(count + 1)`, yang menambah variabel *state* `count`. Nilai `count` yang baru dioper sebagai *prop* ke setiap tombol, sehingga semuanya menampilkan nilai yang baru. Hal ini disebut "mengangkat state ke atas" (*"lifting state up"*). Dengan mengangkat *state* ke atas, Anda telah membagikannya di antara komponen. From 119d69e51e34f3098a789f1a0b3d4ee5f539bb7c Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Wed, 10 May 2023 19:30:52 +0700 Subject: [PATCH 29/30] docs(quick-start): revision --- src/content/learn/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 2153d6d25..c39da5c6c 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -33,7 +33,7 @@ function MyButton() { } ``` -Sekarang setelah Anda mendeklarasikan `MyButton`, Anda dapat menyarangkannya dengan komponen lain: +Sekarang setelah Anda mendeklarasikan `MyButton`, Anda dapat menyarangkannya ke dalam komponen lain: ```js {5} export default function MyApp() { @@ -219,7 +219,7 @@ Ketika Anda tidak membutuhkan cabang (*branch*) `lain`, Anda juga dapat mengguna Semua pendekatan ini juga dapat digunakan untuk menentukan atribut secara kondisional. Jika Anda tidak terbiasa dengan beberapa sintaksis JavaScript ini, Anda dapat memulai dengan selalu menggunakan `if...else`. -## Me-render daftar (*lists*) {/*rendering-lists*/} +## Me-render daftar {/*rendering-lists*/} Anda akan mengandalkan fitur JavaScript seperti perulangan [`for`] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) dan [fungsi senarai (*array*) `map()`] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) untuk me-render daftar komponen. @@ -247,7 +247,7 @@ return ( ); ``` -Perhatikan bagaimana `
  • ` memiliki atribut `key`. Untuk setiap *item* dalam daftar, Anda harus mengoper *string* atau angka yang secara unik mengidentifikasi *item* tersebut di antara saudara-saudaranya (*siblings*). Biasanya, *key* harus berasal dari data Anda, seperti ID basis data (*database*). React menggunakan *key* untuk mengetahui apa yang terjadi jika Anda menyisipkan (*insert*), menghapus, atau mengurutkan ulang *item*. +Perhatikan bagaimana `
  • ` memiliki atribut `key`. Untuk setiap *item* dalam daftar, Anda harus mengoper *string* atau angka yang secara unik mengidentifikasi *item* tersebut di antara saudara-saudaranya (*siblings*). Biasanya, *key* harus berasal dari data Anda, seperti sebuah ID basis data (*database*). React menggunakan *key* untuk mengetahui apa yang terjadi jika Anda menyisipkan (*insert*), menghapus, atau mengurutkan ulang *item*. From f1e976db1bcd5e4dce776454ff19e713c062de21 Mon Sep 17 00:00:00 2001 From: M Haidar Hanif Date: Thu, 11 May 2023 21:48:44 +0700 Subject: [PATCH 30/30] docs(quick-start): revision --- src/content/learn/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index c39da5c6c..0491ef694 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -73,7 +73,7 @@ export default function MyApp() { -Kata kunci `export default` menentukan komponen utama di dalam berkas (*file*). Jika Anda tidak terbiasa dengan beberapa bagian dari sintaksis JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) dan [javascript.info] (https://javascript.info/import-export) memiliki referensi yang bagus. +Kata-kata kunci `export default` menentukan komponen utama di dalam berkas (*file*). Jika Anda tidak terbiasa dengan beberapa bagian dari sintaksis JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) dan [javascript.info] (https://javascript.info/import-export) memiliki referensi yang bagus. ## Menulis markup dengan JSX {/*writing-markup-with-jsx*/} @@ -415,13 +415,13 @@ Dalam contoh ini, adalah `MyApp`: - + -Awalnya, *state* `count` `MyApp` adalah `0` dan diturunkan ke kedua anak (*children*) +Awalnya, *state* `count` `MyApp` adalah `0` dan dioper ke bawah ke kedua anak (*children*) - + Saat diklik, `MyApp` memperbarui *state* `count` menjadi `1` dan menurunkannya ke kedua anak