Этот блог будет посвящен теме синтаксиса в React, а именно JSX, Hyperscript. Затем я буду развивать эти два метода, вводя помощники Hyperscript.

JSX (Javascript XML)

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

Несмотря на его потенциальные преимущества, есть смешанные чувства по поводу JSX, поскольку он, по сути, объединяет вместе HTML и Javascript. Поскольку я здесь не для того, чтобы убеждать кого-либо использовать JSX или нет, я просто расскажу, чем отличается код в React при использовании JSX, а когда нет.

При использовании JSX в React код конвертируется в Javascript с помощью компиляторов, таких как Babel.

Давайте посмотрим, как выглядит код, когда JSX используется для React:

Этот код отобразит «Это лето действительно жаркое!» Довольно прямолинейно, тем более что все внутри return очень похоже на HTML.

Вот метод, отличный от JSX, с теми же результатами:

Давайте немного разберемся в этом.

React.createElement принимает 3 аргумента: (тип, свойства, дочерние элементы)

Он создаст тип HTML-тега (div), примет любые реквизиты для элемента element, а затем любые дочерние элементы, связанные с элементом (this.props.weather).

Вы можете спросить, почему у нас просто нет '{weather:' hot! '}' В качестве второго параметра в createElement внутри render / return и мы не решаемся написать $ {this.props.weather} как параметр children.

Вообще говоря, вы не хотите передавать реквизиты непосредственно самому типу элемента (div). Вместо этого реквизиты должны перейти к компоненту / классу, где вы можете более явно контролировать, какие реквизиты и где используются.

Вот почему внизу фрагмента вы видите ReactDOM.render, который заботится о передаче реквизитов в класс Weather, а не в div.

Гиперскрипт

Для тех из вас, кто ненавидит использование JSX из-за его HTML-природы, давайте рассмотрим альтернативу JSX: Hyperscript.

Вот пример использования:

Вы заметите, что способ создания HTML-тегов, таких как div или h1, уже сильно отличается.

В приведенном выше примере у вас, по сути, будет родительский элемент div с h1 и h2, заключенными внутри как дочерние элементы.

Также обратите внимание, что вы можете назначить ID или Class тегам HTML с помощью # или. соответственно, следуя соглашениям CSS.

Что касается буквы "h", которая используется для создания элементов, вот параметры:

h(componentOrTag, properties, children)

  • componentOrTag - может быть строкой тега ИЛИ компонента React с необязательными именами / идентификаторами классов css.
  • properties - объект, содержащий свойства, которые вы хотите установить для элемента.
  • children - массив из h() дочерних элементов или строка. Это создаст дочерние элементы или текстовый узел соответственно.

Таким образом, Hyperscript предлагает более похожий на Javascript подход к запуску React без необходимости иметь дело с компонентами HTML.

Гиперскрипт-помощники

Помощники гиперсриптов - это расширения npm, которые помогают сократить часть синтаксиса кода в React.

Вспомогательные средства Hyperscript могут использоваться для Hyperscript и JSX.

Взглянем:

Используя Hyperscript-helpers, вы можете определить, какие из элементов / тегов вы хотите использовать, и установить их при необходимости («hyperscript-helpers»). Как вы можете видеть в этом примере, поскольку мы используем теги ‹ul› и ‹li›, они нужны нам вверху.

Сделав это, теперь вы можете использовать помощники гиперкриптов, как показано в нижней части кода, просто используя ul (arguments) или li (arguments) вместо того, чтобы писать их отдельно. внутри как параметры.

Если вы хотите попробовать, все, что вам нужно сделать, это:

npm install hyperscript-helpers

Затем потребуйте необходимые ресурсы в верхней части кода, и все готово.

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