JSX и синтаксис компонентов — основы разметки в React и JSX

Что такое JSX?

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

Пример нагляднее тысячи слов:

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

Что здесь происходит? Мы отдельно создаем переменную element, которая выглядит как HTML-разметка, но на самом деле это JavaScript. Под капотом React превращает этот код в вызовы JavaScript-функций, которые описывают, как должны выглядеть элементы интерфейса.

Почему JSX лучше обычного JavaScript

Могли бы мы обойтись без JSX? Теоретически — да. На практике же использование JSX делает код читабельным и декларативным. Представьте альтернативный вариант:

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

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

Основы JSX — как он работает

Встраивание JavaScript в JSX

JSX позволяет вставлять JavaScript-прям в разметку, оборачивая выражения в фигурные скобки {}. Например:

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

Это позволяет динамически управлять контентом компонентов, оставаясь при этом в рамках декларативного подхода.

Пример:

function Welcome(props: { name: string }) {
  return <h1>Привет, {props.name}!</h1>;
}

const element = <Welcome name="Мария" />;

Вложенность JSX

JSX поддерживает вложенность: вы можете комбинировать элементы так же, как в HTML.

const element = (
  <div>
    <h1>Привет, мир!</h1>
    <p>Добро пожаловать в React с JSX.</p>
  </div>
);

Это удобно для построения сложных интерфейсов.

Синтаксис JSX — правила игры

1. Атрибуты в JSX

JSX-подобный HTML, но есть нюансы. Например, вместо class мы используем className, так как class зарезервировано в JavaScript.

const element = <div className="my-class">Содержимое</div>;

Список популярных "замен":

Также можно передавать значения как строки:

const image = <img src="logo.png" alt="Логотип" />;

Или как JS-выражения:

const isDisabled = true;
const button = <button disabled={isDisabled}>Кнопка</button>;

2. Дочерние элементы

Дочерний элемент можно указывать внутри тега:

const element = <button>Нажми на меня</button>;

Или передать как параметр другим компонентам:

function Button(props: { children: React.ReactNode }) {
  return <button>{props.children}</button>;
}

const app = (
  <Button>
    <span>Клик!</span>
  </Button>
);

3. Составные теги

JSX поддерживает компоненты, созданные отдельно:

function Header() {
  return <h1>Заголовок</h1>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Добро пожаловать!</p>
    </div>
  );
}

JSX как дерево компонентов

Посмотрите на это "дерево JSX":

const app = (
  <div>
    <header>
      <h1>Пример страницы</h1>
    </header>
    <main>
      <p>Содержимое страницы</p>
    </main>
  </div>
);

React под капотом превращает этот код в виртуальное дерево (виртуальный DOM), облегчая операции с рендерингом.

Частые проблемы с JSX

Закрытие тегов
В JSX всегда нужно закрывать теги. Забудете — будет ошибка. Даже одиночные элементы, такие как <input />, нужно закрывать.

❌ Плохой код:

const element = <input>;

✅ Хороший код:

const element = <input />;

Один корневой элемент
JSX должен возвращать один корневой элемент. Если хотите вернуть несколько элементов, оберните их в <div> или <React.Fragment>.

❌ Плохой код:

return <h1>Привет</h1><p>Мир</p>;

✅ Хороший код:

return (
  <>
    <h1>Привет</h1>
    <p>Мир</p>
  </>
);

Выражения, но не инструкции

В JSX нельзя использовать инструкции if, for, и т.д., только выражения.

❌ Плохой код:

const element = if (true) { <h1>Привет!</h1> }; // Ошибка

✅ Хороший код:

const isVisible = true;
const element = isVisible ? <h1>Привет!</h1> : <h1>Пока!</h1>;

React и JavaScript — грани гибкости

JSX позволяет вам строить UI так, как вы хотите:

• Динамически менять отображение.
• Использовать JavaScript-преимущества (циклы, функции, переменные).

Например, отобразим список пользователей:

const users = ["Джон", "Мария", "Петр"];

const userList = (
  <ul>
    {users.map((user) => (
      <li key={user}>{user}</li>
    ))}
  </ul>
);

Ключи нужны для уникальной идентификации элементов.

Практическое задание

1. Создайте базовый компонент, который отображает вашу любимую цитату.
2. Напишите список ваших увлечений, используя JSX. Каждое увлечение должно быть <li> элементом внутри списка <ul>.

Пример решения:

function Quote() {
  return <p>"Что посеешь — то и пожнешь."</p>;
}

const hobbies = ["Программирование", "Чтение", "Путешествия"];

const HobbyList = () => (
  <ul>
    {hobbies.map((hobby, index) => (
      <li key={index}>{hobby}</li>
    ))}
  </ul>
);

Теперь можно приступать к созданию красивого и функционального интерфейса на React!