Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translation of the "Render and Commit" #534

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this file should not be committed

"cSpell.language": "en,uk,en-US",
"cSpell.words": [
"відрендереними",
"коміт",
"Рендер",
"рендерить"
]
}
95 changes: 48 additions & 47 deletions src/content/learn/render-and-commit.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
---
title: Render and Commit
title: Рендер і фіксація
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Render, rendering обидва можуть перекладатися і як рендер, і як рендеринг. Вони будуть мати таку конотацію: рендер - дія, рендеринг - процес. Перечитай статтю, щоб був використаний правильний відтінок

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Також я все ще думаю над перекладом Commit як Фіксація - воно мені якось не йде, треба подумати

Copy link

@valdemarua valdemarua May 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Мені здається, що коміт в даному контексті звучить і виглядає нормально. Термін фіксація в даному контексті ніколи не використовував сам і не чув від інших. Можливо, у когось інший досвід.

Вікіпедія: Коміт (керування версіями)

Всім дякую за роботу!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Після перегляду ось цього PR прийняла рішення, commit саме як фазу після рендеру будемо називати просто коміт (але з поясненням за першого входження у статті) - за аналогією коміта як внесення змін у системах контролю версій: рендер (підготування/підготовлення змін) та коміт (внесення змін). В інших випадках commit має перекладатися за своїм значенням. Дієслово може перекладатися у контексті фази як "внести зміни".

Відмінювання слова "коміт" треба додати до TRANSLATION файла, а саме слово далі замінити:

Suggested change
title: Рендер і фіксація
title: Рендер і коміт

---

<Intro>

Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку.
Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння етапів цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку.

Я думаю, тут краще 'етапів' або 'стадій' замість 'кроків'. Cпробуй перечитати тільки українську версію і відчути, що краще, без англійської.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку.
Перш ніж ваші компоненти відобразяться на екрані, їх повинен підготувати React. Розуміння кроків цього процесу допоможе осмислити те, як виконується код, і пояснити його логіку.


</Intro>

<YouWillLearn>

* What rendering means in React
* When and why React renders a component
* The steps involved in displaying a component on screen
* Why rendering does not always produce a DOM update
* Що таке рендеринг в React
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Що таке рендеринг в React
* Що таке рендеринг у React

між приголосними звуками - у (перевірити у всій статті)

* Коли і чому React рендерить компонент
* Кроки виведення компоненту на екран
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Мабуть, тут також краще етапи чи стадії. Перечитай статтю українською

* Чому рендеринг не завжди призводить до оновлення DOM

</YouWillLearn>

Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
Уявіть, що ваші компоненти - це кухарі на кухні, які збирають смачні страви з інгредієнтів. У цьому сценарії React - це офіціант, який приймає запити від клієнтів і приносить їм замовлення. Цей процес запиту та обслуговування UI складається з трьох кроків:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Для всієї статті

Suggested change
Уявіть, що ваші компоненти - це кухарі на кухні, які збирають смачні страви з інгредієнтів. У цьому сценарії React - це офіціант, який приймає запити від клієнтів і приносить їм замовлення. Цей процес запиту та обслуговування UI складається з трьох кроків:
Уявіть, що ваші компоненти це кухарі на кухні, які збирають смачні страви з інгредієнтів. У цьому сценарії React це офіціант, який приймає запити від клієнтів і приносить їм замовлення. Цей процес запиту та обслуговування UI складається з трьох кроків:

У нас є правило:

- Використовуйте тире `` для пунктуації, а дефіс `-` для орфографії

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Уявіть, що ваші компоненти - це кухарі на кухні, які збирають смачні страви з інгредієнтів. У цьому сценарії React - це офіціант, який приймає запити від клієнтів і приносить їм замовлення. Цей процес запиту та обслуговування UI складається з трьох кроків:
Уявіть, що ваші компоненти це кухарі на кухні, які створюють смачні страви з інгредієнтів. У такій історії React це офіціант, який приймає від клієнтів замовлення та видає їм їжу. Цей процес замовлення та подачі UI складається з трьох кроків:


