-
Notifications
You must be signed in to change notification settings - Fork 120
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
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
There was a problem hiding this 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 @@ | |||
{ |
There was a problem hiding this comment.
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*/} |
There was a problem hiding this comment.
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" /> |
There was a problem hiding this comment.
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> | ||
|
There was a problem hiding this comment.
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. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. | |
Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою React. Розуміння етапів цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. |
Я думаю, тут краще 'етапів' або 'стадій' замість 'кроків'. Cпробуй перечитати тільки українську версію і відчути, що краще, без англійської.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою 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 викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Line 84 in 3188fed
| 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). **Не оптимізуйте передчасно!** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
типова поведінка - https://onlinecorrector.com.ua/uk/%D1%82%D0%B8%D0%BF%D0%BE%D0%B2%D0%B8%D0%B9-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D0%B8%D0%B9-%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%B8%D0%B9/ (за замовчуванням - це калька, до речі)
|
||
After rendering (calling) your components, React will modify the DOM. | ||
Після рендерингу (виклику) ваших компонентів, React змінюватиме DOM. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
знову непотрібна кома
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Після рендерингу (виклику) ваших компонентів, 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 відповідним останньому результату рендерингу. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
-
кома перед щоб
-
зробити відповідним ріже вухо, треба подумати
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
зробити відповідним - оновити відповідно (до)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
* **Для ре-рендерингів,** 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`! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` з новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`! | |
Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`! |
There was a problem hiding this 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. Розуміння кроків цього процесу допоможе вам подумати про те, як виконується ваш код, і пояснити його поведінку. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Перш ніж ваші компоненти відобразяться на екрані, вони мають бути відрендереними за допомогою 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 складається з трьох кроків: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Уявіть, що ваші компоненти - це кухарі на кухні, які збирають смачні страви з інгредієнтів. У цьому сценарії 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. **Запуск** рендеру (доставка замовлення гостя на кухню) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
1. **Запуск** рендеру (доставка замовлення гостя на кухню) | |
1. **Запуск** рендеру (доставлення замовлення гостя на кухню) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. **Рендеринг** компонента (підготовка замовлення на кухні) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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 відповідним останньому результату рендерингу. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
* **Для ре-рендерингів,** 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`, але текст не зникає, коли компонент ре-рендериться: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
**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, браузер перемалює екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Після того, як рендеринг завершено і 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-застосунку відбувається у три кроки: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
* Будь-яке оновлення екрану у React-застосунку відбувається у три кроки: | |
* Будь-яке оновлення екрану у застосунку на React відбувається у три кроки: |
1. Запуск | ||
2. Рендер | ||
3. Фіксація | ||
* Ви можете використовувати Strict Mode щоб шукати помилки у ваших компонентах |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
* Ви можете використовувати Strict Mode щоб шукати помилки у ваших компонентах | |
* Можна скористатися суворим режимом (Strict Mode), аби віднайти помилки в своїх компонентах |
This pull request includes a translation of the "Render and Commit" feature.