From 8f117dce4b0e8d4548e7800f97f43bde0c90b419 Mon Sep 17 00:00:00 2001 From: Vyacheslav Vinichenko Date: Thu, 27 Apr 2023 22:37:30 +0300 Subject: [PATCH 1/3] Finished translation of Fragment page --- src/content/reference/react/Fragment.md | 58 ++++++++++++------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 638450405..964eb250d 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, often used via `<>...` syntax, lets you group elements without a wrapper node. +``, часто використовується за допомогою синтаксису `<>...`, дозволяє групувати елементи без обгорткового вузла. ```js <> @@ -19,29 +19,29 @@ title: (<>...) --- -## Reference {/*reference*/} +## Опис {/*reference*/} ### `` {/*fragment*/} -Wrap elements in `` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<>` is shorthand for `` in most cases. +Огорніть елементи у `` щоб групувати їх разом в ситуаціях, коли вам потрібен один елемент. Групування елементів у `Fragment` не впливає на результуючий DOM; це так само, як і якщо елементи не були згруповані. Порожній тег JSX `<>` є скороченням для `` у більшості випадків. -#### Props {/*props*/} +#### Пропси {/*props*/} -- **optional** `key`: Fragments declared with the explicit `` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **необов’язковий** `ключ (key)`: Фрагменти, оголошені з явним синтаксисом `` можуть мати [ключі.](/learn/rendering-lists#keeping-list-items-in-order-with-key) -#### Caveats {/*caveats*/} +#### Обмеження {/*caveats*/} -- If you want to pass `key` to a Fragment, you can't use the `<>...` syntax. You have to explicitly import `Fragment` from `'react'` and render `...`. +- Якщо ви хочете передати `key` для Fragment, ви не можете використовувати синтаксис `<>...`. Ви маєте явно імпортувати `Fragment` з `'react'` та рендерити `...`. -- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<>` to `[]` or back, or when you go from rendering `<>` to `` and back. This only works a single level deep: for example, going from `<><>` to `` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +- React не буде [скидати стан](/learn/preserving-and-resetting-state) компонента коли ви переходите від рендерингу `<>` до `[]` або назад, або коли ви переходите від рендерингу `<>` до `` і назад. Це може працювати лише на одному рівні вкладеності: наприклад, перехід від `<><>` до `` скидає стан компонента. Дивіться точну семантику [тут.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- -## Usage {/*usage*/} +## Використання {/*usage*/} -### Returning multiple elements {/*returning-multiple-elements*/} +### Повернення кількох елементів {/*returning-multiple-elements*/} -Use `Fragment`, or the equivalent `<>...` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group: +Використовуйте `Fragment`, або еквівалентний синтаксис `<>...`, для групування кількох елементів разом. Ви можете використовувати його для збору кількох елементів в будь-якому місці, де може бути один елемент. Наприклад, компонент може повернути тільки один елемент, але за допомогою Fragment ви можете групувати кілька елементів разом і повертати їх як групу: ```js {3,6} function Post() { @@ -54,7 +54,7 @@ function Post() { } ``` -Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `

` and `

` DOM nodes appear as siblings without wrappers around them: +Фрагменти є корисним інструментом, оскільки групування елементів з Фрагментом не має впливу на розташування або стилізацію, на відміну від огортання елементів в інший контейнер, такий як DOM-елемент. Якщо ви перевірите цей приклад за допомогою інструментів браузера, ви побачите, що всі DOM-вузли `

` і `

