From 034545f882bfad8cb1bcd36872ac8098f4ecd780 Mon Sep 17 00:00:00 2001 From: Maxim Titov Date: Mon, 5 Jun 2023 20:05:11 +0600 Subject: [PATCH] translate reacting to input with state --- .../learn/reacting-to-input-with-state.md | 422 +++++++++--------- src/sidebarLearn.json | 4 +- 2 files changed, 214 insertions(+), 212 deletions(-) diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md index 522aa63a1..0b536b445 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, вы описываете состояния, в которых ваш компонент может находиться, и переключаетесь между ними в ответ на пользовательский ввод. Это похоже на то, как дизайнеры воспринимают пользовательский интерфейс. -* 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 *поменяется* в ответ на действия пользователя. Давайте рассмотрим форму, через которую пользователь вводит ответ на вопрос: -* 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): +В следующем примере императивного программирования форма сделана *без* React. Она использует [объектную модель документа (DOM)](https://developer.mozilla.org/ru-RU/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!

+

Верно!