`:
```js {1,11}
@@ -153,7 +153,7 @@ For example, you can use a `
`:
```
-If you don't want to add an extra `
` to your markup, you can write `<>` and `` instead:
+Если вы не хотите добавлять лишний `
` в свою разметку, вы можете вместо этого использовать `<>` и ``:
```js {1,11}
<>
@@ -169,21 +169,21 @@ If you don't want to add an extra `
` 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-дереве браузера.
-#### 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-тега без оборачивания их в другой тег или Фрагмент.
-### 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 `![]()
` must become `![]()
`, and wrapping tags like `oranges` must be written as ` oranges `.
+JSX требует явного закрытия тегов: самозакрывающиеся теги, такие как `![]()
`, должны стать `![]()
`, а оборачивающие теги, такие как `oranges`, должны быть написаны как ` oranges `.
-This is how Hedy Lamarr's image and list items look closed:
+Вот как выглядят закрытые изображение и элементы списка Хеди Ламарр:
```js {2-6,8-10}
<>
@@ -200,11 +200,11 @@ This is how Hedy Lamarr's image and list items look closed:
```
-### 3. camelCase all most of the things! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. camelCase все большинство вещей! {/*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}
![]()
```
-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)
-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, с дефисами.
-### 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:
+Вот ваш окончательный результат:
@@ -258,11 +258,11 @@ img { height: 90px }
-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), если вам это нужно.
+* Сообщения об ошибках часто указывают правильное направление для исправления вашей разметки.
@@ -270,9 +270,9 @@ Now you know why JSX exists and how to use it in components:
-#### 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. Исправьте его:
@@ -308,7 +308,7 @@ export default function Bio() {
-Whether to do it by hand or using the converter is up to you!
+Делать это вручную или с помощью конвертера — решать вам!