Czym jest JSX (JavaScript XML)

Czym jest JSX (JavaScript XML)

JSX to rozszerzenie składni JavaScript, które pozwala pisać struktury podobne do HTML bezpośrednio w kodzie JavaScript. Został stworzony przez zespół Facebooka (obecnie Meta) w 2013 roku jako część biblioteki React i od tego czasu stał się standardem w ekosystemie frontendowym.

Zamiast rozdzielać logikę i wygląd do osobnych plików (JavaScript + HTML), JSX łączy je w jednym miejscu. Kompilator (np. Babel) przekształca składnię JSX na zwykłe wywołania funkcji JavaScript.

Jesli więc użyjesz w kodzie składni JSX:

const element = <h1>Hello World!</h1>;

kompilator zamieni ją na zwykły javaScript:

const element = React.createElement('h1', null, 'Hello World!');

Przykłady kodu JSX

funkcja renderująca z warunkiem:

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Hello World!</p>
      ) : (
        <p>Log in please.</p>
      )}
    </div>
  );
}

lista z mapowaniem elementów:

const items = ["JSX", "React", "Hooks"];

function List() {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

Przycisk z akcją:

const element = (
  <button 
    onClick={() => console.log('clicked!)}
    style={{ backgroundColor: "blue", color: "white" }}
  >
    Click me
  </button>
);

Kluczowe różnice względem HTML

W JSX używa się className zamiast class (bo class to słowo kluczowe JS), htmlFor zamiast for, a wszystkie tagi muszą być zamknięte, również te samozamykające jak <img /> czy <br />.

Rozszerzenia plików: .js vs .jsx – kiedy używać którego ?

Tradycyjne podejście zakładało, że pliki zawierające czysty javaScript oznaczane są rozszerzeniem .js, a pliki zawirające składnię JSX zapisuje się z końcówką .jsx, jednak obecnie wiele projektów używa wyłącznie rozszerzenia .js, nawet jeśli kod zawira JSX. Nowoczesne bundlery jak Vite, Webpack czy esbuild bez problemu rozpoznają JSX w plikach .js.

Inaczej wygląda sytuacja w przypadku TypeScript – rozszerzenie .tsx jest obowiązkowe dla plików zawierających JSX. Kompilator TypeScript wyrzuci błąd, jeśli użyjesz JSX w pliku .ts. Rozszerzenie .ts zaś jest zarezerwowane dla plików zawierających tylko logikę, bez elementów UI.

Podsumowanie

JSX znacząco ułatwia tworzenie nowoczesnych interfejsów, łącząc logikę i strukturę w spójny, intuicyjny sposób. Dzięki swojej czytelności i dużej elastyczności stał się standardem w wielu bibliotekach frontendowych, nie tylko w React.