From 04c12068c5abcdf0d91646c05462bbdc7902bcbb Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Tue, 21 Jul 2020 15:38:18 +0700 Subject: [PATCH 1/9] initial translation of warning sign --- content/docs/concurrent-mode-patterns.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index f591c97b9..bec158c11 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -15,11 +15,11 @@ next: concurrent-mode-adoption.html
->Caution: +>Perhatian: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>Laman ini menjelaskan **fitur eksperimental yang [belum tersedia](/docs/concurrent-mode-adoption.html) dalam versi rilis yang stabil**. Jangan mengandalkan _build_ eksperimental dalam aplikasi React versi produksi. Fitur ini dapat berubah secara signifikan dan tanpa peringatan sebelum menjadi bagian dari React. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead. +>Dokumentasi ini ditujukan untuk pengguna awal dan orang-orang yang penasaran. **Kalau anda baru menggunakan React, jangan khawatir tentang fitur ini** -- anda tidak perlu mempelajarinya sekarang.
From 5bb1d976f4552d7ba8981ff00d0a93504b85c743 Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Thu, 23 Jul 2020 10:10:51 +0700 Subject: [PATCH 2/9] WIP: translate --- content/docs/concurrent-mode-patterns.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index bec158c11..9a2823645 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -23,9 +23,7 @@ next: concurrent-mode-adoption.html -Usually, when we update the state, we expect to see changes on the screen immediately. This makes sense because we want to keep our app responsive to user input. However, there are cases where we might prefer to **defer an update from appearing on the screen**. - -For example, if we switch from one page to another, and none of the code or data for the next screen has loaded yet, it might be frustrating to immediately see a blank page with a loading indicator. We might prefer to stay longer on the previous screen. Implementing this pattern has historically been difficult in React. Concurrent Mode offers a new set of tools to do that. +Biasanya, ketika kita mengubah state, kita akan langsung melihat perubahannya di layar. Ini masuk akal karena kita ingin aplikasi responsif terhadap input user. Tetapi, mungkin ada kasus dimana kita lebih memilih untuk **menunda perubahan yang terjadi di layar** - [Transitions](#transitions) - [Wrapping setState in a Transition](#wrapping-setstate-in-a-transition) From 460e97551931c0b91c49c381e1bb4ee1e09a6392 Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Sat, 25 Jul 2020 21:27:32 +0700 Subject: [PATCH 3/9] WIP: translate --- content/docs/concurrent-mode-patterns.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index 9a2823645..2a1a4725b 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -25,6 +25,7 @@ next: concurrent-mode-adoption.html Biasanya, ketika kita mengubah state, kita akan langsung melihat perubahannya di layar. Ini masuk akal karena kita ingin aplikasi responsif terhadap input user. Tetapi, mungkin ada kasus dimana kita lebih memilih untuk **menunda perubahan yang terjadi di layar** +Contohnya, ketika kita pindah laman, dan belum ada data yang tersedia untuk laman selanjutnya, mungkin kita akan merasa frustasi ketika melihat laman dengan loading. Kita mungkin lebih memilih untuk tetap berada di laman sebelumnya. Meng-implementasi pola ini secara historis sulit dalam React. Concurrent Mode menawarkan seperangkat alat baru untuk melakukan itu. - [Transitions](#transitions) - [Wrapping setState in a Transition](#wrapping-setstate-in-a-transition) - [Adding a Pending Indicator](#adding-a-pending-indicator) From 2af2beb54945b2952f1691005a78d2e9ec4c6b87 Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Sat, 25 Jul 2020 21:51:50 +0700 Subject: [PATCH 4/9] WIP: translate --- content/docs/concurrent-mode-patterns.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index 2a1a4725b..58785185c 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -26,8 +26,8 @@ next: concurrent-mode-adoption.html Biasanya, ketika kita mengubah state, kita akan langsung melihat perubahannya di layar. Ini masuk akal karena kita ingin aplikasi responsif terhadap input user. Tetapi, mungkin ada kasus dimana kita lebih memilih untuk **menunda perubahan yang terjadi di layar** Contohnya, ketika kita pindah laman, dan belum ada data yang tersedia untuk laman selanjutnya, mungkin kita akan merasa frustasi ketika melihat laman dengan loading. Kita mungkin lebih memilih untuk tetap berada di laman sebelumnya. Meng-implementasi pola ini secara historis sulit dalam React. Concurrent Mode menawarkan seperangkat alat baru untuk melakukan itu. -- [Transitions](#transitions) - - [Wrapping setState in a Transition](#wrapping-setstate-in-a-transition) +- [Transisi](#transitions) + - [Setstate didalam transisi](#wrapping-setstate-in-a-transition) - [Adding a Pending Indicator](#adding-a-pending-indicator) - [Reviewing the Changes](#reviewing-the-changes) - [Where Does the Update Happen?](#where-does-the-update-happen) @@ -48,15 +48,15 @@ Contohnya, ketika kita pindah laman, dan belum ada data yang tersedia untuk lama ## Transitions {#transitions} -Let's revisit [this demo](https://codesandbox.io/s/infallible-feather-xjtbu) from the previous page about [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html). +Mari buka kembali [demo berikut](https://codesandbox.io/s/infallible-feather-xjtbu) dari the laman sebelumnya mengenai [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html). -When we click the "Next" button to switch the active profile, the existing page data immediately disappears, and we see the loading indicator for the whole page again. We can call this an "undesirable" loading state. **It would be nice if we could "skip" it and wait for some content to load before transitioning to the new screen.** +Ketika kita klik Tombol "Next" untuk mengubah profil aktif, data laman sebelumnya langsung menghilang, dan kita melihat indikator loading untuk seluruh laman lagi. Kita bisa menyebut hal ini loading state yang "tidak diinginkan". **Akan lebih baik jika kita bisa "melewatinya" dan menunggu konten tersebut selesai di load sebelum pindah ke laman baru** -React offers a new built-in `useTransition()` Hook to help with this. +React punya Hook khusus `useTransition()` untuk menangani masalah ini. -We can use it in three steps. +Kita bisa menggunakannya dengan 3 langkah. -First, we'll make sure that we're actually using Concurrent Mode. We'll talk more about [adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) later, but for now it's sufficient to know that we need to use `ReactDOM.createRoot()` rather than `ReactDOM.render()` for this feature to work: +Pertama, Kita harus menggunakan Concurrent Mode. Kita akan membahas lebih lanjut tentang [mengadopsi Concurrent Mode](/docs/concurrent-mode-adoption.html) lain waktu, untuk sekarang kita hanya perlu tahu kalau kita akan menggunakan `ReactDOM.createRoot()` daripada `ReactDOM.render()` agar fitur berikut dapat bekerja: ```js const rootElement = document.getElementById("root"); @@ -64,13 +64,13 @@ const rootElement = document.getElementById("root"); ReactDOM.createRoot(rootElement).render(); ``` -Next, we'll add an import for the `useTransition` Hook from React: +Selanjutnya kita import hook`useTransition` dari React: ```js import React, { useState, useTransition, Suspense } from "react"; ``` -Finally, we'll use it inside the `App` component: +Terakhir, kita pakai hook tersebut di dalam komponen `App`: ```js{3-5} function App() { From e494c74af5d638e0b88bd49cacfd3d77a82163ca Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Mon, 3 Aug 2020 10:29:21 +0700 Subject: [PATCH 5/9] WIP: translate --- content/docs/concurrent-mode-patterns.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index 58785185c..09d7897c1 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -28,25 +28,25 @@ Biasanya, ketika kita mengubah state, kita akan langsung melihat perubahannya di Contohnya, ketika kita pindah laman, dan belum ada data yang tersedia untuk laman selanjutnya, mungkin kita akan merasa frustasi ketika melihat laman dengan loading. Kita mungkin lebih memilih untuk tetap berada di laman sebelumnya. Meng-implementasi pola ini secara historis sulit dalam React. Concurrent Mode menawarkan seperangkat alat baru untuk melakukan itu. - [Transisi](#transitions) - [Setstate didalam transisi](#wrapping-setstate-in-a-transition) - - [Adding a Pending Indicator](#adding-a-pending-indicator) - - [Reviewing the Changes](#reviewing-the-changes) - - [Where Does the Update Happen?](#where-does-the-update-happen) - - [Transitions Are Everywhere](#transitions-are-everywhere) + - [Menambah indikator tunggu](#adding-a-pending-indicator) + - [Review perubahan](#reviewing-the-changes) + - [Dimana perubahan terjadi?](#where-does-the-update-happen) + - [Transisi disetiap tempat](#transitions-are-everywhere) - [Baking Transitions Into the Design System](#baking-transitions-into-the-design-system) -- [The Three Steps](#the-three-steps) +- [Tiga Langkah](#the-three-steps) - [Default: Receded → Skeleton → Complete](#default-receded-skeleton-complete) - [Preferred: Pending → Skeleton → Complete](#preferred-pending-skeleton-complete) - [Wrap Lazy Features in ``](#wrap-lazy-features-in-suspense) - [Suspense Reveal “Train”](#suspense-reveal-train) - [Delaying a Pending Indicator](#delaying-a-pending-indicator) - [Recap](#recap) -- [Other Patterns](#other-patterns) +- [Cara lain](#other-patterns) - [Splitting High and Low Priority State](#splitting-high-and-low-priority-state) - [Deferring a Value](#deferring-a-value) - [SuspenseList](#suspenselist) -- [Next Steps](#next-steps) +- [Selanutnya](#next-steps) -## Transitions {#transitions} +## Transisi {#transitions} Mari buka kembali [demo berikut](https://codesandbox.io/s/infallible-feather-xjtbu) dari the laman sebelumnya mengenai [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html). @@ -81,12 +81,12 @@ function App() { // ... ``` -**By itself, this code doesn't do anything yet.** We will need to use this Hook's return values to set up our state transition. There are two values returned from `useTransition`: +**Dengan sendirinya, kode ini tidak melakukan apapun.** Kita akan menggunakan nilai return dari Hook ini untuk mempersiapkan transisi state kita. Ada dua nilai yang di return dari `useTransition`": -* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer. -* `isPending` is a boolean. It's React telling us whether that transition is ongoing at the moment. +* `startTransition` adalah fungsi. Fungsi ini akan kita gunakan untuk memberi tahu React state *mana* yang ingin kita tunda. +* `isPending` adalah boolean. React memberi tahu apakah transisi sedang terjadi atau tidak. -We will use them right below. +Kita akan menggunakannya seperti berikut. Note we passed a configuration object to `useTransition`. Its `timeoutMs` property specifies **how long we're willing to wait for the transition to finish**. By passing `{timeoutMs: 3000}`, we say "If the next profile takes more than 3 seconds to load, show the big spinner -- but before that timeout it's okay to keep showing the previous screen". From 86d0fe06b71ec2be53a4b1138b5e38b61ae990aa Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Mon, 3 Aug 2020 10:58:23 +0700 Subject: [PATCH 6/9] WIP: translate --- content/docs/concurrent-mode-patterns.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index 09d7897c1..93211b3b8 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -41,10 +41,10 @@ Contohnya, ketika kita pindah laman, dan belum ada data yang tersedia untuk lama - [Delaying a Pending Indicator](#delaying-a-pending-indicator) - [Recap](#recap) - [Cara lain](#other-patterns) - - [Splitting High and Low Priority State](#splitting-high-and-low-priority-state) + - [Memisahkan state dengan prioritas tinggi dan rendah](#splitting-high-and-low-priority-state) - [Deferring a Value](#deferring-a-value) - [SuspenseList](#suspenselist) -- [Selanutnya](#next-steps) +- [Selanjutnya](#next-steps) ## Transisi {#transitions} @@ -88,11 +88,11 @@ function App() { Kita akan menggunakannya seperti berikut. -Note we passed a configuration object to `useTransition`. Its `timeoutMs` property specifies **how long we're willing to wait for the transition to finish**. By passing `{timeoutMs: 3000}`, we say "If the next profile takes more than 3 seconds to load, show the big spinner -- but before that timeout it's okay to keep showing the previous screen". +Kita menggunakan objek konfigurasi ke `useTransition`. Properti `timeoutMs` menspesifikasi **berapa lama kita ingin menunggu transisi untuk selesai**. Dengan mengoper `{timeoutMs: 3000}`, berarti kita mengatakan "Jika profil perlu lebih dari 3 detik untuk load, tampilkan loading berputar -- tapi sebelum timeout kita bisa tetap memperlihatkan layar sebelumnya". -### Wrapping setState in a Transition {#wrapping-setstate-in-a-transition} +### Setstate didalam transisi {#wrapping-setstate-in-a-transition} -Our "Next" button click handler sets the state that switches the current profile in the state: +Handler klik tombol "Next" kita, mengubah state yang mengganti profile saat ini: ```js{4}