Спросят с вероятностью 10%
JSX (JavaScript XML) — это расширение синтаксиса. Оно позволяет писать структуру компонентов React с использованием синтаксиса, похожего на HTML, непосредственно файлах. Этот синтаксический сахар делает код более читабельным и удобным для разработки пользовательских интерфейсов.
Основные особенности JSX:
- Сочетание HTML и JavaScript: Позволяет использовать HTML-теги и компоненты React внутри JavaScript-кода.
- Выражения JavaScript: Можно вставлять JavaScript-выражения в фигурные скобки
{}. Это позволяет динамически управлять содержимым компонентов.- Компонентный подход: Легко создавать и использовать повторно компоненты UI, что упрощает разработку сложных пользовательских интерфейсов.
- Преобразование: Не может быть выполнен напрямую браузерами и требует преобразования в обычный JavaScript. Это обычно делается с помощью транспиляторов, таких как Babel.
Пример:
const element = <h1>Привет, мир!</h1>;
Этот пример демонстрирует JSX-элемент, который представляет собой заголовок первого уровня с текстом "Привет, мир!". В реальном JavaScript этот код будет преобразован в вызов
React.createElement(), который создаёт React-элемент.Вставка выражений:
Вы можете вставлять любые допустимые JavaScript-выражения в него, обернув их в фигурные скобки. Например:
const name = 'Иван Иванов';
const element = <h1>Привет, {name}</h1>;
Преимущества использования JSX:
✅ Наглядность: Код с ним легче читать и писать, поскольку он напоминает HTML.
✅ Мощность: Сочетает в себе преимущества JavaScript, позволяя использовать всю его выразительную мощь при описании UI.
✅ Интеграция: Плотно интегрирован с React, облегчая создание интерактивных компонентов.
JSX — это расширение синтаксиса, которое делает разработку интерфейсов на React более интуитивной и выразительной за счёт смешивания HTML-подобного кода с JavaScript. Хотя использование JSX необязательно для работы с React, оно значительно упрощает процесс разработки и повышает читабельность кода.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых