Frontend | Вопросы собесов

Что такое JSX ?

Спросят с вероятностью 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. Ставь 👍 если нравится контент.



🔐 База собесов | 🔐 База тестовых