From 9cf653f47a7fb77e63122fb7085d56c45dc7b4c9 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Thu, 27 Apr 2023 19:12:53 +0200
Subject: [PATCH 01/14] chore: added draft

---
 src/content/learn/responding-to-events.md | 179 +++++++++++-----------
 1 file changed, 90 insertions(+), 89 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 782b6c0f1..21b1a7d88 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,24 +1,24 @@
 ---
-title: Responding to Events
+title: Обработка событий
 ---
 
 <Intro>
 
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
+React позволяет добавлять *обработчики событий* в JSX. Обработчики событий - это функции, которые вызываются в ответ на такие события, как клик на элемент, наведение курсора, фокус поля формы и так далее.
 
 </Intro>
 
 <YouWillLearn>
 
-* Different ways to write an event handler
-* How to pass event handling logic from a parent component
-* How events propagate and how to stop them
+* Способы написания обработчика событий
+* Как передавать логику обработки событий от родительского компонента
+* Как распространяются события и как их останавливать
 
 </YouWillLearn>
 
-## Adding event handlers {/*adding-event-handlers*/}
+## Добавление обработчиков событий {/*adding-event-handlers*/}
 
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+Чтобы добавить обработчик событий, сначала определите функцию, а затем [передайте ее как проп](/learn/passing-props-to-a-component) в соответствующий JSX-тег. Например, ниже приведена кнопка, которая пока что ничего не делает:
 
 <Sandpack>
 
@@ -34,11 +34,11 @@ export default function Button() {
 
 </Sandpack>
 
-You can make it show a message when a user clicks by following these three steps:
+Чтобы при нажатии на кнопку появилось сообщение, нужно выполнить следующие три шага:
 
-1. Declare a function called `handleClick` *inside* your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `onClick={handleClick}` to the `<button>` JSX.
+1. Объявить функцию `handleClick` *внутри* вашего компонента `Button`.
+2. Реализовать логику внутри этой функции (для показа сообщения используйте `alert`).
+3. Добавить `onClick={handleClick}` в JSX `<button>`.
 
 <Sandpack>
 
@@ -62,14 +62,14 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`.  `handleClick` is an **event handler.** Event handler functions:
+Мы определили функцию `handleClick`, а затем [передали ее как проа](/learn/passing-props-to-a-component) в `<button>`. `handleClick` - это и есть **обработчик событий.** Обработчики событий:
 
-* Are usually defined *inside* your components.
-* Have names that start with `handle`, followed by the name of the event.
+* Обычно определены *внутри* компонентов.
+* начнаются с о слова `handle`, после которого следует название события.
 
-By convention, it is common to name event handlers as `handle` followed by the event name. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on.
+Принято называть обработчики событий `handle`, за которым следует имя события. Часто можно встретить `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и так далее.
 
-Alternatively, you can define an event handler inline in the JSX:
+Также можно определить обработчик события внутри JSX:
 
 ```jsx
 <button onClick={function handleClick() {
@@ -77,7 +77,7 @@ Alternatively, you can define an event handler inline in the JSX:
 }}>
 ```
 
-Or, more concisely, using an arrow function:
+Или, более кратко, с помощью стрелочной функции:
 
 ```jsx
 <button onClick={() => {
@@ -85,54 +85,54 @@ Or, more concisely, using an arrow function:
 }}>
 ```
 
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+Оба этих варианта эквивалентны. Инлайновые обработчики событий удобны для коротких функций.
 
 <Pitfall>
 
-Functions passed to event handlers must be passed, not called. For example:
+Функции, которые передаются в обработчики событий, должны именно передаваться, а не вызываться. Например:
 
 | passing a function (correct)     | calling a function (incorrect)     |
 | -------------------------------- | ---------------------------------- |
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+Это важно. В первом примере функция `handleClick` передается как обработчик события `onClick`. Это указывает React запомнить ее и вызывать вашу функцию только тогда, когда пользователь нажмет на кнопку.
 
-In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+Во втором примере `()` в конце `handleClick()` вызывает функцию *непосредственно* во время [рендера](/learn/render-and-commit), без каких-либо кликов. Так происходит потому, что JavaScript внутри [JSX `{` и `}`](/learn/javascript-in-jsx-with-curly-braces) выполняется немедленно.
 
-When you write code inline, the same pitfall presents itself in a different way:
+Когда вы пишете inline-код, та же самая проблема проявляется снова:
 
 | passing a function (correct)            | calling a function (incorrect)    |
 | --------------------------------------- | --------------------------------- |
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Passing inline code like this won't fire on click—it fires every time the component renders:
+Переданный inline-код, как этот, не сработает по клику - он будет срабатывать каждый раз при рендеринге компонента:
 
 ```jsx
 // This alert fires when the component renders, not when clicked!
 <button onClick={alert('You clicked me!')}>
 ```
 
-If you want to define your event handler inline, wrap it in an anonymous function like so:
+Если вы хотите определить обработчик события инлайн, оберните его в анонимную функцию, например, так:
 
 ```jsx
 <button onClick={() => alert('You clicked me!')}>
 ```
 
-Rather than executing the code inside with every render, this creates a function to be called later.
+Вместо того чтобы выполнять код при каждом рендере, создается функция, которая будет вызвана позже.
 
-In both cases, what you want to pass is a function:
+В обоих случаях то, что вы хотите передать, должно быть функцией:
 
-* `<button onClick={handleClick}>` passes the `handleClick` function.
-* `<button onClick={() => alert('...')}>` passes the `() => alert('...')` function.
+* `<button onClick={handleClick}>` передает функцию `handleClick`.
+* `<button onClick={() => alert('...')}>` передает функцию `() => alert('...')`.
 
-[Read more about arrow functions.](https://javascript.info/arrow-functions-basics)
+[Подробнее о стрелочных функциях.](https://javascript.info/arrow-functions-basics)
 
 </Pitfall>
 
 ### Reading props in event handlers {/*reading-props-in-event-handlers*/}
 
-Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop:
+Поскольку обработчики событий объявлены внутри компонента, они имеют доступ к пропам. Ниже приведена кнопка, которая при нажатии показывает алерт с текстом из переменной `message`:
 
 <Sandpack>
 
@@ -165,13 +165,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-This lets these two buttons show different messages. Try changing the messages passed to them.
+Тем самым эти две кнопки могут показывать разные сообщения. Попробуйте изменить передаваемые им сообщения.
 
-### Passing event handlers as props {/*passing-event-handlers-as-props*/}
+### Передача аргументов в обработчики событий {/*passing-event-handlers-as-props*/}
 
-Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. 
+Часто требуется, чтобы родительский компонент определял обработчик событий дочернего компонента. Рассмотрим две кнопки: в зависимости от того, где вы используете компонент `Button`, вы захотите выполнить разные функции - например, одна воспроизведет фильм, а другая загрузит изображение. 
 
-To do this, pass a prop the component receives from its parent as the event handler like so:
+Для этого в качестве обработчика события нужно передать проп, который компонент получит от своего родителя, например, так:
 
 <Sandpack>
 
@@ -220,22 +220,22 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Here, the `Toolbar` component renders a `PlayButton` and an `UploadButton`:
+В примере выше компонент `Toolbar` рендерит два компонента: `PlayButton` и `UploadButton`:
 
-- `PlayButton` passes `handlePlayClick` as the `onClick` prop to the `Button` inside.
-- `UploadButton` passes `() => alert('Uploading!')` as the `onClick` prop to the `Button` inside.
+- `PlayButton` передает `handlePlayClick` как свойство `onClick` для `Button`.
+- `UploadButton` передает `() => alert('Uploading!')` как свойство `onClick` для `Button`.
 
-Finally, your `Button` component accepts a prop called `onClick`. It passes that prop directly to the built-in browser `<button>` with `onClick={onClick}`. This tells React to call the passed function on click.
+В конечном итоге, компонент `Button` получает свойство `onClick`. Он передаст это свойство непосредственно встроенному в браузер `<button>` с `onClick={onClick}`. Тем самым React получает команду вызвать переданную функцию по клику.
 
-If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), it's common for components like buttons to contain styling but not specify behavior. Instead, components like `PlayButton` and `UploadButton` will pass event handlers down.
+Если вы используете [дизайн систему](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), то обычно такие компоненты, как кнопки, содержат стили, но не определяют поведение. Поэтому такие компоненты, как `PlayButton` и `UploadButton` будут передавать обработчики событий вниз.
 
 ### Naming event handler props {/*naming-event-handler-props*/}
 
-Built-in components like `<button>` and `<div>` only support [browser event names](/reference/react-dom/components/common#common-props) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [имена событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Но, когда вы создаете свои собственные компоненты, вы можете называть их обработчики событий как угодно.
 
-By convention, event handler props should start with `on`, followed by a capital letter.
+Согласно правилам, название реквизита обработчика событий должно начинаться с `on`, за которым следует заглавная буква.
 
-For example, the `Button` component's `onClick` prop could have been called `onSmash`:
+Например, реквизит `onClick` компонента `Button` можно было бы назвать `onSmash`:
 
 <Sandpack>
 
@@ -268,9 +268,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-In this example, `<button onClick={onSmash}>` shows that the browser `<button>` (lowercase) still needs a prop called `onClick`, but the prop name received by your custom `Button` component is up to you!
+В этом примере `<button onClick={onSmash}>` показывает, что браузеру `<button>` (строчная буква) все еще нужен реквизит `onClick`, но имя реквизита, полученное вашим пользовательским компонентом `Button`, зависит от вас!
 
-When your component supports multiple interactions, you might name event handler props for app-specific concepts. For example, this `Toolbar` component receives `onPlayMovie` and `onUploadImage` event handlers:
+Если ваш компонент поддерживает множество видов взаимодействия, вы можете назвать обработчики событий именами специфических для приложения понятий. Например, компонент `Toolbar` принимает обработчики событий `onPlayMovie` и `onUploadImage`:
 
 <Sandpack>
 
@@ -312,13 +312,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
+Обратите внимание, что компоненту `App` не нужно знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это детали реализации `Toolbar`. В данном случае `Toolbar` передает их как обработчики `onClick` для своих `Button`, но позже он также может задействовать их при нажатии клавиш. Использование названий обработчиков в соответствии со специфическими для приложения действиями, такими как `onPlayMovie`, позволяет вам гибко изменять их дальнейшее использование.
 
 ## Event propagation {/*event-propagation*/}
 
-Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
+Обработчики событий также будут улавливать события от всех дочерних компонентов, которые могут быть у вашего компонента. Говорят, что событие "пузырится" или "распространяется" вверх по дереву: оно начинается с того места, где произошло событие, и затем поднимается вверх по этому дереву.
 
-This `<div>` contains two buttons. Both the `<div>` *and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
+Этот `<div>` содержит две кнопки. И `<div>` *и* каждая кнопка имеют свои собственные обработчики `onClick`. Какие обработчики, по вашему мнению, сработают при нажатии на кнопку?
 
 <Sandpack>
 
@@ -349,19 +349,19 @@ button { margin: 5px; }
 
 </Sandpack>
 
-If you click on either button, its `onClick` will run first, followed by the parent `<div>`'s `onClick`. So two messages will appear. If you click the toolbar itself, only the parent `<div>`'s `onClick` will run.
+Если вы нажмете на любую из кнопок, сначала сработает ее `onClick`, а затем `onClick` родительского `<div>`. В результате появятся два сообщения. Если щелкнуть саму панель инструментов, то выполнится только `onClick` родительского `<div>`.
 
 <Pitfall>
 
-All events propagate in React except `onScroll`, which only works on the JSX tag you attach it to.
+В React распространяются все события, кроме `onScroll`, которое действует только на тег JSX, к которому вы его прикрепили.
 
 </Pitfall>
 
 ### Stopping propagation {/*stopping-propagation*/}
 
-Event handlers receive an **event object** as their only argument. By convention, it's usually called `e`, which stands for "event". You can use this object to read information about the event.
+Обработчики событий принимают объект **event** в качестве единственного аргумента. Обычно его называют `e`, что означает " event". Из этого объекта можно получить всю информацию о событии.
 
-That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call `e.stopPropagation()` like this `Button` component does:
+Это объект события также позволяет вам остановить его распространение. Если вы хотите, чтобы событие не дошло до родительских компонентов, вам нужно вызвать `e.stopPropagation()`, как это сделано в компоненте `Button`:
 
 <Sandpack>
 
@@ -403,22 +403,22 @@ button { margin: 5px; }
 
 </Sandpack>
 
-When you click on a button:
+При нажатии на кнопку:
 
-1. React calls the `onClick` handler passed to `<button>`. 
-2. That handler, defined in `Button`, does the following:
-   * Calls `e.stopPropagation()`, preventing the event from bubbling further.
-   * Calls the `onClick` function, which is a prop passed from the `Toolbar` component.
-3. That function, defined in the `Toolbar` component, displays the button's own alert.
-4. Since the propagation was stopped, the parent `<div>`'s `onClick` handler does *not* run.
+1. React вызывает обработчик `onClick`, переданный в `<button>`. 
+2. Этот обработчик, определенный в `Button`, делает следующее:
+   * Вызывает `e.stopPropagation()`, предотвращая дальнейшее распространение события.
+   * Вызывает функцию `onClick`, которая является пропом, переданным из компонента `Toolbar`.
+3. Функция, определенная в компоненте `Toolbar`, выводит на дисплей сообщение.
+4. Поскольку распространение было остановлено, обработчик `onClick` родительского `<div>` *не* выполняется.
 
-As a result of `e.stopPropagation()`, clicking on the buttons now only shows a single alert (from the `<button>`) rather than the two of them (from the `<button>` and the parent toolbar `<div>`). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.
+В результате `e.stopPropagation()` нажатие на кнопки теперь показывает только одно сообщение (от `<button>`), а не два из них (от `<button>` и родительской панели инструментов `<div>`). Нажатие на кнопку - это не то же самое, что нажатие на окружающую панель инструментов, поэтому остановка распространения имеет смысл для данного пользовательского интерфейса.
 
 <DeepDive>
 
 #### Capture phase events {/*capture-phase-events*/}
 
-In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
+В некоторых случаях вам может понадобиться перехватить все события на дочерних элементах, *даже если их распространение прекращено*. Например, вы хотите регистрировать каждый клик в аналитике, независимо от логики распространения. Это можно сделать, добавив `Capture` в конце имени события:
 
 ```js
 <div onClickCapture={() => { /* this runs first */ }}>
@@ -427,19 +427,19 @@ In rare cases, you might need to catch all events on child elements, *even if th
 </div>
 ```
 
-Each event propagates in three phases: 
+Каждое событие проходит три фазы: 
 
-1. It travels down, calling all `onClickCapture` handlers.
-2. It runs the clicked element's `onClick` handler. 
-3. It travels upwards, calling all `onClick` handlers.
+1. Оно перемещается вниз, вызывая все обработчики `onClickCapture`.
+2. Запускается обработчик `onClick` элемента, по которому щелкнули. 
+3. Он перемещается вверх, вызывая все обработчики `onClick`.
 
-Capture events are useful for code like routers or analytics, but you probably won't use them in app code.
+Захват событий полезен для такого кода, как роутеры или аналитика, но, скорее всего, вы не будете использовать их в коде приложений.
 
 </DeepDive>
 
 ### Passing handlers as alternative to propagation {/*passing-handlers-as-alternative-to-propagation*/}
 
-Notice how this click handler runs a line of code _and then_ calls the `onClick` prop passed by the parent:
+Обратите внимание, как этот обработчик клика выполняет строку кода _и затем_ вызывает проп `onClick`, переданный родителем:
 
 ```js {4,5}
 function Button({ onClick, children }) {
@@ -454,13 +454,14 @@ function Button({ onClick, children }) {
 }
 ```
 
-You could add more code to this handler before calling the parent `onClick` event handler, too. This pattern provides an *alternative* to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it's not automatic. But the benefit of this pattern is that you can clearly follow the whole chain of code that executes as a result of some event.
+Вы можете добавить больше кода в этот обработчик перед вызовом обработчика родительского события `onClick`. Этот паттерн обеспечивает *альтернативу* распространению. Он позволяет дочернему компоненту обрабатывать событие, в то же время позволяя родительскому компоненту задавать дополнительное поведение. В отличие от распространения, он не является автоматическим. Но преимущество этого паттерна в том, что вы можете четко проследить всю цепочку вызовов в результате какого-то события.
 
-If you rely on propagation and it's difficult to trace which handlers execute and why, try this approach instead.
+Если вы используете распространение и вам сложно отследить, какие обработчики выполняются и почему, воспользуйтесь этим подходом.
 
 ### Preventing default behavior {/*preventing-default-behavior*/}
 
-Some browser events have default behavior associated with them. For example, a `<form>` submit event, which happens when a button inside of it is clicked, will reload the whole page by default:
+
+Некоторые браузерные события имеют поведение по умолчанию. Например, событие отправки `<form>`, которое происходит при нажатии на кнопку внутри него, по умолчанию перезагружает всю страницу:
 
 <Sandpack>
 
@@ -481,7 +482,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-You can call `e.preventDefault()` on the event object to stop this from happening:
+Для того, чтобы отменить поведение браузера, установленное по умолчанию, вы можете вызвать `e.preventDefault()`.
 
 <Sandpack>
 
@@ -505,10 +506,10 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Don't confuse `e.stopPropagation()` and `e.preventDefault()`. They are both useful, but are unrelated:
+Не путайте `e.stopPropagation()` и `e.preventDefault()`. Они оба полезны, но не связаны между собой:
 
-* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) stops the event handlers attached to the tags above from firing.
-* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) prevents the default browser behavior for the few events that have it.
+* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) позволяет остановить всплытие события по дереву элементов.
+* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) позволяет заблокировать стандартное поведение браузера.
 
 ## Can event handlers have side effects? {/*can-event-handlers-have-side-effects*/}
 
