Merge pull request #558 from undead404/webdoky-links

Replace links to MDN with links to WebDoky

Author: alinkedd

TRANSLATION.md

@@ -16,6 +16,18 @@
 - Вичитуйте тексти, що перекладені за допомогою зовнішніх сервісів (Google Translate, ChatGPT тощо).
 - Якщо український відповідник є рідковживаним або має декілька значень, то краще залишити після нього оригінальне слово у дужках, щоб полегшити розуміння читачем.
 
+### Заміна посилань
+
+Потрібно замінювати посилання на матеріал англійською посиланням на його переклад українською, якщо такий переклад існує. Нижче наведена таблиця вебсайтів, що мають українські відповідники, де варто шукати заміну зовнішнім посиланням.
+
+| Оригінальний сайт     | Варіант українською |
+| --------------------- | ------------------- |
+| en.wikipedia.org      | uk.wikipedia.org    |
+| javascript.info       | uk.javascript.info  |
+| developer.mozilla.org | webdoky.org         |
+
+Цей список не є вичерпним.
+
 ## Процес перевірки перекладу
 
 1. Мейнтейнер переглядає усі змінені файли PR'у.

src/content/learn/add-react-to-an-existing-project.md

@@ -34,7 +34,7 @@ title: Інтеграція React в існуючий проект
 
 Ви можете зробити це у два кроки:
 
