Альтернативы JSX

В настоящее время JSX - очень популярный выбор для создания шаблонов в различных фреймворках, а не только в React. Однако что, если вам это не нравится, или у вас есть проект, в котором вы не хотите * его использовать, или вам просто интересно, как вы можете написать свой код React без него? Самый простой ответ - Да, есть разные альтернативы JSX. Давайте рассмотрим их один за другим в этой статье.

* Отказ от ответственности: Лично мне нравится JSX, и я использую его во всех своих проектах с React. Однако я немного изучил эту тему и хотел бы поделиться своими выводами.

JSX - Что и как?

Прежде чем перейти к альтернативам, давайте разберемся, что такое JSX и как он работает?

С появлением React термин JSX стал довольно популярным. JSX означает JavaScript XML , используемый в React для простого написания HTML и JavaScript вместе.

Вы будете удивлены, узнав, что JSX НЕ является обязательным требованием для использования React. Согласно официальной документации React,

По сути, элемент JSX - это просто синтаксический сахар для вызова React.createElement(component, props, ...children).

В приведенном ниже примере мы возвращаем JSX из компонента MyDemo и отображаем его на экране с помощью метода ReactDOM.render.

class MyDemo extends React.Component {
  render() {
    return (
      <div className={"alpha"} onclick={some}>
        {"abc"}
        <div>xyz</div>
      </div>
    );
  }
}

Это простой код JSX в React. Но браузер не понимает этот JSX, потому что это недействительный код JavaScript.

Поэтому, чтобы преобразовать его в понятный браузеру код JavaScript, мы используем такой инструмент, как Babel, который представляет собой компилятор / транспилятор JavaScript.

Когда Babel выполняет указанный выше JSX, он преобразует его в следующий код:

class MyDemo extends React.Component {
  render() {
    return React.createElement("div", {
        className: "alpha",
        onclick: some
    }, "abc", React.createElement("div", null, "xyz"));
  }
}

Каждый JSX преобразуется в React.createElement вызов функции, понятный браузеру.

Знание того, как конвертировать JSX в React.createElement, очень важно для разработчика React (это также популярный вопрос на собеседовании).

Альтернативы JSX

Давайте рассмотрим альтернативы JSX с точки зрения повышения читабельности кода и избежания сложности компиляции в среде сборки:

1. Функция React.createElement

React.createElement имеет следующий синтаксис:

React.createElement(type, [props], [...children])

Давайте посмотрим на параметры функции createElement.

type может быть HTML-тегом, например h1, div, или компонентом React.
реквизиты - это атрибуты, которые должен иметь элемент.
дочерние элементы содержат другие теги HTML или могут быть компонентом

Вызов React.createElement также будет преобразован в представление объекта следующим образом:

Вы можете увидеть это представление объекта, если назначите JSX какой-либо локальной переменной и зарегистрируете его в консоли. Итак, все, что вы можете делать с JSX, также можно сделать с помощью простого JavaScript.

Совет: Если вы хотите увидеть код преобразования JSX в React.createElement, вы можете перейти к этому приложению, где вы можете написать свой код JSX слева и увидеть преобразованный код справа.

2. Переименование функции React.createElement.

Несмотря на то, что полученный код является совершенно правильным, и мы можем написать весь наш код React в этом стиле, у этого подхода есть несколько проблем.

Первая проблема в том, что он чрезвычайно многословен. Вроде действительно многословно, и главный нарушитель здесь React.createElement.

Итак, первое решение - просто сохранить его в переменной, обычно называемой h после гиперкрипта. Это уже сэкономит вам много текста и сделает его более читабельным. Чтобы проиллюстрировать это, давайте перепишем наш прошлый пример:

const h = React.createElement;
class MyDemo extends React.Component {
  render() {
    return h("div", {
        className: "alpha",
        onclick: some
    }, "abc", React.createElement("div", null, "xyz"));
  }
}

3. Гиперскрипт

Если вы немного поиграете с React.createElement или h, вы увидите, что у него есть несколько недостатков. Для начала этой функции требуется 3 аргумента, поэтому в случае отсутствия свойств вы должны указать null или className, вероятно, наиболее распространенное свойство, требующее каждый раз писать новый объект.

В качестве альтернативы можно использовать библиотеку react-hyperscript. Он не требует предоставления пустых реквизитов, а также позволяет указывать классы и идентификаторы в стиле, подобном emmet:

div#main.content -> <div id="main" class="content">

Итак, наш код станет немного лучше:

const h = require('react-hyperscript');
class MyDemo extends React.Component {
  render() {
    return h("div.alpha", { onclick: some }, [
      "abc",
      h("div", "xzy")
    ]);
  }
}

4. HTM

Если вы не против JSX как такового, но не хотите настраивать компиляцию в своей среде сборки - используйте htm - JSX-подобный синтаксис в простом JavaScript - транспилятор не требуется. Он нацелен на то, чтобы делать то же самое (и выглядеть так же), как JSX, но с использованием шаблонных литералов. Это определенно добавляет некоторые накладные расходы (вы должны анализировать эти шаблоны во время выполнения), но в вашем случае это может того стоить.

