diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 12bf10a50..44e0eedac 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -52,7 +52,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Ці компоненти зараз знаходяться у **файлі кореневого компонента** з назвою `App.js` у цьому прикладі. Залежно від вашої конфігурації ваш кореневий компонент може бути в іншому файлі. Якщо ви використовуєте фреймворк з роутингом на основі файлів, як-от Next.js, ваш кореневий компонент буде різним для кожної сторінки. +Ці компоненти зараз знаходяться у **файлі кореневого компонента** з назвою `App.js` у цьому прикладі. Залежно від вашої конфігурації ваш кореневий компонент може бути в іншому файлі. Якщо ви використовуєте фреймворк із маршрутизацією на основі файлів, як-от Next.js, ваш кореневий компонент буде різним для кожної сторінки. ## Експорт та імпорт компонента {/*exporting-and-importing-a-component*/} diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 89d645937..0a882b05e 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -21,7 +21,7 @@ title: Швидкий старт ## Створення та вкладення компонентів {/*components*/} -React додатки складаються з *компонентів*. Компонент це частина UI (інтерфейсу користувача), яка має власну логіку та зовнішній вигляд. Компонент може бути маленьким, як кнопка, або ж розміром з цілу сторінку. +React-застосунки складаються з *компонентів*. Компонент це частина UI (інтерфейсу користувача), яка має власну логіку та зовнішній вигляд. Компонент може бути маленьким, як кнопка, або ж розміром з цілу сторінку. React компоненти це JavaScript функції які повертають розмітку: @@ -39,7 +39,7 @@ function MyButton() { export default function MyApp() { return (
-

Ласкаво просимо до мого додатку

+

