Skip to content
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

Finished translation of React Developer Tools page #498

Merged
merged 2 commits into from
Nov 20, 2023
Merged

Finished translation of React Developer Tools page #498

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4424df9
Finished translation of React Developer Tools page
alinkedd Nov 19, 2023
75f5b3d
Apply suggestions from code review
bkatsevych Nov 20, 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
2 changes: 2 additions & 0 deletions TRANSLATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,13 @@
| Оригінал | Переклад |
| ------------------ | ---------- |
| API reference | API довідник |
| app | застосунок |
| array | массив |
| arrow function | стрілкова функція |
| attribute | атрибут |
| batch | група оновлень |
| batching | групування |
| browser | браузер |
| bug | помилка, дефект |
| bundler | бандлер |
| callback | функція зворотнього виклику |
Expand Down
46 changes: 23 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,33 @@
---
title: React Developer Tools
title: Інструменти розробки React
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved
---

<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_) для інспектування [компонентів](/learn/your-first-component) React, редагування їх [пропсів](/learn/passing-props-to-a-component) і [стану](/learn/state-a-components-memory), а також для виявлення проблем з продуктивністю.
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved

</Intro>

<YouWillLearn>

* How to install React Developer Tools
* Як встановити інструменти розробки React
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved

</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_). Воно доступне для декількох популярних браузерів:
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved

* [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_.
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved

![React Developer Tools extension](/images/docs/react-devtools-extension.png)
![Розширення 'Інструменти розробки React'](/images/docs/react-devtools-extension.png)
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved

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

Next open the developer tools from the terminal:
Далі відкрийте інструменти розробки з терміналу:
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved
```bash
react-devtools
```

Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
Потім під'єднайте інструменти, вказавши наступний тег `<script>` на початку елементу `<head>` у коді вашого вебсайту:
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved
```html {3}
<html>
<head>
<script src="http://localhost:8097"></script>
```

Reload your website in the browser now to view it in developer tools.
Перезавантажте вебсайт у браузері, щоб переглянути його в інструментах розробки.
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved

![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
![Автономні 'Інструменти розробки React'](/images/docs/react-devtools-standalone.png)
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved

## 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/).
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved

The easiest way to use React Developer Tools is to install it globally:
Найпростіший спосіб використання інструментів — встановити їх глобально:
```bash
# Yarn
yarn global add react-devtools
Expand All @@ -64,13 +64,13 @@ yarn global add react-devtools
npm install -g react-devtools
```

Next open the developer tools from the terminal.
Далі відкрийте інструменти розробки з терміналу:
bkatsevych marked this conversation as resolved.
Show resolved Hide resolved
```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)
Loading