Что такое JSX?

JSX — это синтаксическое расширение JavaScript, разработанное специально для React. Он позволяет писать код, похожий на HTML, который встраивается в JavaScript. Хотя он напоминает HTML, это не HTML: JSX имеет свои правила и ограничения.

Почему используется JSX?

1. Читабельность: Код становится более понятным, так как разметка и логика расположены рядом.

2. Гибкость: JSX позволяет использовать JavaScript внутри разметки с помощью {}.

3. Эффективность: React использует JSX для создания виртуального DOM, оптимизируя процесс обновления интерфейса.

Как работает JSX?

JSX — это всего лишь синтаксический сахар. Перед выполнением браузером он компилируется в вызовы React.createElement(). Например:

const element = <h1>Привет!</h1>;

Компилируется в:

const element = React.createElement('h1', null, 'Привет!');

Основные особенности JSX

1. Встраивание JavaScript
   Внутри JSX можно использовать выражения JavaScript, заключённые в {}:

const name = "Мир";
const element = <h1>Привет, {name}!</h1>;

2. Атрибуты
   В JSX используются атрибуты, похожие на HTML, но с особенностями JavaScript. Например, вместо class используется className, а для событий — onClick.

const button = <button className="primary" onClick={() => alert("Клик!")}>Кликни</button>;

3. Дочерние элементы
   Можно передавать элементы и компоненты как дочерние:

const element = (
	<div>
		<h1>Заголовок</h1>
		<p>Текст абзаца</p>
	</div>
);

4. Фрагменты
   Для группировки элементов без лишнего контейнера используется React.Fragment или <>.

const element = (
	<>
		<h1>Заголовок</h1>
		<p>Текст абзаца</p>
	</>
);

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

function Greeting(props) {
	return <h1>Привет, {props.name}!</h1>;
}
function App() {
	return (
		<div>
			<Greeting name="Мир" />
			<Greeting name="React" />
		</div>
	);
}

Правила JSX

• Единый родительский элемент: Каждый JSX-блок должен быть обёрнут в один корневой элемент.

• CamelCase для атрибутов: Например, onClick, className.

• Закрывающие теги: Все элементы должны быть закрыты, даже одиночные:

<img src="image.jpg" alt="картинка" />

JSX и безопасность

JSX по умолчанию предотвращает выполнение вредоносного кода, экранируя все вставки JavaScript. Например:

const userInput = "<script>alert('вредоносный код')</script>";
const element = <div>{userInput}</div>; // Вставка будет безопасной

Преимущества:

• Удобный синтаксис для работы с интерфейсами.

• Легкость интеграции JavaScript.

• Ясность кода.

Недостатки:

• Требуется этап компиляции (Babel).

• Начинающим может быть сложнее освоить по сравнению с обычным HTML.

JSX — это инструмент для разработки в React, который сочетает удобство написания разметки с возможностями JavaScript. Он делает код более выразительным и гибким, упрощая процесс создания интерфейсов.