From 5783238fb0a6ab58fc40b184cdc8bd1a5df45d15 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Tue, 30 Jul 2024 16:43:20 +0300 Subject: [PATCH 1/5] Replace links to MDN with links to WebDoky --- .../learn/add-react-to-an-existing-project.md | 2 +- src/content/learn/conditional-rendering.md | 10 +++++----- src/content/learn/index.md | 12 ++++++------ src/content/learn/rendering-lists.md | 4 ++-- src/content/learn/responding-to-events.md | 2 +- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 370f5e362..bb846e16e 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/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 компоненти** там, де ви б хотіли бачити їх на сторінці. Конкретний підхід залежить від налаштувань вашої існуючої сторінки, тому розглянемо деякі деталі. diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index d569c39e8..652b67aae 100644 --- a/src/content/learn/conditional-rendering.md +++ b/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
  • {name}
    • ; ### Умовний (тернарний) оператор (`? :`) {/*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() { -[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`, і не рендерить нічого на його місці. @@ -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; diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 25d7e1af1..2bb43b464 100644 --- a/src/content/learn/index.md +++ b/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 @@ -111,7 +111,7 @@ function AboutPage() { ``` -React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проекту. +React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [``](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
    @@ -210,7 +210,7 @@ return (
    ``` -Якщо вам не потрібна гілка `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
    @@ -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). Наприклад, припустімо, що у вас є масив продуктів: diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 9f9d6063d..7a99ff25b 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -30,7 +30,7 @@ title: Рендеринг списків ``` -Єдина відмінність між цими елементами списку полягає у їхньому вмісті, їхніх даних. Під час побудови інтерфейсів вам часто буде потрібно відобразити кілька екземплярів одного компонента, використовуючи різні дані — від списків коментарів до галерей зображень профілів. У цьому разі ви можете зберігати ці дані в об'єктах і масивах 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` самостійно. Якщо ви забудете, нічого не повернеться! diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md index a1d03834e..f630a72dc 100644 --- a/src/content/learn/responding-to-events.md +++ b/src/content/learn/responding-to-events.md @@ -316,7 +316,7 @@ button { margin-right: 10px; } -Переконайтеся, що ви використовуєте відповідні теги HTML для своїх обробників подій. Наприклад, для обробки натискань використовуйте [`