@@ -518,15 +519,15 @@ Unlike rendering functions, event handlers don't need to be [pure](/learn/keepin
 
 <Recap>
 
-* You can handle events by passing a function as a prop to an element like `<button>`.
-* Event handlers must be passed, **not called!** `onClick={handleClick}`, not `onClick={handleClick()}`.
-* You can define an event handler function separately or inline.
-* Event handlers are defined inside a component, so they can access props.
-* You can declare an event handler in a parent and pass it as a prop to a child.
-* You can define your own event handler props with application-specific names.
-* Events propagate upwards. Call `e.stopPropagation()` on the first argument to prevent that.
-* Events may have unwanted default browser behavior. Call `e.preventDefault()` to prevent that.
-* Explicitly calling an event handler prop from a child handler is a good alternative to propagation.
+* Для обработки событий в React можно передать функцию в качестве prop элемента, например, `<button>`.
+* Обработчики событий должны быть **переданы в элемент без вызова**, используя следующий синтаксис: `onClick={handleClick}`, **а не** `onClick={handleClick()}`.
+* Определение обработчика событий может быть выполнено инлайн или отдельно.
+* Обработчики событий определяются внутри компонента и могут иметь доступ к его props.
+* Обработчик событий может быть определен в родительском компоненте и передан в дочерний компонент в качестве prop.
+* Для определения собственных реквизитов обработчика событий, уникальных для конкретного приложения, можно использовать свои собственные имена.
+* События в React распространяются вверх по иерархии компонентов. Чтобы предотвратить это, вызовите метод e.stopPropagation() на первом аргументе.
+* События могут иметь нежелательные стандартные поведения браузера, которые можно предотвратить вызовом метода e.preventDefault().
+* Явный вызов свойства обработчика события из дочернего обработчика является альтернативой распространению событий.
 
 </Recap>
 
@@ -536,7 +537,7 @@ Unlike rendering functions, event handlers don't need to be [pure](/learn/keepin
 
 #### Fix an event handler {/*fix-an-event-handler*/}
 
