JSX: разширение на JavaScript и примери за използване

Какво е JSX?

JSX (JavaScript XML) — разширение на синтаксиса за JavaScript, представено за първи път в React през 2013 г. Позволява на разработчиците да описват структурата на потребителския интерфейс в декларативен стил, комбинирайки маркиране и логика в един файл.

Преди появата на JSX, разработчиците използваха текстови шаблони (Mustache, Handlebars) или създаваха ръчно DOM елементи чрез document.createElement. И двата подхода имаха недостатъци: текстовите шаблони не бяха проверявани по типове, а ръчното създаване на DOM беше тромаво и податливо на грешки.

React избра различен път — вграждане на маркирането директно в кода. Това решение предизвика дебати в общността, но с времето се превърна в стандарт. Днес JSX се използва не само в React, но и в SolidJS, Preact, Qwik и дори във Vue чрез добавки.

Основен синтаксис на JSX

JSX елемент изглежда като HTML таг, но се вгражда директно в JavaScript. Всеки елемент се транспилира до извикване на React.createElement с три аргумента: тип на елемента, обект с props и дъщерни елементи. Един коренен елемент — задължително правило: JSX израз трябва да връща един родителски елемент или фрагмент.

import React from 'react';

// Основен JSX - един коренен елемент
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Фрагменти за групиране

Когато не е необходим допълнителен DOM възел, използвайте React.Fragment или краткия синтаксис <></>. Фрагментите не създават реален DOM елемент, а само групират дъщерни възли. Това е особено полезно в таблици и списъци, където допълнителна обвивка би нарушила HTML структурата.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Изрази и променливи в JSX

Всеки JavaScript израз се вгражда в JSX чрез фигурни скоби { }. Вътре могат да се използват променливи, извиквания на функции, тернарни оператори и методи на масиви. Условно рендериране се извършва чрез тернарния оператор или логическо И.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Ключовото ограничение — вътре във фигурните скоби могат да се използват само изрази, не инструкции. Не могат да се използват if/else, for, switch — само тернарен оператор, логически оператори и методи на масиви. Извикванията на функции, включително стрелкови функции, са разрешени.

Разлики между JSX и HTML

JSX визуално прилича на HTML, но има основни разлики. Атрибутите се пишат в camelCase — className вместо class, onClick вместо onclick, tabIndex вместо tabindex. Това е защото JSX се транспилира в JavaScript, където тирето в името на свойство не е позволено.

Друга важна разлика — самозатварящи се тагове. В HTML някои тагове (br, hr, input) могат да останат незатворени. В JSX всички самозатварящи се тагове трябва да имат затваряща наклонена черта: <br />, <input />. Имената на SVG атрибути също се конвертират в camelCase: strokeWidth, fillOpacity.

Как JSX се транспилира в JavaScript

Браузърите не разбират JSX директно. Преди изпълнение, JSX кодът преминава през транспилатор — Babel, TypeScript или esbuild. Всеки JSX елемент се превръща в извикване на createElement или jsx/runtime.

Трансформация чрез Babel

// Оригинален JSX
const element = <h1 className="title">Hello</h1>;

// След транспилация
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

От React 17 се появи нова JSX трансформация, която не изисква импорт на React. Автоматичен импорт на jsx-runtime позволява писане на компоненти без import React from 'react'. Babel и TypeScript поддържат тази трансформация чрез настройка {"runtime": "automatic"}.

JSX извън React: Solid, Preact, Vue

Въпреки че JSX се асоциира с React, други рамки също го използват. SolidJS използва JSX с компилация до реални DOM възли, без Virtual DOM. Preact — лека алтернатива на React с пълна поддръжка на JSX. Vue поддържа JSX чрез @vue/babel-plugin-jsx, въпреки че основният му шаблон е template.

Ключовата разлика — семантика на изразите. В React JSX изразите се изпълняват при всяко рендериране. В SolidJS JSX се компилира веднъж и актуализациите се проследяват чрез сигнали. Това влияе на производителността: SolidJS не изисква Virtual DOM и реконсилиация, така че JSX рендерирането е по-бързо.

В TypeScript JSX се поддържа на ниво език. Файловете с разширение .tsx автоматично обработват JSX синтаксис. Типизиране на props — едно от основните предимства на TypeScript + JSX: IDE подсказва очакваните атрибути, типовете на callback и задължителността на props.

Най-добри практики за работа с JSX

Пишете JSX код, който е лесен за четене и поддръжка. Изваждайте сложни изрази в отделни променливи или функции — това подобрява четимостта и позволява тестване на логиката отделно от маркирането. Използвайте фрагменти вместо ненужни div обвивки.

Правило за отстъп — спазвайте отстъпи за вложени елементи. Всяко ниво на влагане — едно ниво на отстъп. Затварящият таг трябва да е на нивото на отварящия. За дълги атрибути използвайте прекъсване на ред.

Избягвайте inline стрелкови функции в props, ако се създават при всяко рендериране. В такива случаи обвийте callback в useCallback или изнесете функцията извън компонента. Разделяйте сложни компоненти на по-малки — всеки компонент трябва да отговаря за една логическа единица от интерфейса.