Он работает, обертывая функцию элемента, которая в нашем случае React.createElement, но это может быть любая другая библиотека с аналогичным API и возвращает функцию, которая анализирует наш шаблон и возвращает точно такой же код, как и babel, но только во время выполнения.

const html = htm.bind(React.createElement);
class MyDemo extends React.Component {
    render() {
        return html`
            <div className=${"alpha"} onclick=${some}>
                ${"something"}
                <div>something</div>
            </div>
        `
    }
}

Как видите, это почти то же самое, что и настоящий JSX, нам просто нужно вставить переменные немного по-другому; однако это в основном детали, и если вы хотите показать, как использовать React без какой-либо настройки инструментов, это может быть удобно.

5. Лиспоподобный синтаксис

Идея этого метода похожа на гиперкрипт, однако это элегантный подход, на который стоит обратить внимание. Существует много других подобных вспомогательных библиотек, поэтому выбор является чисто субъективным; это может послужить источником вдохновения для ваших собственных проектов.

Библиотека ijk дает возможность писать свои шаблоны, используя только массивы, используя позиции в качестве аргументов. Это крошечная рекурсивная фабричная функция, которая позволяет писать краткие декларативные представления виртуальных деревьев DOM. Он не пытается имитировать синтаксис HTML или JSON, а вместо этого представляет собой серию вложенных массивов для представления пользовательских интерфейсов.

Главное преимущество в том, что вам не нужно писать h постоянно (да, даже это может повторяться!). Вот пример того, как его использовать:

function render(structure) {
  return h('nodeName', 'attributes', 'children')(structure)
}
class MyDemo extends React.Component {
  render() {
    return render([
      'div', { className: 'alpha', onClick: some}, [
        'abc',
        ['div', 'xyz']
      ]]);
  }
}

Вышеупомянутый вызов h возвращает виртуальное дерево DOM с именованными атрибутами, которые соответствуют предоставленной схеме.

Проблемы с JSX

JSX позволяет нам легко писать элементы HTML на JavaScript и размещать их в DOM без каких-либо createElement() и / или appendChild() методов.
Чтобы добавить класс в JSX, нам нужно использовать className вместо class - это зарезервированное ключевое слово в JavaScript.
В React все имена атрибутов записываются в camelCase, например. className, onChange, htmlFor и т. Д.
Код HTML должен быть заключен в ОДИН элемент верхнего уровня.

const body = (
  <div>
    <h1>I am a Header</h1>
    <h1>I am a Footer</h1>
  </div>
);

JSX выдаст ошибку, если HTML неверен или если в HTML отсутствует родительский элемент.

Используйте React.Fragment, чтобы сгруппировать список дочерних элементов без добавления дополнительных узлов в DOM.

Чтобы написать HTML-код в несколько строк, поместите HTML-код в круглые скобки:

const body = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Чтобы добавить выражения в JSX, заключите выражения в фигурные скобки { }:

const header = <h1>React is {5 + 5} times better with JSX</h1>;

Выражение может быть переменной React, свойством или любым другим допустимым выражением JavaScript. JSX выполнит выражение и вернет результат.

Такие значения, как undefined, null и логическое, не отображаются в пользовательском интерфейсе при использовании внутри JSX.

Чтобы добавить комментарий к вашему JSX, заключите его в символы комментариев /* и */ следующим образом:

{/* <p>This is some text</p> */}

Вместо того, чтобы вводить комментарий вручную, вы можете использовать сочетания клавиш Cmd + / (Mac) или Ctrl + /, чтобы добавить или удалить комментарий.

JSX следует правилам XML, поэтому элементы HTML должны быть должным образом закрыты.

const inputForm = <input type="text" />;
const headerSection = <div>React is AWESOME</div>;

Заключение

Итак, все, что вы можете делать с JSX, также можно сделать с помощью простого JavaScript. Использование React без JSX особенно удобно, если вы не хотите настраивать компиляцию в среде сборки.

В этой статье не говорится, что вы не должны использовать JSX, или о том, что это плохая идея. Цель этой статьи состояла в том, чтобы просто ответить - как вы можете написать свой код без JSX и как ваш код может выглядеть - любопытство - мать обучения 😎

Использованная литература:

Введение в JSX, JSX в деталях, Реагировать без JSX, Альтернативы JSX, Реагировать как библиотеки JSX

Благодарим за прочтение и не забывайте делиться, комментировать и давать как можно больше 👏 😎

Альтернативы JSX

JSX - Что и как?

Альтернативы JSX

1. Функция React.createElement

2. Переименование функции React.createElement.

3. Гиперскрипт

4. HTM

5. Лиспоподобный синтаксис

Проблемы с JSX

Заключение

Использованная литература:

Вопросы по теме