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 са три аргумента: тип елемента, објекат пропсова и дечји елементи. Један коренски елемент — обавезно правило: 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 синтаксу. Типизација пропсова — једна од главних предности TypeScript + JSX: IDE сугерише очекиване атрибуте, типове колбекова и обавезност пропсова.

Најбоље праксе рада са JSX-ом

Пишите JSX код који је лако читати и одржавати. Издвајајте сложене изразе у посебне променљиве или функције — ово побољшава читљивост и омогућава тестирање логике одвојено од обележавања. Користите фрагменте уместо непотребних div омотача.

Правило увлачења — поштујте увлачења за угнежђене елементе. Сваки ниво угнежђења — један ниво увлачења. Затварајућа ознака треба да буде на нивоу отварајуће. За дугачке атрибуте користите прелом линије.

Избегавајте стреличасте функције у линији у пропсовима, ако се креирају при сваком рендеровању. У таквим случајевима, умотајте колбек у useCallback или изнесите функцију ван компоненте. Раздвајајте сложене компоненте на мање — свака компонента треба да буде одговорна за једну логичку јединицу интерфејса.