Если React — это двигатель, который приводит веб-приложение в движение, то JSX — это топливо, которое питает этот двигатель. JSX (JavaScript XML) – уникальный язык разметки, который на первый взгляд может показаться странным. Однако, как только вы поймете его суть, вы влюбитесь в его лаконичность и удобство.

Давайте разберемся, что такое JSX, почему он так важен, и как с ним работать.

Что такое JSX и зачем он нужен?

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

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

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

Почему именно JSX?

• Читаемость и структурированность: Вместо того чтобы смешивать JavaScript и HTML разными способами, JSX позволяет писать компоненты так, что они выглядят как привычная HTML-разметка.
• Сила JavaScript: Вы можете вставлять переменные, функции, выражения прямо в разметку, делая её динамичной.
• Ближе к реальности: Если вы знаете HTML, то освоить JSX проще простого.
• Преимущества JSX над обычным JavaScript: Почему бы просто не использовать document.createElement или обычный HTML? Всё дело в удобстве и эффективности.

Синтаксис ближе к HTML

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

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

Без JSX это выглядело бы так:

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

Какой вариант проще читать и писать? Очевидно, первый.

Интеграция JavaScript

JSX позволяет интегрировать JavaScript прямо в разметку. Это делает код гибким и динамичным:

const name = 'Иван';
const element = <h1>Привет, {name}!</h1>;

Выражение {name} автоматически подставит значение переменной в разметку.

Мощные возможности

С JSX вы можете:

• Использовать JavaScript-выражения внутри разметки.
• Условно отображать элементы.
• Генерировать списки.

Как использовать JavaScript в JSX

Теперь давайте разберёмся, как использовать JavaScript в JSX. Это одна из ключевых причин, почему разработчики выбирают React.

Вставка переменных

Вы можете вставлять переменные прямо в JSX с помощью фигурных скобок {}:

const userName = 'Алексей';
const element = <p>Добро пожаловать, {userName}!</p>;

Вычисления и выражения

JSX поддерживает любые JavaScript-выражения внутри {}:

const number = 42;
const element = <p>Результат: {number * 2}</p>;

Условный рендеринг

Используйте тернарный оператор для отображения элементов в зависимости от условий:

const isLoggedIn = true;
const element = <p>{isLoggedIn ? 'Вы вошли в систему' : 'Вход не выполнен'}</p>;

Вызов функций

Вы можете вызывать функции прямо в JSX:

function getGreeting(name) {
  return `Привет, ${name}!`;
}

const element = <h1>{getGreeting('Ирина')}</h1>;

Работа с массивами

Вы можете создавать списки, используя метод .map():

const items = ['Яблоко', 'Апельсин', 'Банан'];
const list = <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;

Практика: вывод имени пользователя

Хватит теории, давайте напишем практический пример, который показывает, как использовать JSX для вывода имени пользователя.

Реализация

Создайте новый React-проект (если его ещё нет). Например, с помощью Vite:

npm create vite@latest jsx-example
cd jsx-example
npm install
npm run dev

Откройте файл src/App.jsx и измените его содержимое:

function App() {
  const userName = 'Анна'; // Имя пользователя

  return (
    <div>
      <h1>Привет, {userName}!</h1>
      <p>Рады видеть вас в нашем приложении.</p>
    </div>
  );
}

export default App;

Сохраните изменения. В браузере вы увидите сообщение: "Привет, Анна!"

Разбираем код

Мы создаём переменную с именем пользователя.

const userName = 'Анна';

Вставляем переменную userName в JSX с помощью {}.

<h1>Привет, {userName}!</h1>

Обычный HTML-тег. JSX позволяет смешивать JavaScript и стандартную HTML-разметку.

<p>

Итоги

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

Мы также создали простой компонент, который выводит имя пользователя, демонстрируя возможности JSX. Это лишь начало, но уже сейчас вы видите, насколько удобным может быть React.