Skip to content

[Done] Translate React Developer tools #476

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
May 31, 2023
Merged

[Done] Translate React Developer tools #476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c773a9
Translate React Developer tools
AhmedBaset May 2, 2023
f6cb034
Update react-developer-tools.md
AhmedBaset May 31, 2023
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
53 changes: 30 additions & 23 deletions src/content/learn/react-developer-tools.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
---
title: React Developer Tools
title: أدوات مطوري React
---

<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.
استخدم أدوات مطور React لفحص [المكونات](/learn/your-first-component)، وتعديل [الخصائص](/learn/passing-props-to-a-component) و[الحالة](/learn/state-a-components-memory) وتحديد مشاكل الأداء.

</Intro>

<YouWillLearn>

* How to install React Developer Tools
* كيفية تثبيت أدوات مطوري React

</YouWillLearn>

## Browser extension {/*browser-extension*/}
## إضافة للمتصفح {/*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:
أسهل طريقة لحل المشاكل البرمجية للمواقع المبنية بـ React أن تثبت إضافة أدوات مطوري React للمتصفح. وهي متوفرة لعدة متصفحات شهيرة:

* [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)
* [تثبيت لـ **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ar)
* [تثبيت لـ **Firefox**](https://addons.mozilla.org/ar/firefox/addon/react-devtools/)
* [تثبيت لـ **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.
الآن، إن زرت موقعًا **مبنيًا باستخدام React** سترى نافذتي _المكونات (Components)_ و _المُحلل (Profiler)_ في أدوات المطور.

![React Developer Tools extension](/images/docs/react-devtools-extension.png)
![إضافة أدوات مطوري React](/images/docs/react-devtools-extension.png)

## متصفح Safari والمتصفحات الأخرى {/*safari-and-other-browsers*/}

للمتصفحات الأخرى (مثل Safari)، قم بتثبيت حزمة npm [`react-devtools`](https://www.npmjs.com/package/react-devtools):

### 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:
```bash
# Yarn
yarn global add react-devtools
Expand All @@ -36,26 +38,30 @@ yarn global add react-devtools
npm install -g react-devtools
```

Next open the developer tools from the terminal:
ثم افتح أدوات المطور في موجه الأوامر (Terminal):

```bash
react-devtools
```

Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
ثم اربط موقعك بإضافة عنصر `<script>` التالي إلى بداية `<head>` في موقعك:

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

Reload your website in the browser now to view it in developer tools.
أعد تحميل موقعك الآن في المتصفح لتراه في أدوات المطور.

![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
![أدوات مطوري React المستقلة](/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 Native) {/*mobile-react-native*/}

يمكن استخدام أدوات مطوري React لفحص التطبيقات المبنية بـ [React Native](https://reactnative.dev/).

أسهل طريقة لاستخدام أدوات مطوري React هي تثبيتها على نطاق عام:

The easiest way to use React Developer Tools is to install it globally:
```bash
# Yarn
yarn global add react-devtools
Expand All @@ -64,13 +70,14 @@ yarn global add react-devtools
npm install -g react-devtools
```

Next open the developer tools from the terminal.
ثم افتح أدوات المطور في موجه الأوامر (Terminal):

```bash
react-devtools
```

It should connect to any local React Native app that's running.
من المفترض أنه سيتصل بأي تطبيق React Native محلي إن كان يعمل.

> Try reloading the app if developer tools doesn't connect after a few seconds.
> جرب إعادة تحميل التطبيق إن لم تتصل أدوات المطور بعد ثوانٍ.

[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)
[تعرّف على المزيد حول تصحيح أخطاء React Native](https://reactnative.dev/docs/debugging).
2 changes: 1 addition & 1 deletion src/sidebarLearn.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"path": "/learn/editor-setup"
},
{
"title": "React Developer Tools",
"title": "أدوات مطوري React",
"path": "/learn/react-developer-tools"
}
]
Expand Down