Урок 03

JSX и разметка

JSX — синтаксис, который позволяет писать HTML-подобную разметку прямо в JavaScript. Это не HTML и не строка — это выражение, которое компилируется в вызовы React.createElement.

Простое выражение

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

Вставка выражений

Внутри фигурных скобок можно использовать любое JS-выражение:

const name = 'Алиса';
const element = <h1>Привет, {name}</h1>;

Арифметика:

<p>Сумма: {2 + 2}</p>

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

<p>{formatDate(new Date())}</p>

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

<p>{isLoggedIn ? 'Вы вошли' : 'Гость'}</p>

Атрибуты

Атрибуты в JSX пишутся в camelCase:

  • class → className
  • for → htmlFor
  • tabindex → tabIndex
  • onclick → onClick
<label htmlFor="email">Email</label>
<input id="email" className="input" type="email" />

Значения-переменные:

const id = 'user-1';
<div id={id} />

Самозакрывающиеся теги

Все теги без детей должны быть закрыты:

<img src="logo.png" alt="Logo" />
<br />
<input type="text" />

В HTML <br> допустим, в JSX — нет. <br /> — обязательно.

Один корневой элемент

Компонент должен возвращать один корневой элемент. Если нужно вернуть несколько — оберни в <div> или во фрагмент:

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

<>...</> — это фрагмент. Он не создаёт лишний DOM-узел.

Комментарии

Внутри JSX комментарии пишутся через {/* ... */}:

<div>
    {/* Это комментарий */}
    <p>Текст</p>
</div>

Условия

Через &&: если условие истинно — рендерится правая часть:

{isAdmin && <button>Удалить</button>}

Через тернарный оператор — если нужны оба варианта:

{isLoading ? <Spinner /> : <Content />}

Возврат null — ничего не рендерится:

function Warning({ show }) {
    if (!show) return null;
    return <p>Внимание</p>;
}

Списки

Для массивов используется map. Каждый элемент должен иметь уникальный key:

const items = ['A', 'B', 'C'];

<ul>
    {items.map((item) => (
        <li key={item}>{item}</li>
    ))}
</ul>

key помогает React отличать элементы при обновлении. Идеально — ID из БД.

Стили

Инлайн-стиль — это объект:

<div style={{ color: 'red', fontSize: 16 }}>

Свойства пишутся в camelCase: font-size → fontSize.

Внешний CSS:

import './App.css';

<div className="card">

Итоги

  • JSX — синтаксис для разметки в JS
  • Выражения — в {}
  • Атрибуты в camelCase
  • Один корневой элемент или фрагмент
  • Условия через && и тернарник
  • Списки через map с key