Skip to content

Перевод writing-markup-with-jsx.md на русский язык #1126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NivaldoFarias wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Перевод writing-markup-with-jsx.md на русский язык #1126

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c221df0
docs: translate `writing-markup-with-jsx.md` to Русский
translate-react-bot[bot] Feb 4, 2026
d5fcb6c
docs: translate `writing-markup-with-jsx.md` to Русский
translate-react-bot[bot] May 18, 2026
347bef7
chore: keep frontmatter title as-is
NivaldoFarias May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 48 additions & 48 deletions src/content/learn/writing-markup-with-jsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,69 +4,69 @@ title: Writing Markup with JSX

<Intro>

*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
*JSX* — это синтаксическое расширение для JavaScript, которое позволяет писать разметку в стиле HTML внутри файла JavaScript. Хотя существуют и другие способы написания компонентов, большинство разработчиков React предпочитают краткость JSX, и большинство кодовых баз его используют.

</Intro>

<YouWillLearn>

* Why React mixes markup with rendering logic
* How JSX is different from HTML
* How to display information with JSX
* Почему React смешивает разметку с логикой рендеринга
* Чем JSX отличается от HTML
* Как отображать информацию с помощью JSX

</YouWillLearn>

## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
## JSX: Разметка внутри JavaScript {/*jsx-putting-markup-into-javascript*/}

The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
Веб построен на HTML, CSS и JavaScript. Долгие годы веб-разработчики хранили контент в HTML, дизайн — в CSS, а логику — в JavaScript, часто в отдельных файлах! Контент размечался внутри HTML, в то время как логика страницы жила отдельно в JavaScript:

<DiagramGroup>

<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML markup with purple background and a div with two child tags: p and form. ">
<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML-разметка с фиолетовым фоном и div с двумя дочерними тегами: p и form. ">

HTML

</Diagram>

<Diagram name="writing_jsx_js" height={237} width={325} alt="Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.">
<Diagram name="writing_jsx_js" height={237} width={325} alt="Три обработчика JavaScript с желтым фоном: onSubmit, onLogin и onClick.">

JavaScript

</Diagram>

</DiagramGroup>

But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
Но по мере того, как веб становился более интерактивным, логика всё чаще определяла контент. JavaScript отвечал за HTML! Именно поэтому **в React логика рендеринга и разметка живут вместе в одном месте — компонентах.**

<DiagramGroup>

<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.">
<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React-компонент со смешанным HTML и JavaScript из предыдущих примеров. Имя функции — Sidebar, которая вызывает функцию isLoggedIn, выделенную желтым цветом. Внутри функции, выделенной фиолетовым, находится тег p из предыдущего примера и тег Form, ссылающийся на компонент, показанный на следующем рисунке.">

`Sidebar.js` React component
React-компонент `Sidebar.js`

</Diagram>

<Diagram name="writing_jsx_form" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.">
<Diagram name="writing_jsx_form" height={330} width={325} alt="React-компонент со смешанным HTML и JavaScript из предыдущих примеров. Имя функции — Form, содержащее два обработчика onClick и onSubmit, выделенных желтым цветом. После обработчиков следует HTML, выделенный фиолетовым. HTML содержит элемент form с вложенным элементом input, каждый из которых имеет пропс onClick.">

`Form.js` React component
React-компонент `Form.js`

</Diagram>

</DiagramGroup>

Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
Совместное хранение логики рендеринга кнопки и её разметки гарантирует, что они будут синхронизированы при каждом изменении. И наоборот, несвязанные детали, такие как разметка кнопки и разметка боковой панели, изолированы друг от друга, что делает их изменение по отдельности более безопасным.

Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.
Каждый React-компонент — это функция JavaScript, которая может содержать разметку, которую React отображает в браузере. React-компоненты используют синтаксическое расширение под названием JSX для представления этой разметки. JSX очень похож на HTML, но он немного строже и может отображать динамическую информацию. Лучший способ понять это — преобразовать некоторую HTML-разметку в JSX-разметку.

<Note>

JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library.
JSX и React — это две разные вещи. Они часто используются вместе, но вы *можете* [использовать их независимо](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) друг от друга. JSX — это синтаксическое расширение, а React — это JavaScript-библиотека.

</Note>

## Converting HTML to JSX {/*converting-html-to-jsx*/}
## Преобразование HTML в JSX {/*converting-html-to-jsx*/}

Suppose that you have some (perfectly valid) HTML:
Предположим, у вас есть валидный HTML:

```html
<h1>Hedy Lamarr's Todos</h1>
Expand All @@ -82,7 +82,7 @@ Suppose that you have some (perfectly valid) HTML:
</ul>
```

And you want to put it into your component:
И вы хотите поместить его в свой компонент:

```js
export default function TodoList() {
Expand All @@ -92,7 +92,7 @@ export default function TodoList() {
}
```

If you copy and paste it as is, it will not work:
Если вы скопируете и вставите его как есть, это не сработает:


<Sandpack>
Expand Down Expand Up @@ -122,21 +122,21 @@ img { height: 90px }

</Sandpack>

This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
Это потому, что JSX строже и имеет несколько больше правил, чем HTML! Если вы прочитаете сообщения об ошибках выше, они помогут вам исправить разметку, или вы можете следовать приведенному ниже руководству.