Ласкаво просимо до мого застосунку

); @@ -64,7 +64,7 @@ function MyButton() { export default function MyApp() { return (
-

Ласкаво просимо до мого додатку

+

Ласкаво просимо до мого застосунку

); @@ -77,7 +77,7 @@ export default function MyApp() { ## Написання розмітки з використанням JSX {/*writing-markup-with-jsx*/} -Синтаксис розмітки, яку ви бачили вище, має назву *JSX*. Це необов'язково, але більшість React-проектів використовують JSX для зручності. Усі [інструменти, які ми рекомендуємо для локальної розробки](/learn/installation) підтримують JSX за замовчуванням. +Синтаксис розмітки, яку ви бачили вище, має назву *JSX*. Це необов'язково, але більшість React-проєктів використовують JSX для зручності. Усі [інструменти, які ми рекомендуємо для локальної розробки](/learn/installation) підтримують JSX за замовчуванням. JSX більш строгий, ніж HTML. Ви зобов'язані закривати такі теги як `
`. Також ваш компонент не може повертати декілька JSX тегів. Ви повинні огортати їх у спільний батьківський елемент, такий як `
...
` або пусту `<>...` обгортку: @@ -111,7 +111,7 @@ function AboutPage() { ``` -React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [``](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проекту. +React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [``](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проєкту. ## Відображення даних {/*displaying-data*/} @@ -383,7 +383,7 @@ button { ## Використання хуків {/*using-hooks*/} -Функції, що починаються з `use`, називаються *Хуками*. `useState` — це вбудований Хук, наданий React. Ви можете знайти інші вбудовані Хуки в [API довіднику](/reference/react). Також ви можете написати власні Хуки, комбінуючи існуючі. +Функції, що починаються з `use`, називаються *Хуками*. `useState` — це вбудований Хук, наданий React. Ви можете знайти інші вбудовані Хуки в [API довіднику](/reference/react). Також ви можете написати власні Хуки, комбінуючи наявні. Хуки є більш обмежувальними, ніж інші функції. Ви можете викликати Хуки лише *на верхньому рівні* ваших компонентів (або інших Хуків). Якщо ви хочете використовувати `useState` в умові або циклі, витягніть це в новий компонент і помістіть його туди. @@ -535,4 +535,4 @@ button { Тепер ви знаєте основи написання React коду! -Перегляньте [Туторіал](/learn/tutorial-tic-tac-toe) щоб застосувати їх на практиці та створити свій перший міні-додаток із React. +Перегляньте [Туторіал](/learn/tutorial-tic-tac-toe) щоб застосувати їх на практиці та створити свій перший міні-застосунок із React. diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index 12b919a4d..3be39c4c9 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -11,7 +11,7 @@ title: Встановлення * [Як почати новий React-проєкт](/learn/start-a-new-react-project) -* [Як інтегрувати React в існуючий проєкт](/learn/add-react-to-an-existing-project) +* [Як інтегрувати React у наявний проєкт](/learn/add-react-to-an-existing-project) * [Як налаштувати редактор коду](/learn/editor-setup) * [Як встановити інструменти React розробника](/learn/react-developer-tools) @@ -47,9 +47,9 @@ export default function App() { Якщо ви хочете створити застосунок або вебсайт за допомогою React, [почніть новий React-проєкт.](/learn/start-a-new-react-project) -## Інтегрувати React в існуючий проєкт {/*add-react-to-an-existing-project*/} +## Інтегрувати React у наявний проєкт {/*add-react-to-an-existing-project*/} -Якщо ви хочете використати React у власному застосунку або вебсайті, [інтегруйте React в існуючий проєкт.](/learn/add-react-to-an-existing-project) +Якщо ви хочете використати React у власному застосунку або вебсайті, [інтегруйте React у наявний проєкт.](/learn/add-react-to-an-existing-project) ## Подальші кроки {/*next-steps*/} diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md index 6984e133c..b488dd103 100644 --- a/src/content/learn/updating-arrays-in-state.md +++ b/src/content/learn/updating-arrays-in-state.md @@ -88,7 +88,7 @@ button { margin-left: 5px; } -Натомість створіть *новий* масив, який містить існуючі елементи *і* новий елемент у кінці. Це можна зробити кількома способами, але найпростішим є використання `...` — синтаксису [spread для масиву](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals): +Натомість створіть *новий* масив, який містить наявні елементи *і* новий елемент у кінці. Це можна зробити кількома способами, але найпростішим є використання `...` — синтаксису [spread для масиву](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals): ```js setArtists( // Замінити стан @@ -443,7 +443,7 @@ export default function List() { Тут ви використовуєте spread-синтаксис `[...list]`, щоб спочатку створити копію вихідного масиву. Тепер, коли маєте копію, можете використовувати методи зміни, як-от `nextList.reverse()` або `nextList.sort()`, або навіть призначати окремі елементи за допомогою `nextList[0] = "something"`. -Однак, **навіть якщо скопіюєте масив, ви не зможете змінити існуючі елементи _всередині_ нього безпосередньо.** Це пояснюється тим, що копіювання неглибоке — новий масив міститиме ті самі елементи, що й оригінальний. Отже, якщо змінюєте об'єкт у скопійованому масиві, ви змінюєте наявний стан. Наприклад, такий код є проблемою. +Однак, **навіть якщо скопіюєте масив, ви не зможете змінити наявні елементи _всередині_ нього безпосередньо.** Це пояснюється тим, що копіювання неглибоке — новий масив міститиме ті самі елементи, що й оригінальний. Отже, якщо змінюєте об'єкт у скопійованому масиві, ви змінюєте наявний стан. Наприклад, такий код є проблемою. ```js const nextList = [...list]; @@ -544,7 +544,7 @@ function ItemList({ artworks, onToggle }) { ```js const myNextList = [...myList]; const artwork = myNextList.find(a => a.id === artworkId); -artwork.seen = nextSeen; // Проблема: мутація існуючого елементу +artwork.seen = nextSeen; // Проблема: мутація наявного елементу setMyList(myNextList); ``` @@ -566,7 +566,7 @@ setMyList(myList.map(artwork => { Тут `...` — синтаксис spread об'єкта, який використовується для [створення копії об'єкта.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax) -За допомогою цього підходу жоден із існуючих елементів стану не змінюється, і помилку виправлено: +За допомогою цього підходу жоден із наявних елементів стану не змінюється, і помилку виправлено: diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index b593436a3..1277831d8 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -11,7 +11,7 @@ title: Ваш перший компонент * Що таке компонент -* Яку роль відіграють компоненти в додатку React +* Яку роль відіграють компоненти в застосунку React * Як написати свій перший компонент React @@ -33,7 +33,7 @@ title: Ваш перший компонент Ця розмітка представляє статтю `
`, її заголовок `

`, та (скорочений) зміст у вигляді впорядкованого списку `
    `. Розмітка подібна до цієї, в поєднанні з CSS для стилізації та JavaScript для інтерактивності, лежить в основі кожної бічної панелі, аватара, модального вікна, випадного меню — кожного елемента UI, який ви бачите в Вебі. -React дозволяє вам поєднувати вашу розмітку, CSS та JavaScript у власні "компоненти", **повторно використовувані елементи UI для вашого додатку.** Код змісту, який ви бачили вище, можна перетворити на компонент ``, який ви можете відобразити на кожній сторінці. Під капотом він все ще використовує ті ж самі HTML-теги, такі як `
    `, `

    `, тощо. +React дозволяє вам поєднувати вашу розмітку, CSS та JavaScript у власні "компоненти", **повторно використовувані елементи UI для вашого застосунку.** Код змісту, який ви бачили вище, можна перетворити на компонент ``, який ви можете відобразити на кожній сторінці. Під капотом він все ще використовує ті ж самі HTML-теги, такі як `
    `, `

    `, тощо. Так само, як і з HTML-тегами, ви можете компонувати, впорядковувати та вкладати компоненти для створення цілих сторінок. Наприклад, сторінка документації, яку ви читаєте, складається з компонентів React: @@ -51,11 +51,11 @@ React дозволяє вам поєднувати вашу розмітку, CS ``` -Зі зростанням вашого проекту ви помітите, що багато з ваших дизайнів можна створити шляхом повторного використання компонентів, які ви вже написали, що пришвидшує вашу розробку. Наш зміст вище може бути доданий до будь-якого екрану за допомогою ``! Ви навіть можете розпочати свій проект з тисячами компонентів, які поділяє спільнота відкритого коду React, як-от [Chakra UI](https://chakra-ui.com/) та [Material UI.](https://material-ui.com/) +Зі зростанням вашого проєкту ви помітите, що багато з ваших дизайнів можна створити шляхом повторного використання компонентів, які ви вже написали, що пришвидшує вашу розробку. Наш зміст вище може бути доданий до будь-якого екрану за допомогою ``! Ви навіть можете розпочати свій проєкт з тисячами компонентів, які поділяє спільнота відкритого коду React, як-от [Chakra UI](https://chakra-ui.com/) та [Material UI.](https://material-ui.com/) ## Визначення компонента {/*defining-a-component*/} -Традиційно, створюючи веб-сторінки, веб-розробники спершу писали розмітку їхнього контенту, а потім додавали інтерактив, трохи посипаючи JavaScript'ом. Це чудово працювало, коли інтерактив була приємним доповненням до вебу. Тепер це очікується на багатьох сайтах і в усіх додатках. React ставить взаємодію на перше місце, використовуючи при цьому ту ж технологію: **компонент React - це функція JavaScript, яку можна _посипати розміткою_.** Ось як це виглядає (ви можете відредагувати приклад нижче): +Традиційно, створюючи веб-сторінки, веб-розробники спершу писали розмітку їхнього контенту, а потім додавали інтерактив, трохи посипаючи JavaScript'ом. Це чудово працювало, коли інтерактив була приємним доповненням до вебу. Тепер це очікується на багатьох сайтах і в усіх застосунках. React ставить взаємодію на перше місце, використовуючи при цьому ту ж технологію: **компонент React - це функція JavaScript, яку можна _посипати розміткою_.** Ось як це виглядає (ви можете відредагувати приклад нижче): @@ -210,13 +210,13 @@ function Profile() { #### Компоненти на всій глибині {/*components-all-the-way-down*/} -Ваш React додаток починається з "кореневого" компонента. Зазвичай він створюється автоматично, коли ви створюєте новий проект. Наприклад, якщо ви використовуєте [CodeSandbox](https://codesandbox.io/) або якщо ви використовуєте фреймворк [Next.js](https://nextjs.org/), кореневий компонент визначений в `pages/index.js`. У цих прикладах ви експортуєте кореневі компоненти. +Ваш React-застосунок починається з "кореневого" компонента. Зазвичай він створюється автоматично, коли ви створюєте новий проєкт. Наприклад, якщо ви використовуєте [CodeSandbox](https://codesandbox.io/) або якщо ви використовуєте фреймворк [Next.js](https://nextjs.org/), кореневий компонент визначений в `pages/index.js`. У цих прикладах ви експортуєте кореневі компоненти. -Більшість додатків React використовують компоненти на всій глибині. Це означає, що ви будете використовувати компоненти не тільки для повторно використовуваних елементів, таких як кнопки, але й для більших елементів, таких як бічні панелі, списки та, врешті-решт, цілі сторінки! Компоненти - зручний спосіб організації коду UI та розмітки, навіть якщо деякі з них використовуються лише один раз. +Більшість застосунків React використовують компоненти на всій глибині. Це означає, що ви будете використовувати компоненти не тільки для повторно використовуваних елементів, таких як кнопки, але й для більших елементів, таких як бічні панелі, списки та, врешті-решт, цілі сторінки! Компоненти - зручний спосіб організації коду UI та розмітки, навіть якщо деякі з них використовуються лише один раз. -[Фреймворки на основі React](/learn/start-a-new-react-project) в цьому плані йдуть ще далі. Замість використання порожнього HTML-файлу і дозволу React "перейняти" керування сторінкою за допомогою JavaScript, вони також автоматично генерують HTML з ваших React компонентів. Це дозволяє вашому додатку показувати деякий контент до завантаження JavaScript коду. +[Фреймворки на основі React](/learn/start-a-new-react-project) в цьому плані йдуть ще далі. Замість використання порожнього HTML-файлу і дозволу React "перейняти" керування сторінкою за допомогою JavaScript, вони також автоматично генерують HTML з ваших React компонентів. Це дозволяє вашому застосунку показувати деякий контент до завантаження JavaScript коду. -Проте, багато сайтів використовують React лише для [додавання інтерактивності до існуючих HTML-сторінок.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Вони мають кілька кореневих компонентів замість одного для всієї сторінки. Ви можете використовувати стільки React, скільки вам потрібно. +Проте, багато сайтів використовують React лише для [додавання інтерактивності до наявних HTML-сторінок.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Вони мають кілька кореневих компонентів замість одного для всієї сторінки. Ви можете використовувати стільки React, скільки вам потрібно. @@ -224,8 +224,8 @@ function Profile() { Ви щойно спробували React вперше! Давайте повторимо деякі ключові моменти. -* React дозволяє створювати компоненти, **елементи UI для повторного використання у вашому додатку.** -* У додатку React кожен елемент UI є компонентом. +* React дозволяє створювати компоненти, **елементи UI для повторного використання у вашому застосунку.** +* У застосунку React кожен елемент UI є компонентом. * React компоненти є звичайними JavaScript функціями, за винятком: 1. Їхні назви завжди починаються з великої літери. diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index af4387bfd..b00798278 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -238,7 +238,7 @@ export default function ModalContent({ onClose }) { -При використанні порталів, важливо впевнитись, що ваш додаток залишається доступним для користувачів з обмеженими можливостями. Приміром, вам може знадобитись функціонал для управління фокусом клавіатури, щоб користувач міг переміщати фокус клавіатури в та з порталу у звичний спосіб. +При використанні порталів, важливо впевнитись, що ваш застосунок залишається доступним для користувачів з обмеженими можливостями. Приміром, вам може знадобитись функціонал для управління фокусом клавіатури, щоб користувач міг переміщати фокус клавіатури в та з порталу у звичний спосіб. Слідуйте [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) коли створюєте модальні вікна. Якщо ви використовуєте пакет для модальних вікон від спільноти, переконайтеся, що він відповідає цим рекомендація та доступний користувачам з обмеженими можливостями. @@ -248,16 +248,16 @@ export default function ModalContent({ onClose }) { ### Рендер React-компонентів у серверну розмітку, створену без використання React {/*rendering-react-components-into-non-react-server-markup*/} -Портали можуть бути корисними якщо ваш React-корінь це тільки частина статичної або відрендереної на сервері сторінки, не створеної з React. Наприклад, якщо ваша сторінка побудована з серверним фреймворком подібним до Rails, ви можете створити інтерактивні частини в середині статичних зон, приміром в бокових панелях. У порівнянні зі створенням [кількох окремих React-коренів,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) портали дозволяють працювати з додатком як з єдиним React-деревом зі спільним станом, навіть якщо його окремі шматочки рендеряться в інші частини DOM. +Портали можуть бути корисними якщо ваш React-корінь це тільки частина статичної або відрендереної на сервері сторінки, не створеної з React. Наприклад, якщо ваша сторінка побудована з серверним фреймворком подібним до Rails, ви можете створити інтерактивні частини в середині статичних зон, приміром в бокових панелях. У порівнянні зі створенням [кількох окремих React-коренів,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) портали дозволяють працювати із застосунком як з єдиним React-деревом зі спільним станом, навіть якщо його окремі шматочки рендеряться в інші частини DOM. ```html index.html - Мій додаток + Мій застосунок -

    Ласкаво просимо до мого гібридного додатку

    +

    Ласкаво просимо до мого гібридного застосунку

    Це серверна розмітка без React diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index 9442e3ef9..c7c929465 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -564,7 +564,7 @@ label { #### Винесення провайдерів в окремий компонент {/*extracting-providers-to-a-component*/} -Коли ваш додаток зростає, ближче до кореня з'являється "піраміда" контекстів. Це цілком нормально. Однак, якщо вам не подобається складна ієрархія з естетичної точки зору, ви можете винести провайдери в окремий компонент. У цьому прикладі `MyProviders` приховує "технічні деталі" і рендерить передані йому дочірні компоненти всередині необхідних провайдерів. Зверніть увагу, що стан `theme` і `setTheme` необхідний безпосередньо в компоненті `MyApp`, тому `MyApp` все ще керує цією частиною стану. +Коли ваш застосунок зростає, ближче до кореня з'являється "піраміда" контекстів. Це цілком нормально. Однак, якщо вам не подобається складна ієрархія з естетичної точки зору, ви можете винести провайдери в окремий компонент. У цьому прикладі `MyProviders` приховує "технічні деталі" і рендерить передані йому дочірні компоненти всередині необхідних провайдерів. Зверніть увагу, що стан `theme` і `setTheme` необхідний безпосередньо в компоненті `MyApp`, тому `MyApp` все ще керує цією частиною стану.