-Clicking this button is supposed to switch the page background between white and black. However, nothing happens when you click it. Fix the problem. (Don't worry about the logic inside `handleClick`—that part is fine.)
+Нажатие на эту кнопку должно переключить фон страницы с белого на черный. Однако при нажатии ничего не происходит. Исправьте эту проблему. ( Не беспокойтесь насчет логики внутри `handleClick` - эта часть в порядке).
 
 <Sandpack>
 
@@ -563,7 +564,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-The problem is that `<button onClick={handleClick()}>` _calls_ the `handleClick` function while rendering instead of _passing_ it. Removing the `()` call so that it's `<button onClick={handleClick}>` fixes the issue:
+Проблема в том, что `<button onClick={handleClick()}>` _вызывает_ функцию `handleClick` во время рендеринга вместо того, чтобы _передать_ ее. Если убрать вызов `()`, чтобы получилось `<button onClick={handleClick}>`, проблема будет устранена:
 
 <Sandpack>
 
@@ -588,7 +589,7 @@ export default function LightSwitch() {
 
 </Sandpack>
 
-Alternatively, you could wrap the call into another function, like `<button onClick={() => handleClick()}>`:
+Также можно обернуть вызов в другую функцию, например `<button onClick={() => handleClick()}>`:
 
 <Sandpack>
 
@@ -617,9 +618,9 @@ export default function LightSwitch() {
 
 #### Wire up the events {/*wire-up-the-events*/}
 
-This `ColorSwitch` component renders a button. It's supposed to change the page color. Wire it up to the `onChangeColor` event handler prop it receives from the parent so that clicking the button changes the color.
+Компонент `ColorSwitch` рендерит кнопку. Предполагается, что она будет менять цвет страницы. Привяжите его к обработчику события `onChangeColor`, который он принимает от родителя, чтобы при нажатии на кнопку менялся цвет.
 
-After you do this, notice that clicking the button also increments the page click counter. Your colleague who wrote the parent component insists that `onChangeColor` does not increment any counters. What else might be happening? Fix it so that clicking the button *only* changes the color, and does _not_ increment the counter.
+После того как вы это сделаете, обратите внимание, что нажатие на кнопку также увеличивает счетчик нажатий на страницу. Ваш коллега, который написал родительский компонент, утверждает, что `onChangeColor` не увеличивает никаких счетчиков. Что еще может происходить? Поправьте компонент так, чтобы нажатие на кнопку *только* изменяло цвет и _не_ увеличивало счетчик.
 
 <Sandpack>
 
@@ -673,9 +674,9 @@ export default function App() {
 
 <Solution>
 
-First, you need to add the event handler, like `<button onClick={onChangeColor}>`.
+Сначала нужно добавить обработчик события, например `<button onClick={onChangeColor}>`.
 
-However, this introduces the problem of the incrementing counter. If `onChangeColor` does not do this, as your colleague insists, then the problem is that this event propagates up, and some handler above does it. To solve this problem, you need to stop the propagation. But don't forget that you should still call `onChangeColor`.
+Но при этом возникает ошибка, связанная с увеличением счетчика. Если `onChangeColor` этого не делает, как утверждает ваш коллега, то проблема в том, что это событие распространяется вверх, и какой-то обработчик выше делает это. Чтобы решить эту проблему, нужно остановить распространение. Но не забудьте, что вы все равно должны вызвать `onChangeColor`.
 
 <Sandpack>
 

From 54a3d352994c28f70c3ebc182fb78bebc9dbdd2f Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Thu, 27 Apr 2023 22:38:04 +0200
Subject: [PATCH 02/14] chore: fixed localization issues

---
 src/content/learn/responding-to-events.md | 94 +++++++++++------------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 21b1a7d88..132f2ebec 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -10,15 +10,15 @@ React позволяет добавлять *обработчики событи
 
 <YouWillLearn>
 
-* Способы написания обработчика событий
+* Как писать обработчики событий
 * Как передавать логику обработки событий от родительского компонента
-* Как распространяются события и как их останавливать
+* Как всплывают события и как их останавливать
 
 </YouWillLearn>
 
 ## Добавление обработчиков событий {/*adding-event-handlers*/}
 
-Чтобы добавить обработчик событий, сначала определите функцию, а затем [передайте ее как проп](/learn/passing-props-to-a-component) в соответствующий JSX-тег. Например, ниже приведена кнопка, которая пока что ничего не делает:
+Для того, чтобы добавить обработчик событий, сначала нужно создать функцию, а затем [передать ее пропом](/learn/passing-props-to-a-component) в соответствующий JSX-тег. Ниже приведена кнопка, которая пока еще ничего не делает:
 
 <Sandpack>
 
@@ -26,7 +26,7 @@ React позволяет добавлять *обработчики событи
 export default function Button() {
   return (
     <button>
-      I don't do anything
+      Я ничего не делаю
     </button>
   );
 }
@@ -34,10 +34,10 @@ export default function Button() {
 
 </Sandpack>
 
-Чтобы при нажатии на кнопку появилось сообщение, нужно выполнить следующие три шага:
+Чтобы при нажатии на кнопку появилось сообщение, вам нужно выполнить следующие шаги:
 
-1. Объявить функцию `handleClick` *внутри* вашего компонента `Button`.
-2. Реализовать логику внутри этой функции (для показа сообщения используйте `alert`).
+1. Определить функцию `handleClick` *внутри* вашего компонента `Button`.
+2. Реализовать логику внутри этой функции (используйте `alert`, чтобы показать сообщение).
 3. Добавить `onClick={handleClick}` в JSX `<button>`.
 
 <Sandpack>
@@ -45,12 +45,12 @@ export default function Button() {
 ```js
 export default function Button() {
   function handleClick() {
-    alert('You clicked me!');
+    alert('Вы нажали на меня!');
   }
 
   return (
     <button onClick={handleClick}>
-      Click me
+      Нажми на меня
     </button>
   );
 }
@@ -62,10 +62,10 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Мы определили функцию `handleClick`, а затем [передали ее как проа](/learn/passing-props-to-a-component) в `<button>`. `handleClick` - это и есть **обработчик событий.** Обработчики событий:
+Вы определили функцию `handleClick`, а затем [передали ее как проп](/learn/passing-props-to-a-component) в `<button>`. `handleClick` - это и есть **обработчик событий**. Обработчики событий:
 
 * Обычно определены *внутри* компонентов.
-* начнаются с о слова `handle`, после которого следует название события.
+* начинаются со слова `handle`, после которого следует название события.
 
 Принято называть обработчики событий `handle`, за которым следует имя события. Часто можно встретить `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и так далее.
 
@@ -89,48 +89,48 @@ button { margin-right: 10px; }
 
 <Pitfall>
 
-Функции, которые передаются в обработчики событий, должны именно передаваться, а не вызываться. Например:
+Функции, которые передаются в обработчики событий, должны именно передаваться, а не быть вызванными. Например:
 
-| passing a function (correct)     | calling a function (incorrect)     |
+| передача функции (правильно)     | вызов функции (неправильно)        |
 | -------------------------------- | ---------------------------------- |
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
 Это важно. В первом примере функция `handleClick` передается как обработчик события `onClick`. Это указывает React запомнить ее и вызывать вашу функцию только тогда, когда пользователь нажмет на кнопку.
 
-Во втором примере `()` в конце `handleClick()` вызывает функцию *непосредственно* во время [рендера](/learn/render-and-commit), без каких-либо кликов. Так происходит потому, что JavaScript внутри [JSX `{` и `}`](/learn/javascript-in-jsx-with-curly-braces) выполняется немедленно.
+Во втором примере `()` в конце `handleClick()` вызывают функцию *непосредственно* во время [рендера](/learn/render-and-commit), без каких-либо кликов. Так происходит потому, что JavaScript внутри [JSX `{` и `}`](/learn/javascript-in-jsx-with-curly-braces) выполняется сразу.
 
-Когда вы пишете inline-код, та же самая проблема проявляется снова:
+Когда вы пишете инлайн-код, та же самая проблема проявляется снова:
 
-| passing a function (correct)            | calling a function (incorrect)    |
+| передача функции (правильно)            | вызов функции (неправильно)       |
 | --------------------------------------- | --------------------------------- |
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Переданный inline-код, как этот, не сработает по клику - он будет срабатывать каждый раз при рендеринге компонента:
+Переданный инлайн код, как этот, не сработает по клику - он будет срабатывать каждый раз при рендеринге компонента:
 
 ```jsx
-// This alert fires when the component renders, not when clicked!
+// Это сообщение появляется, когда компонент рендерится, а не при нажатии!
 <button onClick={alert('You clicked me!')}>
 ```
 
-Если вы хотите определить обработчик события инлайн, оберните его в анонимную функцию, например, так:
+Если вы хотите определить обработчик события инлайн, оберните его в анонимную функцию:
 
 ```jsx
 <button onClick={() => alert('You clicked me!')}>
 ```
 
-Вместо того чтобы выполнять код при каждом рендере, создается функция, которая будет вызвана позже.
+Это позволит не выполнять код при каждом рендере компонента.
 
 В обоих случаях то, что вы хотите передать, должно быть функцией:
 
 * `<button onClick={handleClick}>` передает функцию `handleClick`.
-* `<button onClick={() => alert('...')}>` передает функцию `() => alert('...')`.
+* `<button onClick={() => alert('...')}>` передает стрелочную функцию `() => alert('...')`.
 
 [Подробнее о стрелочных функциях.](https://javascript.info/arrow-functions-basics)
 
 </Pitfall>
 
-### Reading props in event handlers {/*reading-props-in-event-handlers*/}
+### Чтение пропсов в обработчиках событий {/*reading-props-in-event-handlers*/}
 
 Поскольку обработчики событий объявлены внутри компонента, они имеют доступ к пропам. Ниже приведена кнопка, которая при нажатии показывает алерт с текстом из переменной `message`:
 
@@ -169,9 +169,9 @@ button { margin-right: 10px; }
 
 ### Передача аргументов в обработчики событий {/*passing-event-handlers-as-props*/}
 
-Часто требуется, чтобы родительский компонент определял обработчик событий дочернего компонента. Рассмотрим две кнопки: в зависимости от того, где вы используете компонент `Button`, вы захотите выполнить разные функции - например, одна воспроизведет фильм, а другая загрузит изображение. 
+Часто требуется, чтобы родительский компонент определял обработчик событий дочернего компонента. Рассмотрим две кнопки: в зависимости от того, где используется компонент `Button`, он может выполнять разные функции - например, один воспроизведет фильм, а другой загрузит изображение.
 
-Для этого в качестве обработчика события нужно передать проп, который компонент получит от своего родителя, например, так:
+Для этого в качестве обработчика события нужно передать проп, который компонент получит от своего родителя:
 
 <Sandpack>
 
@@ -227,15 +227,15 @@ button { margin-right: 10px; }
 
 В конечном итоге, компонент `Button` получает свойство `onClick`. Он передаст это свойство непосредственно встроенному в браузер `<button>` с `onClick={onClick}`. Тем самым React получает команду вызвать переданную функцию по клику.
 
-Если вы используете [дизайн систему](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), то обычно такие компоненты, как кнопки, содержат стили, но не определяют поведение. Поэтому такие компоненты, как `PlayButton` и `UploadButton` будут передавать обработчики событий вниз.
+Если вы используете [дизайн систему](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), то обычно компоненты, такие как кнопки, содержат стили, но не определяют поведение. Поэтому такие компоненты, как `PlayButton` и `UploadButton` будут передавать обработчики событий вниз.
 
 ### Naming event handler props {/*naming-event-handler-props*/}
 
-Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [имена событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Но, когда вы создаете свои собственные компоненты, вы можете называть их обработчики событий как угодно.
+Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [названия событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Но, когда вы создаете свои собственные компоненты, вы можете называть их обработчики событий как угодно.
 
-Согласно правилам, название реквизита обработчика событий должно начинаться с `on`, за которым следует заглавная буква.
+Название пропа обработчика должно начинаться с `on`, за которым следует заглавная буква.
 
-Например, реквизит `onClick` компонента `Button` можно было бы назвать `onSmash`:
+Например, проп `onClick` компонента `Button` можно назвать `onSmash`:
 
 <Sandpack>
 
@@ -268,7 +268,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-В этом примере `<button onClick={onSmash}>` показывает, что браузеру `<button>` (строчная буква) все еще нужен реквизит `onClick`, но имя реквизита, полученное вашим пользовательским компонентом `Button`, зависит от вас!
+В примере выше `<button onClick={onSmash}>` показывает, что браузеру `<button>` (строчная буква) все еще нужен реквизит `onClick`, но имя реквизита, полученное вашим пользовательским компонентом `Button`, зависит от вас!
 
 Если ваш компонент поддерживает множество видов взаимодействия, вы можете назвать обработчики событий именами специфических для приложения понятий. Например, компонент `Toolbar` принимает обработчики событий `onPlayMovie` и `onUploadImage`:
 
@@ -312,11 +312,11 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Обратите внимание, что компоненту `App` не нужно знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это детали реализации `Toolbar`. В данном случае `Toolbar` передает их как обработчики `onClick` для своих `Button`, но позже он также может задействовать их при нажатии клавиш. Использование названий обработчиков в соответствии со специфическими для приложения действиями, такими как `onPlayMovie`, позволяет вам гибко изменять их дальнейшее использование.
+Обратите внимание, что компоненту `App` не нужно знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это детали внетренней реализации `Toolbar`. В данном случае `Toolbar` передает их как обработчики `onClick` для своих `Button`, но позже он также может задействовать их для обработки нажатия клавиш. Использование названий обработчиков в соответствии со специфическими для приложения действиями, такими как `onPlayMovie`, позволяет вам гибко изменять их дальнейшее поведение.
 
-## Event propagation {/*event-propagation*/}
+## Всплытие событий {/*event-propagation*/}
 
-Обработчики событий также будут улавливать события от всех дочерних компонентов, которые могут быть у вашего компонента. Говорят, что событие "пузырится" или "распространяется" вверх по дереву: оно начинается с того места, где произошло событие, и затем поднимается вверх по этому дереву.
+Обработчики событий также будут улавливать события от всех дочерних компонентов, которые могут быть у вашего компонента. Говорят, что событие "всплывает" или "распространяется" вверх по дереву: оно начинается с того места, где произошло событие, и затем поднимается вверх по этому дереву.
 
 Этот `<div>` содержит две кнопки. И `<div>` *и* каждая кнопка имеют свои собственные обработчики `onClick`. Какие обработчики, по вашему мнению, сработают при нажатии на кнопку?
 
@@ -353,15 +353,15 @@ button { margin: 5px; }
 
 <Pitfall>
 
-В React распространяются все события, кроме `onScroll`, которое действует только на тег JSX, к которому вы его прикрепили.
+В React всплывают все события, кроме `onScroll`, которое реагирует только на тег JSX, к которому вы его привязяли.
 
 </Pitfall>
 
 ### Stopping propagation {/*stopping-propagation*/}
 
-Обработчики событий принимают объект **event** в качестве единственного аргумента. Обычно его называют `e`, что означает " event". Из этого объекта можно получить всю информацию о событии.
+При вызове обработчика, в него передаётся специальный объект **event**, обычно его называют `e`, из которого можно получить информацию о событии.
 
-Это объект события также позволяет вам остановить его распространение. Если вы хотите, чтобы событие не дошло до родительских компонентов, вам нужно вызвать `e.stopPropagation()`, как это сделано в компоненте `Button`:
+Всплытие события можно остановить с помощью метода `e.stopPropagation()`, как это сделано в компоненте `Button`:
 
 <Sandpack>
 
@@ -407,12 +407,12 @@ button { margin: 5px; }
 
 1. React вызывает обработчик `onClick`, переданный в `<button>`. 
 2. Этот обработчик, определенный в `Button`, делает следующее:
-   * Вызывает `e.stopPropagation()`, предотвращая дальнейшее распространение события.
+   * Вызывает `e.stopPropagation()`, который останавливает всплытие события.
    * Вызывает функцию `onClick`, которая является пропом, переданным из компонента `Toolbar`.
 3. Функция, определенная в компоненте `Toolbar`, выводит на дисплей сообщение.
-4. Поскольку распространение было остановлено, обработчик `onClick` родительского `<div>` *не* выполняется.
+4. Поскольку всплытие было остановлено, обработчик `onClick` родительского `<div>` *не* выполнится.
 
-В результате `e.stopPropagation()` нажатие на кнопки теперь показывает только одно сообщение (от `<button>`), а не два из них (от `<button>` и родительской панели инструментов `<div>`). Нажатие на кнопку - это не то же самое, что нажатие на окружающую панель инструментов, поэтому остановка распространения имеет смысл для данного пользовательского интерфейса.
+После вызова `e.stopPropagation()` нажатие на кнопки теперь показывает только одно сообщение (от `<button>`), а не два из них (от `<button>` и родительской панели инструментов `<div>`). Нажатие на кнопку - это не то же самое, что нажатие на окружающую панель инструментов, поэтому остановка всплытия имеет смысл для данного пользовательского интерфейса.
 
 <DeepDive>
 
@@ -458,7 +458,7 @@ function Button({ onClick, children }) {
 
 Если вы используете распространение и вам сложно отследить, какие обработчики выполняются и почему, воспользуйтесь этим подходом.
 
-### Preventing default behavior {/*preventing-default-behavior*/}
+### Отмена поведения по умолчанию {/*preventing-default-behavior*/}
 
 
 Некоторые браузерные события имеют поведение по умолчанию. Например, событие отправки `<form>`, которое происходит при нажатии на кнопку внутри него, по умолчанию перезагружает всю страницу:
@@ -511,15 +511,15 @@ button { margin-left: 5px; }
 * [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) позволяет остановить всплытие события по дереву элементов.
 * [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) позволяет заблокировать стандартное поведение браузера.
 
-## Can event handlers have side effects? {/*can-event-handlers-have-side-effects*/}
+## Могут ли обработчики событий иметь побочные эффекты? {/*can-event-handlers-have-side-effects*/}
 
-Absolutely! Event handlers are the best place for side effects.
+Конечно! Обработчики событий - отличное место для побочных эффектов.
 
-Unlike rendering functions, event handlers don't need to be [pure](/learn/keeping-components-pure), so it's a great place to *change* something—for example, change an input's value in response to typing, or change a list in response to a button press. However, in order to change some information, you first need some way to store it. In React, this is done by using [state, a component's memory.](/learn/state-a-components-memory) You will learn all about it on the next page.
+В отличие от функций рендеринга, обработчикам событий не требуется быть [чистыми](/learn/keeping-components-pure), поэтому это отличное место для *изменения* чего-либо - например, изменения значения ввода в ответ на ввод текста или изменения списка при нажатии кнопки. Но для того, чтобы изменить какую-то информацию, сначала нужно каким-то образом ее сохранить. В React для этого используется [состояние - память компонента.](/learn/state-a-components-memory) Вы узнаете об этом на следующей странице.
 
 <Recap>
 
-* Для обработки событий в React можно передать функцию в качестве prop элемента, например, `<button>`.
+* Для обработки событий в React можно передать функцию в качестве пропа, например, `<button>`.
 * Обработчики событий должны быть **переданы в элемент без вызова**, используя следующий синтаксис: `onClick={handleClick}`, **а не** `onClick={handleClick()}`.
 * Определение обработчика событий может быть выполнено инлайн или отдельно.
 * Обработчики событий определяются внутри компонента и могут иметь доступ к его props.
@@ -535,9 +535,9 @@ Unlike rendering functions, event handlers don't need to be [pure](/learn/keepin
 
 <Challenges>
 
-#### Fix an event handler {/*fix-an-event-handler*/}
+#### Исправьте обработчик события {/*fix-an-event-handler*/}
 
-Нажатие на эту кнопку должно переключить фон страницы с белого на черный. Однако при нажатии ничего не происходит. Исправьте эту проблему. ( Не беспокойтесь насчет логики внутри `handleClick` - эта часть в порядке).
+Нажатие на эту кнопку должно переключить фон страницы с белого на черный и наоборот. Однако при нажатии ничего не происходит. Исправьте эту проблему. (Не беспокойтесь насчет логики внутри `handleClick` - эта часть в порядке).
 
 <Sandpack>
 
@@ -618,9 +618,9 @@ export default function LightSwitch() {
 
 #### Wire up the events {/*wire-up-the-events*/}
 
-Компонент `ColorSwitch` рендерит кнопку. Предполагается, что она будет менять цвет страницы. Привяжите его к обработчику события `onChangeColor`, который он принимает от родителя, чтобы при нажатии на кнопку менялся цвет.
+Компонент `ColorSwitch` рендерит кнопку. Предполагается, что она будет менять цвет страницы. Привяжите его к обработчику события `onChangeColor`, который компонент принимает от родителя, чтобы при нажатии на кнопку менялся цвет.
 
-После того как вы это сделаете, обратите внимание, что нажатие на кнопку также увеличивает счетчик нажатий на страницу. Ваш коллега, который написал родительский компонент, утверждает, что `onChangeColor` не увеличивает никаких счетчиков. Что еще может происходить? Поправьте компонент так, чтобы нажатие на кнопку *только* изменяло цвет и _не_ увеличивало счетчик.
+После того как вы это сделаете, обратите внимание, что нажатие на кнопку также увеличивает счетчик нажатий на страницу. Ваш коллега, который написал родительский компонент, утверждает, что `onChangeColor` не увеличивает никаких счетчиков. Что еще может происходить? Исправьте компонент так, чтобы нажатие на кнопку *изменяло* цвет и _не_ увеличивало счетчик.
 
 <Sandpack>
 

From 63fd27ca90eefe0f3515a847eb2ded5ee5351c14 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Fri, 28 Apr 2023 12:51:56 +0200
Subject: [PATCH 03/14] chore: refactored typography

---
 src/content/learn/responding-to-events.md | 28 +++++++++++------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 132f2ebec..4eb018039 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -65,7 +65,7 @@ button { margin-right: 10px; }
 Вы определили функцию `handleClick`, а затем [передали ее как проп](/learn/passing-props-to-a-component) в `<button>`. `handleClick` - это и есть **обработчик событий**. Обработчики событий:
 
 * Обычно определены *внутри* компонентов.
-* начинаются со слова `handle`, после которого следует название события.
+* Начинаются со слова `handle`, после которого идет название события.
 
 Принято называть обработчики событий `handle`, за которым следует имя события. Часто можно встретить `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и так далее.
 
@@ -106,7 +106,7 @@ button { margin-right: 10px; }
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Переданный инлайн код, как этот, не сработает по клику - он будет срабатывать каждый раз при рендеринге компонента:
+Переданный инлайн код, как тот, что ниже, не сработает по клику - он будет срабатывать каждый раз при рендеринге компонента:
 
 ```jsx
 // Это сообщение появляется, когда компонент рендерится, а не при нажатии!
@@ -165,7 +165,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Тем самым эти две кнопки могут показывать разные сообщения. Попробуйте изменить передаваемые им сообщения.
+Тем самым эти кнопки могут показывать разные сообщения. Попробуйте изменить передаваемые им сообщения.
 
 ### Передача аргументов в обработчики событий {/*passing-event-handlers-as-props*/}
 
@@ -220,18 +220,18 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-В примере выше компонент `Toolbar` рендерит два компонента: `PlayButton` и `UploadButton`:
+В примере выше компонент `Toolbar` рендерит компоненты `PlayButton` и `UploadButton`:
 
 - `PlayButton` передает `handlePlayClick` как свойство `onClick` для `Button`.
 - `UploadButton` передает `() => alert('Uploading!')` как свойство `onClick` для `Button`.
 
-В конечном итоге, компонент `Button` получает свойство `onClick`. Он передаст это свойство непосредственно встроенному в браузер `<button>` с `onClick={onClick}`. Тем самым React получает команду вызвать переданную функцию по клику.
+В конечном итоге, компонент `Button` получает свойство `onClick`. Он передаст это свойство непосредственно встроенному в браузер `<button>` с `onClick={onClick}`. Тем самым React получит команду вызвать переданную функцию по клику.
 
-Если вы используете [дизайн систему](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), то обычно компоненты, такие как кнопки, содержат стили, но не определяют поведение. Поэтому такие компоненты, как `PlayButton` и `UploadButton` будут передавать обработчики событий вниз.
+Если вы используете [дизайн систему](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), то обычно компоненты, такие как кнопки, содержат стили, но не определяют поведение. Так и здесь, `PlayButton` и `UploadButton` будут передавать обработчики событий дальше.
 
-### Naming event handler props {/*naming-event-handler-props*/}
+### Именование пропов обработчика событий {/*naming-event-handler-props*/}
 
-Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [названия событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Но, когда вы создаете свои собственные компоненты, вы можете называть их обработчики событий как угодно.
+Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [имена событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Но, когда вы создаете свои собственные компоненты, вы можете назвать обработчики событий как угодно.
 
 Название пропа обработчика должно начинаться с `on`, за которым следует заглавная буква.
 
@@ -268,9 +268,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-В примере выше `<button onClick={onSmash}>` показывает, что браузеру `<button>` (строчная буква) все еще нужен реквизит `onClick`, но имя реквизита, полученное вашим пользовательским компонентом `Button`, зависит от вас!
+В примере выше `<button onClick={onSmash}>` показывает, что браузерному `<button>` (строчная буква) все еще нужен проп `onClick`, но имя пропа, полученное вашим пользовательским компонентом `Button`, зависит от вас!
 
-Если ваш компонент поддерживает множество видов взаимодействия, вы можете назвать обработчики событий именами специфических для приложения понятий. Например, компонент `Toolbar` принимает обработчики событий `onPlayMovie` и `onUploadImage`:
+Если ваш компонент поддерживает несколько вариантов взаимодействия, вы можете назвать реквизиты обработчиков событий с учетом специфики приложения. Например, компонент `Toolbar` принимает обработчики событий `onPlayMovie` и `onUploadImage`:
 
 <Sandpack>
 
@@ -312,7 +312,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Обратите внимание, что компоненту `App` не нужно знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это детали внетренней реализации `Toolbar`. В данном случае `Toolbar` передает их как обработчики `onClick` для своих `Button`, но позже он также может задействовать их для обработки нажатия клавиш. Использование названий обработчиков в соответствии со специфическими для приложения действиями, такими как `onPlayMovie`, позволяет вам гибко изменять их дальнейшее поведение.
+Обратите внимание, что компоненту `App` не нужно знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это детали внетренней реализации `Toolbar`. В данном случае `Toolbar` передает их как обработчики `onClick` для своих `Button`, но позже он также может задействовать их для обработки нажатия клавиш. Называя реквизиты в соответствии со спецификой приложения, например, `onPlayMovie`, вы можете гибко менять их последующее поведение.
 
 ## Всплытие событий {/*event-propagation*/}
 
@@ -357,7 +357,7 @@ button { margin: 5px; }
 
 </Pitfall>
 
-### Stopping propagation {/*stopping-propagation*/}
+### Прекращение передачи события {/*stopping-propagation*/}
 
 При вызове обработчика, в него передаётся специальный объект **event**, обычно его называют `e`, из которого можно получить информацию о событии.
 
@@ -406,7 +406,7 @@ button { margin: 5px; }
 При нажатии на кнопку:
 
 1. React вызывает обработчик `onClick`, переданный в `<button>`. 
-2. Этот обработчик, определенный в `Button`, делает следующее:
+2. Обработчик, который определен в `Button`, делает следующее:
    * Вызывает `e.stopPropagation()`, который останавливает всплытие события.
    * Вызывает функцию `onClick`, которая является пропом, переданным из компонента `Toolbar`.
 3. Функция, определенная в компоненте `Toolbar`, выводит на дисплей сообщение.
@@ -482,7 +482,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Для того, чтобы отменить поведение браузера, установленное по умолчанию, вы можете вызвать `e.preventDefault()`.
+Для того, чтобы отменить поведение браузера, котрое установлено по умолчанию, вы можете вызвать `e.preventDefault()`.
 
 <Sandpack>
 

From 9616fe0a052ae2b508c8f2824ec26b0b15d438af Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 10:08:24 +0200
Subject: [PATCH 04/14] chore: localized code examples

---
 src/content/learn/responding-to-events.md | 78 +++++++++++------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 4eb018039..779b776fe 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -4,7 +4,7 @@ title: Обработка событий
 
 <Intro>
 
-React позволяет добавлять *обработчики событий* в JSX. Обработчики событий - это функции, которые вызываются в ответ на такие события, как клик на элемент, наведение курсора, фокус поля формы и так далее.
+В React можно добавлять  позволяет добавлять *обработчики событий* в JSX. Обработчики событий - это функции, которые вызываются в ответ на событие, например, клик на элемент, наведение курсора, фокус поля формы и так далее.
 
 </Intro>
 
@@ -73,7 +73,7 @@ button { margin-right: 10px; }
 
 ```jsx
 <button onClick={function handleClick() {
-  alert('You clicked me!');
+  alert('Вы нажали на меня!');
 }}>
 ```
 
@@ -81,7 +81,7 @@ button { margin-right: 10px; }
 
 ```jsx
 <button onClick={() => {
-  alert('You clicked me!');
+  alert('Вы нажали на меня!');
 }}>
 ```
 
@@ -110,13 +110,13 @@ button { margin-right: 10px; }
 
 ```jsx
 // Это сообщение появляется, когда компонент рендерится, а не при нажатии!
-<button onClick={alert('You clicked me!')}>
+<button onClick={alert('Вы нажали на меня!')}>
 ```
 
 Если вы хотите определить обработчик события инлайн, оберните его в анонимную функцию:
 
 ```jsx
-<button onClick={() => alert('You clicked me!')}>
+<button onClick={() => alert('Вы нажали на меня!')}>
 ```
 
 Это позволит не выполнять код при каждом рендере компонента.
@@ -148,11 +148,11 @@ function AlertButton({ message, children }) {
 export default function Toolbar() {
   return (
     <div>
-      <AlertButton message="Playing!">
-        Play Movie
+      <AlertButton message="Воспроизводится!">
+        Воспроизвести фильм
       </AlertButton>
-      <AlertButton message="Uploading!">
-        Upload Image
+      <AlertButton message="Загружается!">
+        Загрузить изображение
       </AlertButton>
     </div>
   );
@@ -191,15 +191,15 @@ function PlayButton({ movieName }) {
 
   return (
     <Button onClick={handlePlayClick}>
-      Play "{movieName}"
+      Воспроизвести "{movieName}"
     </Button>
   );
 }
 
 function UploadButton() {
   return (
-    <Button onClick={() => alert('Uploading!')}>
-      Upload Image
+    <Button onClick={() => alert('Загружается!')}>
+      Загрузить изображение
     </Button>
   );
 }
@@ -207,7 +207,7 @@ function UploadButton() {
 export default function Toolbar() {
   return (
     <div>
-      <PlayButton movieName="Kiki's Delivery Service" />
+      <PlayButton movieName="Ведьмина служба доставки" />
       <UploadButton />
     </div>
   );
@@ -251,11 +251,11 @@ function Button({ onSmash, children }) {
 export default function App() {
   return (
     <div>
-      <Button onSmash={() => alert('Playing!')}>
-        Play Movie
+      <Button onSmash={() => alert('Воспроизводится!')}>
+        Воспроизвести фильм
       </Button>
-      <Button onSmash={() => alert('Uploading!')}>
-        Upload Image
+      <Button onSmash={() => alert('Загружается!')}>
+        Загрузить изображение
       </Button>
     </div>
   );
@@ -278,8 +278,8 @@ button { margin-right: 10px; }
 export default function App() {
   return (
     <Toolbar
-      onPlayMovie={() => alert('Playing!')}
-      onUploadImage={() => alert('Uploading!')}
+      onPlayMovie={() => alert('Воспроизводится!')}
+      onUploadImage={() => alert('Загружается!')}
     />
   );
 }
@@ -288,10 +288,10 @@ function Toolbar({ onPlayMovie, onUploadImage }) {
   return (
     <div>
       <Button onClick={onPlayMovie}>
-        Play Movie
+        Воспроизвести фильм
       </Button>
       <Button onClick={onUploadImage}>
-        Upload Image
+        Загрузить изображение
       </Button>
     </div>
   );
@@ -328,11 +328,11 @@ export default function Toolbar() {
     <div className="Toolbar" onClick={() => {
       alert('You clicked on the toolbar!');
     }}>
-      <button onClick={() => alert('Playing!')}>
-        Play Movie
+      <button onClick={() => alert('Воспроизводится!')}>
+        Воспроизвести фильм
       </button>
-      <button onClick={() => alert('Uploading!')}>
-        Upload Image
+      <button onClick={() => alert('Загружается!')}>
+        Загрузить изображение
       </button>
     </div>
   );
@@ -382,11 +382,11 @@ export default function Toolbar() {
     <div className="Toolbar" onClick={() => {
       alert('You clicked on the toolbar!');
     }}>
-      <Button onClick={() => alert('Playing!')}>
-        Play Movie
+      <Button onClick={() => alert('Воспроизводится!')}>
+        Воспроизвести фильм
       </Button>
-      <Button onClick={() => alert('Uploading!')}>
-        Upload Image
+      <Button onClick={() => alert('Загружается!')}>
+        Загрузить изображение
       </Button>
     </div>
   );
@@ -468,9 +468,9 @@ function Button({ onClick, children }) {
 ```js
 export default function Signup() {
   return (
-    <form onSubmit={() => alert('Submitting!')}>
+    <form onSubmit={() => alert('Отправление!')}>
       <input />
-      <button>Send</button>
+      <button>Отправить</button>
     </form>
   );
 }
@@ -491,10 +491,10 @@ export default function Signup() {
   return (
     <form onSubmit={e => {
       e.preventDefault();
-      alert('Submitting!');
+      alert('Отправление!');
     }}>
       <input />
-      <button>Send</button>
+      <button>Отправить</button>
     </form>
   );
 }
@@ -554,7 +554,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={handleClick()}>
-      Toggle the lights
+      Переключить фон
     </button>
   );
 }
@@ -581,7 +581,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={handleClick}>
-      Toggle the lights
+      Переключить фон
     </button>
   );
 }
@@ -606,7 +606,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={() => handleClick()}>
-      Toggle the lights
+      Переключить фон
     </button>
   );
 }
@@ -664,7 +664,7 @@ export default function App() {
       <ColorSwitch onChangeColor={handleChangeColor} />
       <br />
       <br />
-      <h2>Clicks on the page: {clicks}</h2>
+      <h2>Нажатий на страницу: {clicks}</h2>
     </div>
   );
 }
@@ -689,7 +689,7 @@ export default function ColorSwitch({
       e.stopPropagation();
       onChangeColor();
     }}>
-      Change color
+      Изменить цвет
     </button>
   );
 }
@@ -723,7 +723,7 @@ export default function App() {
       <ColorSwitch onChangeColor={handleChangeColor} />
       <br />
       <br />
-      <h2>Clicks on the page: {clicks}</h2>
+      <h2>Нажатий на страницу: {clicks}</h2>
     </div>
   );
 }

From 9432de02e86f3cdd78ef49e0a454d7568651fd95 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 10:14:54 +0200
Subject: [PATCH 05/14] fix: fixed code examples

---
 src/content/learn/responding-to-events.md | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 779b776fe..b1342145c 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -50,7 +50,7 @@ export default function Button() {
 
   return (
     <button onClick={handleClick}>
-      Нажми на меня
+      Нажмите на меня
     </button>
   );
 }
@@ -62,7 +62,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Вы определили функцию `handleClick`, а затем [передали ее как проп](/learn/passing-props-to-a-component) в `<button>`. `handleClick` - это и есть **обработчик событий**. Обработчики событий:
+Вы определили функцию `handleClick`, а затем [передали ее пропом](/learn/passing-props-to-a-component) в `<button>`. `handleClick` - это и есть **обработчик событий**. Обработчики событий:
 
 * Обычно определены *внутри* компонентов.
 * Начинаются со слова `handle`, после которого идет название события.
@@ -326,7 +326,7 @@ button { margin-right: 10px; }
 export default function Toolbar() {
   return (
     <div className="Toolbar" onClick={() => {
-      alert('You clicked on the toolbar!');
+      alert('Вы нажали на панель инструментов!');
     }}>
       <button onClick={() => alert('Воспроизводится!')}>
         Воспроизвести фильм
@@ -421,7 +421,7 @@ button { margin: 5px; }
 В некоторых случаях вам может понадобиться перехватить все события на дочерних элементах, *даже если их распространение прекращено*. Например, вы хотите регистрировать каждый клик в аналитике, независимо от логики распространения. Это можно сделать, добавив `Capture` в конце имени события:
 
 ```js
-<div onClickCapture={() => { /* this runs first */ }}>
+<div onClickCapture={() => { /* это происходит в первую очередь */ }}>
   <button onClick={e => e.stopPropagation()} />
   <button onClick={e => e.stopPropagation()} />
 </div>
@@ -437,7 +437,7 @@ button { margin: 5px; }
 
 </DeepDive>
 
-### Passing handlers as alternative to propagation {/*passing-handlers-as-alternative-to-propagation*/}
+### Передача обработчиков как альтернатива распространению {/*passing-handlers-as-alternative-to-propagation*/}
 
 Обратите внимание, как этот обработчик клика выполняет строку кода _и затем_ вызывает проп `onClick`, переданный родителем:
 
@@ -460,7 +460,6 @@ function Button({ onClick, children }) {
 
 ### Отмена поведения по умолчанию {/*preventing-default-behavior*/}
 
-
 Некоторые браузерные события имеют поведение по умолчанию. Например, событие отправки `<form>`, которое происходит при нажатии на кнопку внутри него, по умолчанию перезагружает всю страницу:
 
 <Sandpack>
@@ -616,7 +615,7 @@ export default function LightSwitch() {
 
 </Solution>
 
-#### Wire up the events {/*wire-up-the-events*/}
+#### Привязка событий {/*wire-up-the-events*/}
 
 Компонент `ColorSwitch` рендерит кнопку. Предполагается, что она будет менять цвет страницы. Привяжите его к обработчику события `onChangeColor`, который компонент принимает от родителя, чтобы при нажатии на кнопку менялся цвет.
 
@@ -630,7 +629,7 @@ export default function ColorSwitch({
 }) {
   return (
     <button>
-      Change color
+      Изменить цвет
     </button>
   );
 }

From 60fb58208829b12bea2e96e3c5a964e8dc0d9847 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 12:10:26 +0200
Subject: [PATCH 06/14] chore: refactored typos

---
 src/content/learn/responding-to-events.md | 180 +++++++++++-----------
 1 file changed, 91 insertions(+), 89 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index b1342145c..932a7fb38 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -4,21 +4,21 @@ title: Обработка событий
 
 <Intro>
 
-В React можно добавлять  позволяет добавлять *обработчики событий* в JSX. Обработчики событий - это функции, которые вызываются в ответ на событие, например, клик на элемент, наведение курсора, фокус поля формы и так далее.
+React позволяет добавлять *обработчики событий* прямо в JSX. Обработчики событий - это функции, которые вызываются в ответ на определенное событие, например, клик на элемент, наведение курсора, фокус поля формы и т.д.
 
 </Intro>
 
 <YouWillLearn>
 
-* Как писать обработчики событий
+* Различные способы написания обработчика событий
 * Как передавать логику обработки событий от родительского компонента
-* Как всплывают события и как их останавливать
+* Как события распространяются и как их остановить
 
 </YouWillLearn>
 
 ## Добавление обработчиков событий {/*adding-event-handlers*/}
 
-Для того, чтобы добавить обработчик событий, сначала нужно создать функцию, а затем [передать ее пропом](/learn/passing-props-to-a-component) в соответствующий JSX-тег. Ниже приведена кнопка, которая пока еще ничего не делает:
+Чтобы добавить обработчик событий, сначала нужно определить функцию, а затем передать ее [в качестве пропа](/learn/passing-props-to-a-component) в соответствующий тег JSX. Например, вот кнопка, которая пока не имеет обработчика событий:
 
 <Sandpack>
 
@@ -26,7 +26,7 @@ title: Обработка событий
 export default function Button() {
   return (
     <button>
-      Я ничего не делаю
+      У меня нет обработчика событий
     </button>
   );
 }
@@ -34,11 +34,11 @@ export default function Button() {
 
 </Sandpack>
 
-Чтобы при нажатии на кнопку появилось сообщение, вам нужно выполнить следующие шаги:
+Для того, чтобы при нажатии на кнопку появилось сообщение, следуйте этим шагам:
 
-1. Определить функцию `handleClick` *внутри* вашего компонента `Button`.
-2. Реализовать логику внутри этой функции (используйте `alert`, чтобы показать сообщение).
-3. Добавить `onClick={handleClick}` в JSX `<button>`.
+1. Определите функцию `handleClick` *внутри* компонента `Button`.
+2. Внутри функции `handleClick` реализуйте логику, которая будет вызываться при нажатии на кнопку (например, используйте функцию `alert` для отображения сообщения).
+3. Добавьте `onClick={handleClick}` в JSX-тег `<button>`, чтобы связать функцию handleClick с событием клика на кнопке.
 
 <Sandpack>
 
@@ -62,12 +62,12 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Вы определили функцию `handleClick`, а затем [передали ее пропом](/learn/passing-props-to-a-component) в `<button>`. `handleClick` - это и есть **обработчик событий**. Обработчики событий:
+Вы определили функцию `handleClick` и затем [передали ее в качестве пропа](/learn/passing-props-to-a-component) в `<button>`. `handleClick` - это обработчик событий. Функции обработчиков событий:
 
-* Обычно определены *внутри* компонентов.
-* Начинаются со слова `handle`, после которого идет название события.
+* Обычно определяются *внутри* ваших компонентов.
+* начинаются со слова `handle`, за которым следует имя события.
 
-Принято называть обработчики событий `handle`, за которым следует имя события. Часто можно встретить `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и так далее.
+Обработчики событий принято называть со слова `handle`, за которым следует имя события. Вы часто будете видеть `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и т.д.
 
 Также можно определить обработчик события внутри JSX:
 
@@ -89,39 +89,39 @@ button { margin-right: 10px; }
 
 <Pitfall>
 
-Функции, которые передаются в обработчики событий, должны именно передаваться, а не быть вызванными. Например:
+Функции, которые передаются в обработчики событий, должны быть переданы, а не вызваны. Например:
 
 | передача функции (правильно)     | вызов функции (неправильно)        |
 | -------------------------------- | ---------------------------------- |
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-Это важно. В первом примере функция `handleClick` передается как обработчик события `onClick`. Это указывает React запомнить ее и вызывать вашу функцию только тогда, когда пользователь нажмет на кнопку.
+Разница здесь небольшая. В первом примере функция `handleClick` передается как обработчик событий `onClick`. Это говорит React запомнить ее и вызывать только при клике пользователя на кнопку.
 
-Во втором примере `()` в конце `handleClick()` вызывают функцию *непосредственно* во время [рендера](/learn/render-and-commit), без каких-либо кликов. Так происходит потому, что JavaScript внутри [JSX `{` и `}`](/learn/javascript-in-jsx-with-curly-braces) выполняется сразу.
+Во втором примере `()` в конце `handleClick()` вызывает функцию *немедленно* во время [рендеринга](/learn/render-and-commit), без кликов. Это происходит потому, что JavaScript внутри [`{` и `}` JSX](/learn/javascript-in-jsx-with-curly-braces) выполняется сразу же.
 
-Когда вы пишете инлайн-код, та же самая проблема проявляется снова:
+При написании кода встроенным образом (inline), та же опасность проявляется по-другому:
 
 | передача функции (правильно)            | вызов функции (неправильно)       |
 | --------------------------------------- | --------------------------------- |
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Переданный инлайн код, как тот, что ниже, не сработает по клику - он будет срабатывать каждый раз при рендеринге компонента:
+Передача кода встроенным образом вроде этого не приведет к срабатыванию при клике — он будет выполняться каждый раз при рендеринге компонента:
 
 ```jsx
 // Это сообщение появляется, когда компонент рендерится, а не при нажатии!
 <button onClick={alert('Вы нажали на меня!')}>
 ```
 
-Если вы хотите определить обработчик события инлайн, оберните его в анонимную функцию:
+Если вы хотите определить обработчик событий встроенным образом, оберните его в анонимную функцию, как показано ниже:
 
 ```jsx
 <button onClick={() => alert('Вы нажали на меня!')}>
 ```
 
-Это позволит не выполнять код при каждом рендере компонента.
+Таким образом, вместо выполнения кода при каждом рендеринге, создается функция, которая будет вызвана позже.
 
-В обоих случаях то, что вы хотите передать, должно быть функцией:
+В обоих случаях вам нужно передавать функцию:
 
 * `<button onClick={handleClick}>` передает функцию `handleClick`.
 * `<button onClick={() => alert('...')}>` передает стрелочную функцию `() => alert('...')`.
@@ -132,7 +132,7 @@ button { margin-right: 10px; }
 
 ### Чтение пропсов в обработчиках событий {/*reading-props-in-event-handlers*/}
 
-Поскольку обработчики событий объявлены внутри компонента, они имеют доступ к пропам. Ниже приведена кнопка, которая при нажатии показывает алерт с текстом из переменной `message`:
+Поскольку обработчики событий объявляются внутри компонента, они имеют доступ к пропсам компонента. Вот кнопка, которая при нажатии показывает предупреждение со значением своего свойства message:
 
 <Sandpack>
 
@@ -165,13 +165,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Тем самым эти кнопки могут показывать разные сообщения. Попробуйте изменить передаваемые им сообщения.
+Это позволяет двум кнопкам показывать разные сообщения. Попробуйте изменить передаваемые им сообщения.
 
-### Передача аргументов в обработчики событий {/*passing-event-handlers-as-props*/}
+### Передача обработчиков событий в качестве пропсов {/*passing-event-handlers-as-props*/}
 
-Часто требуется, чтобы родительский компонент определял обработчик событий дочернего компонента. Рассмотрим две кнопки: в зависимости от того, где используется компонент `Button`, он может выполнять разные функции - например, один воспроизведет фильм, а другой загрузит изображение.
+Часто вы захотите, чтобы родительский компонент указал обработчик событий для дочернего компонента. Например, для кнопок: в зависимости от места использования компонента `Button` вам может потребоваться выполнить разные функции — например, воспроизведение фильма или загрузка изображения.
 
-Для этого в качестве обработчика события нужно передать проп, который компонент получит от своего родителя:
+Для этого передайте компоненту проп, который он получит от своего родителя в качестве обработчика событий, например:
 
 <Sandpack>
 
@@ -186,7 +186,7 @@ function Button({ onClick, children }) {
 
 function PlayButton({ movieName }) {
   function handlePlayClick() {
-    alert(`Playing ${movieName}!`);
+    alert(`Воспроизводится ${movieName}!`);
   }
 
   return (
@@ -220,22 +220,24 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-В примере выше компонент `Toolbar` рендерит компоненты `PlayButton` и `UploadButton`:
+Здесь компонент `Toolbar` рендерит компоненты `PlayButton` и `UploadButton`:
 
-- `PlayButton` передает `handlePlayClick` как свойство `onClick` для `Button`.
-- `UploadButton` передает `() => alert('Uploading!')` как свойство `onClick` для `Button`.
 
-В конечном итоге, компонент `Button` получает свойство `onClick`. Он передаст это свойство непосредственно встроенному в браузер `<button>` с `onClick={onClick}`. Тем самым React получит команду вызвать переданную функцию по клику.
+- `PlayButton` передает `handlePlayClick` в качестве пропа `onClick` внутренней кнопке.
+- `UploadButton` передает `() => alert('Загружается!')` в качестве пропа `onClick` внутренней кнопке.
 
-Если вы используете [дизайн систему](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), то обычно компоненты, такие как кнопки, содержат стили, но не определяют поведение. Так и здесь, `PlayButton` и `UploadButton` будут передавать обработчики событий дальше.
+Наконец, ваш компонент `Button` принимает проп с именем `onClick`. Он передает этот проп напрямую встроенной `<button>` браузера с помощью `onClick={onClick}`. Это указывает React вызвать переданную функцию при клике.
 
-### Именование пропов обработчика событий {/*naming-event-handler-props*/}
 
-Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [имена событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Но, когда вы создаете свои собственные компоненты, вы можете назвать обработчики событий как угодно.
+Если вы используете [дизайн-систему](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), то обычно компоненты, такие как кнопки, содержат стили, но не указывают поведение. Вместо этого компоненты, такие как `PlayButton` и `UploadButton`, передадут обработчики событий вниз по иерархии.
 
-Название пропа обработчика должно начинаться с `on`, за которым следует заглавная буква.
+### Название пропсов для обработчиков событий {/*naming-event-handler-props*/}
 
-Например, проп `onClick` компонента `Button` можно назвать `onSmash`:
+Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [имена событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Однако, при создании своих собственных компонентов, вы можете называть их обработчики событий любым именем, которое вам нравится.
+
+Пропсы для обработчиков событий должны начинаться с `on`, за которым следует заглавная буква.
+
+Например, проп `onClick` компонента `Button` мог бы называться onSmash:
 
 <Sandpack>
 
@@ -268,9 +270,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-В примере выше `<button onClick={onSmash}>` показывает, что браузерному `<button>` (строчная буква) все еще нужен проп `onClick`, но имя пропа, полученное вашим пользовательским компонентом `Button`, зависит от вас!
+В этом примере `<button onClick={onSmash}>` показывает, что встроенный элемент `<button>` (с маленькой буквы) все еще нуждается в пропе с именем `onClick`, но имя пропа, которое получает ваш пользовательский компонент `Button`, зависит от вас!
 
-Если ваш компонент поддерживает несколько вариантов взаимодействия, вы можете назвать реквизиты обработчиков событий с учетом специфики приложения. Например, компонент `Toolbar` принимает обработчики событий `onPlayMovie` и `onUploadImage`:
+Когда ваш компонент поддерживает несколько взаимодействий, вы можете называть пропсы для обработчиков событий в соответствии с конкретными понятиями вашего приложения. Например, компонент `Toolbar` получает обработчики событий `onPlayMovie` и `onUploadImage`:
 
 <Sandpack>
 
@@ -312,13 +314,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Обратите внимание, что компоненту `App` не нужно знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это детали внетренней реализации `Toolbar`. В данном случае `Toolbar` передает их как обработчики `onClick` для своих `Button`, но позже он также может задействовать их для обработки нажатия клавиш. Называя реквизиты в соответствии со спецификой приложения, например, `onPlayMovie`, вы можете гибко менять их последующее поведение.
+Заметьте, что компонент `App` не должен знать, *что* делает `Toolbar` с `onPlayMovie` или `onUploadImage`. Это детали реализации `Toolbar`. Здесь `Toolbar` передает их в качестве обработчиков `onClick` своим кнопкам, но позже он также может вызывать их по клавиатурному сочетанию. Называние пропсов в соответствии со спецификой вашего приложения, например `onPlayMovie`, дает вам гибкость в ищменении их использовании в будущем.
 
 ## Всплытие событий {/*event-propagation*/}
 
-Обработчики событий также будут улавливать события от всех дочерних компонентов, которые могут быть у вашего компонента. Говорят, что событие "всплывает" или "распространяется" вверх по дереву: оно начинается с того места, где произошло событие, и затем поднимается вверх по этому дереву.
+Обработчики событий также будут перехватывать события от любых дочерних компонентов вашего компонента. Говорят, что событие "всплывает" или "распространяется" вверх по дереву: оно начинается там, где произошло событие, а затем поднимается вверх по дереву.
 
-Этот `<div>` содержит две кнопки. И `<div>` *и* каждая кнопка имеют свои собственные обработчики `onClick`. Какие обработчики, по вашему мнению, сработают при нажатии на кнопку?
+Этот `<div>` содержит две кнопки. У `<div>` *и* каждой кнопки есть свои собственные обработчики `onClick`. Какие обработчики вы думаете будут вызваны, когда вы нажмете на кнопку?
 
 <Sandpack>
 
@@ -349,19 +351,19 @@ button { margin: 5px; }
 
 </Sandpack>
 
-Если вы нажмете на любую из кнопок, сначала сработает ее `onClick`, а затем `onClick` родительского `<div>`. В результате появятся два сообщения. Если щелкнуть саму панель инструментов, то выполнится только `onClick` родительского `<div>`.
+Если вы нажмете на любую кнопку, то сначала будет выполнен ее обработчик `onClick`, а затем обработчик `onClick` родительского элемента `<div>`. Таким образом, появится два сообщения. Если вы нажмете на саму панель инструментов, то будет выполнен только обработчик `onClick` родительского элемента `<div>`.
 
 <Pitfall>
 
-В React всплывают все события, кроме `onScroll`, которое реагирует только на тег JSX, к которому вы его привязяли.
+В React все события распространяются, за исключением `onScroll`, который работает только на теге JSX, к которому он привязан.
 
 </Pitfall>
 
-### Прекращение передачи события {/*stopping-propagation*/}
+### Остановка распространения событий {/*stopping-propagation*/}
 
-При вызове обработчика, в него передаётся специальный объект **event**, обычно его называют `e`, из которого можно получить информацию о событии.
+Обработчики событий получают **объект события** в качестве единственного аргумента. Этот объект обычно называется `e`, что означает "event". С помощью этого объекта вы можете прочитать информацию о событии.
 
-Всплытие события можно остановить с помощью метода `e.stopPropagation()`, как это сделано в компоненте `Button`:
+Объект события также позволяет остановить распространение события. Если вы хотите предотвратить достижение события родительским компонентам, вам необходимо вызвать метод `e.stopPropagation()`, как это делает компонент `Button`:
 
 <Sandpack>
 
@@ -405,20 +407,20 @@ button { margin: 5px; }
 
 При нажатии на кнопку:
 
-1. React вызывает обработчик `onClick`, переданный в `<button>`. 
-2. Обработчик, который определен в `Button`, делает следующее:
-   * Вызывает `e.stopPropagation()`, который останавливает всплытие события.
+1. React вызывает обработчик `onClick`, переданный в `<button>`.
+2. Этот обработчик, определенный в компоненте `Button`, выполняет следующее:
+   * Вызывает `e.stopPropagation()`, который предотвращает дальнейшее всплытие события.
    * Вызывает функцию `onClick`, которая является пропом, переданным из компонента `Toolbar`.
-3. Функция, определенная в компоненте `Toolbar`, выводит на дисплей сообщение.
-4. Поскольку всплытие было остановлено, обработчик `onClick` родительского `<div>` *не* выполнится.
+3. Эта функция, определенная в компоненте Toolbar, выводит всплывающее окно для кнопки.
+4. Так как всплытие события было остановлено, обработчик `onClick` родительского элемента `<div>` не будет вызван.
 
-После вызова `e.stopPropagation()` нажатие на кнопки теперь показывает только одно сообщение (от `<button>`), а не два из них (от `<button>` и родительской панели инструментов `<div>`). Нажатие на кнопку - это не то же самое, что нажатие на окружающую панель инструментов, поэтому остановка всплытия имеет смысл для данного пользовательского интерфейса.
+В результате `e.stopPropagation()` нажатие на кнопки теперь вызывает только одно всплывающее окно (из `<button>`), а не два (из `<button>` и родительской панели инструментов `<div>`). Нажатие кнопки не то же самое, что нажатие на панель инструментов, поэтому остановка распространения события имеет смысл для этого интерфейса.
 
 <DeepDive>
 
-#### Capture phase events {/*capture-phase-events*/}
+#### Перехват событий {/*capture-phase-events*/}
 
-В некоторых случаях вам может понадобиться перехватить все события на дочерних элементах, *даже если их распространение прекращено*. Например, вы хотите регистрировать каждый клик в аналитике, независимо от логики распространения. Это можно сделать, добавив `Capture` в конце имени события:
+В редких случаях вам может понадобиться перехватывать все события на дочерних элементах, *даже если они остановили распространение*. Например, возможно, вы хотите зарегистрировать каждый клик мыши в аналитике, независимо от логики распространения. Для этого можно добавить `Capture` в конец имени события:
 
 ```js
 <div onClickCapture={() => { /* это происходит в первую очередь */ }}>
@@ -427,19 +429,19 @@ button { margin: 5px; }
 </div>
 ```
 
-Каждое событие проходит три фазы: 
+Каждое событие распространяется в трех фазах:
 
-1. Оно перемещается вниз, вызывая все обработчики `onClickCapture`.
-2. Запускается обработчик `onClick` элемента, по которому щелкнули. 
-3. Он перемещается вверх, вызывая все обработчики `onClick`.
+1. Оно спускается вниз, вызывая все обработчики `onClickCapture`.
+2. Оно вызывает обработчик `onClick` для нажатого элемента.
+3. Оно поднимается вверх, вызывая все обработчики `onClick`.
 
-Захват событий полезен для такого кода, как роутеры или аналитика, но, скорее всего, вы не будете использовать их в коде приложений.
+События захвата полезны для кода, такого как роутеры или аналитика, но, вероятно, вы не будете использовать их в приложении.
 
 </DeepDive>
 
-### Передача обработчиков как альтернатива распространению {/*passing-handlers-as-alternative-to-propagation*/}
+### Передача обработчиков в качестве альтернативы распространению событий {/*passing-handlers-as-alternative-to-propagation*/}
 
-Обратите внимание, как этот обработчик клика выполняет строку кода _и затем_ вызывает проп `onClick`, переданный родителем:
+Обратите внимание, как этот обработчик клика выполняет строку кода, _а затем_ вызывает переданный родителем проп `onClick`:
 
 ```js {4,5}
 function Button({ onClick, children }) {
@@ -454,13 +456,13 @@ function Button({ onClick, children }) {
 }
 ```
 
-Вы можете добавить больше кода в этот обработчик перед вызовом обработчика родительского события `onClick`. Этот паттерн обеспечивает *альтернативу* распространению. Он позволяет дочернему компоненту обрабатывать событие, в то же время позволяя родительскому компоненту задавать дополнительное поведение. В отличие от распространения, он не является автоматическим. Но преимущество этого паттерна в том, что вы можете четко проследить всю цепочку вызовов в результате какого-то события.
+Вы также можете добавить больше кода в этот обработчик перед вызовом обработчика событий `onClick` родительского компонента. Этот шаблон обеспечивает *альтернативу* распространению. Он позволяет дочернему компоненту обрабатывать событие, а также позволяет родительскому компоненту указывать дополнительное поведение. В отличие от распространения, это не происходит автоматически. Но преимущество этого шаблона заключается в том, что вы можете четко следить за всей цепочкой кода, который выполняется в результате какого-либо события.
 
-Если вы используете распространение и вам сложно отследить, какие обработчики выполняются и почему, воспользуйтесь этим подходом.
+Если вы полагаетесь на распространение, и трудно отследить, какие обработчики выполняются и почему, попробуйте использовать этот подход.
 
-### Отмена поведения по умолчанию {/*preventing-default-behavior*/}
+### Предотвращение стандартного поведения {/*preventing-default-behavior*/}
 
-Некоторые браузерные события имеют поведение по умолчанию. Например, событие отправки `<form>`, которое происходит при нажатии на кнопку внутри него, по умолчанию перезагружает всю страницу:
+Некоторые события в браузере имеют связанное со стандартным поведением. Например, событие отправки формы `<form>`, которое происходит при нажатии на кнопку внутри нее, по умолчанию перезагружает всю страницу:
 
 <Sandpack>
 
@@ -481,7 +483,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Для того, чтобы отменить поведение браузера, котрое установлено по умолчанию, вы можете вызвать `e.preventDefault()`.
+Вы можете вызвать метод `e.preventDefault()` из объекта события, чтобы предотвратить это:
 
 <Sandpack>
 
@@ -505,28 +507,28 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Не путайте `e.stopPropagation()` и `e.preventDefault()`. Они оба полезны, но не связаны между собой:
+Не путайте `e.stopPropagation()` и `e.preventDefault()`. Оба они полезны, но не связаны между собой:
 
-* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) позволяет остановить всплытие события по дереву элементов.
-* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) позволяет заблокировать стандартное поведение браузера.
+* [e.stopPropagation()](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) останавливает срабатывание обработчиков событий, привязанных к тегам выше по иерархии DOM.
+* [e.preventDefault()](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) предотвращает стандартное поведение браузера для некоторых событий.
 
 ## Могут ли обработчики событий иметь побочные эффекты? {/*can-event-handlers-have-side-effects*/}
 
-Конечно! Обработчики событий - отличное место для побочных эффектов.
+Конечно! Обработчики событий - это лучшее место для побочных эффектов.
 
-В отличие от функций рендеринга, обработчикам событий не требуется быть [чистыми](/learn/keeping-components-pure), поэтому это отличное место для *изменения* чего-либо - например, изменения значения ввода в ответ на ввод текста или изменения списка при нажатии кнопки. Но для того, чтобы изменить какую-то информацию, сначала нужно каким-то образом ее сохранить. В React для этого используется [состояние - память компонента.](/learn/state-a-components-memory) Вы узнаете об этом на следующей странице.
+В отличие от функций рендеринга, обработчики событий не обязаны быть [чистыми функциями](/learn/keeping-components-pure), поэтому это отличное место для изменения чего-то - например, изменения значения ввода в ответ на набор текста или изменения списка при нажатии на кнопку. Однако, чтобы изменить какую-то информацию, сначала нужно иметь способ ее хранения. В React для этого используется [состояние компонента - его память](/learn/state-a-components-memory). Вы узнаете об этом на следующей странице.
 
 <Recap>
 
-* Для обработки событий в React можно передать функцию в качестве пропа, например, `<button>`.
-* Обработчики событий должны быть **переданы в элемент без вызова**, используя следующий синтаксис: `onClick={handleClick}`, **а не** `onClick={handleClick()}`.
-* Определение обработчика событий может быть выполнено инлайн или отдельно.
-* Обработчики событий определяются внутри компонента и могут иметь доступ к его props.
-* Обработчик событий может быть определен в родительском компоненте и передан в дочерний компонент в качестве prop.
-* Для определения собственных реквизитов обработчика событий, уникальных для конкретного приложения, можно использовать свои собственные имена.
-* События в React распространяются вверх по иерархии компонентов. Чтобы предотвратить это, вызовите метод e.stopPropagation() на первом аргументе.
-* События могут иметь нежелательные стандартные поведения браузера, которые можно предотвратить вызовом метода e.preventDefault().
-* Явный вызов свойства обработчика события из дочернего обработчика является альтернативой распространению событий.
+* Вы можете обрабатывать события, передавая функцию в качестве пропа элементу, например, `<button>`.
+* Обработчики событий должны передаваться, а **не вызываться**! Например, `onClick={handleClick}`, а не `onClick={handleClick()}`.
+* Вы можете определять функцию обработчика событий отдельно или встроенно.
+* Обработчики событий определяются внутри компонента, поэтому они могут получать доступ к свойствам.
+* Вы можете объявить обработчик событий в родительском компоненте и передать его в качестве пропа дочернему элементу.
+* Вы можете определять свои собственные пропы обработчика событий с именами, специфичными для вашего приложения.
+* События всплывают вверх по иерархии элементов. Чтобы предотвратить это, вызовите `e.stopPropagation()`.
+* События могут иметь нежелательное поведение по умолчанию браузера. Чтобы предотвратить это, вызовите `e.preventDefault()`.
+* Явный вызов свойства обработчика событий из дочернего обработчика - хорошая альтернатива всплытию событий.
 
 </Recap>
 
@@ -534,9 +536,9 @@ button { margin-left: 5px; }
 
 <Challenges>
 
-#### Исправьте обработчик события {/*fix-an-event-handler*/}
+#### Исправление обработчика событий {/*fix-an-event-handler*/}
 
-Нажатие на эту кнопку должно переключить фон страницы с белого на черный и наоборот. Однако при нажатии ничего не происходит. Исправьте эту проблему. (Не беспокойтесь насчет логики внутри `handleClick` - эта часть в порядке).
+При нажатии на эту кнопку фон страницы должен переключаться между белым и черным цветами. Однако, ничего не происходит при нажатии на неё. Исправьте эту проблему. (Не беспокойтесь о логике внутри `handleClick` - она в порядке.)
 
 <Sandpack>
 
@@ -563,7 +565,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-Проблема в том, что `<button onClick={handleClick()}>` _вызывает_ функцию `handleClick` во время рендеринга вместо того, чтобы _передать_ ее. Если убрать вызов `()`, чтобы получилось `<button onClick={handleClick}>`, проблема будет устранена:
+Проблема заключается в том, что `<button onClick={handleClick()}>` _вызывает_ функцию `handleClick` при рендеринге, а не _передает_ ее. Удаление вызова `()` так, чтобы оно выглядело как `<button onClick={handleClick}>` решит проблему:
 
 <Sandpack>
 
@@ -588,7 +590,7 @@ export default function LightSwitch() {
 
 </Sandpack>
 
-Также можно обернуть вызов в другую функцию, например `<button onClick={() => handleClick()}>`:
+В качестве альтернативы, вы можете обернуть вызов в другую функцию, например, `<button onClick={() => handleClick()}>`:
 
 <Sandpack>
 
@@ -615,11 +617,11 @@ export default function LightSwitch() {
 
 </Solution>
 
-#### Привязка событий {/*wire-up-the-events*/}
+#### Подключение обработчиков событий {/*wire-up-the-events*/}
 
-Компонент `ColorSwitch` рендерит кнопку. Предполагается, что она будет менять цвет страницы. Привяжите его к обработчику события `onChangeColor`, который компонент принимает от родителя, чтобы при нажатии на кнопку менялся цвет.
+Этот компонент `ColorSwitch` отображает кнопку, которая должна изменять цвет страницы. Подключите её к обработчику событий `onChangeColor`, который он получает от родительского компонента, так что при нажатии на кнопку изменяется цвет страницы.
 
-После того как вы это сделаете, обратите внимание, что нажатие на кнопку также увеличивает счетчик нажатий на страницу. Ваш коллега, который написал родительский компонент, утверждает, что `onChangeColor` не увеличивает никаких счетчиков. Что еще может происходить? Исправьте компонент так, чтобы нажатие на кнопку *изменяло* цвет и _не_ увеличивало счетчик.
+После выполнения этой задачи вы заметите, что при нажатии на кнопку также увеличивается счетчик кликов на странице. Ваш коллега, который написал родительский компонент, настаивает на том, что `onChangeColor` не должен увеличивать никакие счетчики. Что еще может происходить? Исправьте это, чтобы при нажатии на кнопку _менялся_ только цвет, и _не_ увеличивался счетчик.
 
 <Sandpack>
 
@@ -673,9 +675,9 @@ export default function App() {
 
 <Solution>
 
-Сначала нужно добавить обработчик события, например `<button onClick={onChangeColor}>`.
+Сначала вам нужно добавить обработчик событий, например, `<button onClick={onChangeColor}>`.
 
-Но при этом возникает ошибка, связанная с увеличением счетчика. Если `onChangeColor` этого не делает, как утверждает ваш коллега, то проблема в том, что это событие распространяется вверх, и какой-то обработчик выше делает это. Чтобы решить эту проблему, нужно остановить распространение. Но не забудьте, что вы все равно должны вызвать `onChangeColor`.
+Однако, возникает проблема с увеличением счетчика при нажатии на кнопку. Если `onChangeColor` не увеличивает счетчик, как настаивает ваш коллега, то проблема заключается в том, что это событие передается родительским элементам и один из этих элементов увеличивает счетчик. Чтобы решить эту проблему, необходимо остановить всплытие события, но при этом не забыть вызвать `onChangeColor`.
 
 <Sandpack>
 

From d108734f7bfa9baec708d1bb00db74f5a0da19fe Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 12:16:44 +0200
Subject: [PATCH 07/14] fix: fixed localization issues

---
 src/content/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 932a7fb38..e31753573 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -314,7 +314,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Заметьте, что компонент `App` не должен знать, *что* делает `Toolbar` с `onPlayMovie` или `onUploadImage`. Это детали реализации `Toolbar`. Здесь `Toolbar` передает их в качестве обработчиков `onClick` своим кнопкам, но позже он также может вызывать их по клавиатурному сочетанию. Называние пропсов в соответствии со спецификой вашего приложения, например `onPlayMovie`, дает вам гибкость в ищменении их использовании в будущем.
+Заметьте, что компонент `App` не должен знать, *что* делает `Toolbar` с `onPlayMovie` или `onUploadImage`. Это детали реализации `Toolbar`. Здесь `Toolbar` передает их в качестве обработчиков `onClick` своим кнопкам, но позже он также может вызывать их по клавиатурному сочетанию. Называние пропсов в соответствии со спецификой вашего приложения, например `onPlayMovie`, дает вам гибкость в изменении их использовании в будущем.
 
 ## Всплытие событий {/*event-propagation*/}
 

From ad30b2d041552a7b1f4af2cd15ecaba58ed8ae6f Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 16:07:29 +0200
Subject: [PATCH 08/14] Update src/content/learn/responding-to-events.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index e31753573..93956e8fd 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -18,7 +18,7 @@ React позволяет добавлять *обработчики событи
 
 ## Добавление обработчиков событий {/*adding-event-handlers*/}
 
-Чтобы добавить обработчик событий, сначала нужно определить функцию, а затем передать ее [в качестве пропа](/learn/passing-props-to-a-component) в соответствующий тег JSX. Например, вот кнопка, которая пока не имеет обработчика событий:
+Чтобы добавить обработчик событий, сначала нужно определить функцию, а затем передать ее [в качестве пропа](/learn/passing-props-to-a-component) в соответствующий JSX-тег. Например, вот кнопка, у которой пока нет обработчика событий:
 
 <Sandpack>
 

From 2419ae0e9c08ba05ebb58c5c1b31eaa1ce95b714 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 16:07:55 +0200
Subject: [PATCH 09/14] Update src/content/learn/responding-to-events.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 93956e8fd..c4b469f75 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -34,7 +34,7 @@ export default function Button() {
 
 </Sandpack>
 
-Для того, чтобы при нажатии на кнопку появилось сообщение, следуйте этим шагам:
+Для того, чтобы при нажатии на кнопку появилось сообщение, выполните эти шаги:
 
 1. Определите функцию `handleClick` *внутри* компонента `Button`.
 2. Внутри функции `handleClick` реализуйте логику, которая будет вызываться при нажатии на кнопку (например, используйте функцию `alert` для отображения сообщения).

From 7ab42f3d073ae252f9c0b610c563c4fd738d0ee3 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 16:08:22 +0200
Subject: [PATCH 10/14] Update src/content/learn/responding-to-events.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index c4b469f75..291593112 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -37,7 +37,7 @@ export default function Button() {
 Для того, чтобы при нажатии на кнопку появилось сообщение, выполните эти шаги:
 
 1. Определите функцию `handleClick` *внутри* компонента `Button`.
-2. Внутри функции `handleClick` реализуйте логику, которая будет вызываться при нажатии на кнопку (например, используйте функцию `alert` для отображения сообщения).
+2. Внутри функции `handleClick` реализуйте логику, которая будет срабатывать при нажатии на кнопку (используйте функцию `alert` для отображения сообщения).
 3. Добавьте `onClick={handleClick}` в JSX-тег `<button>`, чтобы связать функцию handleClick с событием клика на кнопке.
 
 <Sandpack>

From 4c2a471eee88534f29b653fc47b10730683903e9 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 16:09:23 +0200
Subject: [PATCH 11/14] Update src/content/learn/responding-to-events.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 291593112..f5956e6cf 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -67,7 +67,7 @@ button { margin-right: 10px; }
 * Обычно определяются *внутри* ваших компонентов.
 * начинаются со слова `handle`, за которым следует имя события.
 
-Обработчики событий принято называть со слова `handle`, за которым следует имя события. Вы часто будете видеть `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и т.д.
+Обработчики событий принято называть со слова `handle`, за которым следует имя события. Вы часто будете встречать `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и т.п.
 
 Также можно определить обработчик события внутри JSX:
 

From 3ad9660aceb73800e7baf97522ea108298a6a973 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 16:10:09 +0200
Subject: [PATCH 12/14] Update src/content/learn/responding-to-events.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index f5956e6cf..e7f19d043 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -69,7 +69,7 @@ button { margin-right: 10px; }
 
 Обработчики событий принято называть со слова `handle`, за которым следует имя события. Вы часто будете встречать `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и т.п.
 
-Также можно определить обработчик события внутри JSX:
+Ещё обработчик события можно определить внутри JSX:
 
 ```jsx
 <button onClick={function handleClick() {

From 835eedbdaf68e47250a1d2d8f372caa9b54d68e0 Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sat, 29 Apr 2023 16:13:44 +0200
Subject: [PATCH 13/14] Update src/content/learn/responding-to-events.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index e7f19d043..a50acb867 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -77,7 +77,7 @@ button { margin-right: 10px; }
 }}>
 ```
 
-Или, более кратко, с помощью стрелочной функции:
+Или короче с помощью стрелочной функции:
 
 ```jsx
 <button onClick={() => {

From 8ee6769483e0e804ab2964aa896b20c999c3291b Mon Sep 17 00:00:00 2001
From: Maxim Tereshko <hey@tereshko.net>
Date: Sun, 30 Apr 2023 10:35:45 +0200
Subject: [PATCH 14/14] Update src/content/learn/responding-to-events.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/responding-to-events.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index a50acb867..73eeaa76a 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -26,7 +26,7 @@ React позволяет добавлять *обработчики событи
 export default function Button() {
   return (
     <button>
-      У меня нет обработчика событий
+      Я ничего не делаю
     </button>
   );
 }