Merge pull request #476 from A7med3bdulBaset/react-developer-tools.md

AhmedBaset · web-flow · commit 2e93dade77b3 · 2023-05-31T21:58:36.000+03:00
[Done] Translate `React Developer tools`
diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md
@@ -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
@@ -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
@@ -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).
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
@@ -37,7 +37,7 @@
           "path": "/learn/editor-setup"
         },
         {
-          "title": "React Developer Tools",
+          "title": "أدوات مطوري React",
           "path": "/learn/react-developer-tools"
         }
       ]

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@`
`37`	`37`	`"path": "/learn/editor-setup"`
`38`	`38`	`},`
`39`	`39`	`{`
`40`		`- "title": "React Developer Tools",`
	`40`	`+ "title": "أدوات مطوري React",`
`41`	`41`	`"path": "/learn/react-developer-tools"`
`42`	`42`	`}`
`43`	`43`	`]`