Merge pull request #498 from alinkedd/translate-react-developer-tools

bkatsevych · web-flow · commit 3fbe51ee732c · 2023-11-20T16:26:10.000+02:00
Finished translation of React Developer Tools page
diff --git 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
@@ -1,33 +1,33 @@
 ---
-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 розробника (_React Developer Tools_) для інспектування 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 розробника" (_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 `<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/).
 
-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)
