From ec958903d9fc6cb47ae609b60e622327693d0f10 Mon Sep 17 00:00:00 2001 From: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com> Date: Thu, 27 Apr 2023 23:38:03 +0200 Subject: [PATCH 1/7] Translate useId reference to russian --- src/content/reference/react/useId.md | 94 ++++++++++++++-------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 4ea029f27..6ef7dfae7 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -4,7 +4,7 @@ title: useId -`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes. +`useId` -- хук для генерации уникальных идентификаторов, которые можно использовать, например, в атрибутах доступности. ```js const id = useId() @@ -16,11 +16,11 @@ const id = useId() --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `useId()` {/*useid*/} -Call `useId` at the top level of your component to generate a unique ID: +Чтобы создать уникальный идентификатор, вызовите `useId` на верхнем уровне своего компонента: ```js import { useId } from 'react'; @@ -30,35 +30,35 @@ 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` возвращает уникальный идентификатор, привязанный к данному конкретному вызову `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) --- -## 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*/} +### Создание уникальных идентификаторов для атрибутов доступности {/*generating-unique-ids-for-accessibility-attributes*/} -Call `useId` at the top level of your component to generate a unique ID: +Чтобы получить уникальный идентификатор, вызовите `useId` на верхнем уровне своего компонента: ```js [[1, 4, "passwordHintId"]] import { useId } from 'react'; @@ -68,7 +68,7 @@ function PasswordField() { // ... ``` -You can then pass the generated ID to different attributes: +После чего вы можете указывать этот сгенерированный идентификатор в различных атрибутах: ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]] <> @@ -77,26 +77,26 @@ 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/ru/docs/Web/Accessibility/ARIA), такие как [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby), позволяют обозначать смысловую связь между тегами. Например, можно указать, что некоторый элемент разметки (параграф) содержит краткое описание другого элемента (поля ввода). -In regular HTML, you would write it like this: +В обычном HTML вы могли бы описать это так: ```html {5,8}

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

``` -However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, generate a unique ID with `useId`: +Однако в React подобным образом фиксировать идентификаторы в коде -- не лучшая практика. Один и тот же компонент может использоваться в нескольких разных местах -- но ведь в каждом случае идентификаторы должны быть уникальны! Поэтому вместо фиксированного идентификатора лучше сгенерировать уникальный с помощью `useId`: ```js {4,11,14} import { useId } from 'react'; @@ -106,21 +106,21 @@ function PasswordField() { return ( <>

- 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` на экране в нескольких местах. @@ -132,14 +132,14 @@ function PasswordField() { return ( <>

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

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

Choose password

+

Выберите пароль

-

Confirm password

+

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

); @@ -163,33 +163,33 @@ 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` требует, чтобы деревья компонентов на сервере и на клиенте получались идентичными**. Если отрендеренные на сервере и на клиенте деревья не совпадут, то сгенерироованные на сервере идентификаторы не совпадут со сгенерированными на клиенте. -#### 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. -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` вычисляется на основе "пути из цепочки родителей" того компонента, который вызывает `useId`. А если отрендеренные на сервере и на клиенте деревья компонентов совпадают, то и полный "путь из цепочки родителей" для каждого компонента будет совпадать, в каком бы порядке они не рендерились. --- -### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/} +### Создание идентификаторов для нескольких элементов {/*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: +Если вам нужны разные идентификаторы для нескольких элементов, и эти элементы как-то связаны по смыслу, то с помощью `useId` вы можете создать один общий для всех префикс: @@ -200,10 +200,10 @@ export default function Form() { const id = useId(); return (
- +
- +
); @@ -216,20 +216,20 @@ input { margin: 5px; }
-This lets you avoid calling `useId` for every single element that needs a unique ID. +Так можно обойтись без лишних вызовов `useId` на каждый элемент, которому понадобился идентификатор. --- -### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/} +### Задание общего префикса для всех идентификаторов вообще {/*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-приложений на одной странице, то в вызовах [`createRoot`](/reference/react-dom/client/createRoot#parameters) и [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) вы можете указать опцию `identifierPrefix`. Поскольку каждый результат вызова `useId` будет иметь указанный в опции префикс, то так можно гарантировать, что идентификаторы, сгенерированные этими двумя приложениями, никогда не будут пересекаться. ```html index.html - My app + Мое приложение
@@ -246,14 +246,14 @@ function PasswordField() { return ( <>

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

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

Choose password

+

Выберите пароль

); From 3fd4c7f07913ee31803b15f05869c4666f18fb4d Mon Sep 17 00:00:00 2001 From: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com> Date: Fri, 28 Apr 2023 00:44:44 +0200 Subject: [PATCH 2/7] better wording --- src/content/reference/react/useId.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 6ef7dfae7..266b28709 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -79,7 +79,7 @@ function PasswordField() { **Разберем на примере, когда это может быть полезно.** -[HTML-атрибуты доступности](https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA), такие как [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby), позволяют обозначать смысловую связь между тегами. Например, можно указать, что некоторый элемент разметки (параграф) содержит краткое описание другого элемента (поля ввода). +[HTML-атрибуты доступности](https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA), такие как [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby), позволяют обозначать смысловую связь между тегами. Например, можно указать, что некоторый элемент разметки (абзац) содержит краткое описание другого элемента (поля ввода). В обычном HTML вы могли бы описать это так: @@ -177,9 +177,9 @@ input { margin: 5px; } Возможно вы задаётесь вопросом, почему лучше использовать `useId`, а не просто постоянно увеличивать некий глобальный счётчик -- наподобие `nextId++`. -Главное преимущество `useId` в том, что React гарантирует его корректную работу с [серверным рендерингом](/reference/react-dom/server). В процессе серверного рендеринга ваши компоненты рендерятся в обычный HTML, к которому затем на клиенте при [гидратации](/reference/react-dom/client/hydrateRoot) подключаются ваши обработчики событий. Чтобы гидратация сработала правильно, результат рендеринга на клиенте должен совпадать с полученным от сервера HTML. +Главное преимущество `useId` в том, что React гарантирует его корректную работу с [серверным рендерингом](/reference/react-dom/server). В процессе серверного рендеринга ваши компоненты создают HTML, к которому затем на клиенте при [гидратации](/reference/react-dom/client/hydrateRoot) подключаются ваши обработчики событий. Чтобы гидратация сработала правильно, клиентский вывод должен совпасть с полученным от сервера HTML. -Но этого совпадения очень сложно добиться, если пользоваться обычным инкрементируемым счётчиком, потому что порядок гидратации компонентов на клиенте может не совпадать с порядком, в котором HTML рендерился на сервере. А используя `useId`, вы гарантируете, что созданные идентификаторы на сервере и на клиенте будут совпадать, и гидратация выполнится правильно. +Однако крайне трудно быть уверенным, что они совпадут, если пользоваться обычным инкрементируемым счётчиком. Ведь порядок гидратации компонентов на клиенте может не совпадать с порядком, в котором HTML составлялся на сервере. Используя же `useId`, вы гарантируете, что созданные идентификаторы на сервере и на клиенте будут совпадать, и гидратация выполнится правильно. Внутри React `useId` вычисляется на основе "пути из цепочки родителей" того компонента, который вызывает `useId`. А если отрендеренные на сервере и на клиенте деревья компонентов совпадают, то и полный "путь из цепочки родителей" для каждого компонента будет совпадать, в каком бы порядке они не рендерились. @@ -222,7 +222,7 @@ input { margin: 5px; } ### Задание общего префикса для всех идентификаторов вообще {/*specifying-a-shared-prefix-for-all-generated-ids*/} -Если вы отображаете несколько независимых React-приложений на одной странице, то в вызовах [`createRoot`](/reference/react-dom/client/createRoot#parameters) и [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) вы можете указать опцию `identifierPrefix`. Поскольку каждый результат вызова `useId` будет иметь указанный в опции префикс, то так можно гарантировать, что идентификаторы, сгенерированные этими двумя приложениями, никогда не будут пересекаться. +Если вы отображаете несколько независимых React-приложений на одной странице, то в вызовах [`createRoot`](/reference/react-dom/client/createRoot#parameters) и [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) вы можете указать опцию `identifierPrefix`. Поскольку все полученные из `useId` идентификаторы будут с префиксом, указанным в этой опции, то так можно гарантировать, что сгенерированные разными приложениями идентификаторы никогда не пересекутся. From a1957ad37899059a82322d6c932e18d6a9b19b47 Mon Sep 17 00:00:00 2001 From: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com> Date: Fri, 28 Apr 2023 01:01:24 +0200 Subject: [PATCH 3/7] Fix yo --- src/content/reference/react/useId.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 266b28709..a05d3f659 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -77,7 +77,7 @@ function PasswordField() { ``` -**Разберем на примере, когда это может быть полезно.** +**Разберём на примере, когда это может быть полезно.** [HTML-атрибуты доступности](https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA), такие как [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby), позволяют обозначать смысловую связь между тегами. Например, можно указать, что некоторый элемент разметки (абзац) содержит краткое описание другого элемента (поля ввода). @@ -229,7 +229,7 @@ input { margin: 5px; } ```html index.html - Мое приложение + Моё приложение
From e2340fa3c7e145b88e31f55206fbf176bb6e8163 Mon Sep 17 00:00:00 2001 From: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com> Date: Sun, 30 Apr 2023 14:52:10 +0200 Subject: [PATCH 4/7] Fixed wording for nextId++ --- src/content/reference/react/useId.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index a05d3f659..5457292d6 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -42,7 +42,7 @@ function PasswordField() { #### Замечания {/*caveats*/} -* `useId` -- это хук. Поэтому его можно вызывать только **на верхнем уровне кода вашего компонента** или хука. Его нельзя вызывать внутри циклов и условий. Если это всё же для чего-то нужно, выделите этот вызов в отдельный компонент, который затем можно рендерить по условию или в цикле. +* `useId` -- это хук, поэтому его нужно вызывать только **на верхнем уровне вашего компонента** или хука. Его нельзя вызывать внутри циклов и условий. Если это всё же для чего-то нужно, выделите этот вызов в отдельный компонент, который затем можно рендерить по условию или в цикле. * `useId` **не должен использоваться для создания ключей** в списках. [Ключи должны выбираться на основе данных.](/learn/rendering-lists#where-to-get-your-key) @@ -175,7 +175,7 @@ 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. From ac724bc52360c370a596a9781dab2352440c86d1 Mon Sep 17 00:00:00 2001 From: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com> Date: Sun, 30 Apr 2023 15:25:31 +0200 Subject: [PATCH 5/7] For intro, use 'summary' style instead of 'definition' style --- src/content/reference/react/useId.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 5457292d6..1444c1d9c 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -4,7 +4,7 @@ title: useId -`useId` -- хук для генерации уникальных идентификаторов, которые можно использовать, например, в атрибутах доступности. +Хук `useId` позволяет создавать уникальные идентификаторы, которые затем можно использовать, например, в атрибутах доступности. ```js const id = useId() From 13e3dbe65bfd9acd2439106f9d4118ff4bf0ee06 Mon Sep 17 00:00:00 2001 From: Viacheslav Makarov <9768704+mekarthedev@users.noreply.github.com> Date: Mon, 1 May 2023 19:19:27 +0200 Subject: [PATCH 6/7] Better translation for 'usage' --- src/content/reference/react/useId.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 1444c1d9c..481d492ba 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -48,7 +48,7 @@ function PasswordField() { --- -## Использование {/*usage*/} +## Применение {/*usage*/} From 266db724779e5487f89863a7d2bd93eb3be9b37c Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 5 Jul 2023 20:34:37 +0100 Subject: [PATCH 7/7] Update src/content/reference/react/useId.md Co-authored-by: qq <79323963+rainyEra@users.noreply.github.com> --- src/content/reference/react/useId.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 481d492ba..18e74936e 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -68,7 +68,7 @@ function PasswordField() { // ... ``` -После чего вы можете указывать этот сгенерированный идентификатор в различных атрибутах: +После чего вы можете указывать этот сгенерированный идентификатор в различных атрибутах: ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]] <>