Что такое JSX и как он связан с JS?

Question 1

Что такое JSX и как он связан с JS?

Answer 1

Что такое JSX на самом деле?
JSX расшифровывается как JavaScript XML. Это расширение синтаксиса для JavaScript, которое позволяет вам использовать HTML-теги прямо внутри вашего файла JavaScript. Вместо создания, настройки и добавления ваших HTML-тегов с помощью объектов JavaScript, вы можете создавать элементы, используя XML-подобный синтаксис, который будет генерировать элементы DOM для вас за кулисами.

Итак, как это выглядит? Давайте посмотрим краткий пример:
const jsx = <div>Welcome to React</div>;
______________________________________________________________________________________

В целом, JSX помогает вам упростить ваш код, упростить работу с ним и в то же время сделать его более читабельным. Чтобы резюмировать важные части этого руководства, вот несколько вещей, которые следует помнить о подключении JSX к JavaScript:

• JSX - это расширение синтаксиса для JavaScript, которое расшифровывается как JavaScript XML.
• React может быть написан как с JSX, так и без него. Хотя настоятельно рекомендуется использовать JSX для вашего же благоразумия.
• JSX поддерживает использование выражений с помощью фигурных скобок.
• Атрибуты в JSX записываются в camelCase.
• Элементы JSX всегда должны быть закрыты. Если дочерних элементов нет, то элементы должны быть самозакрывающимися.
• Одновременно может быть возвращен только один JSX. Используйте фрагменты, если вам нужно вернуть несколько элементов.
• Функции могут возвращать элементы JSX.
• JSX генерируется для вызовов функции React.createElement.
  ______________________________________________________________________________________
  При работе с React.js часто встречается ситуация, когда в одних примерах используются файлы с расширением .js, а в других — .jsx. Это может вызвать путаницу, особенно для тех, кто только начинает знакомство с данным фреймворком.

Во-первых, стоит уяснить, что расширение .jsx используется для указания на файлы JavaScript XML (JSX). JSX — это синтаксический сахар для функции React.createElement(), которая позволяет описывать структуру интерфейса приложения более наглядно и удобно. То есть, вместо того, чтобы писать функции, можно написать разметку наподобие HTML прямо в коде на JavaScript.

Вот пример использования JSX:

const element = <h1>Hello, world!</h1>;

А вот как будет выглядеть то же самое без JSX:
const element = React.createElement(
“h1”,
null,
“Hello, world!”
);

Как видно, использование JSX позволяет сделать код более читаемым и понятным.

Однако стоит отметить, что браузеры не понимают JSX напрямую. Поэтому перед тем, как отправить код в браузер, его нужно преобразовать в обычный JavaScript с помощью так называемых транспиляторов, например, Babel.

Теперь, когда стало понятнее, что такое .jsx, можно перейти к вопросу о разнице между .js и .jsx.

Файлы с расширением .js и .jsx в React.js, по сути, выполняют одну и ту же функцию — они содержат код компонентов на JavaScript. Однако расширение .jsx указывает на то, что в данном файле используется JSX синтаксис.

Важно отметить, что использование .jsx не является обязательным. Это лишь соглашение между разработчиками, которое помогает быстрее понять, какой синтаксис используется в файле. Если в файле используется JSX, его рекомендуется именовать с расширением .jsx, чтобы другие разработчики смогли легко идентифицировать его содержимое.

Таким образом, выбор между .js и .jsx зависит от синтаксиса, который вы используете. Если вы пишете код с использованием JSX, то лучше использовать расширение .jsx. Если же используется обычный JavaScript, то можно оставить расширение .js.