1. **Triggering** a render (delivering the guest's order to the kitchen)
2. **Rendering** the component (preparing the order in the kitchen)
3. **Committing** to the DOM (placing the order on the table)
1. **Запуск** рендеру (доставка замовлення гостя на кухню)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. **Запуск** рендеру (доставка замовлення гостя на кухню)
1. **Запуск** рендеру (доставлення замовлення гостя на кухню)

https://onlinecorrector.com.ua/uk/%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D1%8F%D0%BD%D0%BD%D1%8F/

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. **Запуск** рендеру (доставка замовлення гостя на кухню)
1. **Запуск** рендеру (передання замовлення гостя на кухню)

2. **Рендеринг** компонента (підготовка замовлення на кухні)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
2. **Рендеринг** компонента (підготовка замовлення на кухні)
2. **Рендеринг** компонента (приготування замовлення на кухні)

3. **Фіксація** у DOM (розміщення замовлення на столі)
Comment on lines +22 to +24
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. **Запуск** рендеру (доставка замовлення гостя на кухню)
2. **Рендеринг** компонента (підготовка замовлення на кухні)
3. **Фіксація** у DOM (розміщення замовлення на столі)
1. **Виклик** рендеру (відправка замовлення гостя на кухню)
2. **Рендеринг** компонента (підготовка замовлення на кухні)
3. **Фіксація** у DOM (розміщення замовлення на столі гостя)
  1. відправка - 'до', доставка - 'після'
    так як trigger більше має конотацію 'до', то замінила на відправка. До речі, можливо, краще Виклик, а не Запуск, бо запуск - це ніби початок самого рендеру.

  2. додала гостя, щоб було зрозуміло, на чиєму столі розміщення


<IllustrationBlock sequential>
<Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here and everywhere: all 'alt' and 'caption' texts should be translated

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
<Illustration caption="Запуск" alt="React як офіціант у ресторані, що збирає замовлення від клієнтів і передає їх до Кухні компонентів." src="/images/docs/illustrations/i_render-and-commit1.png" />

<Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
<Illustration caption="Рендер" alt="Кухар Card видає React свіжий компонент Card." src="/images/docs/illustrations/i_render-and-commit2.png" />

<Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
<Illustration caption="Фіксація" alt="React доставляє Card клієнту на стіл." src="/images/docs/illustrations/i_render-and-commit3.png" />

</IllustrationBlock>

## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
## Крок 1: Запуск рендерингу {/*step-1-trigger-a-render*/}

There are two reasons for a component to render:
Існує дві причини для рендерингу компонента:

1. It's the component's **initial render.**
2. The component's (or one of its ancestors') **state has been updated.**
1. Це **початковий рендер** компонента.
2. **Було оновлено стан** компонента (або одного з його предків).

### Initial render {/*initial-render*/}
### Початковий {/*initial-render*/}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

render не перекладено


When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component:
Під час запуску програми вам потрібно запустити початковий рендеринг. Фреймворки та пісочниці іноді приховують цей код, але це робиться шляхом виклику [`createRoot`](/reference/react-dom/client/createRoot) з цільового DOM-вузла, і потім викликом його методу `render` з вашим компонентом:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Під час запуску програми вам потрібно запустити початковий рендеринг. Фреймворки та пісочниці іноді приховують цей код, але це робиться шляхом виклику [`createRoot`](/reference/react-dom/client/createRoot) з цільового DOM-вузла, і потім викликом його методу `render` з вашим компонентом:
Під час запуску програми вам потрібно викликати початковий рендер. Фреймворки та пісочниці іноді приховують цей код, але це можна зробити через виклик [`createRoot`](/reference/react-dom/client/createRoot) із цільового DOM-вузла і потім через виклик його методу `render` із вашим компонентом:
  1. тавтологія - запуск, запустити в одному речення, тому замінила на викликати
  2. робиться шляхом (делается путем) -> можна зробити через
  3. 'із' між приголосними звуками (передивитись всю статтю)
  4. не треба кома, бо однорідні обставини із неповторюваним і. якщо замінити 'і' на 'а', то можна кому залишити і логічно розділити за бажанням

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Під час запуску програми вам потрібно запустити початковий рендеринг. Фреймворки та пісочниці іноді приховують цей код, але це робиться шляхом виклику [`createRoot`](/reference/react-dom/client/createRoot) з цільового DOM-вузла, і потім викликом його методу `render` з вашим компонентом:
Під час запуску застосунку необхідно запустити початковий рендер. Фреймворки та пісочниці іноді приховують цей код, але такий запуск виконується шляхом виклику [`createRoot`](/reference/react-dom/client/createRoot) з передачею цільового вузла DOM, і потім виклику методу `render` з вашим компонентом:


