Разбираем синтаксис JSX на пальцах

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

Зачем это нужно?

1. React разделяет не технологии (HTML/CSS/JS), а компоненты — самодостаточные куски интерфейса.
2. В одном компоненте удобно хранить и разметку, и логику, и стили.
3. JSX превращает HTML-подобный код в вызовы React-функций.

Главная мысль: JSX — это не шаблонизатор, а синтаксический сахар над React.createElement().

Без JSX мы писали бы так:

React.createElement('h1', null, 'Привет, мир!')

С JSX мы пишем так:

<h1>Привет, мир!</h1>

Разница очевидна — JSX читается как обычный HTML.

Когда ты пишешь JSX сборщик Vite превращает его в обычный JavaScript:

Что ты пишешь:

const element = <h1 className="title">Hello!</h1>

Во что это превращается:

const element = React.createElement('h1', { className: 'title' }, 'Hello!')

Что возвращает React.createElement:

{
  type: 'h1',
  props: {
    className: 'title',
    children: 'Hello!'
  }
}

Это React-элемент — простой объект, который React использует для построения DOM-дерева.

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

React не может вернуть два соседних элемента без обёртки:

❌ Ошибка:

function App() {
  return (
    <h1>Заголовок</h1>
    <p>Текст</p>
  )
}

✅ Правильно (обёртка div):

function App() {
  return (
    <div>
      <h1>Заголовок</h1>
      <p>Текст</p>
    </div>
  )
}

✅ Ещё лучше (Fragment):

function App() {
  return (
    <>
      <h1>Заголовок</h1>
      <p>Текст</p>
    </>
  )
}

Fragment не создаёт лишних элементов в DOM — идеально для чистоты разметки.

Внутри {} можно писать любое JavaScript-выражение:

Переменные:

const name = 'Алексей';
return <h1>Привет, {name}!</h1>;

Арифметика:

return <p>{2 + 2}</p>; // 4

Условный оператор:

return <p>{age >= 18 ? 'Взрослый' : 'Ребёнок'}</p>;

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

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
return <p>{formatName(user)}</p>;

Важно: Нельзя вставлять инструкции (if, for, while) — только выражения.

Условный рендеринг в React — это механизм, который позволяет динамически отображать разные компоненты или элементы интерфейса в зависимости от значений переменных, состояния или пропсов, используя стандартные JavaScript-операторы, такие как if, else, тернарный оператор или логическое &&.

В JSX нельзя использовать if внутри разметки, поэтому используют:

Тернарный оператор:

return (
  <div>
    {isLoggedIn ? <h1>Добро пожаловать!</h1> : <button>Войти</button>}
  </div>
)

Логическое && (если условие истинно):

return (
  <div>
    {unreadMessages.length > 0 && <p>У вас {unreadMessages.length} новых сообщений</p>}
  </div>
)

Отдельная функция:

function renderContent() {
  if (isLoggedIn) return <h1>Добро пожаловать!</h1>
  return <button>Войти</button>
}
return <div>{renderContent()}</div>

В JSX стили пишутся через объект с camelCase-свойствами:

function App() {
  const styles = {
    color: 'blue',
    fontSize: '24px',
    backgroundColor: '#f0f0f0',
    padding: '20px'
  };

  return <div style={styles}>Привет, мир!</div>;
}

Или прямо в разметке:

return <div style={{ color: 'blue', fontSize: '24px' }}>Текст</div>;

Важно: font-size → fontSize, background-color → backgroundColor.

React автоматически экранирует всё, что вставляется через {}.

Безопасно:

const userInput = '<script>alert("Hack!")</script>';
return <div>{userInput}</div>;

React превратит это в строку, а не выполнит скрипт.

Если нужно вставить HTML (осторожно!):

return <div dangerouslySetInnerHTML={{ __html: userInput }} />;

Используй dangerouslySetInnerHTML только для доверенного контента.

Открой src/App.jsx из прошлого урока и сделай следующее:

1. Добавь переменную const name = 'Твое_имя' внутри компонента App
2. Выведи приветствие: <h1>Привет, {name}!</h1>
3. Добавь условный рендеринг: если name не пустой — показывать приветствие, иначе — кнопку «Войти»
4. Добавь стиль: заголовок синего цвета, размер 32px
5. Всё оберни во Fragment (<>...</>)
6. Проверка: После сохранения страница должна обновиться и показать твой результат.

В следующем уроке разберём Компоненты — функциональные и классовые. Ты научишься создавать свои собственные элементы, которые можно переиспользовать как конструктор. Это и есть сердце React.