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

Conversation

kpripper
Copy link

This pull request includes a translation of the "Render and Commit" feature.

Copy link

vercel bot commented Apr 21, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
uk-legacy-reactjs-org ⬜️ Ignored (Inspect) Visit Preview Apr 21, 2024 9:20am

Copy link
Collaborator

@alinkedd alinkedd left a comment

Choose a reason for hiding this comment

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

Дякую за PR

Спробуй виправити помилки і перечитати правила пунктуація, а також Translation файл. Більшість коментарів щодо вживання і правил відносяться не тільки до цього місця, а до всієї статті.

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

@@ -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


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

3. **Committing** to the DOM (placing the order on the table)
1. **Запуск** рендеру (доставка замовлення гостя на кухню)
2. **Рендеринг** компонента (підготовка замовлення на кухні)
3. **Фіксація** у DOM (розміщення замовлення на столі)

<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


In the following example, React will call `Gallery()` and `Image()` several times:
У наступному прикладі 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): велетенська металева скульптура квітки зі світловідбивними пелюстками

---

<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. Розуміння кроків цього процесу допоможе осмислити те, як виконується код, і пояснити його логіку.


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 (але в дужках після перекладу можеш залишити оригінал, щоб читачу було зрозуміліше)


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.


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.
* **Для ре-рендерингів,** 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 до відповідності щодо результату найсвіжішого рендерингу.

@@ -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`!

Copy link
Contributor

@undead404 undead404 left a comment

Choose a reason for hiding this comment

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

Пробігав повз, вирішив почитати. Кілька загальних зауважень для автора:

  • Перекладайте менш буквально, але краще відтворюючи зміст. Спробуйте зачитати вголос власний переклад – і самі зрозумієте, як покращити речення.
  • Розберіться, де у вас рендер, а де рендеринг. Ми на WebDoky перекладаємо це як "візуалізацію", але для документації React такий переклад, очевидно, не підходит

Не сприймайте за насильницьке вторгнення! Залюбки відповім на коментарі

---

<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
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. Розуміння кроків цього процесу допоможе осмислити те, як виконується код, і пояснити його логіку.


</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
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. **Rendering** the component (preparing the order in the kitchen)
3. **Committing** to the DOM (placing the order on the table)
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. **Committing** to the DOM (placing the order on the table)
1. **Запуск** рендеру (доставка замовлення гостя на кухню)
2. **Рендеринг** компонента (підготовка замовлення на кухні)
3. **Фіксація** у DOM (розміщення замовлення на столі)

<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
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" />

* **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.
* **Для ре-рендерингів,** 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 до відповідності щодо результату найсвіжішого рендерингу.


**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`, але текст не зникає, коли компонент рендериться наново:

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*/}

Після того, як рендеринг завершено і 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, браузер перемальовує екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації.

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), аби віднайти помилки в своїх компонентах

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants