From 4b19fd55a76c428f51bc8c0155df7bbc3992070b Mon Sep 17 00:00:00 2001 From: yaffalhakim1 Date: Wed, 26 Apr 2023 11:55:44 +0700 Subject: [PATCH 01/35] translating react developer tools docs to bahasa indonesia --- src/content/learn/react-developer-tools.md | 44 ++++++++++++---------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6bb..22cdb7d2f 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,33 +1,34 @@ --- -title: React Developer Tools +title: Alat pengembang React --- -Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems. +Gunakan Alat Pengembang React untuk memeriksa [komponen](/learn/your-first-component), menyunting [*props*](/learn/passing-props-to-a-component) dan [*state*](/learn/state-a-components-memory), dan mengidentifikasi masalah kinerja. -* How to install React Developer Tools +* Cara memasang Alat Pengembang React -## Browser extension {/*browser-extension*/} +## Ekstensi Browser {/*browser-extension*/} -The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: +Cara termudah untuk melakukan debugging website yang dibangun dengan React adalah dengan memasang ekstensi browser Alat Pengembang React. Ekstensi ini tersedia untuk beberapa browser populer: -* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [Pasang untuk **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [Pasang untuk **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [Pasang untuk **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels. +Sekarang, jika Anda mengunjungi sebuah website **yang dibangun dengan React,** Anda akan melihat panel _Components_ dan _Profiler_. ![React Developer Tools extension](/images/docs/react-devtools-extension.png) -### Safari and other browsers {/*safari-and-other-browsers*/} -For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package: +### Safari and browser lainnya {/*safari-and-other-browsers*/} +Untuk browser lainnya (misalnya, Safari), pasang paket npm [`react-devtools`](https://www.npmjs.com/package/react-devtools): + ```bash # Yarn yarn global add react-devtools @@ -36,26 +37,28 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal: +Selanjutnya buka alat pengembang dari terminal: + ```bash react-devtools ``` -Then connect your website by adding the following ` ``` -Reload your website in the browser now to view it in developer tools. +Reload website Anda sekarang untuk melihatnya di alat pengembang. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) ## Mobile (React Native) {/*mobile-react-native*/} -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +Alat Pengembang React dapat digunakan untuk memeriksa aplikasi yang dibangun dengan [React Native](https://reactnative.dev/) juga. -The easiest way to use React Developer Tools is to install it globally: +Cara termudah untuk menggunakan Alat Pengembang React adalah dengan memasangnya secara global: ```bash # Yarn yarn global add react-devtools @@ -64,13 +67,14 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal. +Selanjutnya buka alat pengembang dari terminal: ```bash react-devtools ``` -It should connect to any local React Native app that's running. +Alat Pengembang React akan terhubung ke aplikasi React Native lokal yang sedang berjalan. + +> Lakukan reload aplikasi jika alat pengembang tidak terhubung setelah beberapa detik. -> Try reloading the app if developer tools doesn't connect after a few seconds. +[Pelajari lebih lanjut tentang debugging React Native.](https://reactnative.dev/docs/debugging) -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) From cabe59e34a0a9309f03ed8f5a23a997806a80791 Mon Sep 17 00:00:00 2001 From: Muhammad Yafi Alhakim Date: Wed, 26 Apr 2023 13:25:21 +0700 Subject: [PATCH 02/35] Update src/content/learn/react-developer-tools.md Co-authored-by: Resi Respati --- src/content/learn/react-developer-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 22cdb7d2f..19f74506d 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,5 +1,5 @@ --- -title: Alat pengembang React +title: React Developer Tools --- From 1b4873a1580d890fed3427ef261c4ba2508a0774 Mon Sep 17 00:00:00 2001 From: yaffalhakim1 Date: Wed, 26 Apr 2023 13:37:22 +0700 Subject: [PATCH 03/35] created changes based on review --- src/content/learn/react-developer-tools.md | 34 +++++++++++----------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 22cdb7d2f..fc16ed4e6 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,33 +1,33 @@ --- -title: Alat pengembang React +title: React Developer Tools --- -Gunakan Alat Pengembang React untuk memeriksa [komponen](/learn/your-first-component), menyunting [*props*](/learn/passing-props-to-a-component) dan [*state*](/learn/state-a-components-memory), dan mengidentifikasi masalah kinerja. +Gunakan React Developer Tools untuk memeriksa [komponen](/learn/your-first-component), menyunting [*props*](/learn/passing-props-to-a-component) dan [*state*](/learn/state-a-components-memory), dan mengidentifikasi masalah kinerja. -* Cara memasang Alat Pengembang React +* Cara menginstal React Developer Tools -## Ekstensi Browser {/*browser-extension*/} +## Ekstensi Peramban {/*browser-extension*/} -Cara termudah untuk melakukan debugging website yang dibangun dengan React adalah dengan memasang ekstensi browser Alat Pengembang React. Ekstensi ini tersedia untuk beberapa browser populer: +Cara termudah untuk melakukan debugging website yang dibangun dengan React adalah dengan memasang ekstensi peramban React Developer Tools. Ekstensi ini tersedia untuk beberapa peramban populer: -* [Pasang untuk **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Pasang untuk **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Pasang untuk **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [Instal untuk **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [Instal untuk **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [Instal untuk **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) Sekarang, jika Anda mengunjungi sebuah website **yang dibangun dengan React,** Anda akan melihat panel _Components_ dan _Profiler_. ![React Developer Tools extension](/images/docs/react-devtools-extension.png) -### Safari and browser lainnya {/*safari-and-other-browsers*/} -Untuk browser lainnya (misalnya, Safari), pasang paket npm [`react-devtools`](https://www.npmjs.com/package/react-devtools): +### Safari and Peramban lainnya {/*safari-and-other-browsers*/} +Untuk peramban lainnya (misalnya, Safari), instal paket npm [`react-devtools`](https://www.npmjs.com/package/react-devtools): ```bash # Yarn @@ -37,7 +37,7 @@ yarn global add react-devtools npm install -g react-devtools ``` -Selanjutnya buka alat pengembang dari terminal: +Selanjutnya buka React Developer Tools dari terminal: ```bash react-devtools @@ -51,14 +51,14 @@ Lalu sambungkan website Anda dengan menambahkan tag ` ``` -Reload website Anda sekarang untuk melihatnya di alat pengembang. +Reload website Anda sekarang untuk melihatnya di React Developer Tools. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) ## Mobile (React Native) {/*mobile-react-native*/} -Alat Pengembang React dapat digunakan untuk memeriksa aplikasi yang dibangun dengan [React Native](https://reactnative.dev/) juga. +React Developer Tools dapat digunakan untuk memeriksa aplikasi yang dibangun dengan [React Native](https://reactnative.dev/) juga. -Cara termudah untuk menggunakan Alat Pengembang React adalah dengan memasangnya secara global: +Cara termudah untuk menggunakan React Developer Tools adalah dengan memasangnya secara global: ```bash # Yarn yarn global add react-devtools @@ -67,14 +67,14 @@ yarn global add react-devtools npm install -g react-devtools ``` -Selanjutnya buka alat pengembang dari terminal: +Selanjutnya buka React Developer Tools dari terminal: ```bash react-devtools ``` -Alat Pengembang React akan terhubung ke aplikasi React Native lokal yang sedang berjalan. +React Developer Tools akan terhubung ke aplikasi React Native lokal yang sedang berjalan. -> Lakukan reload aplikasi jika alat pengembang tidak terhubung setelah beberapa detik. +> Lakukan reload aplikasi jika React Developer Tools tidak terhubung setelah beberapa detik. [Pelajari lebih lanjut tentang debugging React Native.](https://reactnative.dev/docs/debugging) From 748522d01300271a061fdc9795a6fc00e2a5c5fd Mon Sep 17 00:00:00 2001 From: Muhammad Yafi Alhakim Date: Wed, 26 Apr 2023 13:45:43 +0700 Subject: [PATCH 04/35] Update src/content/learn/react-developer-tools.md Co-authored-by: Resi Respati --- src/content/learn/react-developer-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 19f74506d..2bd73f9dd 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,7 +4,7 @@ title: React Developer Tools -Gunakan Alat Pengembang React untuk memeriksa [komponen](/learn/your-first-component), menyunting [*props*](/learn/passing-props-to-a-component) dan [*state*](/learn/state-a-components-memory), dan mengidentifikasi masalah kinerja. +Gunakan React Developer Tools untuk memeriksa [komponen](/learn/your-first-component), menyunting [*props*](/learn/passing-props-to-a-component) dan [*state*](/learn/state-a-components-memory), dan mengidentifikasi masalah kinerja. From b75c6f8898717cd2dfeae7a0eba510fa8e91f343 Mon Sep 17 00:00:00 2001 From: yaffalhakim1 Date: Wed, 26 Apr 2023 15:21:16 +0700 Subject: [PATCH 05/35] change some words according to Glosarium --- src/content/learn/react-developer-tools.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index fc16ed4e6..f37009eeb 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -14,9 +14,9 @@ Gunakan React Developer Tools untuk memeriksa [komponen](/learn/your-first-compo -## Ekstensi Peramban {/*browser-extension*/} +## Ekstensi peramban {/*browser-extension*/} -Cara termudah untuk melakukan debugging website yang dibangun dengan React adalah dengan memasang ekstensi peramban React Developer Tools. Ekstensi ini tersedia untuk beberapa peramban populer: +Cara termudah untuk melakukan debugging website yang dibangun dengan React adalah dengan menginstal ekstensi peramban React Developer Tools. Ekstensi ini tersedia untuk beberapa peramban populer: * [Instal untuk **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) * [Instal untuk **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) @@ -26,8 +26,8 @@ Sekarang, jika Anda mengunjungi sebuah website **yang dibangun dengan React,** A ![React Developer Tools extension](/images/docs/react-devtools-extension.png) -### Safari and Peramban lainnya {/*safari-and-other-browsers*/} -Untuk peramban lainnya (misalnya, Safari), instal paket npm [`react-devtools`](https://www.npmjs.com/package/react-devtools): +### Safari and peramban lainnya {/*safari-and-other-browsers*/} +Untuk peramban lainnya (misalnya, Safari), instal *package* npm [`react-devtools`](https://www.npmjs.com/package/react-devtools): ```bash # Yarn @@ -43,7 +43,7 @@ Selanjutnya buka React Developer Tools dari terminal: react-devtools ``` -Lalu sambungkan website Anda dengan menambahkan tag `