<Sandpack>

Expand All @@ -63,28 +63,28 @@ export default function Image() {

</Sandpack>

Try commenting out the `root.render()` call and see the component disappear!
Спробуйте закоментувати виклик `root.render()` і побачите, що компонент зникне!
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

закоментувати/розкоментувати - це прямо сленг-сленг. можливо, краще "додайте виклик root.render() у коментар". треба подумати

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Спробуйте закоментувати виклик `root.render()` і побачите, що компонент зникне!
Спробуйте закоментувати виклик `root.render()`і побачите, що компонент зник!


### Re-renders when state updates {/*re-renders-when-state-updates*/}
### Повторний рендеринг при оновленні стану {/*re-renders-when-state-updates*/}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. або рендер, або рендеринг у цих ### заголовках
  2. якщо хочеться використати по чи при, то перевір себе - часто це прямо калька у вживанні, яку не треба використовувати https://onlinecorrector.com.ua/uk/%D0%B1%D1%96%D0%BB%D1%8F-%D0%BA%D1%80%D0%B0%D0%B9-%D0%B7%D0%B0-%D0%BF%D1%96%D0%B4-%D1%87%D0%B0%D1%81-%D1%83-%D1%80%D0%B0%D0%B7%D1%96/. краще тут 'під час' чи взагалі 'після'


Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою функції[`set` function.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично ставить рендеринг у чергу. (Ви можете уявити це як відвідувача ресторану, який після першого замовлення замовляє чай, десерт та інші речі, залежно від стану спраги чи голоду).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою функції[`set` function.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично ставить рендеринг у чергу. (Ви можете уявити це як відвідувача ресторану, який після першого замовлення замовляє чай, десерт та інші речі, залежно від стану спраги чи голоду).
Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою функції [`set` function.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично додає рендеринг до черги. (Уявіть відвідувача ресторану, який після першого замовлення замовляє чай, десерт та всяку всячину залежно від стану спраги чи голоду).
  1. пропущений пробіл
  2. ставит в очередь -> додає до черги
  3. Ви можете це уявити як -> Уявіть
    • іноді треба спрощувати структуру і зменшувати засилля прямого перекладу 'ви можете', 'ви хочете', наприклад, у прямих прикладах, де 'можете' не означає власну можливість чи функцію продукту. спробуй пречитати в голові з 'Ви можете це уявити як' і з 'Уявіть'.
  4. англійська майорить займенниками, і їх треба або пропускати, або заміняти, або явно вказувати значення, бо не завжди це, цей чи його, її одразу після він/вона буде гарно виглядати в українській, нам таке не характерно у великій кількості. Так само things як речі не завжди доречно.
  5. кома не треба для цієї обставини, вона ж ніби невідокремлено читається

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою функції[`set` function.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично ставить рендеринг у чергу. (Ви можете уявити це як відвідувача ресторану, який після першого замовлення замовляє чай, десерт та інші речі, залежно від стану спраги чи голоду).
Коли рендер компонента уже відбувся один раз, можна запускати наступні, використовуючи [функцію `set`.](/reference/react/useState#setstate) Оновлення стану компонента автоматично ставить рендер у чергу. (Це можна уявити як гостя ресторану, що замовляє чай, десерт і всяке інше, коли вже зробив перше замовлення, залежно від власного стану справи чи голоду.)


<IllustrationBlock sequential>
<Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
<Illustration caption="Оновлення стану..." alt="React як офіціант у ресторані, що подає клієнту, представленому як постать з курсором замість голови, UI Card. Постать висловлює бажання щодо рожевої картки, а не чорної!" src="/images/docs/illustrations/i_rerender1.png" />

<Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
<Illustration caption="...запускає..." alt="React повертається до Кухні компонентів і каже Кухареві Card, що потрібна рожева Card." src="/images/docs/illustrations/i_rerender2.png" />

<Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
<Illustration caption="...рендер!" alt="Кухар Card видає React рожеву Card." src="/images/docs/illustrations/i_rerender3.png" />

</IllustrationBlock>

## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
## Крок 2: React рендерить ваші компоненти {/*step-2-react-renders-your-components*/}

After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.**
Після того, як ви запускаєте рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екраню **"Рендеринг" - це виклик React'ом ваших компонентів.**
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

екраню -> екрані.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Після того, як ви запускаєте рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екраню **"Рендеринг" - це виклик React'ом ваших компонентів.**
Коли запущено рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екран. **"Рендеринг" - це коли React викликає ваші компоненти.**


* **On initial render,** React will call the root component.
* **For subsequent renders,** React will call the function component whose state update triggered the render.
* **При початковому рендерингу,** React викличе кореневий компонент.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **При початковому рендерингу,** React викличе кореневий компонент.
* **При початковому рендері** React викликає кореневий компонент.

* **Для наступних рендерів,** React буде викликати компонент функції, оновлення стану якого викликало рендер.
Comment on lines +82 to +83
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

тут не треба кома перед **, тут не відокремлені обставини

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

function component -> або функція компонента (але тоді потім треба узгодити не 'якого', а 'якої'), або функційний компонент

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Для наступних рендерів,** React буде викликати компонент функції, оновлення стану якого викликало рендер.
* **Для наступних рендерів** React викликатиме компонент-функцію, оновлення стану якого запустило рендер.


This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _цей_ компонент наступним і так далі. Процес продовжуватиметься доти, доки не залишиться більше вкладених компонентів і React точно знатиме, що саме має бути відображено на екрані.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _цей_ компонент наступним і так далі. Процес продовжуватиметься доти, доки не залишиться більше вкладених компонентів і React точно знатиме, що саме має бути відображено на екрані.
Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _той інший_ компонент наступним, і так далі. Процес триватиме доти, доки не залишиться більше вкладених компонентів, і React точно не знатиме, що саме має бути відображено на екрані.


In the following example, React will call `Gallery()` and `Image()` several times:
У наступному прикладі React викличе `Gallery()` і `Image()` кілька разів:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
У наступному прикладі React викличе `Gallery()` і `Image()` кілька разів:
У наступному прикладі React викличе `Gallery()` й `Image()` кілька разів:


<Sandpack>

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

h1 and img alt texts below should be translated as well.

currently I'm translating an article just before this one, and to be consistent it's better to use the following translation:

'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals
=>
'Рід квіткові' ('Floralis Genérica') — Едуардо Каталано (Eduardo Catalano): велетенська металева скульптура квітки зі світловідбивними пелюстками

Expand Down Expand Up @@ -124,36 +124,36 @@ img { margin: 0 10px 10px 0; }

</Sandpack>

* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags.
* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
* **Під час початкового рендерингу,** React [створить вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `<section>`, `<h1>`, і трьох `<img>` тегів.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Англійська пунктуація не завжди (а взагалі рідко) співпадає з українською. Перечитай правила, будь ласка, для простого речення: обставини і відокремлені обставини, уточнення, повторювані і неповторювані сурядні сполучники.

Suggested change
* **Під час початкового рендерингу,** React [створить вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `<section>`, `<h1>`, і трьох `<img>` тегів.
* **Під час початкового рендерингу** React [створить вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `<section>`, `<h1>` і трьох `<img>` тегів.

там ще пару таких місць

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Під час початкового рендерингу,** React [створить вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `<section>`, `<h1>`, і трьох `<img>` тегів.
* **Під час початкового рендеру** React [створює вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `<section>`, `<h1>` і трьох тегів `<img>`.

В українській немає оксфордської коми

* **Під час ре-рендерингу,** React вирахує, які властивості цих елементів, якщо такі були, змінилися з моменту попереднього рендерингу. Він нічого не буде робити з цією інформацією до наступного кроку, фази фіксації.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Під час ре-рендерингу,** React вирахує, які властивості цих елементів, якщо такі були, змінилися з моменту попереднього рендерингу. Він нічого не буде робити з цією інформацією до наступного кроку, фази фіксації.
* **Під час повторного рендеру** React вирахує, які наявні властивості цих елементів змінилися з моменту попереднього рендерингу. Він нічого не буде робити з цією інформацією до наступного кроку, фази фіксації.
  1. (передивитись у всій статті)
    | re-render(ing) | повторний рендер |
  2. якщо такі були -> за наявності -> наявні (для спрощення структури)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Під час ре-рендерингу,** React вирахує, які властивості цих елементів, якщо такі були, змінилися з моменту попереднього рендерингу. Він нічого не буде робити з цією інформацією до наступного кроку, фази фіксації.
* **Під час повторного рендеру* React вираховує, які властивості елементів змінилися після попереднього рендеру, й чи змінилися взагалі. Він нічого не робить з цією інформацією до наступного кроку, фази фіксації.


<Pitfall>

Rendering must always be a [pure calculation](/learn/keeping-components-pure):
Рендеринг завжди має бути [чистим обчисленням](/learn/keeping-components-pure):

* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
* **Однакові вхідні дані, однаковий результат.** При однакових вхідних даних компонент завжди має повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Однакові вхідні дані, однаковий результат.** При однакових вхідних даних компонент завжди має повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!)
* **Однакові вихідні дані дають однаковий результат.** При однакових вихідних даних компонент завжди повинен повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!)

* **Займається своїми справами.** Він не повинен змінювати жодних об'єктів або змінних, які існували до рендерингу. (Одне замовлення не повинно змінювати інші замовлення.)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Займається своїми справами.** Він не повинен змінювати жодних об'єктів або змінних, які існували до рендерингу. (Одне замовлення не повинно змінювати інші замовлення.)
* **Кожен робить свою роботу.** Рендер не повинен змінювати жодних об'єктів або змінних, які існували до рендерингу. (Одне замовлення не повинно змінювати інші замовлення.)


Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions.
Інакше ви можете зіткнутися із заплутаними багами та непередбачуваною поведінкою зі зростанням складності вашої кодової бази. При розробці у "Strict Mode" React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

| bug | помилка, дефект |

2. strict mode треба перекласти https://uk.legacy.reactjs.org/docs/strict-mode.html (але в дужках після перекладу можеш залишити оригінал, щоб читачу було зрозуміліше)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Інакше ви можете зіткнутися із заплутаними багами та непередбачуваною поведінкою зі зростанням складності вашої кодової бази. При розробці у "Strict Mode" React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями.
Інакше можна зіткнутися із заплутаними вадами та непередбачуваною поведінкою зі зростанням складності кодової бази. При розробці у суворому режимі ("Strict Mode") React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями.


</Pitfall>

<DeepDive>

#### Optimizing performance {/*optimizing-performance*/}
#### Оптимізація продуктивності {/*optimizing-performance*/}

The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!**
Поведінка за замовчуванням, яка полягає у рендерингу усіх компонентів, вкладених у оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо у дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі [Продуктивність](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!**
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Поведінка за замовчуванням, яка полягає у рендерингу усіх компонентів, вкладених у оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо у дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі [Продуктивність](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!**
Усталена поведінка, що полягає у рендерингу усіх компонентів, вкладених у оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо в дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі [Продуктивності](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!**

Ми на WebDoky перекладаємо "default" як "усталений".


</DeepDive>

## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
## Крок 3: React фіксує зміни в DOM {/*step-3-react-commits-changes-to-the-dom*/}

After rendering (calling) your components, React will modify the DOM.
Після рендерингу (виклику) ваших компонентів, React змінюватиме DOM.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

знову непотрібна кома

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Після рендерингу (виклику) ваших компонентів, React змінюватиме DOM.
Після рендерингу (виклику) ваших компонентів React вносить зміни в DOM.


* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
* **Для початкового рендерингу,** React використовуватиме [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API, щоб вивести на екран усі створені ним вузли DOM.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Для початкового рендерингу,** React використовуватиме [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API, щоб вивести на екран усі створені ним вузли DOM.
* **Для початкового рендерингу** React використовує API DOM [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), щоб вивести на екран усі новостворені вузли DOM.

* **Для ре-рендерингів,** React застосовуватиме мінімально необхідні операції (обчислені під час рендерингу!) щоб зробити DOM відповідним останньому результату рендерингу.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. кома перед щоб

  2. зробити відповідним ріже вухо, треба подумати

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

зробити відповідним - оновити відповідно (до)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* **Для ре-рендерингів,** React застосовуватиме мінімально необхідні операції (обчислені під час рендерингу!) щоб зробити DOM відповідним останньому результату рендерингу.
* **Для повторних рендерів** React застосовує мінімально необхідні операції (обчислені під час рендерингу!) щоб привести DOM до відповідності щодо результату найсвіжішого рендерингу.


**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the `<input>`, updating its `value`, but the text doesn't disappear when the component re-renders:
**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який ре-рендериться щосекунди з різними пропсами, переданими від батька. Зверніть увагу, що ви можете додати текст у `<input>`, оновивши його `value`, але текст не зникає, коли компонент ре-рендериться:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який ре-рендериться щосекунди з різними пропсами, переданими від батька. Зверніть увагу, що ви можете додати текст у `<input>`, оновивши його `value`, але текст не зникає, коли компонент ре-рендериться:
**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який повторно рендериться щосекунди з різними властивостями, що передаються від батьківського компонента. Зверніть увагу, що можна додати текст у `<input>`, оновивши його `value`, але текст не зникає, коли компонент рендериться наново:


<Sandpack>

Expand Down Expand Up @@ -193,21 +193,22 @@ export default function App() {

</Sandpack>

This works because during this last step, React only updates the content of `<h1>` with the new `time`. It sees that the `<input>` appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its `value`!
## Epilogue: Browser paint {/*epilogue-browser-paint*/}
Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` з новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`!
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` з новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`!
Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`!


After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs.
## Епілог: Малювання браузера {/*epilogue-browser-paint*/}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be at 197 line


Після того, як рендеринг завершено і React оновив DOM, браузер перемалює екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Після того, як рендеринг завершено і React оновив DOM, браузер перемалює екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації.
Коли рендеринг завершено і React оновив DOM, браузер перемальовує екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації.


<Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" />

<Recap>

* Any screen update in a React app happens in three steps:
1. Trigger
2. Render
3. Commit
* You can use Strict Mode to find mistakes in your components
* React does not touch the DOM if the rendering result is the same as last time
* Будь-яке оновлення екрану у React-застосунку відбувається у три кроки:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Будь-яке оновлення екрану у React-застосунку відбувається у три кроки:
* Будь-яке оновлення екрану у застосунку на React відбувається у три кроки:

1. Запуск
2. Рендер
3. Фіксація
* Ви можете використовувати Strict Mode щоб шукати помилки у ваших компонентах
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Ви можете використовувати Strict Mode щоб шукати помилки у ваших компонентах
* Можна скористатися суворим режимом (Strict Mode), аби віднайти помилки в своїх компонентах

* React не змінює DOM, якщо результат рендерингу такий самий, як і минулого разу

</Recap>