From de638296571ccb5cb2b64dd726c31d9fddead3cc Mon Sep 17 00:00:00 2001 From: arash moghadas Date: Tue, 27 May 2025 01:23:27 +0330 Subject: [PATCH 1/4] translate react-developer-tools page --- src/content/learn/react-developer-tools.md | 38 ++++++++++------------ 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 75406c5c6..38f6c0d1c 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,33 +1,31 @@ --- -title: React Developer Tools +title: ابزار توسعه ری‌اکت --- - -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. - +از ابزار توسعه ری‌اکت برای بررسی کردن [کاپوننت ها](/learn/your-first-component)، تغییرات [پراپ](/learn/passing-props-to-a-component) و [وضعیت ها](/learn/state-a-components-memory) و همچنین شناسایی مشکلات عملکردی و کارایی استفاده می شود. -* How to install React Developer Tools +* چگونه ابزار توسعه ری‌اکت را نصب کنید. -## 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: +نصب کردن افزونه ابزار توسعه ری‌اکت، ساده ترین راهی است که برای اشکال زدایی کردن وبسایت های که با ری‌اکت ساخته شده اند وجود دارد. این افزونه برای مرورگر های معروف در دسترس می باشد. -* [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=en) +* [نصب برای **Firefox**](https://addons.mozilla.org/en-US/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. +حالا اگر یک وب سایت که با **ری‌اکت** ساخته شده است را باز کنید، پنل های _Components_ و _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-other-browsers*/} +برای سایر مرورگر ها (مانند سافاری) پکیج [`react-devtools`](https://www.npmjs.com/package/react-devtools) را نصب کنید. ```bash # Yarn yarn global add react-devtools @@ -36,26 +34,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the 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. +وب سایت خود را بارگیری مجدد کرده تا بتوانید آن را در ابزار توسعه مشاهده کنید. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) -## Mobile (React Native) {/*mobile-react-native*/} +## موبایل (ری‌اکت نیتیو) {/*mobile-react-native*/} -To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection. +برای بررسی کردن برنامه هایی که با [ری‌اکت نیتیو](https://reactnative.dev/) ساخته شده اند، میتوانید از [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) استفاده کنید. این یک اشکال زدای درونی دارد که به صورت عمیق با ابزار توسعه ری‌اکت ادغام می شود. همه ویژگی ها به صورت کاملا یکسان با انچه در افزونه مروگر وجود دارد از جمله برجسته سازی عنصر و انتخاب شده ها کار می کند. -[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging) +[در مورد اشکال زدایی در ری‌اکت نیتیو بیشتر بخوانید.](https://reactnative.dev/docs/debugging) -> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above. +> برای نسخه های ری‌اکت نیتیو قبل از 0.76، لطفا از ابزار توسعه مستقل React DevTools برای [سافاری و سایر مرورگر ها](#safari-and-other-browsers) در راهنمای فوق استفاده کنید. From bf63903adef5b55fd7bde54fabf66dd6eef828a5 Mon Sep 17 00:00:00 2001 From: arash moghadas Date: Sat, 31 May 2025 08:29:53 +0330 Subject: [PATCH 2/4] improve clarity and consistency in Persian localization of react-developer-tools documentation. --- src/content/learn/react-developer-tools.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 38f6c0d1c..6fcde90e9 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -3,7 +3,9 @@ title: ابزار توسعه ری‌اکت --- -از ابزار توسعه ری‌اکت برای بررسی کردن [کاپوننت ها](/learn/your-first-component)، تغییرات [پراپ](/learn/passing-props-to-a-component) و [وضعیت ها](/learn/state-a-components-memory) و همچنین شناسایی مشکلات عملکردی و کارایی استفاده می شود. + +از ابزار توسعه ری‌اکت برای بررسی [کاپوننت‌ها](/learn/your-first-component)، ویرایش [prop](/learn/passing-props-to-a-component) و [state](/learn/state-a-components-memory) و همچنین شناسایی مشکلات عملکردی استفاده می‌شود. + @@ -14,13 +16,13 @@ title: ابزار توسعه ری‌اکت ## اکستنشن های مرورگر {/*browser-extension*/} -نصب کردن افزونه ابزار توسعه ری‌اکت، ساده ترین راهی است که برای اشکال زدایی کردن وبسایت های که با ری‌اکت ساخته شده اند وجود دارد. این افزونه برای مرورگر های معروف در دسترس می باشد. +نصب افزونه ابزار توسعه ری‌اکت ساده‌ترین روش برای اشکال‌زدایی وب‌سایت‌های ساخته‌شده با ری‌اکت است. این افزونه برای چند مرورگر محبوب در دسترس است. * [نصب برای **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) * [نصب برای **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) * [نصب برای **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -حالا اگر یک وب سایت که با **ری‌اکت** ساخته شده است را باز کنید، پنل های _Components_ و _Profiler_ را مشاهده خواهید کرد. +اکنون، اگر از یک وب‌سایت **ساخته‌شده با ری‌اکت** بازدید کنید، پانل‌های _Components_ و _Profiler_ را خواهید دید. ![React Developer Tools extension](/images/docs/react-devtools-extension.png) @@ -34,26 +36,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -بعد ابزار های توسعه را از ترمینال باز کنید: +سپس ابزار های توسعه را از ترمینال باز کنید: ```bash react-devtools ``` -سپس وب سایت خود را با اضافه کردن تگ ` ``` -وب سایت خود را بارگیری مجدد کرده تا بتوانید آن را در ابزار توسعه مشاهده کنید. +اکنون وب‌سایت خود را در مرورگر بازخوانی کنید تا بتوانید آن را در ابزار توسعه مشاهده کنید. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) ## موبایل (ری‌اکت نیتیو) {/*mobile-react-native*/} -برای بررسی کردن برنامه هایی که با [ری‌اکت نیتیو](https://reactnative.dev/) ساخته شده اند، میتوانید از [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) استفاده کنید. این یک اشکال زدای درونی دارد که به صورت عمیق با ابزار توسعه ری‌اکت ادغام می شود. همه ویژگی ها به صورت کاملا یکسان با انچه در افزونه مروگر وجود دارد از جمله برجسته سازی عنصر و انتخاب شده ها کار می کند. +برای بررسی برنامه‌هایی که با [ری‌اکت نیتیو](https://reactnative.dev/) ساخته شده‌اند، می‌توانید از [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) استفاده کنید. این ابزار اشکال‌زدای داخلی است که به‌طور کامل با ابزار توسعه ری‌اکت ادغام شده است. همه ویژگی‌ها، از جمله برجسته‌سازی و انتخاب عناصر بومی، به‌طور دقیق مشابه نسخه افزونه مرورگر کار می‌کنند. [در مورد اشکال زدایی در ری‌اکت نیتیو بیشتر بخوانید.](https://reactnative.dev/docs/debugging) -> برای نسخه های ری‌اکت نیتیو قبل از 0.76، لطفا از ابزار توسعه مستقل React DevTools برای [سافاری و سایر مرورگر ها](#safari-and-other-browsers) در راهنمای فوق استفاده کنید. +> برای نسخه‌های ری‌اکت نیتیو قبل از 0.76، لطفاً از نسخه مستقل React DevTools مطابق [راهنمای سافاری و سایر مرورگرها](#safari-and-other-browsers) در بالا استفاده کنید. \ No newline at end of file From 2b4c5ab3c0d37b54b9ae7c48abace19f3019c7ef Mon Sep 17 00:00:00 2001 From: Arash Date: Sat, 31 May 2025 15:12:37 +0330 Subject: [PATCH 3/4] Update src/content/learn/react-developer-tools.md Co-authored-by: Mohammad Reza Badri <85818966+mrbadri@users.noreply.github.com> --- 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 6fcde90e9..78df7a20b 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,7 +4,7 @@ title: ابزار توسعه ری‌اکت -از ابزار توسعه ری‌اکت برای بررسی [کاپوننت‌ها](/learn/your-first-component)، ویرایش [prop](/learn/passing-props-to-a-component) و [state](/learn/state-a-components-memory) و همچنین شناسایی مشکلات عملکردی استفاده می‌شود. +از ابزار توسعه ری‌اکت برای بررسی [کامپوننت‌ها](/learn/your-first-component)، ویرایش [prop](/learn/passing-props-to-a-component) و [state](/learn/state-a-components-memory) و همچنین شناسایی مشکلات عملکردی استفاده می‌شود. From 873045c7e2a927ef51b92f3326e6dd5270585ee9 Mon Sep 17 00:00:00 2001 From: Arash Date: Sat, 31 May 2025 15:12:58 +0330 Subject: [PATCH 4/4] Update src/content/learn/react-developer-tools.md Co-authored-by: Mohammad Reza Badri <85818966+mrbadri@users.noreply.github.com> --- 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 78df7a20b..b10278b91 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -36,7 +36,7 @@ yarn global add react-devtools npm install -g react-devtools ``` -سپس ابزار های توسعه را از ترمینال باز کنید: +سپس ابزارهای توسعه را از ترمینال باز کنید: ```bash react-devtools ```