Skip to content

New Indonesian Translation: Sharing State Between Components #369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 23 additions & 19 deletions src/content/learn/react-developer-tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,31 @@ title: React Developer Tools

<Intro>

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 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.

</Intro>

<YouWillLearn>

* How to install React Developer Tools
* Cara menginstal React Developer Tools

</YouWillLearn>

## Browser extension {/*browser-extension*/}
## Ekstensi peramban {/*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 menginstal ekstensi peramban React Developer Tools. Ekstensi ini tersedia untuk beberapa peramban 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)
* [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)

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 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
yarn global add react-devtools
Expand All @@ -36,26 +37,28 @@ yarn global add react-devtools
npm install -g react-devtools
```

Next open the developer tools from the terminal:
Selanjutnya buka React Developer Tools dari terminal:

```bash
react-devtools
```

Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
Lalu sambungkan *website* Anda dengan menambahkan tag `<script>` berikut ke awal `<head>` *website* Anda:

```html {3}
<html>
<head>
<script src="http://localhost:8097"></script>
```

Reload your website in the browser now to view it in developer tools.
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*/}
React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well.
React Developer Tools 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 React Developer Tools adalah dengan menginstalnya secara global:
```bash
# Yarn
yarn global add react-devtools
Expand All @@ -64,13 +67,14 @@ yarn global add react-devtools
npm install -g react-devtools
```

Next open the developer tools from the terminal.
Selanjutnya buka React Developer Tools dari terminal:
```bash
react-devtools
```

It should connect to any local React Native app that's running.
React Developer Tools akan terhubung ke aplikasi React Native lokal yang sedang berjalan.

> Lakukan reload aplikasi jika React Developer Tools 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)
3 changes: 2 additions & 1 deletion src/content/learn/sharing-state-between-components.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Sharing State Between Components
title: Berbagi State Antar Komponen

---

<Intro>
Expand Down