Несколько слов о JSX (React) | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Backend-разработчик на PHP Алгоритмы и структуры данных Team Lead Архитектура и шаблоны проектирования Разработчик IoT C# Developer. Professional HTML/CSS
-11%
C# ASP.NET Core разработчик
-5%
Kotlin Backend Developer
-8%
iOS Developer. Professional
-8%
Symfony Framework Unity Game Developer. Basic JavaScript Developer. Professional Android Developer. Basic JavaScript Developer. Basic Java Developer. Professional Highload Architect Reverse-Engineering. Professional Java Developer. Basic Web-разработчик на Python Framework Laravel Cloud Solution Architecture Vue.js разработчик Интенсив «Оптимизация в Java» Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив "Tarantool" PHP Developer. Basic
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK Administrator Linux. Professional Дизайн сетей ЦОД Разработчик IoT PostgreSQL Экспресс-курс "Версионирование и командная работа с помощью Git"
-30%
Microservice Architecture Highload Architect MS SQL Server Developer Разработчик программных роботов (RPA) на базе UiPath и PIX Разработчик голосовых ассистентов и чат-ботов Administrator Linux. Advanced Infrastructure as a code Супер-практикум по использованию и настройке GIT Administrator Linux.Basic Экспресс-курс «IaC Ansible» Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes» Основы Windows Server
Корпоративные курсы
Безопасность веб-приложений IT-Recruiter Дизайн сетей ЦОД Компьютерное зрение Разработчик IoT Вебинар CERTIPORT Machine Learning. Professional
-6%
NoSQL Пентест. Практика тестирования на проникновение Java QA Engineer. Базовый курс Руководитель поддержки пользователей в IT
-8%
SRE практики и инструменты Cloud Solution Architecture Внедрение и работа в DevSecOps Супер-практикум по работе с протоколом BGP Infrastructure as a code Супер-практикум по использованию и настройке GIT Промышленный ML на больших данных Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes» BPMN: Моделирование бизнес-процессов Основы Windows Server
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

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

Webdev_Deep_28.07_site.png

В основе 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, дальше ещё интереснее.

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

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться