From 4424df9d1e0bd17b70f42ed8d4a2ec2ffcb4d374 Mon Sep 17 00:00:00 2001 From: alinkedd Date: Mon, 20 Nov 2023 01:26:39 +0200 Subject: [PATCH 1/2] Finished translation of React Developer Tools page --- TRANSLATION.md | 2 + src/content/learn/react-developer-tools.md | 46 +++++++++++----------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/TRANSLATION.md b/TRANSLATION.md index be48bf1b3..70cf5cf0d 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -17,11 +17,13 @@ | Оригінал | Переклад | | ------------------ | ---------- | | API reference | API довідник | +| app | застосунок | | array | массив | | arrow function | стрілкова функція | | attribute | атрибут | | batch | група оновлень | | batching | групування | +| browser | браузер | | bug | помилка, дефект | | bundler | бандлер | | callback | функція зворотнього виклику | diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6bb..b3e62224d 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,33 +1,33 @@ --- -title: React Developer Tools +title: Інструменти розробки 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. +Використовуйте інструменти розробки React (_React Developer Tools_) для інспектування [компонентів](/learn/your-first-component) React, редагування їх [пропсів](/learn/passing-props-to-a-component) і [стану](/learn/state-a-components-memory), а також для виявлення проблем з продуктивністю. -* How to install React Developer Tools +* Як встановити інструменти розробки React -## 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" (_React Developer Tools_). Воно доступне для декількох популярних браузерів: -* [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=uk) +* [Встановити для **Firefox**](https://addons.mozilla.org/uk/firefox/addon/react-devtools/) +* [Встановити для **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil?hl=uk) -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 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 та інші браузери {/*safari-and-other-browsers*/} +Для інших браузерів (наприклад, Safari) встановіть npm-пакет [`react-devtools`](https://www.npmjs.com/package/react-devtools): ```bash # Yarn yarn global add react-devtools @@ -36,26 +36,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) +![Автономні 'Інструменти розробки 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/). -The easiest way to use React Developer Tools is to install it globally: +Найпростіший спосіб використання інструментів — встановити їх глобально: ```bash # Yarn yarn global add react-devtools @@ -64,13 +64,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the 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) From 75f5b3d36d50efc72a1cde0f7484e6c1c21f720a Mon Sep 17 00:00:00 2001 From: Bohdan Katsevych <94533356+bkatsevych@users.noreply.github.com> Date: Mon, 20 Nov 2023 16:17:09 +0200 Subject: [PATCH 2/2] Apply suggestions from code review --- src/content/learn/react-developer-tools.md | 24 +++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index b3e62224d..7ae961362 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,30 +1,30 @@ --- -title: Інструменти розробки React +title: Інструменти React розробника --- -Використовуйте інструменти розробки React (_React Developer Tools_) для інспектування [компонентів](/learn/your-first-component) React, редагування їх [пропсів](/learn/passing-props-to-a-component) і [стану](/learn/state-a-components-memory), а також для виявлення проблем з продуктивністю. +Використовуйте інструменти React розробника (_React Developer Tools_) для інспектування React [компонентів](/learn/your-first-component), редагування їх [пропсів](/learn/passing-props-to-a-component) і [стану](/learn/state-a-components-memory), а також для виявлення проблем з продуктивністю. -* Як встановити інструменти розробки React +* Як встановити інструменти React розробника ## Розширення браузера {/*browser-extension*/} -Найпростіший спосіб налагодження вебсайтів, створених за допомогою React — встановити розширення браузера "Інструменти розробки React" (_React Developer Tools_). Воно доступне для декількох популярних браузерів: +Найпростіший спосіб налагодження вебсайтів, створених за допомогою React — встановити розширення браузера "Інструменти React розробника" (_React Developer Tools_). Воно доступне для декількох популярних браузерів: * [Встановити для **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=uk) * [Встановити для **Firefox**](https://addons.mozilla.org/uk/firefox/addon/react-devtools/) * [Встановити для **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil?hl=uk) -Тепер під час відвідування вебсайту, **створеного за допомогою React**, ви побачите вкладки _Components_ і _Profiler_. +Тепер, якщо ви відвідаєте вебсайт, **який створений за допомогою React**, ви побачите вкладки _Components_ і _Profiler_. -![Розширення 'Інструменти розробки React'](/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): @@ -36,24 +36,24 @@ yarn global add react-devtools npm install -g react-devtools ``` -Далі відкрийте інструменти розробки з терміналу: +Далі відкрийте інструменти розробника з терміналу: ```bash react-devtools ``` -Потім під'єднайте інструменти, вказавши наступний тег ` ``` -Перезавантажте вебсайт у браузері, щоб переглянути його в інструментах розробки. +Перезавантажте вебсайт у браузері, щоб переглянути його в інструментах розробника. -![Автономні 'Інструменти розробки React'](/images/docs/react-devtools-standalone.png) +![Автономні 'Інструменти React розробника'](/images/docs/react-devtools-standalone.png) ## Мобільний застосунок (React Native) {/*mobile-react-native*/} -Інструменти розробки React також можна використовувати для інспектування застосунків, створених за допомогою [React Native](https://reactnative.dev/). +Інструменти React розробника також можна використовувати для інспектування застосунків, створених за допомогою [React Native](https://reactnative.dev/). Найпростіший спосіб використання інструментів — встановити їх глобально: ```bash @@ -64,7 +64,7 @@ yarn global add react-devtools npm install -g react-devtools ``` -Далі відкрийте інструменти розробки з терміналу: +Далі відкрийте інструменти розробника з терміналу: ```bash react-devtools ```