Несколько слов о JSX (React)

В основе React лежит JSX — специальный язык/диалект/технология/разметка (ненужное зачеркнуть). Несмотря на то, что React можно использовать и без JSX, а JSX транслировать не в React-компоненты, всё равно, обычно когда говорят React подразумевают JSX.

Итак JSX – это специальный язык, расширение JavaScript, условно можно его называть XHTML внутри JS. Да-да, раньше все писали JavaScript внутри HTML, а теперь наоборот. Располагается JSX в файлах с расширением .jsx и выглядит вот так:

const text = 'a bit of text';
const page = (
  <div className="page">
    <h1 className="greeting">Hello, world!</h1>
    {text && <p>{text}</p>}
    <button onClick={() => alert('!')}>Click me</button>
    <Footer/>
  </div>
);

Это не обычный JavaScript

Как несложно заметить – просто так этот код исполняться браузером не будет. Для преобразования JSX в JavaScript код требуются специальные утилиты – транспайлеры. В NodeJS-окружении традиционным является babel, а точнее babel-react-preset – целый набор плагинов, включая преобразующие JSX в React классы.

В результате транспайлинга получится анaлогичный следующему JavaScript код:

const text = 'a bit of text';
const page = React.createElement(
    'div',
    { className: 'page' },
    React.createElement(
        'h1',
        { className: 'greeting' },
        'Hello, world!'
    ),
    text && React.createElement(
        'p', null, text
    ),
    React.createElement(
        'button',
        { onClick: () => alert('!'); },
        'Click me'
    )
    React.createElement(
        Footer, null, null
    )
);

Имея перед глазами исходный код на JSX и результат транспайлинга, проанализируем

Любой тег имеет закрывающийся или является самозакрывающимся. В JSX нельзя написать тег < br >, только вот так: < br/ > (без пробелов, конечно).

Все теги превратились в корректные JS-выражения – создание React-элементов. Атрибуты (className, onClick) теперь передаются в объекте в аргументе вызова функций (второй параметр).

Дочерние элементы тоже передаются в аргументах при создании родительских элементов.

Вместо «class="page"» теперь пишется «className="page"», т.к. class - зарезервированное слово в современном JS.

Текст внутри тегов пишется, как и в HTML, но если мы вдруг захотим написать какое-либо JS-выражение, будь это вызов функции или просто переменная, то нам необходимо интерполировать JavaScript обратно в JSX, и делается это вот так: < p >{text}< /p > (без пробелов).

Несложно увидеть, что код JavaScript можно вставлять и в атрибуты тегов: < button onClick={() => alert('!')} > (без пробелов).

И т.к. теги в результате станут корректными JavaScript-выражениями, то можно использовать всю мощь JS.

Например, {text && < p >{text}< /p >} (без пробелов) в точности означает, что если переменная text не будет falsy, то тогда в разметке будет участвовать тег < p > (без пробелов) со всем его содержимым.

Ну и «вишенка»: обратите внимание на тег < Footer/ > (без пробелов). Да, это нестандартный тег, это наш собственный компонент, который определён выше. И он, в свою очередь тоже содержит свою собственную разметку. И в этом вся мощь JSX!

Имея в приложении определённый набор таких компонент, можно будет собирать страницы подобно конструктору! И это только основы JSX, дальше ещё интереснее.

Есть вопрос? Напишите в комментариях!