From 59c38d0b02303381445126f4ac0d98d2d6fd49e2 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Tue, 23 Jul 2024 17:16:30 +0300 Subject: [PATCH] Finish translation of Reacting to Input with State --- .../learn/reacting-to-input-with-state.md | 405 +++++++++--------- src/sidebarLearn.json | 2 +- 2 files changed, 204 insertions(+), 203 deletions(-) diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md index da559dc0f..685139949 100644 --- a/src/content/learn/reacting-to-input-with-state.md +++ b/src/content/learn/reacting-to-input-with-state.md @@ -1,37 +1,37 @@ --- -title: Reacting to Input with State +title: Реагування станом на введення --- -React provides a declarative way to manipulate the UI. Instead of manipulating individual pieces of the UI directly, you describe the different states that your component can be in, and switch between them in response to the user input. This is similar to how designers think about the UI. +React надає декларативний спосіб маніпулювання UI. Замість маніпулювання окремими шматочками UI безпосередньо, слід описувати різні стани, в яких може перебувати компонент, і перемикатися між ними внаслідок користувацького введення. Це схоже на те, як UI уявляють дизайнери. -* How declarative UI programming differs from imperative UI programming -* How to enumerate the different visual states your component can be in -* How to trigger the changes between the different visual states from code +* Як декларативне програмування UI відрізняється від імперативного +* Як перелічити різні візуальні стани, в яких може перебувати компонент +* Як з коду запустити зміни між різними візуальними станами -## How declarative UI compares to imperative {/*how-declarative-ui-compares-to-imperative*/} +## Як декларативний UI відрізняється від імперативного {/*how-declarative-ui-compares-to-imperative*/} -When you design UI interactions, you probably think about how the UI *changes* in response to user actions. Consider a form that lets the user submit an answer: +При розробці взаємодій з UI, ймовірно, ви думаєте про те, як UI *змінюється* внаслідок дій користувача. Уявіть форму, що дає користувачу змогу надіслати відповідь: -* When you type something into the form, the "Submit" button **becomes enabled.** -* When you press "Submit", both the form and the button **become disabled,** and a spinner **appears.** -* If the network request succeeds, the form **gets hidden,** and the "Thank you" message **appears.** -* If the network request fails, an error message **appears,** and the form **becomes enabled** again. +* Коли ви друкуєте щось у формі, кнопка "Надіслати" **стає увімкненою.** +* Коли ви натискаєте "Надіслати", то і форма, і кнопка **стають вимкненими,** і **з'являється** дзиґа. +* Якщо мережевий запит успішний, то форма **ховається,** і **з'являється** повідомлення "Дякуємо". +* Якщо мережевий запит невдалий, то **з'являється** повідомлення про помилку, а форма знову **стає ввімкненою.** -In **imperative programming,** the above corresponds directly to how you implement interaction. You have to write the exact instructions to manipulate the UI depending on what just happened. Here's another way to think about this: imagine riding next to someone in a car and telling them turn by turn where to go. +У **імперативному програмуванні** описане вище безпосередньо відповідає тому, як реалізується взаємодія. Доводиться писати прямі інструкції для маніпулювання UI, залежно від того, що відбувається. Ось іще один спосіб подумати про це: уявіть, що їдете з кимось в авто й керуєте поїздкою, називаючи кожний поворот. - + -They don't know where you want to go, they just follow your commands. (And if you get the directions wrong, you end up in the wrong place!) It's called *imperative* because you have to "command" each element, from the spinner to the button, telling the computer *how* to update the UI. +Водій не знає, куди ви хочете потрапити, він просто виконує команди. (І якщо ви переплутаєте орієнтири, то опинитеся не там!) Це зветься *імперативним*, тому що доводиться "командувати" кожним елементом, від дзиґи до кнопки, кажучи комп'ютеру, *як* оновлювати UI. -In this example of imperative UI programming, the form is built *without* React. It only uses the browser [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model): +У цьому прикладі імперативного програмування UI форма створена *без* React. Вна використовує лише браузерний [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model): @@ -81,13 +81,13 @@ function disable(el) { } function submitForm(answer) { - // Pretend it's hitting the network. + // Зробімо вигляд, що тут відбувається мережевий запит. return new Promise((resolve, reject) => { setTimeout(() => { - if (answer.toLowerCase() === 'istanbul') { + if (answer.toLowerCase() === 'стамбул') { resolve(); } else { - reject(new Error('Good guess but a wrong answer. Try again!')); + reject(new Error('Гарний варіант, але неправильна відповідь. Спробуйте ще!')); } }, 1500); }); @@ -111,17 +111,17 @@ textarea.oninput = handleTextareaChange; ```html public/index.html
-

City quiz

+

Вікторина міст

- What city is located on two continents? + Яке місто розташовано на двох континентах?


- - + +
-

That's right!

+

Правильно!