` відображаються як сусідні елементи без обгорток навколо них: @@ -62,8 +62,8 @@ Fragments are useful because grouping elements with a Fragment has no effect on export default function Blog() { return ( <> - - + + ) } @@ -94,9 +94,9 @@ function PostBody({ body }) { -#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/} +#### Як написати Fragment без спеціального синтаксису? {/*how-to-write-a-fragment-without-the-special-syntax*/} -The example above is equivalent to importing `Fragment` from React: +Цей приклад еквівалентний імпорту `Fragment` з React: ```js {1,5,8} import { Fragment } from 'react'; @@ -111,15 +111,15 @@ function Post() { } ``` -Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments) +Зазвичай вам не потрібно цього робити, якщо вам не треба [передавати ключ у ваш `Fragment`.](#rendering-a-list-of-fragments) --- -### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/} +### Присвоєння змінній декількох елементів {/*assigning-multiple-elements-to-a-variable*/} -Like any other element, you can assign Fragment elements to variables, pass them as props, and so on: +Як і будь-який інший елемент, фрагменти можна присвоювати змінним, передавати їх як пропси тощо: ```js function CloseDialog() { @@ -131,7 +131,7 @@ function CloseDialog() { ); return ( - Are you sure you want to leave this page? + Ви впевнені, що хочете залишити цю сторінку? ); } @@ -139,17 +139,17 @@ function CloseDialog() { --- -### Grouping elements with text {/*grouping-elements-with-text*/} +### Групування елементів з текстом {/*grouping-elements-with-text*/} -You can use `Fragment` to group text together with components: +Ви можете використовувати `Fragment`, щоб групувати текст разом з компонентами: ```js function DateRangePicker({ start, end }) { return ( <> - From + Від - to + до ); @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) { --- -### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/} +### Відображення списку фрагментів {/*rendering-a-list-of-fragments*/} -Here's a situation where you need to write `Fragment` explicitly instead of using the `<>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute: +Ось ситуація, коли вам потрібно явно написати `Fragment`, замість використання синтаксису `<>`. Якщо ви [рендерите кілька елементів в циклі](/learn/rendering-lists), вам потрібно призначити `key` кожному елементу. Якщо елементи всередині циклу є Фрагментами, то вам потрібно використовувати звичайний синтаксис елементів JSX, щоб надати атрибут `key`: ```js {3,6} function Blog() { @@ -173,7 +173,7 @@ function Blog() { } ``` -You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: +Ви можете перевірити DOM, щоб переконатися, що навколо "дочірніх компонентів" Fragment немає огорнутих елементів: @@ -181,8 +181,8 @@ You can inspect the DOM to verify that there are no wrapper elements around the import { Fragment } from 'react'; const posts = [ - { id: 1, title: 'An update', body: "It's been a while since I posted..." }, - { id: 2, title: 'My new blog', body: 'I am starting a new blog!' } + { id: 1, title: 'Оновлення', body: "Минув деякий час після мого останнього повідомлення..." }, + { id: 2, title: 'Мій новий блог', body: 'Я розпочинаю новий блог!' } ]; export default function Blog() { From 8e6b42603ca80a4666fe7aa117a20a9dbacaa6eb Mon Sep 17 00:00:00 2001 From: Vyacheslav Vinichenko Date: Tue, 9 May 2023 02:20:35 +0300 Subject: [PATCH 2/3] Finished translation of Fragment page --- src/content/reference/react/Fragment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 964eb250d..7fe224158 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, часто використовується за допомогою синтаксису `<>...`, дозволяє групувати елементи без обгорткового вузла. +``, часто використовується за допомогою синтаксису `<>...`, дозволяє групувати елементи без елементу-обгортки. ```js <> @@ -23,7 +23,7 @@ title: (<>...) ### `` {/*fragment*/} -Огорніть елементи у `` щоб групувати їх разом в ситуаціях, коли вам потрібен один елемент. Групування елементів у `Fragment` не впливає на результуючий DOM; це так само, як і якщо елементи не були згруповані. Порожній тег JSX `<>` є скороченням для `` у більшості випадків. +Огорніть елементи у `` щоб групувати їх разом в ситуаціях, коли вам потрібен один елемент. Групування елементів у `Fragment` не впливає на результуючий DOM; це так само, як і якщо елементи не були згруповані. Переважно, порожній тег JSX `<>` є скороченням для ``. #### Пропси {/*props*/} @@ -160,7 +160,7 @@ function DateRangePicker({ start, end }) { ### Відображення списку фрагментів {/*rendering-a-list-of-fragments*/} -Ось ситуація, коли вам потрібно явно написати `Fragment`, замість використання синтаксису `<>`. Якщо ви [рендерите кілька елементів в циклі](/learn/rendering-lists), вам потрібно призначити `key` кожному елементу. Якщо елементи всередині циклу є Фрагментами, то вам потрібно використовувати звичайний синтаксис елементів JSX, щоб надати атрибут `key`: +Ось ситуація, коли вам потрібно явно написати `Fragment`, замість використання синтаксису `<>`. Якщо ви [рендерите кілька елементів в циклі](/learn/rendering-lists), вам потрібно призначити `key` кожному елементу. Якщо елементи всередині циклу є Фрагментами, то вам потрібно використовувати звичайний синтаксис елементів JSX, щоб мати змогу вказати атрибут `key`: ```js {3,6} function Blog() { From 4c2529f3ee1bf7c58e650c2996cb4aec2ec1c234 Mon Sep 17 00:00:00 2001 From: Bohdan Katsevych <94533356+bkatsevych@users.noreply.github.com> Date: Sun, 21 May 2023 17:59:15 +0300 Subject: [PATCH 3/3] Apply suggestions from code review --- src/content/reference/react/Fragment.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 7fe224158..c74df3b49 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -23,11 +23,11 @@ title: (<>...) ### `` {/*fragment*/} -Огорніть елементи у `` щоб групувати їх разом в ситуаціях, коли вам потрібен один елемент. Групування елементів у `Fragment` не впливає на результуючий DOM; це так само, як і якщо елементи не були згруповані. Переважно, порожній тег JSX `<>` є скороченням для ``. +Огорніть елементи у `` щоб групувати їх разом в ситуаціях, коли вам потрібен один елемент. Групування елементів у `Fragment` не впливає на результуючий DOM; це так само, ніби елементи і не були згруповані. Переважно, порожній тег JSX `<>` є скороченням для ``. #### Пропси {/*props*/} -- **необов’язковий** `ключ (key)`: Фрагменти, оголошені з явним синтаксисом `` можуть мати [ключі.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **опційний** `key`: Фрагменти, оголошені з явним синтаксисом `` можуть мати [ключі.](/learn/rendering-lists#keeping-list-items-in-order-with-key) #### Обмеження {/*caveats*/} @@ -54,7 +54,7 @@ function Post() { } ``` -Фрагменти є корисним інструментом, оскільки групування елементів з Фрагментом не має впливу на розташування або стилізацію, на відміну від огортання елементів в інший контейнер, такий як DOM-елемент. Якщо ви перевірите цей приклад за допомогою інструментів браузера, ви побачите, що всі DOM-вузли `

` і `

` відображаються як сусідні елементи без обгорток навколо них: +Фрагменти є корисним інструментом, оскільки групування елементів з `Fragment` не має впливу на розташування або стилізацію, на відміну від огортання елементів в інший контейнер, такий як DOM-елемент. Якщо ви перевірите цей приклад за допомогою інструментів браузера, ви побачите, що всі DOM-вузли `

` і `

` відображаються як сусідні елементи без обгорток навколо них: @@ -111,7 +111,7 @@ function Post() { } ``` -Зазвичай вам не потрібно цього робити, якщо вам не треба [передавати ключ у ваш `Fragment`.](#rendering-a-list-of-fragments) +Зазвичай вам не потрібно цього робити, якщо вам не треба [передавати `key` у ваш `Fragment`.](#rendering-a-list-of-fragments) @@ -119,7 +119,7 @@ function Post() { ### Присвоєння змінній декількох елементів {/*assigning-multiple-elements-to-a-variable*/} -Як і будь-який інший елемент, фрагменти можна присвоювати змінним, передавати їх як пропси тощо: +Як і будь-який інший елемент, `Fragment` елементи можна присвоювати змінним, передавати їх як пропси тощо: ```js function CloseDialog() { @@ -160,7 +160,7 @@ function DateRangePicker({ start, end }) { ### Відображення списку фрагментів {/*rendering-a-list-of-fragments*/} -Ось ситуація, коли вам потрібно явно написати `Fragment`, замість використання синтаксису `<>`. Якщо ви [рендерите кілька елементів в циклі](/learn/rendering-lists), вам потрібно призначити `key` кожному елементу. Якщо елементи всередині циклу є Фрагментами, то вам потрібно використовувати звичайний синтаксис елементів JSX, щоб мати змогу вказати атрибут `key`: +Ось ситуація, коли вам потрібно написати `Fragment` явно, замість використання синтаксису `<>`. Якщо ви [рендерите кілька елементів в циклі](/learn/rendering-lists), вам потрібно призначити `key` кожному елементу. Якщо елементи всередині циклу є Фрагментами, то вам потрібно використовувати звичайний синтаксис елементів JSX, щоб мати змогу вказати атрибут `key`: ```js {3,6} function Blog() { @@ -173,7 +173,7 @@ function Blog() { } ``` -Ви можете перевірити DOM, щоб переконатися, що навколо "дочірніх компонентів" Fragment немає огорнутих елементів: +Ви можете перевірити DOM, щоб переконатися, що дочірні компоненти Fragment нічим не обгортуються: