From 8f3a3da98094fcebf694fbbad1c27a98ff11a6c4 Mon Sep 17 00:00:00 2001 From: r17x Date: Wed, 26 Apr 2023 19:41:50 +0700 Subject: [PATCH 1/8] translations for APIs references lazy --- src/content/reference/react/lazy.md | 44 ++++++++++++++--------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index ba82d4fe2..df1330338 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -4,7 +4,7 @@ title: lazy -`lazy` lets you defer loading component's code until it is rendered for the first time. +`lazy` memungkinkan Anda menunda pemuatan kode komponen hingga komponen tersebut dirender untuk pertama kalinya. ```js const SomeComponent = lazy(load) @@ -16,11 +16,11 @@ const SomeComponent = lazy(load) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `lazy(load)` {/*lazy*/} -Call `lazy` outside your components to declare a lazy-loaded React component: +Panggil fungsi `lazy` di luar komponen apapun untuk mendeklarasikan *lazy-loaded* komponen React: ```js import { lazy } from 'react'; @@ -28,41 +28,41 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -[See more examples below.](#usage) +[Lihat contoh-contoh lainnya di bawah ini.](#usage) #### Parameters {/*parameters*/} -* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason for the nearest Error Boundary to handle. +* `load`: Sebuah fungsi yang mengembalikan [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau *thenable* lain (sebuah objek yang mirip dengan *Promise* dan memiliki metode `then`). React tidak akan memanggil `load` sempai pertama kali And mencoba untuk merender komponen yang dikembalikan. Setelah React pertama kali memanggil `load`, React akan menunggu sampai komponen itu selesai, dan kemudian merender nilai yang telah diselesaikan sebagai komponen React. Baik *Promise* yang dikembalikan maupun nilai yang diselesaikan dari *Promise* akan dicache, sehingga React tidak akan memanggil `load` lebih dari satu kali. Jika *Promise* menolak, React akan `throw` alasan penolakan ke *Error Boundary* terdekat untuk ditangani. #### Returns {/*returns*/} -`lazy` returns a React component you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use [``](/reference/react/Suspense) to display a loading indicator while it's loading. +`lazy` mengembalikan kompon React yang dapat Anda render di dalam *tree*. Ketika kode untuk komponen *lazy* masih dimuat, mencoba merendernya akan *suspend.* Gunakan [``](/reference/react/Suspense) untuk menampilkan indikator pemuatan ketika komponen tersebut dimuat. --- -### `load` function {/*load*/} +### fungsi `load` {/*load*/} #### Parameters {/*load-parameters*/} -`load` receives no parameters. +`load` tidak menerima parameter. #### Returns {/*load-returns*/} -You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component. +Anda perlu mengembalikan sebuah [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau *thenable* lain (sebuah objek yang mirip dengan *Promise* dan memiliki metode `then`). Pada akhirnya, komponen ini harus diselesaikan ke tipe komponen React yang valid, seperti sebuah fungsi, [`memo`](/reference/react/memo), atau [`forwardRef`](/reference/react/forwardRef) komponen. --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/} +### Lazy-loading komponen dengan Suspense {/*suspense-for-code-splitting*/} -Usually, you import components with the static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration: +Biasanya, Anda mengimpor komponen dengan deklarasi statis [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) : ```js import MarkdownPreview from './MarkdownPreview.js'; ``` -To defer loading this component's code until it's rendered for the first time, replace this import with: +Untuk menunda pemuatan jkode komponen ini hingga dirender untuk pertama kalinya, ganti *import* ini dengan: ```js import { lazy } from 'react'; @@ -70,9 +70,9 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework. +Kode ini bergantung pada [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) yang mungkin memerlukan dukungan dari *bundler* atau *framework* yang Anda gunakan. -Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [``](/reference/react/Suspense) boundary: +Setelah kode komponen Anda dimuat saat digunakan, Anda juga perlu menentukan apa yang harus ditampilkan ketika dimuat. Anda dapat melakukan ini dengan membungkus komponen *lazy* atau salah satu *parent* ke dalam [``](/reference/react/Suspense): ```js {1,4} }> @@ -81,7 +81,7 @@ Now that your component's code loads on demand, you also need to specify what sh ``` -In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox: +Pada contoh ini, kode untuk `MarkdownPreview` tidak akan dimuat hingga Anda mencoba merendernya. Jika `MarkdownPreview` belum dimuat, `Loading` atau indikator akan ditampilkan sebagai gantinya. Coba centang *checkbox* ini: @@ -175,17 +175,17 @@ body { -This demo loads with an artificial delay. The next time you untick and tick the checkbox, `Preview` will be cached, so there will be no loading state. To see the loading state again, click "Reset" on the sandbox. +Demo ini dimuat dengan penundaan buatan. Lain kali Anda menghapus centang dan mencentang *checkbox*, `Preview` akan dicache, sehingga tidak akan ada status pemuatan. Untuk melihat status pemuatan lagi, Klik "Reset" pada *sandbox*. -[Learn more about managing loading states with Suspense.](/reference/react/Suspense) +[Pelajari lebih lanjut tentang mengelola status pemuatan dengan Suspense.](/reference/react/Suspense) --- -## Troubleshooting {/*troubleshooting*/} +## Pemecahan Masalah {/*troubleshooting*/} -### My `lazy` component's state gets reset unexpectedly {/*my-lazy-components-state-gets-reset-unexpectedly*/} +### `lazy` komponen saya disetel ulang secara tidak terduka {/*my-lazy-components-state-gets-reset-unexpectedly*/} -Do not declare `lazy` components *inside* other components: +Jangan deklarasikan `lazy` komponen *didalam* komponen lain: ```js {4-5} import { lazy } from 'react'; @@ -197,7 +197,7 @@ function Editor() { } ``` -Instead, always declare them at the top level of your module: +Sebaiknya, selalu deklarasikan mereka di tingkat teratas modul Anda: ```js {3-4} import { lazy } from 'react'; From 3a24c376a8ce72138a9d838b4dd27ba17dbbeff5 Mon Sep 17 00:00:00 2001 From: r17x Date: Wed, 26 Apr 2023 20:12:35 +0700 Subject: [PATCH 2/8] apply suggestions based on review --- src/content/reference/react/lazy.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index df1330338..1494a5935 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -32,11 +32,11 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### Parameters {/*parameters*/} -* `load`: Sebuah fungsi yang mengembalikan [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau *thenable* lain (sebuah objek yang mirip dengan *Promise* dan memiliki metode `then`). React tidak akan memanggil `load` sempai pertama kali And mencoba untuk merender komponen yang dikembalikan. Setelah React pertama kali memanggil `load`, React akan menunggu sampai komponen itu selesai, dan kemudian merender nilai yang telah diselesaikan sebagai komponen React. Baik *Promise* yang dikembalikan maupun nilai yang diselesaikan dari *Promise* akan dicache, sehingga React tidak akan memanggil `load` lebih dari satu kali. Jika *Promise* menolak, React akan `throw` alasan penolakan ke *Error Boundary* terdekat untuk ditangani. +* `load`: Sebuah fungsi yang mengembalikan [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau *thenable* lain (sebuah objek yang mirip dengan *Promise* dan memiliki metode `then`). React tidak akan memanggil `load` sampai pertama kali Anda mencoba untuk merender komponen yang dikembalikan. Setelah React pertama kali memanggil `load`, React akan menunggu sampai komponen itu selesai, dan kemudian merender nilai yang telah diselesaikan sebagai komponen React. Baik *Promise* yang dikembalikan maupun nilai yang diselesaikan dari *Promise* akan dicache, sehingga React tidak akan memanggil `load` lebih dari satu kali. Jika *Promise* menolak (`reject`), React akan melempar (`throw`) alasan penolakan ke *Error Boundary* terdekat untuk ditangani. #### Returns {/*returns*/} -`lazy` mengembalikan kompon React yang dapat Anda render di dalam *tree*. Ketika kode untuk komponen *lazy* masih dimuat, mencoba merendernya akan *suspend.* Gunakan [``](/reference/react/Suspense) untuk menampilkan indikator pemuatan ketika komponen tersebut dimuat. +`lazy` mengembalikan komponen React yang dapat Anda render di dalam *tree*. Ketika kode untuk komponen *lazy* masih dimuat, mencoba merendernya akan *suspend.* Gunakan [``](/reference/react/Suspense) untuk menampilkan indikator pemuatan ketika komponen tersebut dimuat. --- @@ -62,7 +62,7 @@ Biasanya, Anda mengimpor komponen dengan deklarasi statis [`import`](https://dev import MarkdownPreview from './MarkdownPreview.js'; ``` -Untuk menunda pemuatan jkode komponen ini hingga dirender untuk pertama kalinya, ganti *import* ini dengan: +Untuk menunda pemuatan kode komponen ini hingga dirender untuk pertama kalinya, ganti *import* ini dengan: ```js import { lazy } from 'react'; @@ -72,7 +72,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); Kode ini bergantung pada [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) yang mungkin memerlukan dukungan dari *bundler* atau *framework* yang Anda gunakan. -Setelah kode komponen Anda dimuat saat digunakan, Anda juga perlu menentukan apa yang harus ditampilkan ketika dimuat. Anda dapat melakukan ini dengan membungkus komponen *lazy* atau salah satu *parent* ke dalam [``](/reference/react/Suspense): +Setelah kode komponen Anda dimuat saat digunakan (*on demand*), Anda juga perlu menentukan apa yang harus ditampilkan ketika dimuat. Anda dapat melakukan ini dengan membungkus komponen *lazy* atau salah satu *parent* ke dalam [``](/reference/react/Suspense): ```js {1,4} }> @@ -183,9 +183,9 @@ Demo ini dimuat dengan penundaan buatan. Lain kali Anda menghapus centang dan me ## Pemecahan Masalah {/*troubleshooting*/} -### `lazy` komponen saya disetel ulang secara tidak terduka {/*my-lazy-components-state-gets-reset-unexpectedly*/} +### `lazy` komponen saya disetel ulang secara tidak terduga {/*my-lazy-components-state-gets-reset-unexpectedly*/} -Jangan deklarasikan `lazy` komponen *didalam* komponen lain: +Jangan deklarasikan `lazy` komponen *di dalam* komponen lain: ```js {4-5} import { lazy } from 'react'; From 97a48dc9cead2ec33dae62a45f3898421f85d604 Mon Sep 17 00:00:00 2001 From: r17x Date: Thu, 27 Apr 2023 11:38:31 +0700 Subject: [PATCH 3/8] apply suggestions based on review --- src/content/reference/react/lazy.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 1494a5935..6dba2b813 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -72,7 +72,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); Kode ini bergantung pada [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) yang mungkin memerlukan dukungan dari *bundler* atau *framework* yang Anda gunakan. -Setelah kode komponen Anda dimuat saat digunakan (*on demand*), Anda juga perlu menentukan apa yang harus ditampilkan ketika dimuat. Anda dapat melakukan ini dengan membungkus komponen *lazy* atau salah satu *parent* ke dalam [``](/reference/react/Suspense): +Setelah kode komponen Anda dimuat saat digunakan (*on demand*), Anda juga perlu menentukan apa yang harus ditampilkan ketika dimuat. Anda dapat melakukan ini dengan membungkus komponen *lazy* atau salah satu induknya ke dalam [``](/reference/react/Suspense): ```js {1,4} }> @@ -183,9 +183,9 @@ Demo ini dimuat dengan penundaan buatan. Lain kali Anda menghapus centang dan me ## Pemecahan Masalah {/*troubleshooting*/} -### `lazy` komponen saya disetel ulang secara tidak terduga {/*my-lazy-components-state-gets-reset-unexpectedly*/} +### komponen `lazy` saya disetel ulang secara tidak terduga {/*my-lazy-components-state-gets-reset-unexpectedly*/} -Jangan deklarasikan `lazy` komponen *di dalam* komponen lain: +Jangan deklarasikan komponen `lazy` *di dalam* komponen lain: ```js {4-5} import { lazy } from 'react'; From 199c42dc363733ceecaf1c315d640d08e14b069a Mon Sep 17 00:00:00 2001 From: r17x Date: Fri, 28 Apr 2023 13:20:23 +0700 Subject: [PATCH 4/8] translate sandbox content --- src/content/reference/react/lazy.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 6dba2b813..e32ca3250 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -81,7 +81,7 @@ Setelah kode komponen Anda dimuat saat digunakan (*on demand*), Anda juga perlu ``` -Pada contoh ini, kode untuk `MarkdownPreview` tidak akan dimuat hingga Anda mencoba merendernya. Jika `MarkdownPreview` belum dimuat, `Loading` atau indikator akan ditampilkan sebagai gantinya. Coba centang *checkbox* ini: +Pada contoh ini, kode untuk `MarkdownPreview` tidak akan dimuat hingga Anda mencoba merendernya. Jika `MarkdownPreview` belum dimuat, Komponen `Loading` akan ditampilkan sebagai gantinya. Coba centang *checkbox* **Lihat pratinjau**: @@ -93,18 +93,18 @@ const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js'))) export default function MarkdownEditor() { const [showPreview, setShowPreview] = useState(false); - const [markdown, setMarkdown] = useState('Hello, **world**!'); + const [markdown, setMarkdown] = useState('Helo, **dunia**!'); return ( <>