JSX для начинающих (и чем он отличается от HTML)

Что такое JSX

JSX или JavaScript XML — это расширение JavaScript, используемое для написания компонентов React.

Например, нижеприведенный фрагмент кода иллюстрирует, как обычно выглядит JSX

const greet = <h1>Hello World</h1>;

Таким образом, JSX позволяет нам писать Javascript и HTML вместе. Однако, в отличие от HTML и Javascript, JSX не может быть интерпретирован браузерами, поэтому для его преобразования в Javascript необходим компилятор (Babel или Webpack).

Зачем использовать JSX

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

Тогда зачем его использовать? Зачем смешивать логику и разметку? JSX — это синтаксический сахар. Он предназначен для облегчения чтения и выражения информации.

Например: Рассмотрим выражение JSX

<p color="red" shadowSize={2}>I'm a random sentence</p>

Babel компилирует его следующим образом

React.createElement(
  "p",
  {color: 'red', shadowSize: 2},
  "I'm a random sentence"
)

Более поздний сниппет, очевидно, менее красив 😀.

Чем JSX отличается от HTML

1. Самозакрывающиеся теги

В HTML разрешено писать самозакрывающиеся теги, не закрывая их, например, <hr /> может быть <hr>. В JSX это недопустимо. Все теги должны быть закрыты.

Также все теги могут быть самозакрывающимися, например, <div />.

2. Добавление выражений JavaScript

JavaScript можно добавлять непосредственно в разметку JSX с помощью фигурных скобок {…}.

{/* Output: Everybody knows 1 + 1 = 2 */}
<p> Everybody knows 1 + 1 = {1+1}<p>

Таким образом, нет необходимости в теге <script>, который используется в HTML.

3. Атрибуты HTML меняют соглашения об именовании

Помните, что JSX пишет HTML на JavaScript, поэтому некоторые атрибуты HTML, такие как class и for, которые являются ключевыми словами в JavaScript, должны измениться на className и hmtlFor соответственно. Обратите внимание на использование camelCasing в соглашении об именовании.

Все атрибуты JSX следуют соглашению об именовании camelCase. Таким образом, background-color становится backgroundColor.

4. Встроенный CSS — это объект

В HTML вы можете напрямую добавлять свои инлайн-стили CSS в открывающий тег. Однако в JSX это не так. Здесь вы передаете объект.
Например, рассмотрим этот фрагмент HTML

<p style="color:red;font-size:14px">Hello there!</p>

В JSX это можно записать как

cont Greet = function() {
  const myStyles = {
    color:"red";
    fontSize:"14px";
    }
  return <p style={myStyles}>Hello there!</p>;
}

ИЛИ

return <p style={{color:"red", fontSize:"14px"}}>Hello there!</p>;
}

В настоящее время я изучаю React. При переходе от написания HTML к JSX я обнаружил некоторые ключевые понятия и различия, о которых должен знать каждый. Это я просто документирую свои заметки. Надеюсь, вам будет полезно 😊

Кредит на изображение заголовка: patterns.dev