Writing Markup with JSX and Setup page #845

Hellnar · 2023-04-25T16:19:13Z

Переведено.

Hellnar · 2023-04-26T16:08:43Z

Сори. Случайно запулил и второй перевод здесь. Надеюсь не будет проблемой проверить сразу оба. Если проблемно, закину его отдельно.

titovmx · 2023-05-13T10:02:25Z

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

@@ -1,88 +1,90 @@
 ---
-title: Writing Markup with JSX
+title: Написание JSX разметки


Suggested change

title: Написание JSX разметки

title: Написание JSX-разметки

Следует ставить дефис для сложносоставных существительных, образованных из двух самостоятельных существительных, включая случаи когда первое не переводится. Аналогично, стоит перепроверить другие случаи ниже, например, React-разработчики и JavaScript-файлов.

gcor

Спасибо!

src/content/learn/editor-setup.md

gcor · 2023-05-21T20:29:26Z

src/content/learn/editor-setup.md


-### Linting {/*linting*/}
+### Отладчик {/*linting*/}
+


У вас тут случилась разница с пробелами. Пожалуйста поправьте. Иначе в будущем сложно будет решать конфликты при ребейзе

@Hellnar уберите, пожалуйста, лишние пустые строки, которых не было в английской документации. Как сказал @gcor, это облегчит дальнейшее обновление при мерже изменений из английской документации

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

Co-authored-by: Anton Ahatov <anton@gcor.ru>

github-actions · 2023-05-27T10:27:12Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

gcor · 2023-07-05T19:27:47Z

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


 </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:


please remove eng text

gcor · 2023-07-05T19:28:16Z

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


-This is how Hedy Lamarr's image and list items look closed:
+JSX требует закрывать все теги: самозакрывающиеся теги, такие как `<img>` должны меняться на `<img />`, а объединяющие теги, такие как `<li>oranges` должны изменяться на `<li>oranges</li>`.


please check line breaks

ntishkevich

Спасибо за ваш перевод. Есть ряд замечаний, повторяющихся, обратите на них внимание и исправьте во всех местах.

ntishkevich · 2023-05-18T20:24:40Z

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

 ---

 <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. Поэтому JSX встречается во многих кодовых базах.


Для длинного тире используйте "--" или вставляйте спец символ em dash "—".
Подробнее можно почитать #851 (comment)

ntishkevich · 2023-05-27T10:27:15Z

src/content/learn/editor-setup.md


-### Linting {/*linting*/}
+### Отладчик {/*linting*/}
+


@Hellnar уберите, пожалуйста, лишние пустые строки, которых не было в английской документации. Как сказал @gcor, это облегчит дальнейшее обновление при мерже изменений из английской документации

ntishkevich · 2023-05-27T11:16:51Z

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

        <br /><br />
-        <b>And <i>pictures</i></b> of scientists!
+        <b>И <i>изображения</i></b> ученых!


Suggested change

И изображения ученых!

И изображения учёных!

Е на Ё

ntishkevich · 2023-05-27T11:17:41Z

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


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


Suggested change

Эта HTML разметка была перенесена в компонент, но это неправильный JSX. Исправьте его:

Эта HTML-разметка была перенесена в компонент, но это неправильный JSX. Исправьте его:

ntishkevich · 2023-06-13T19:25:52Z

src/content/learn/editor-setup.md

-* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
-* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
+* [WebStorm](https://www.jetbrains.com/webstorm/) — интегрированная среда разработки, спроектированная специально для JavaScript.
+* [Sublime Text](https://www.sublimetext.com/) — редактор с поддержкой JSX и TypeScript, [подсветкой синтаксиса](https://stackoverflow.com/a/70960574/458193) и встроенным автозаполнением.


Suggested change

* [Sublime Text](https://www.sublimetext.com/) — редактор с поддержкой JSX и TypeScript, [подсветкой синтаксиса](https://stackoverflow.com/a/70960574/458193) и встроенным автозаполнением.

* [Sublime Text](https://www.sublimetext.com/) — редактор с поддержкой JSX и TypeScript, встроенная [подсветка синтаксиса](https://stackoverflow.com/a/70960574/458193) и автодополнение.

Перефразировал, мне кажется, что "автодополнение" лучше подходит, чем "автозаполнение".

ntishkevich · 2023-07-07T07:45:08Z

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

@@ -169,21 +170,20 @@ 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)* Фрагменты позволяют группировать элементы разметки не внедряя дополнительные теги и не изменяя древо HTML в браузере.


Suggested change

Этот пустой тег называется *[Фрагмент.](/reference/react/Fragment)* Фрагменты позволяют группировать элементы разметки не внедряя дополнительные теги и не изменяя древо HTML в браузере.

Этот пустой тег называется *[Фрагмент.](/reference/react/Fragment)* Фрагменты позволяют группировать элементы разметки, не внедряя дополнительные теги и не изменяя древо HTML в браузере.

ntishkevich · 2023-07-07T14:21:03Z

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


-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 тега без их объединения в один тег или Фрагмент.


Suggested change

JSX выглядит так же как HTML, но внутри конвертируется в обычные JavaScript объекты. Нельзя вернуть два объекта из функции без объединения в один массив. Это также объясняет почему нельзя возвращать два JSX тега без их объединения в один тег или Фрагмент.

JSX выглядит как HTML, но внутри преобразуется в обычные JavaScript-объекты. Нельзя вернуть два объекта из функции без объединения в один массив. Это объясняет, почему нельзя возвращать два JSX-тега без их объединения в один тег или Фрагмент.

ntishkevich · 2023-07-07T14:35:14Z

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


-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`.


Suggested change

JSX конвертируется в JavaScript и все атрибуты становятся ключами JavaScript объекта. В компонентах вам часто потребуется считывать эти атрибуты и присваивать переменным. Но в JavaScript есть ограничения для названий переменных. Например, переменные не могут содержать тире или или называться так само, как и зарезервированные слова, например `class`.

JSX превращается в JavaScript и все атрибуты, написанные в JSX, становятся ключами JavaScript-объектов. В своих компонентах вам часто потребуется считывать эти атрибуты и присваивать переменным. Но в JavaScript есть ограничения для названий переменных. Например, переменные не могут содержать дефисы или быть зарезервированными словами, например `class`.

Перефразировал

ntishkevich · 2023-07-07T15:09:13Z

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

@@ -214,36 +214,36 @@ 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)


Suggested change

Вы можете [найти все эти атрибуты в списке свойств DOM компонентов.](/reference/react-dom/components/common) Если вы напишите атрибут неправильно, React покажет сообщение с возможным решением проблемы в [консоли браузера.](https://developer.mozilla.org/docs/Tools/Browser_Console)

Вы можете [найти все эти атрибуты в списке свойств DOM-компонентов.](/reference/react-dom/components/common) Если вы напишите атрибут неправильно, React выведет сообщение с возможным решением проблемы в [консоль браузера.](https://developer.mozilla.org/docs/Tools/Browser_Console)

Перефразировал

ntishkevich · 2023-07-07T15:21:50Z

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


-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 самостоятельно.


Suggested change

Конвертация всех атрибутов в уже существующей разметке может быть утомительной. Мы рекомендуем использовать [конвертор](https://transform.tools/html-to-jsx) чтобы конвертировать уже существующую HTML разметку в JSX. Конверторы очень полезны на практике, но вам все равно следует понимать правила, чтобы без проблем писать JSX самостоятельно.

Конвертация всех атрибутов в уже существующей разметке может быть утомительной! Мы рекомендуем использовать [конвертор](https://transform.tools/html-to-jsx) чтобы конвертировать уже существующую HTML-разметку в JSX. Конверторы очень полезны на практике, но вам всё равно следует понимать, что происходит, чтобы вы могли уверенно писать JSX самостоятельно.

Перефразировал и исправил ё

ntishkevich

Спасибо за ваш перевод. Есть ряд замечаний, повторяющихся, обратите на них внимание и исправьте во всех местах.

sysoev-dev · 2023-12-16T12:39:27Z

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

+        <li>Придумать новые светофоры
+        <li>Отрепетировать сцену из фильма
+        <li>Улучшить спектральный сенсор


<li>Invent new traffic lights</li> <li>Rehearse a movie scene</li> <li>Improve the spectrum technology</li>

Был правильный вариант, тэги <lI></li> в итоговом примере должны быть закрыты

Translation for Writing Markup with JSX

3b63ad7

vercel bot deployed to Preview – ru-react-dev April 25, 2023 16:19 View deployment

Hellnar mentioned this pull request Apr 25, 2023

New Russian Translation Progress #843

Open

gcor added the needs review A pull request ready to be reviewed label Apr 25, 2023

Merge branch 'reactjs:main' into main

d6ec3d7

vercel bot deployed to Preview – ru-react-dev April 26, 2023 15:13 View deployment

Transtaled Editor Setup page

2945c8c

vercel bot deployed to Preview – ru-react-dev April 26, 2023 15:15 View deployment

Hellnar changed the title ~~Translation for Writing Markup with JSX~~ Writing Markup with JSX and Setup page Apr 26, 2023

titovmx mentioned this pull request May 13, 2023

Translate Describing the UI page #880

Open

titovmx reviewed May 13, 2023

View reviewed changes

gcor reviewed May 21, 2023

View reviewed changes

gcor approved these changes May 21, 2023

View reviewed changes

ntishkevich and others added 3 commits May 27, 2023 13:24

Update src/content/learn/editor-setup.md

063d78d

Co-authored-by: Anton Ahatov <anton@gcor.ru>

Update src/content/learn/editor-setup.md

42dec38

Co-authored-by: Anton Ahatov <anton@gcor.ru>

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

52a6e54

Co-authored-by: Anton Ahatov <anton@gcor.ru>

vercel bot deployed to Preview – ru-react-dev May 27, 2023 10:26 View deployment

gcor reviewed Jul 5, 2023

View reviewed changes

ntishkevich requested changes Jul 7, 2023

View reviewed changes

sysoev-dev reviewed Dec 16, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Writing Markup with JSX and Setup page #845

Writing Markup with JSX and Setup page #845

Hellnar commented Apr 25, 2023 •

edited

Hellnar commented Apr 26, 2023

titovmx May 13, 2023

gcor left a comment

gcor May 21, 2023

ntishkevich May 27, 2023

github-actions bot commented May 27, 2023 •

edited

📦 Next.js Bundle Analysis for react-dev

gcor Jul 5, 2023

gcor Jul 5, 2023

ntishkevich left a comment

ntishkevich May 18, 2023

ntishkevich May 27, 2023

ntishkevich May 27, 2023

ntishkevich May 27, 2023

ntishkevich Jun 13, 2023

ntishkevich Jul 7, 2023

ntishkevich Jul 7, 2023

ntishkevich Jul 7, 2023

ntishkevich Jul 7, 2023

ntishkevich Jul 7, 2023

ntishkevich left a comment

sysoev-dev Dec 16, 2023 •

edited

	title: Написание JSX разметки
	title: Написание JSX-разметки


		This is how Hedy Lamarr's image and list items look closed:
		JSX требует закрывать все теги: самозакрывающиеся теги, такие как `<img>` должны меняться на `<img />`, а объединяющие теги, такие как `<li>oranges` должны изменяться на `<li>oranges</li>`.

	<b>И <i>изображения</i></b> ученых!
	<b>И <i>изображения</i></b> учёных!


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

	Эта HTML разметка была перенесена в компонент, но это неправильный JSX. Исправьте его:
	Эта HTML-разметка была перенесена в компонент, но это неправильный JSX. Исправьте его:

	* [Sublime Text](https://www.sublimetext.com/) — редактор с поддержкой JSX и TypeScript, [подсветкой синтаксиса](https://stackoverflow.com/a/70960574/458193) и встроенным автозаполнением.
	* [Sublime Text](https://www.sublimetext.com/) — редактор с поддержкой JSX и TypeScript, встроенная [подсветка синтаксиса](https://stackoverflow.com/a/70960574/458193) и автодополнение.

	Этот пустой тег называется [Фрагмент.](/reference/react/Fragment) Фрагменты позволяют группировать элементы разметки не внедряя дополнительные теги и не изменяя древо HTML в браузере.
	Этот пустой тег называется [Фрагмент.](/reference/react/Fragment) Фрагменты позволяют группировать элементы разметки, не внедряя дополнительные теги и не изменяя древо HTML в браузере.


		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 тега без их объединения в один тег или Фрагмент.


		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`.


		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 самостоятельно.

Writing Markup with JSX and Setup page #845

Are you sure you want to change the base?

Writing Markup with JSX and Setup page #845

Conversation

Hellnar commented Apr 25, 2023 • edited

Hellnar commented Apr 26, 2023

Choose a reason for hiding this comment

gcor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 27, 2023 • edited

Size changes

📦 Next.js Bundle Analysis for react-dev

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ntishkevich left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ntishkevich left a comment

Choose a reason for hiding this comment

sysoev-dev Dec 16, 2023 • edited

Choose a reason for hiding this comment

Hellnar commented Apr 25, 2023 •

edited

github-actions bot commented May 27, 2023 •

edited

sysoev-dev Dec 16, 2023 •

edited