Frontend

Курс по React 2025: JSX #2

toni_wheel toni_wheel
Иконка чата 0
Иконка глаза 988

Если 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.

Рекомендуемые статьи