` to your markup, you can write `<>` and `` instead:
+Если вы не хотите добавлять дополнительный `
` в разметку, можно воспользоваться тегами `<>` и ``:
```js {1,11}
<>
-
Hedy Lamarr's Todos
+
Задачи Hedy Lamarr's
` 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)* Фрагменты позволяют группировать элементы разметки не внедряя дополнительные теги и не изменяя древо HTML в браузере.
-#### 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*/}
-
-JSX requires tags to be explicitly closed: self-closing tags like `
![]()
` must become `
![]()
`, and wrapping tags like `
oranges` must be written as `oranges`.
+### 2. Закрывайте все теги {/*2-close-all-the-tags*/}
-This is how Hedy Lamarr's image and list items look closed:
+JSX требует закрывать все теги: самозакрывающиеся теги, такие как `
![]()
` должны меняться на `
![]()
`, а объединяющие теги, такие как `
oranges` должны изменяться на `oranges`.
+Вот так изображение Hedy Lamarr и список выглядят закрытыми:
```js {2-6,8-10}
<>
@@ -193,18 +193,18 @@ This is how Hedy Lamarr's image and list items look closed:
class="photo"
/>
- - Invent new traffic lights
- - Rehearse a movie scene
- - Improve the spectrum technology
+ - Придумать новые светофоры
+
- Отрепетировать сцену из фильма
+
- Улучшить спектральный сенсор
```
-### 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 и все атрибуты становятся ключами 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 разметку в JSX. Конверторы очень полезны на практике, но вам все равно следует понимать правила, чтобы без проблем писать JSX самостоятельно.
-Here is your final result:
+Вот финальный результат:
@@ -234,16 +234,16 @@ Here is your final result:
export default function TodoList() {
return (
<>
- Hedy Lamarr's Todos
+ Задачи Hedy Lamarr's
- - Invent new traffic lights
- - Rehearse a movie scene
- - Improve the spectrum technology
+ - Придумать новые светофоры
+
- Отрепетировать сцену из фильма
+
- Улучшить спектральный сенсор
);
@@ -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. Исправьте его:
@@ -280,12 +280,12 @@ This HTML was pasted into a component, but it's not valid JSX. Fix it:
export default function Bio() {
return (
-
Welcome to my website!
+ Добро пожаловать на мой сайт!
- You can find my thoughts here.
+ Здесь я публикую свои мысли.
- And pictures of scientists!
+ И изображения ученых!
);
}
@@ -308,7 +308,7 @@ export default function Bio() {
-Whether to do it by hand or using the converter is up to you!
+Вы можете конвертировать HTML самостоятельно или воспользоваться конвертором.
@@ -319,12 +319,12 @@ export default function Bio() {
return (
-
Welcome to my website!
+ Добро пожаловать на мой сайт!
- You can find my thoughts here.
+ Здесь я публикую свои мысли.
- And pictures of scientists!
+ И изображения ученых!
);