JSX не ўсё тое ж HTML уяўным кодзе — цэлкам іншы етап компіляцыі.

Запытанне 1

Праця з новым праектам на React і чытанне файла App.jsx частаўна прыводзіць да аднаго і тога ж здзіўлення: файл напісаны на JavaScript, але ў яму ёсць маркап, які выглядае абдзэльна так сама, як і HTML. Першы погляд на компонент, які вяртае <h1>, падкрэпляе запытанне, чы не навучыўся рантайм мовы якім-то чынам парсаваць тэгі.

Перш чым чытаць далей, выявіце, чы звычны JavaScript разумее гэта:

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

• A) Так
• B) Не

Правільны выбар — B) Не. Стандартны двыжок JavaScript не мае граматыкі для <h1>. Якшо падставіць тую ж лінію ў файл .js без практыкі трансформацыі, парсер адзвярнёцца пра сінтаксічную памылку.

React ніколі не выкарыстоўвае JSX у браузеры. На этапе будовы маркап спачатку перапісываецца у звычныя вызовы функцый. Канцэптуальна гэты працэс выглядае так:

You write JSX
      │
      ▼
Compiler (Babel / Vite)
      │
      ▼
JavaScript
      │
      ▼
Browser

У браузер падае толькі JavaScript. Тэгі, якія вы запісалі, ніколі не праказваюцца ў адпаведзі на запыт сеткі у фармаце JSX.

Уявіце сабе гэта як Google Translate

Уявіце, што вы пішалі ліст на французкай мове для друга, які чытае толькі англійскую. Друг не зачынае раптам розумець французскую; між німі ёсць перакладчык. JSX працюе так сама. Вы ствараеце сінтаксіс, сэродзелны HTML, компілятор (Babel, SWC або прыемкі ў Vite) ператварае яго на JavaScript, і толькі пасля чаго браузер яго выкананае.

Тады што ж такое JSX?

Пачатківцы частае прытлумляюць JSX як «HTML усерэдыні JavaScript». Гэты спрошчэння некалькана. JSX падобаецца HTML, але гэта не HTML. Болей точна вяскладчынка: JSX — гэта пашырэнне сінтаксісу JavaScript, якое дазволяе опісваць інтэрфейс корыстніка за дапамою структуры, падобной HTML. Важлівым словам ёсць падобная HTML — а не сам HTML. Назвы атрыбутаў разныя (className заместо class), а выражэнняя, якія іх абрамляюць, знаходзяцца ў сістэме значэння JavaScript, а не ў окрэмай маркап-мове.

Чаму быў створаны JSX?

Без JSX той самы загалоўк:

<h1>Hello React</h1>

быў бы выражаны за дапамою вялікага колькасці внутраскладчатых вызоваў:

React.createElement(
  "h1",
  null,
  "Hello React"
);

Полная стораніца, напісаная такім спосабам, стае важкай для чытання. JSX існуе таму, каб структура інтэрфейса корыстніка заставалася чытабельной, пакуль кампілятор у тле выканаў вызывы React.createElement (או адпаведныя).

Запытанне 2

Што гэта прадае?

const name = "Ananya";

function App() {
  return (
    <h1>Hello {name}</h1>
  );
}

• A) Прывіт {name}
• B) Прывіт, Ананя
• C) Памылка сінтаксісу

Адказ — B) Прывіт, Ананя. Закругленыя скобкі паведамляюць JSX зупініцца ў рэжыме маркапаў і вырахаваць выраз на JavaScript. Значэнне name вставляецца ў загалоўку, таму інтэрфейс паказвае строку, а не сінтаксіскія скобкі.

Закругленыя скобкі маюць адну функцыю

Калі JSX бачыць {…}, ён выраховвае выраз унутры і вставляе рэзультат. Гэта ўсё, што ён робіць: запускае JavaScript і вставляе значэнне. Не існуе другога рэжыму для запаведзянняў чы аблакаў з пабочнымі эфектамі.

Запытанне 3

Калкі зместу скобак ёсць дазволеным у JSX?

• A) Адрэса зменнай, напрыклад {name}
• B) Арытметычны выраз, напрыклад {10 + 20}

C) блак-стайл if, напісаны ўнутрь складакоў

D) тэрнары, якія выбіраюць межы "Adult" і "Minor" на адной з базаў age

A, B і D работаюць. C — ні. JSX прымеўа толькі выразы, якія даюць значэнне. Простае if ўжо ёсць запаведзь, і яна не дае нічога для размешчэння ў дрэве; тэрнары ж вяртаюць значэнне, таму перакананне па возрасту ў пункцыі D ўсё гаразд, а C адхіляецца.

Заключныя меркі

JSX можа здавацца чымсь чародзейскім ў першы ж дзень: здаецца, што HTML і JavaScript зліліся ў адню мову. Іе прыемы простэйшыя. JSX — гэта сваершаная форма зручнасці для напісання коду. Перш чым прыкладка запускаецца ў браузеры, кампілятор перапісвае яго ў звычны JavaScript. Калі гэты працэс стане ясным, сінтаксіс маркапаў у JS больш не будзе заплутаным і стане чытабельным способам апісаціі структуры інтэрфейсу.