-1. **Налаштуйте JavaScript середовище**, яке б дозволяло вам використовувати [JSX синтаксис](/learn/writing-markup-with-jsx), розділіть ваш код на модулі з [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) синтаксисом і користуйтеся пакетами (наприклад, React) з [npm](https://www.npmjs.com/) реєстру пакетів.
+1. **Налаштуйте JavaScript середовище**, яке б дозволяло вам використовувати [JSX синтаксис](/learn/writing-markup-with-jsx), розділіть ваш код на модулі з [`import`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) синтаксисом і користуйтеся пакетами (наприклад, React) з [npm](https://www.npmjs.com/) реєстру пакетів.
 2. **Рендеріть ваші React компоненти** там, де ви б хотіли бачити їх на сторінці.
 
 Конкретний підхід залежить від налаштувань вашої існуючої сторінки, тому розглянемо деякі деталі.

src/content/learn/conditional-rendering.md

@@ -54,7 +54,7 @@ export default function PackingList() {
 
 Зверніть увагу, що деякі компоненти `Item` мають проп `isPacked` встановлений на `true` замість `false`. Ви хочете додати позначку (✔) до запакованих речей, якщо `isPacked={true}`.
 
-Ви можете зробити це за допомогою [оператора `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) ось так:
+Ви можете зробити це за допомогою [оператора `if`/`else`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Statements/if...else) ось так:
 
 ```js
 if (isPacked) {
@@ -181,7 +181,7 @@ return <li className="item">{name}</li>;
 
 ### Умовний (тернарний) оператор (`? :`) {/*conditional-ternary-operator--*/}
 
-JavaScript має компактний синтаксис для написання умовного виразу -- [умовний оператор](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) або "тернарний оператор".
+JavaScript має компактний синтаксис для написання умовного виразу -- [умовний оператор](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Conditional_operator) або "тернарний оператор".
 
 Замість цього:
 
@@ -260,7 +260,7 @@ export default function PackingList() {
 
 ### Логічний оператор AND (`&&`) {/*logical-and-operator-*/}
 
-Ще одне поширене скорочення, з яким ви зіткнетеся -- [логічний оператор AND (`&&`) JavaScript.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Всередині компонентів React він часто з'являється, коли ви хочете відрендерити деякий JSX, коли умова є `true`, **або нічого не рендерити в іншому випадку.** З `&&` ви могли б умовно відрендерити позначку, лише якщо `isPacked` є `true`:
+Ще одне поширене скорочення, з яким ви зіткнетеся -- [логічний оператор AND (`&&`) JavaScript.](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Всередині компонентів React він часто з'являється, коли ви хочете відрендерити деякий JSX, коли умова є `true`, **або нічого не рендерити в іншому випадку.** З `&&` ви могли б умовно відрендерити позначку, лише якщо `isPacked` є `true`:
 
 ```js
 return (
@@ -310,7 +310,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-[JavaScript && вираз](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) повертає значення своєї правої сторони (у нашому випадку, позначку) якщо ліва сторона (наша умова) `true`. Але якщо умова `false`, то весь вираз стає `false`. React розглядає `false` як "діру" в JSX дереві, так само як `null` або `undefined`, і не рендерить нічого на його місці.
+[JavaScript && вираз](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Logical_AND) повертає значення своєї правої сторони (у нашому випадку, позначку) якщо ліва сторона (наша умова) `true`. Але якщо умова `false`, то весь вираз стає `false`. React розглядає `false` як "діру" в JSX дереві, так само як `null` або `undefined`, і не рендерить нічого на його місці.
 
 
 <Pitfall>
@@ -327,7 +327,7 @@ export default function PackingList() {
 
 ### Умовне присвоєння JSX змінній {/*conditionally-assigning-jsx-to-a-variable*/}
 
-Коли скорочення заважають писати звичайний код, спробуйте використати оператор `if` та змінну. Ви можете переприсвоювати змінні, визначені за допомогою [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), тому почніть з задання вмісту за замовчуванням, який ви хочете відобразити, name:
+Коли скорочення заважають писати звичайний код, спробуйте використати оператор `if` та змінну. Ви можете переприсвоювати змінні, визначені за допомогою [`let`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Statements/let), тому почніть з задання вмісту за замовчуванням, який ви хочете відобразити, name:
 
 ```js
 let itemContent = name;

src/content/learn/index.md

@@ -95,7 +95,7 @@ function AboutPage() {
 
 ## Додавання стилів {/*adding-styles*/}
 
-У React, ви вказуєте клас CSS за допомогою `className`. Він працює так само, як атрибут [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) у HTML:
+У React, ви вказуєте клас CSS за допомогою `className`. Він працює так само, як атрибут [`class`](https://webdoky.org/uk/docs/Web/HTML/Global_attributes/class) у HTML:
 
 ```js
 <img className="avatar" />
@@ -111,7 +111,7 @@ function AboutPage() {
 ```
 
 
-React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проекту.
+React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проекту.
 
 ## Відображення даних {/*displaying-data*/}
 
@@ -182,7 +182,7 @@ export default function Profile() {
 ## Умовний рендер {/*conditional-rendering*/}
 
 
-У React немає спеціального синтаксису для запису умов. Замість цього ви будете використовувати ті ж прийоми, що й під час написання звичайного JavaScript коду. Наприклад, ви можете використовувати оператор [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else), щоб умовно включати JSX:
+У React немає спеціального синтаксису для запису умов. Замість цього ви будете використовувати ті ж прийоми, що й під час написання звичайного JavaScript коду. Наприклад, ви можете використовувати оператор [`if`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Statements/if...else), щоб умовно включати JSX:
 
 ```js
 let content;
@@ -198,7 +198,7 @@ return (
 );
 ```
 
-Якщо ви віддаєте перевагу більш компактному коду, ви можете використовувати [умовний оператор `?`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). На відміну від `if`, він працює в JSX:
+Якщо ви віддаєте перевагу більш компактному коду, ви можете використовувати [умовний оператор `?`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Conditional_operator). На відміну від `if`, він працює в JSX:
 
 ```js
 <div>
@@ -210,7 +210,7 @@ return (
 </div>
 ```
 
-Якщо вам не потрібна гілка `else`, ви також можете використовувати коротший [логічний синтаксис `&&`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
+Якщо вам не потрібна гілка `else`, ви також можете використовувати коротший [логічний синтаксис `&&`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Operators/Logical_AND#zakorochennia-obchyslennia):
 
 ```js
 <div>
@@ -221,7 +221,7 @@ return (
 
 ## Рендер списків {/*rendering-lists*/}
 
-Для рендеру списків компонентів ви будете покладатися на такі особливості JavaScript, як [цикл `for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) та [метод масивів `map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
+Для рендеру списків компонентів ви будете покладатися на такі особливості JavaScript, як [цикл `for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) та [метод масивів `map()`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
 
 Наприклад, припустімо, що у вас є масив продуктів:
 

src/content/learn/rendering-lists.md

@@ -30,7 +30,7 @@ title: Рендеринг списків
 </ul>
 ```
 
-Єдина відмінність між цими елементами списку полягає у їхньому вмісті, їхніх даних. Під час побудови інтерфейсів вам часто буде потрібно відобразити кілька екземплярів одного компонента, використовуючи різні дані — від списків коментарів до галерей зображень профілів. У цьому разі ви можете зберігати ці дані в об'єктах і масивах JavaScript та використовувати методи як [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) і [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), щоб відрендерити з них списки компонентів.
+Єдина відмінність між цими елементами списку полягає у їхньому вмісті, їхніх даних. Під час побудови інтерфейсів вам часто буде потрібно відобразити кілька екземплярів одного компонента, використовуючи різні дані — від списків коментарів до галерей зображень профілів. У цьому разі ви можете зберігати ці дані в об'єктах і масивах JavaScript та використовувати методи як [`map()`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map) і [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), щоб відрендерити з них списки компонентів.
 
 Ось короткий приклад того, як згенерувати список елементів із масиву:
 
@@ -262,7 +262,7 @@ const listItems = chemists.map(person => { // Фігурна дужка
 });
 ```
 
-Кажуть, що функції зі стрілками, які містять `=> {`, мають ["блок тіла".](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) Вони дозволяють написати більше одного рядка коду, але ви *мусите* вказати оператор `return` самостійно. Якщо ви забудете, нічого не повернеться!
+Кажуть, що функції зі стрілками, які містять `=> {`, мають ["блок тіла".](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Functions/Arrow_functions#tilo-funktsii) Вони дозволяють написати більше одного рядка коду, але ви *мусите* вказати оператор `return` самостійно. Якщо ви забудете, нічого не повернеться!
 
 </Pitfall>
 

src/content/learn/responding-to-events.md

@@ -316,7 +316,7 @@ button { margin-right: 10px; }
 
 <Note>
 
-Переконайтеся, що ви використовуєте відповідні теги HTML для своїх обробників подій. Наприклад, для обробки натискань використовуйте [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) замість `<div onClick={handleClick}>`. Використання наявного у браузері тегу `<button>` дає змогу використовувати вбудовані функції браузера, як-от навігація за допомогою клавіатури. Якщо вам не до вподоби початкова стилізація кнопки у браузері і ви бажаєте зробити її більше схожою на посилання чи інший елемент UI, використовуйте CSS. [Докладніше про створення доступної розмітки.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
+Переконайтеся, що ви використовуєте відповідні теги HTML для своїх обробників подій. Наприклад, для обробки натискань використовуйте [`<button onClick={handleClick}>`](https://webdoky.org/uk/docs/Web/HTML/Element/button) замість `<div onClick={handleClick}>`. Використання наявного у браузері тегу `<button>` дає змогу використовувати вбудовані функції браузера, як-от навігація за допомогою клавіатури. Якщо вам не до вподоби початкова стилізація кнопки у браузері і ви бажаєте зробити її більше схожою на посилання чи інший елемент UI, використовуйте CSS. [Докладніше про створення доступної розмітки.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
 
 </Note>