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

Курсы

Программирование
iOS Developer. Basic
-23%
Python Developer. Professional
-13%
Golang Developer. Professional
-17%
Python Developer. Basic
-16%
iOS Developer. Professional
-13%
C# ASP.NET Core разработчик
-18%
Unity Game Developer. Professional
-11%
React.js Developer
-12%
Android Developer. Professional
-7%
Software Architect
-12%
C++ Developer. Professional
-8%
Разработчик C#
-8%
Backend-разработчик на PHP
-8%
Архитектура и шаблоны проектирования
-12%
Программист С Разработчик на Spring Framework MS SQL Server Developer AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Vue.js разработчик VOIP инженер Нереляционные базы данных Супер - интенсив по паттернам проектирования Супер-практикум по использованию и настройке GIT IoT-разработчик Advanced Fullstack JavaScript developer Супер-интенсив Azure
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-17%
DevOps практики и инструменты
-18%
Архитектор сетей
-21%
Инфраструктурная платформа на основе Kubernetes
-22%
Супер-интенсив «IaC Ansible»
-16%
Супер-интенсив по управлению миграциями (DBVC)
-16%
Administrator Linux. Professional
-5%
Administrator Linux.Basic
-10%
Супер-интенсив «ELK»
-10%
Базы данных Сетевой инженер AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Внедрение и работа в DevSecOps Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив «СУБД в высоконагруженных системах»
Специализации Курсы в разработке Подготовительные курсы
+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 комментариев
Для комментирования необходимо авторизоваться