docs: translate writing-markup-with-jsx.md to Русский

Author: translate-react-bot[bot]

src/content/learn/writing-markup-with-jsx.md

@@ -1,10 +1,9 @@
 ---
 title: Написание разметки с помощью JSX
 ---
-
 <Intro>
 
-*JSX* — это синтаксическое расширение для JavaScript, которое позволяет писать разметку в стиле HTML прямо в файлах JavaScript. Хотя существуют и другие способы написания компонентов, большинство разработчиков React предпочитают краткость JSX, и большинство кодовых баз его используют.
+*JSX* — это синтаксическое расширение для JavaScript, которое позволяет писать разметку в стиле HTML внутри файла JavaScript. Хотя существуют и другие способы написания компонентов, большинство разработчиков React предпочитают краткость JSX, и большинство кодовых баз его используют.
 
 </Intro>
 
@@ -16,7 +15,7 @@ title: Написание разметки с помощью JSX
 
 </YouWillLearn>
 
-## JSX: Встраивание разметки в JavaScript {/*jsx-putting-markup-into-javascript*/}
+## JSX: Разметка внутри JavaScript {/*jsx-putting-markup-into-javascript*/}
 
 Веб построен на HTML, CSS и JavaScript. Долгие годы веб-разработчики хранили контент в HTML, дизайн — в CSS, а логику — в JavaScript, часто в отдельных файлах! Контент размечался внутри HTML, в то время как логика страницы жила отдельно в JavaScript:
 
@@ -36,27 +35,27 @@ JavaScript
 
 </DiagramGroup>
 
-Но по мере того, как веб становился более интерактивным, логика всё чаще определяла контент. JavaScript отвечал за HTML! Именно поэтому **в React логика рендеринга и разметка находятся вместе в одном месте — компонентах.**
+Но по мере того, как веб становился более интерактивным, логика всё чаще определяла контент. JavaScript отвечал за HTML! Именно поэтому **в React логика рендеринга и разметка живут вместе в одном месте — компонентах.**
 
 <DiagramGroup>
 
-<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React-компонент со смешанным HTML и JavaScript из предыдущих примеров. Имя функции - Sidebar, которая вызывает функцию isLoggedIn, выделенную желтым цветом. Внутри функции, выделенной фиолетовым, находится тег p из предыдущего примера и тег Form, ссылающийся на компонент, показанный на следующем рисунке.">
+<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React-компонент со смешанным HTML и JavaScript из предыдущих примеров. Имя функции — Sidebar, которая вызывает функцию isLoggedIn, выделенную желтым цветом. Внутри функции, выделенной фиолетовым, находится тег p из предыдущего примера и тег Form, ссылающийся на компонент, показанный на следующем рисунке.">
 
 React-компонент `Sidebar.js`
 
 </Diagram>
 
-<Diagram name="writing_jsx_form" height={330} width={325} alt="React-компонент со смешанным HTML и JavaScript из предыдущих примеров. Имя функции - Form, содержащее два обработчика onClick и onSubmit, выделенных желтым цветом. После обработчиков идет HTML, выделенный фиолетовым цветом. HTML содержит элемент form с вложенным элементом input, каждый из которых имеет проп onClick.">
+<Diagram name="writing_jsx_form" height={330} width={325} alt="React-компонент со смешанным HTML и JavaScript из предыдущих примеров. Имя функции — Form, содержащее два обработчика onClick и onSubmit, выделенных желтым цветом. После обработчиков следует HTML, выделенный фиолетовым. HTML содержит элемент form с вложенным элементом input, каждый из которых имеет пропс onClick.">
 
 React-компонент `Form.js`
 
 </Diagram>
 
 </DiagramGroup>
 
-Сохранение логики рендеринга кнопки и её разметки вместе гарантирует, что они будут синхронизированы при каждом изменении. И наоборот, несвязанные детали, такие как разметка кнопки и разметка боковой панели, изолированы друг от друга, что делает их изменение по отдельности более безопасным.
+Совместное хранение логики рендеринга кнопки и её разметки гарантирует, что они будут синхронизированы при каждом изменении. И наоборот, несвязанные детали, такие как разметка кнопки и разметка боковой панели, изолированы друг от друга, что делает их изменение по отдельности более безопасным.
 
-Каждый React-компонент — это JavaScript-функция, которая может содержать разметку, которую React отображает в браузере. React-компоненты используют синтаксическое расширение под названием JSX для представления этой разметки. JSX очень похож на HTML, но он немного строже и может отображать динамическую информацию. Лучший способ понять это — преобразовать некоторую HTML-разметку в JSX-разметку.
+Каждый React-компонент — это функция JavaScript, которая может содержать разметку, которую React отображает в браузере. React-компоненты используют синтаксическое расширение под названием JSX для представления этой разметки. JSX очень похож на HTML, но он немного строже и может отображать динамическую информацию. Лучший способ понять это — преобразовать некоторую HTML-разметку в JSX-разметку.
 
 <Note>
 
@@ -82,7 +81,7 @@ JSX и React — это две разные вещи. Они часто испо
 </ul>
 ```
 
-И вы хотите вставить его в свой компонент:
+И вы хотите поместить его в свой компонент:
 
 ```js
 export default function TodoList() {
@@ -122,11 +121,11 @@ img { height: 90px }
 
 </Sandpack>
 
-Это связано с тем, что JSX строже и имеет несколько больше правил, чем HTML! Если вы прочитаете сообщения об ошибках выше, они помогут вам исправить разметку, или вы можете следовать приведенному ниже руководству.
+Это потому, что JSX строже и имеет несколько больше правил, чем HTML! Если вы прочитаете сообщения об ошибках выше, они помогут вам исправить разметку, или вы можете следовать приведенному ниже руководству.
 
 <Note>
 
-В большинстве случаев сообщения об ошибках React на экране помогут вам найти проблему. Прочитайте их, если застряли!
+В большинстве случаев сообщения об ошибках React на экране помогут вам найти проблему. Прочитайте их, если застрянете!
 
 </Note>
 
@@ -153,7 +152,7 @@ img { height: 90px }
 ```
 
 
-Если вы не хотите добавлять лишний `<div>` в свою разметку, вы можете использовать вместо него `<>` и `</>`:
+Если вы не хотите добавлять лишний `<div>` в свою разметку, вы можете вместо этого использовать `<>` и `</>`:
 
 ```js {1,11}
 <>
@@ -181,7 +180,7 @@ JSX выглядит как HTML, но под капотом он преобра
 
 ### 2. Закрывайте все теги {/*2-close-all-the-tags*/}
 
-JSX требует явного закрытия тегов: теги с самозакрытием, такие как `<img>`, должны стать `<img />`, а оборачивающие теги, такие как `<li>oranges`, должны быть написаны как `<li>oranges</li>`.
+JSX требует явного закрытия тегов: самозакрывающиеся теги, такие как `<img>`, должны стать `<img />`, а оборачивающие теги, такие как `<li>oranges`, должны быть написаны как `<li>oranges</li>`.
 
 Вот как выглядят закрытые изображение и элементы списка Хеди Ламарр:
 
@@ -200,11 +199,11 @@ JSX требует явного закрытия тегов: теги с сам
 </>
 ```
 
-### 3. camelCase <s>все</s> почти всё! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. camelCase <s>все</s> большинство вещей! {/*3-camelcase-salls-most-of-the-things*/}
 
-JSX преобразуется в JavaScript, а атрибуты, написанные в JSX, становятся ключами объектов JavaScript. В ваших собственных компонентах вы часто захотите считывать эти атрибуты в переменные. Но у JavaScript есть ограничения на имена переменных. Например, их имена не могут содержать дефисы или быть зарезервированными словами, такими как `class`.
+JSX преобразуется в JavaScript, а атрибуты, написанные в JSX, становятся ключами объектов JavaScript. В ваших собственных компонентах вы часто захотите считывать эти атрибуты в переменные. Но JavaScript имеет ограничения на имена переменных. Например, их имена не могут содержать дефисы или быть зарезервированными словами, такими как `class`.
 
-Именно поэтому в React многие атрибуты HTML и SVG пишутся в camelCase. Например, вместо `stroke-width` вы используете `strokeWidth`. Поскольку `class` является зарезервированным словом, в React вместо него используется `className`, названный в честь [соответствующего свойства DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+Именно поэтому в React многие атрибуты HTML и SVG пишутся в camelCase. Например, вместо `stroke-width` вы используете `strokeWidth`. Поскольку `class` является зарезервированным словом, в React вместо него используется `className`, названный в честь [соответствующего DOM-свойства](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
 
 ```js {4}
 <img 
@@ -222,9 +221,9 @@ JSX преобразуется в JavaScript, а атрибуты, написа
 
 </Pitfall>
 
-### Профессиональный совет: Используйте конвертер JSX {/*pro-tip-use-a-jsx-converter*/}
+### Профессиональный совет: Используйте JSX-конвертер {/*pro-tip-use-a-jsx-converter*/}
 
-Преобразование всех этих атрибутов в существующей разметке может быть утомительным! Мы рекомендуем использовать [конвертер](https://transform.tools/html-to-jsx) для преобразования вашего существующего HTML и SVG в JSX. Конвертеры очень полезны на практике, но все же стоит понимать, что происходит, чтобы вы могли уверенно писать JSX самостоятельно.
+Преобразование всех этих атрибутов в существующей разметке может быть утомительным! Мы рекомендуем использовать [конвертер](https://transform.tools/html-to-jsx) для перевода вашего существующего HTML и SVG в JSX. Конвертеры очень полезны на практике, но все же стоит понимать, что происходит, чтобы вы могли уверенно писать JSX самостоятельно.
 
 Вот ваш окончательный результат:
 
@@ -272,7 +271,7 @@ img { height: 90px }
 
 #### Преобразуйте HTML в JSX {/*convert-some-html-to-jsx*/}
 
-Этот HTML был вставлен в компонент, но это не валидный JSX. Исправьте его:
+Этот HTML был вставлен в компонент, но он не является валидным JSX. Исправьте его:
 
 <Sandpack>