<Note>

Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
В большинстве случаев сообщения об ошибках React на экране помогут вам найти проблему. Прочитайте их, если застрянете!

</Note>

## The Rules of JSX {/*the-rules-of-jsx*/}
## Правила JSX {/*the-rules-of-jsx*/}

### 1. Return a single root element {/*1-return-a-single-root-element*/}
### 1. Возвращайте один корневой элемент {/*1-return-a-single-root-element*/}

To return multiple elements from a component, **wrap them with a single parent tag.**
Чтобы вернуть несколько элементов из компонента, **оберните их в один родительский тег.**

For example, you can use a `<div>`:
Например, вы можете использовать `<div>`:

```js {1,11}
<div>
Expand All @@ -153,7 +153,7 @@ For example, you can use a `<div>`:
```


If you don't want to add an extra `<div>` to your markup, you can write `<>` and `</>` instead:
Если вы не хотите добавлять лишний `<div>` в свою разметку, вы можете вместо этого использовать `<>` и `</>`:

```js {1,11}
<>
Expand All @@ -169,21 +169,21 @@ If you don't want to add an extra `<div>` to your markup, you can write `<>` and
</>
```

This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
Этот пустой тег называется *[Фрагментом.](/reference/react/Fragment)* Фрагменты позволяют группировать элементы, не оставляя следов в DOM-дереве браузера.

<DeepDive>

#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
#### Почему несколько JSX-тегов нужно оборачивать? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}

JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
JSX выглядит как HTML, но под капотом он преобразуется в обычные объекты JavaScript. Вы не можете вернуть два объекта из функции, не обернув их в массив. Это объясняет, почему вы также не можете вернуть два JSX-тега без оборачивания их в другой тег или Фрагмент.

</DeepDive>

### 2. Close all the tags {/*2-close-all-the-tags*/}
### 2. Закрывайте все теги {/*2-close-all-the-tags*/}

JSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
JSX требует явного закрытия тегов: самозакрывающиеся теги, такие как `<img>`, должны стать `<img />`, а оборачивающие теги, такие как `<li>oranges`, должны быть написаны как `<li>oranges</li>`.

This is how Hedy Lamarr's image and list items look closed:
Вот как выглядят закрытые изображение и элементы списка Хеди Ламарр:

```js {2-6,8-10}
<>
Expand All @@ -200,11 +200,11 @@ This is how Hedy Lamarr's image and list items look closed:
</>
```

### 3. camelCase <s>all</s> most of the things! {/*3-camelcase-salls-most-of-the-things*/}
### 3. camelCase <s>все</s> большинство вещей! {/*3-camelcase-salls-most-of-the-things*/}

JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
JSX преобразуется в JavaScript, а атрибуты, написанные в JSX, становятся ключами объектов JavaScript. В ваших собственных компонентах вы часто захотите считывать эти атрибуты в переменные. Но JavaScript имеет ограничения на имена переменных. Например, их имена не могут содержать дефисы или быть зарезервированными словами, такими как `class`.

This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](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
Expand All @@ -214,19 +214,19 @@ This is why, in React, many HTML and SVG attributes are written in camelCase. Fo
/>
```

You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
Вы можете [найти все эти атрибуты в списке DOM-пропсов компонентов.](/reference/react-dom/components/common) Если вы ошибетесь, не волнуйтесь — React выведет сообщение с возможной коррекцией в [консоль браузера.](https://developer.mozilla.org/docs/Tools/Browser_Console)

<Pitfall>

For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
По историческим причинам атрибуты [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) и [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) пишутся как в HTML, с дефисами.

</Pitfall>

### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
### Профессиональный совет: Используйте JSX-конвертер {/*pro-tip-use-a-jsx-converter*/}

Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
Преобразование всех этих атрибутов в существующей разметке может быть утомительным! Мы рекомендуем использовать [конвертер](https://transform.tools/html-to-jsx) для перевода вашего существующего HTML и SVG в JSX. Конвертеры очень полезны на практике, но все же стоит понимать, что происходит, чтобы вы могли уверенно писать JSX самостоятельно.

Here is your final result:
Вот ваш окончательный результат:

<Sandpack>

Expand Down Expand Up @@ -258,21 +258,21 @@ img { height: 90px }

<Recap>

Now you know why JSX exists and how to use it in components:
Теперь вы знаете, почему существует JSX и как его использовать в компонентах:

* React components group rendering logic together with markup because they are related.
* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
* Error messages will often point you in the right direction to fixing your markup.
* React-компоненты объединяют логику рендеринга с разметкой, потому что они связаны.
* JSX похож на HTML, с некоторыми отличиями. Вы можете использовать [конвертер](https://transform.tools/html-to-jsx), если вам это нужно.
* Сообщения об ошибках часто указывают правильное направление для исправления вашей разметки.

</Recap>



<Challenges>

#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
#### Преобразуйте HTML в JSX {/*convert-some-html-to-jsx*/}

This HTML was pasted into a component, but it's not valid JSX. Fix it:
Этот HTML был вставлен в компонент, но он не является валидным JSX. Исправьте его:

<Sandpack>

Expand Down Expand Up @@ -308,7 +308,7 @@ export default function Bio() {

</Sandpack>

Whether to do it by hand or using the converter is up to you!
Делать это вручную или с помощью конвертера — решать вам!

<Solution>

Expand Down
Loading