From e1534284787fcce8ef4f6fb86ee6efd870ddbb31 Mon Sep 17 00:00:00 2001 From: LeoMorgan113 Date: Fri, 17 Oct 2025 17:54:52 +0300 Subject: [PATCH 1/6] Added UA translation to useId page (1 part) --- .idea/.gitignore | 8 +++ .idea/aws.xml | 11 ++++ .idea/inspectionProfiles/Project_Default.xml | 6 +++ .idea/misc.xml | 6 +++ .idea/modules.xml | 8 +++ .idea/uk.react.dev-fork.iml | 9 ++++ .idea/vcs.xml | 6 +++ src/content/reference/react/useId.md | 54 +++++++++++--------- 8 files changed, 83 insertions(+), 25 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/aws.xml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/uk.react.dev-fork.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..13566b81b --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/aws.xml b/.idea/aws.xml new file mode 100644 index 000000000..b63b642cf --- /dev/null +++ b/.idea/aws.xml @@ -0,0 +1,11 @@ + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 000000000..03d9549ea --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 000000000..59780fefc --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 000000000..7f0f37cd4 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/uk.react.dev-fork.iml b/.idea/uk.react.dev-fork.iml new file mode 100644 index 000000000..d6ebd4805 --- /dev/null +++ b/.idea/uk.react.dev-fork.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..35eb1ddfb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index a77cf7a72..60e31b2e1 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -6,6 +6,8 @@ title: useId `useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes. +`useId` — це хук для генерації унікальних ID, які можуть передаватись як атрибути доступності. + ```js const id = useId() ``` @@ -20,7 +22,7 @@ const id = useId() ### `useId()` {/*useid*/} -Call `useId` at the top level of your component to generate a unique ID: +Викличте `useId` на верхньому рівні вашого компонента, щоб згенерувати унікальне ID: ```js import { useId } from 'react'; @@ -30,37 +32,38 @@ function PasswordField() { // ... ``` -[See more examples below.](#usage) +[Перегляньте більше прикладів нижче.](#usage) -#### Parameters {/*parameters*/} +#### Параметри {/*parameters*/} -`useId` does not take any parameters. +`useId` не приймає ніяких параметрів. -#### Returns {/*returns*/} +#### Результат {/*returns*/} -`useId` returns a unique ID string associated with this particular `useId` call in this particular component. +`useId` повертає унікальну ID стрінгу, пов'язану з конкретним запитом `useId` в цьому конкретньому компоненті. -#### Caveats {/*caveats*/} +#### Застереження {/*caveats*/} -* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. +* `useId` — це хук, тож він може бути викликаний тільки **на верхньому рівні вашого компонента** або у вашому власному Хуці. Ви не можете викликати його в циклах або умовах. Якщо ж є така потреба, то витягніть новий компонент та перемістіть в нього стан. -* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) +* `useId` **не повинно використовуватись для генерації ключів** у списках. [Ключі повинні генеруватись з ваших даних.](/learn/rendering-lists#where-to-get-your-key) -* `useId` currently cannot be used in [async Server Components](/reference/rsc/server-components#async-components-with-server-components). +* `useId` на данний момент не може бути використано в [async Server Components](/reference/rsc/server-components#async-components-with-server-components). --- -## Usage {/*usage*/} +## Використання {/*usage*/} -**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) +**Не викликайте `useId` для генерації ключів у списку.** [Ключі повинні генеруватись з ваших даних.](/learn/rendering-lists#where-to-get-your-key) + -### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/} +### Генеруйте унікальні ID для атрибутів доступності {/*generating-unique-ids-for-accessibility-attributes*/} -Call `useId` at the top level of your component to generate a unique ID: +Викликайте `useId` на верхньому рівні вашої компоненти для генерації унікального ID: ```js [[1, 4, "passwordHintId"]] import { useId } from 'react'; @@ -70,7 +73,7 @@ function PasswordField() { // ... ``` -You can then pass the generated ID to different attributes: +Далі ви можете передати generated ID до різних атрибутів: ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]] <> @@ -79,11 +82,11 @@ You can then pass the generated ID to different at ``` -**Let's walk through an example to see when this is useful.** +**Давайте розглянемо приклади, коли це може бути корисно.** -[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that an element (like an input) is described by another element (like a paragraph). +[Атрибути доступності HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) такі як [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дозволяють зазначити, що два теги пов'язані один з одним. Наприклад, ви можете визначити, що елемент (такий як input) описан іншим компонентом (такий як параграф). -In regular HTML, you would write it like this: +В звичайному HTML, ви би написали наступне: ```html {5,8}

- The password should contain at least 18 characters + Пароль повинен буди довжиною не меньш ніж 18 символів

); } ``` -Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash. +Тож, навіть якщо `PasswordField` з'явиться на сторінці багато разів, згенеровані ID не конфліктуватимуть. @@ -141,7 +144,7 @@ function PasswordField() { />

- The password should contain at least 18 characters + Пароль повинен буди довжиною не меньш ніж 18 символів

); @@ -150,9 +153,9 @@ function PasswordField() { export default function App() { return ( <> -

Choose password

+

Оберіть пароль

-

Confirm password

+

Підтвердіть пароль

); @@ -165,11 +168,12 @@ input { margin: 5px; } -[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies. +[Перегляньте відео](https://www.youtube.com/watch?v=0dNzNcuEuOo), щоб побачити різницю користувацького досвіду з дороміжними технологіями. With [server rendering](/reference/react-dom/server), **`useId` requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match. +Разом з [серверним рендерінгом](/reference/react-dom/server), **`useId` потребує ідентичного дерева компонент на сервері та на клієнті**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match. From b32a3d4f90b4fbb24ca3c89b16604515db638b5c Mon Sep 17 00:00:00 2001 From: LeoMorgan113 Date: Mon, 20 Oct 2025 14:05:28 +0300 Subject: [PATCH 2/6] Translation for 'useId' page --- src/content/reference/react/useId.md | 77 +++++++++++++--------------- 1 file changed, 37 insertions(+), 40 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 60e31b2e1..c5fca6de3 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -4,8 +4,6 @@ title: useId -`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes. - `useId` — це хук для генерації унікальних ID, які можуть передаватись як атрибути доступності. ```js @@ -18,11 +16,11 @@ const id = useId() --- -## Reference {/*reference*/} +## Референс {/*reference*/} ### `useId()` {/*useid*/} -Викличте `useId` на верхньому рівні вашого компонента, щоб згенерувати унікальне ID: +Викликайте `useId` на верхньому рівні вашого компонента, щоб згенерувати унікальне ID: ```js import { useId } from 'react'; @@ -40,15 +38,15 @@ function PasswordField() { #### Результат {/*returns*/} -`useId` повертає унікальну ID стрінгу, пов'язану з конкретним запитом `useId` в цьому конкретньому компоненті. +`useId` повертає унікальну ID строку, пов'язану з конкретним запитом `useId` в цьому конкретному компоненті. #### Застереження {/*caveats*/} -* `useId` — це хук, тож він може бути викликаний тільки **на верхньому рівні вашого компонента** або у вашому власному Хуці. Ви не можете викликати його в циклах або умовах. Якщо ж є така потреба, то витягніть новий компонент та перемістіть в нього стан. +* `useId` — це хук, тож він може викликатись тільки **на верхньому рівні вашого компонента** або у вашому власному хуці. Ви не можете викликати його в циклах або умовах. Якщо ж є така потреба, то витягніть новий компонент та перемістіть в нього стан. * `useId` **не повинно використовуватись для генерації ключів** у списках. [Ключі повинні генеруватись з ваших даних.](/learn/rendering-lists#where-to-get-your-key) -* `useId` на данний момент не може бути використано в [async Server Components](/reference/rsc/server-components#async-components-with-server-components). +* `useId` наразі не може бути використано в [async Server Components](/reference/rsc/server-components#async-components-with-server-components). --- @@ -61,7 +59,7 @@ function PasswordField() { -### Генеруйте унікальні ID для атрибутів доступності {/*generating-unique-ids-for-accessibility-attributes*/} +### Генерація унікальних ID для атрибутів доступності {/*generating-unique-ids-for-accessibility-attributes*/} Викликайте `useId` на верхньому рівні вашої компоненти для генерації унікального ID: @@ -73,7 +71,7 @@ function PasswordField() { // ... ``` -Далі ви можете передати generated ID до різних атрибутів: +Далі ви можете передати Згеренрувати ID до різних атрибутів: ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]] <> @@ -82,9 +80,9 @@ function PasswordField() { ``` -**Давайте розглянемо приклади, коли це може бути корисно.** +**Розглянемо приклади, коли це може бути корисно.** -[Атрибути доступності HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) такі як [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дозволяють зазначити, що два теги пов'язані один з одним. Наприклад, ви можете визначити, що елемент (такий як input) описан іншим компонентом (такий як параграф). +[Атрибути доступності HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) такі як [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дозволяють зазначити, що два теги пов'язані один з одним. Наприклад, ви можете визначити, що елемент (таким як input) описаний іншим компонентом (таким як параграф). В звичайному HTML, ви би написали наступне: @@ -101,7 +99,7 @@ function PasswordField() {

``` -Однак, такий хардкод ID не найкраща практика в React. Компонент може бути зарендерений на сторінці більш ніж один раз — але ID повинні бути унікальні! Замість того, щоб хардкодити ID, зренеруйте унікальне за допомогою `useId`: +Однак, такий хардкод ID не найкраща практика в React. Компонент може бути зарендерений на сторінці більш ніж один раз — але ID повинні бути унікальні! Замість того, щоб хардкодити ID, згенеруйте унікальне за допомогою `useId`: ```js {4,11,14} import { useId } from 'react'; @@ -118,7 +116,7 @@ function PasswordField() { />

- Пароль повинен буди довжиною не меньш ніж 18 символів + Пароль повинен бути довжиною не меньш ніж 18 символів

); @@ -144,7 +142,7 @@ function PasswordField() { />

- Пароль повинен буди довжиною не меньш ніж 18 символів + Пароль повинен бути довжиною не меньш ніж 18 символів

); @@ -168,34 +166,33 @@ input { margin: 5px; } -[Перегляньте відео](https://www.youtube.com/watch?v=0dNzNcuEuOo), щоб побачити різницю користувацького досвіду з дороміжними технологіями. +[Перегляньте відео](https://www.youtube.com/watch?v=0dNzNcuEuOo), щоб побачити різницю користувацького досвіду з допоміжними технологіями. -With [server rendering](/reference/react-dom/server), **`useId` requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match. -Разом з [серверним рендерінгом](/reference/react-dom/server), **`useId` потребує ідентичного дерева компонент на сервері та на клієнті**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match. +Разом з [серверним рендерінгом](/reference/react-dom/server), **`useId` потребує ідентичного дерева компонент на сервері та на клієнті**. Якщо дерева, які ви рендерите на сервері та на клієнті не збігаються, то і згенеровані ID не будуть збігатись. -#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/} +#### Чому використання useId краще за інкрементний лічильник? {/*why-is-useid-better-than-an-incrementing-counter*/} -You might be wondering why `useId` is better than incrementing a global variable like `nextId++`. +Ви можливо зацікавились, чому використання `useId` краще за інкрементацію глобальної змінної, як наприклад `nextId++`. -The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML. +Початкова перевага в тому, що `useId` React запевняється, що це працює разом із [серверним рендерінгом.](/reference/react-dom/server) Протягом серверного рендерінга, ваш компонент генерує HTML вивід. Пізніше, на стороні клієнта, [гідратація](/reference/react-dom/client/hydrateRoot) прикрипляє обробники подій до згенерованого HTML. Для роботи гідратації, клієнтський вивід має збігатись з серверним HTML. -This is very difficult to guarantee with an incrementing counter because the order in which the Client Components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client. +Це складно гарантувати з інкрементацією лічильника, бо порядок в якому Клієнтські Компоненти проходять гідратацію не збігається з порядком в якому серверний HTML був додан. Викликаючи `useId`, ви запевняєтесь, що гідратація буде працювати, та серверний і клієнтський виводи будуть збігатись. -Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order. +В межах React, `useId` генерується з "батьківського шляху" компоненти, що викликана. Ось чому, якщо клієнтське та серверне дерево однакове, "батьківський шлях" буде збігатись не дивлячись на порядок рендерінгу. --- -### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/} +### Генерація ID для декількох залежних елементів {/*generating-ids-for-several-related-elements*/} -If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them: +Якщо треба додати ID для декількох залежних елементів, ви можете викликати `useId` для генерації спільного префіксу: @@ -206,11 +203,11 @@ export default function Form() { const id = useId(); return (
- - + +
- - + +
); } @@ -222,20 +219,20 @@ input { margin: 5px; } -This lets you avoid calling `useId` for every single element that needs a unique ID. +Це дозволить запобігти виклику `useId` для кожного окремого елементу, якому треба унікальне ID. --- -### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/} +### Визначення спільного префіксу для всіх згенерованих ID {/*specifying-a-shared-prefix-for-all-generated-ids*/} -If you render multiple independent React applications on a single page, pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified. +Якщо ви рендерите декілька незалежних React застосунків на одній сторінці, передавайте `identifierPrefix` як опцію у ваш виклик [`createRoot`](/reference/react-dom/client/createRoot#parameters) або [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Це забезпечить те, що ID, згенеровані двома різними застосунками, ніколи не перетнуться, бо кожен ідентифікатор згенерований за допомогою `useId` починається з окремого префіксу, який ви вказали. ```html public/index.html - My app + Мій додаток
@@ -248,18 +245,18 @@ import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); - console.log('Generated identifier:', passwordHintId) + console.log('Згенеруй ідентифікатор:', passwordHintId) return ( <>

- The password should contain at least 18 characters + Пароль повинен бути довжиною не меньш ніж 18 символів

); @@ -268,7 +265,7 @@ function PasswordField() { export default function App() { return ( <> -

Choose password

+

Оберіть пароль

); @@ -311,9 +308,9 @@ input { margin: 5px; } --- -### Using the same ID prefix on the client and the server {/*using-the-same-id-prefix-on-the-client-and-the-server*/} +### Використання однакового ID префікса для клієнта та сервера {/*using-the-same-id-prefix-on-the-client-and-the-server*/} -If you [render multiple independent React apps on the same page](#specifying-a-shared-prefix-for-all-generated-ids), and some of these apps are server-rendered, make sure that the `identifierPrefix` you pass to the [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) call on the client side is the same as the `identifierPrefix` you pass to the [server APIs](/reference/react-dom/server) such as [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) +Якщо ви [рендерите декілька незалежних React застосунків на одній сторінці](#specifying-a-shared-prefix-for-all-generated-ids), і деякі з цих застосунків відрендерені сервером, запевниться, що `identifierPrefix`, який ви передаєте в [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) викликається на клієнтській стороні, так само як `identifierPrefix`, який ви передаєте в [server APIs](/reference/react-dom/server), наприклад [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) ```js // Server @@ -337,4 +334,4 @@ const root = hydrateRoot( ); ``` -You do not need to pass `identifierPrefix` if you only have one React app on the page. +Немає потреби передавати `identifierPrefix`, якщо ви маєте тільки один React застосунок на сторінці. From bbe9e4426ded292121492c1603062f1ace3b10fc Mon Sep 17 00:00:00 2001 From: LeoMorgan113 Date: Mon, 20 Oct 2025 14:11:46 +0300 Subject: [PATCH 3/6] Removed .idea --- .gitignore | 3 +++ .idea/.gitignore | 8 -------- .idea/aws.xml | 11 ----------- .idea/inspectionProfiles/Project_Default.xml | 6 ------ .idea/misc.xml | 6 ------ .idea/modules.xml | 8 -------- .idea/uk.react.dev-fork.iml | 9 --------- .idea/vcs.xml | 6 ------ 8 files changed, 3 insertions(+), 54 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/aws.xml delete mode 100644 .idea/inspectionProfiles/Project_Default.xml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/uk.react.dev-fork.iml delete mode 100644 .idea/vcs.xml diff --git a/.gitignore b/.gitignore index 99f4615e5..028b1bdd1 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,8 @@ node_modules # next.js /.next/ /out/ +.idea/ + # production /build @@ -39,3 +41,4 @@ public/fonts/**/Optimistic_*.woff2 # rss public/rss.xml + diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 13566b81b..000000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Editor-based HTTP Client requests -/httpRequests/ -# Datasource local storage ignored files -/dataSources/ -/dataSources.local.xml diff --git a/.idea/aws.xml b/.idea/aws.xml deleted file mode 100644 index b63b642cf..000000000 --- a/.idea/aws.xml +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml deleted file mode 100644 index 03d9549ea..000000000 --- a/.idea/inspectionProfiles/Project_Default.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 59780fefc..000000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 7f0f37cd4..000000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/uk.react.dev-fork.iml b/.idea/uk.react.dev-fork.iml deleted file mode 100644 index d6ebd4805..000000000 --- a/.idea/uk.react.dev-fork.iml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1ddfb..000000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file From 51bd088881e94501b6d9eca27e98795848e25535 Mon Sep 17 00:00:00 2001 From: LeoMorgan113 Date: Mon, 20 Oct 2025 14:12:09 +0300 Subject: [PATCH 4/6] Removed .idea --- .gitignore | 2 -- 1 file changed, 2 deletions(-) diff --git a/.gitignore b/.gitignore index 028b1bdd1..974699120 100644 --- a/.gitignore +++ b/.gitignore @@ -11,7 +11,6 @@ node_modules # next.js /.next/ /out/ -.idea/ # production @@ -41,4 +40,3 @@ public/fonts/**/Optimistic_*.woff2 # rss public/rss.xml - From 116f9585a9572edfcb13b6558b4b68a538b93670 Mon Sep 17 00:00:00 2001 From: LeoMorgan113 Date: Mon, 20 Oct 2025 14:12:25 +0300 Subject: [PATCH 5/6] Removed .idea --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 974699120..99f4615e5 100644 --- a/.gitignore +++ b/.gitignore @@ -12,7 +12,6 @@ node_modules /.next/ /out/ - # production /build From 3bc169e81618bc6804bf86055ff15b7bc407a183 Mon Sep 17 00:00:00 2001 From: LeoMorgan113 Date: Mon, 3 Nov 2025 16:24:06 +0200 Subject: [PATCH 6/6] Resolved comments --- src/content/reference/react/useId.md | 77 ++++++++++++++-------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index c5fca6de3..42374a624 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -4,7 +4,7 @@ title: useId -`useId` — це хук для генерації унікальних ID, які можуть передаватись як атрибути доступності. +`useId` — це хук для генерації унікальних ідентифікаторів (_далі_ — ID), які можуть передаватися як атрибути доступності. ```js const id = useId() @@ -16,11 +16,11 @@ const id = useId() --- -## Референс {/*reference*/} +## Опис {/*reference*/} ### `useId()` {/*useid*/} -Викликайте `useId` на верхньому рівні вашого компонента, щоб згенерувати унікальне ID: +Викличте `useId` на верхньому рівні вашого компонента, щоб згенерувати унікальне ID: ```js import { useId } from 'react'; @@ -34,19 +34,19 @@ function PasswordField() { #### Параметри {/*parameters*/} -`useId` не приймає ніяких параметрів. +`useId` не приймає жодних параметрів. #### Результат {/*returns*/} -`useId` повертає унікальну ID строку, пов'язану з конкретним запитом `useId` в цьому конкретному компоненті. +`useId` повертає унікальну ID-стрічку, пов'язану з конкретним запитом `useId` в цьому конкретному компоненті. #### Застереження {/*caveats*/} -* `useId` — це хук, тож він може викликатись тільки **на верхньому рівні вашого компонента** або у вашому власному хуці. Ви не можете викликати його в циклах або умовах. Якщо ж є така потреба, то витягніть новий компонент та перемістіть в нього стан. +* `useId` — це хук, тож він може викликатися тільки **на верхньому рівні вашого компонента** або у ваших власних хуках. Ви не можете викликати його в циклах або умовно. Якщо ж є така потреба, то виокреміть новий компонент та перемістіть у нього стан. -* `useId` **не повинно використовуватись для генерації ключів** у списках. [Ключі повинні генеруватись з ваших даних.](/learn/rendering-lists#where-to-get-your-key) +* `useId` **не має використовуватися для генерації ключів** у списках. [Ключі мають генеруватися з ваших даних.](/learn/rendering-lists#where-to-get-your-key) -* `useId` наразі не може бути використано в [async Server Components](/reference/rsc/server-components#async-components-with-server-components). +* `useId` наразі не може бути використано в [асинхронних серверних компонентах](/reference/rsc/server-components#async-components-with-server-components). --- @@ -54,14 +54,13 @@ function PasswordField() { -**Не викликайте `useId` для генерації ключів у списку.** [Ключі повинні генеруватись з ваших даних.](/learn/rendering-lists#where-to-get-your-key) - +**Не викликайте `useId` для генерації ключів у списку.** [Ключі мають генеруватися з ваших даних.](/learn/rendering-lists#where-to-get-your-key) ### Генерація унікальних ID для атрибутів доступності {/*generating-unique-ids-for-accessibility-attributes*/} -Викликайте `useId` на верхньому рівні вашої компоненти для генерації унікального ID: +Викличте `useId` на верхньому рівні вашого компонента для генерації унікального ID: ```js [[1, 4, "passwordHintId"]] import { useId } from 'react'; @@ -71,7 +70,7 @@ function PasswordField() { // ... ``` -Далі ви можете передати Згеренрувати ID до різних атрибутів: +Далі ви можете передати згенерований ID до різних атрибутів: ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]] <> @@ -82,9 +81,9 @@ function PasswordField() { **Розглянемо приклади, коли це може бути корисно.** -[Атрибути доступності HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) такі як [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дозволяють зазначити, що два теги пов'язані один з одним. Наприклад, ви можете визначити, що елемент (таким як input) описаний іншим компонентом (таким як параграф). +[Атрибути доступності HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA), як-от [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby), дають змогу зазначити, що два теги пов'язані один з одним. Наприклад, ви можете зазначити, що елемент (як-от input) описаний іншим компонентом (як-от параграф). -В звичайному HTML, ви би написали наступне: +У звичайному HTML ви би написали наступне: ```html {5,8}

- The password should contain at least 18 characters + Довжина паролю має бути не менш ніж 18 символів

``` -Однак, такий хардкод ID не найкраща практика в React. Компонент може бути зарендерений на сторінці більш ніж один раз — але ID повинні бути унікальні! Замість того, щоб хардкодити ID, згенеруйте унікальне за допомогою `useId`: +Однак, таке задання ID не найкраща практика в React. Компонент може бути відрендерений на сторінці більш ніж один раз — і ID повинні бути унікальні! Замість незмінно заданих ID, згенеруйте унікальне значення за допомогою `useId`: ```js {4,11,14} import { useId } from 'react'; @@ -116,7 +115,7 @@ function PasswordField() { />

- Пароль повинен бути довжиною не меньш ніж 18 символів + Довжина паролю має бути не менш ніж 18 символів

); @@ -142,7 +141,7 @@ function PasswordField() { />

- Пароль повинен бути довжиною не меньш ніж 18 символів + Довжина паролю має бути не менш ніж 18 символів

); @@ -151,7 +150,7 @@ function PasswordField() { export default function App() { return ( <> -

Оберіть пароль

+

Введіть пароль

Підтвердіть пароль

@@ -170,7 +169,7 @@ input { margin: 5px; } -Разом з [серверним рендерінгом](/reference/react-dom/server), **`useId` потребує ідентичного дерева компонент на сервері та на клієнті**. Якщо дерева, які ви рендерите на сервері та на клієнті не збігаються, то і згенеровані ID не будуть збігатись. +Для [серверного рендерингу](/reference/react-dom/server), **`useId` потребує ідентичного дерева компонентів на сервері та на клієнті**. Якщо дерева, які ви рендерите на сервері та на клієнті, не збігаються, то і згенеровані ID не будуть збігатись. @@ -178,21 +177,21 @@ input { margin: 5px; } #### Чому використання useId краще за інкрементний лічильник? {/*why-is-useid-better-than-an-incrementing-counter*/} -Ви можливо зацікавились, чому використання `useId` краще за інкрементацію глобальної змінної, як наприклад `nextId++`. +Можливо, вам кортить дізнатися, чому використання `useId` краще за інкрементування глобальної змінної, як наприклад, `nextId++`. -Початкова перевага в тому, що `useId` React запевняється, що це працює разом із [серверним рендерінгом.](/reference/react-dom/server) Протягом серверного рендерінга, ваш компонент генерує HTML вивід. Пізніше, на стороні клієнта, [гідратація](/reference/react-dom/client/hydrateRoot) прикрипляє обробники подій до згенерованого HTML. Для роботи гідратації, клієнтський вивід має збігатись з серверним HTML. +Початкова перевага `useId` в тому, що React запевниться, що це працює разом із [серверним рендерингом.](/reference/react-dom/server) Протягом серверного рендерингу, ваш компонент генерує HTML-вивід. Далі на клієнті [гідрація](/reference/react-dom/client/hydrateRoot) прикріплює обробники подій до згенерованого HTML. Для коректної роботи гідрації, клієнтський вивід має збігатись із серверним HTML. -Це складно гарантувати з інкрементацією лічильника, бо порядок в якому Клієнтські Компоненти проходять гідратацію не збігається з порядком в якому серверний HTML був додан. Викликаючи `useId`, ви запевняєтесь, що гідратація буде працювати, та серверний і клієнтський виводи будуть збігатись. +Це складно гарантувати для інкрементного лічильника, бо порядок, за яким клієнтські компоненти проходять гідрацію не збігається з порядком за яким був виданий серверний HTML. Викликаючи `useId`, ви запевняєтеся, що гідрація буде працювати, а серверний і клієнтський виводи будуть збігатися. -В межах React, `useId` генерується з "батьківського шляху" компоненти, що викликана. Ось чому, якщо клієнтське та серверне дерево однакове, "батьківський шлях" буде збігатись не дивлячись на порядок рендерінгу. +У межах React, `useId` генерується з "батьківського шляху" компонента, що його викликав. Ось чому, якщо клієнтське та серверне дерево однакове, "батьківський шлях" буде збігатися, незважаючи на порядок рендерингу. --- -### Генерація ID для декількох залежних елементів {/*generating-ids-for-several-related-elements*/} +### Генерація ID для декількох пов'язаних елементів {/*generating-ids-for-several-related-elements*/} -Якщо треба додати ID для декількох залежних елементів, ви можете викликати `useId` для генерації спільного префіксу: +Якщо треба додати ID для декількох пов'язаних елементів, ви можете викликати `useId` для генерації спільного префіксу: @@ -203,11 +202,11 @@ export default function Form() { const id = useId(); return (
- - + +
- - + +
); } @@ -219,20 +218,20 @@ input { margin: 5px; } -Це дозволить запобігти виклику `useId` для кожного окремого елементу, якому треба унікальне ID. +Це дасть змогу виклику `useId` для кожного окремого елементу, якому треба унікальне ID. --- -### Визначення спільного префіксу для всіх згенерованих ID {/*specifying-a-shared-prefix-for-all-generated-ids*/} +### Визначення спільного префікса для всіх згенерованих ID {/*specifying-a-shared-prefix-for-all-generated-ids*/} -Якщо ви рендерите декілька незалежних React застосунків на одній сторінці, передавайте `identifierPrefix` як опцію у ваш виклик [`createRoot`](/reference/react-dom/client/createRoot#parameters) або [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Це забезпечить те, що ID, згенеровані двома різними застосунками, ніколи не перетнуться, бо кожен ідентифікатор згенерований за допомогою `useId` починається з окремого префіксу, який ви вказали. +Якщо ви рендерите декілька незалежних React-застосунків на одній сторінці, передавайте `identifierPrefix` як опцію до вашого [`createRoot`](/reference/react-dom/client/createRoot#parameters) або [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Це забезпечить те, що ID, згенеровані двома різними застосунками, ніколи не перетнуться, бо кожен ідентифікатор, згенерований за допомогою `useId`, починатиметься з окремого префіксу, який ви вказали. ```html public/index.html - Мій додаток + Мій застосунок
@@ -245,7 +244,7 @@ import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); - console.log('Згенеруй ідентифікатор:', passwordHintId) + console.log('Згенерований ідентифікатор:', passwordHintId) return ( <>

- Пароль повинен бути довжиною не меньш ніж 18 символів + Довжина паролю має бути не менш ніж 18 символів

); @@ -308,9 +307,9 @@ input { margin: 5px; } --- -### Використання однакового ID префікса для клієнта та сервера {/*using-the-same-id-prefix-on-the-client-and-the-server*/} +### Використання однакового ID-префікса на клієнті та сервері {/*using-the-same-id-prefix-on-the-client-and-the-server*/} -Якщо ви [рендерите декілька незалежних React застосунків на одній сторінці](#specifying-a-shared-prefix-for-all-generated-ids), і деякі з цих застосунків відрендерені сервером, запевниться, що `identifierPrefix`, який ви передаєте в [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) викликається на клієнтській стороні, так само як `identifierPrefix`, який ви передаєте в [server APIs](/reference/react-dom/server), наприклад [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) +Якщо ви [рендерите декілька незалежних React-застосунків на одній сторінці](#specifying-a-shared-prefix-for-all-generated-ids), і деякі з цих застосунків відрендерені сервером, перевірте, що `identifierPrefix`, який ви передаєте до [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) на клієнті, є тим самим `identifierPrefix`, який ви передаєте до [серверних APIs](/reference/react-dom/server), наприклад, [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) ```js // Server @@ -334,4 +333,4 @@ const root = hydrateRoot( ); ``` -Немає потреби передавати `identifierPrefix`, якщо ви маєте тільки один React застосунок на сторінці. +Немає потреби передавати `identifierPrefix`, якщо ви маєте тільки один React-застосунок на сторінці.