JSX: składnia i zasady

JSX, czyli JavaScript XML, to wydajne rozszerzenie JavaScript, które umożliwia tworzenie interfejsów użytkownika z użyciem składni podobnej do HTML, ale bezpośrednio w plikach JavaScript. Dzięki temu możemy korzystać ze wszystkich zalet HTML, jednocześnie czerpiąc z mocy JavaScript.

W React każdy tag HTML ma swój odpowiednik w postaci wbudowanego komponentu, co szczegółowo opisano w dokumentacji React.

Podstawowe Zasady Składni JSX:

Zwracanie Jednego Elementu:

W React, każdy komponent powinien zwracać tylko jeden główny element. Na przykład:

function TopMenu() {
  return(
    <>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </>
  );
}

W podejściu do JSX, ważne jest traktowanie go podobnie do standardowego kodu JavaScript, gdzie funkcja nie może zwracać wielu wyników bez ich opakowania w strukturę, taką jak obiekt lub tablica. Podobnie, w JSX nie możemy bezpośrednio zwracać wielu równorzędnych elementów. Zawsze potrzebny jest jeden nadrzędny element, który je zawiera. Na przykład, w sytuacji, gdy chcemy zwrócić kilka elementów listy, możemy je opakować w komponent <ul>, lub też skorzystać z fragmentu React (<>...</>), który służy jako kontener dla grupy elementów.

Jednowierszowe vs Wielowierszowe Komponenty:

Dla krótkich komponentów, składających się z jednego wiersza, możemy bezpośrednio zwrócić ich zawartość:

function ButtonSubmit() {
  return <button id="submit">Wyślij</button>;
}

Dla komponentów wielowierszowych, zawartość należy otoczyć nawiasami:

function TopMenu() {
  return (
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  );
}

JSX vs HTML:

W JSX każdy element musi być poprawnie zamknięty, w przeciwieństwie do niektórych tagów HTML, które mogą być otwarte. Na przykład:

function Image() {
  return <img src="" alt="" />;
}

Integracja Zmiennych i Wyrażeń JavaScript:

JSX pozwala na łatwe włączanie zmiennych i wyrażeń JavaScript:

function Hello() {
  const name = "Lukasz";
  return <h1>Hello {name}!</h1>;
}

function Calculator() {
  function add(a, b) {
    return a + b;
  }
  return <p>Wynik: {add(2, 4)}</p>;
}

React bez JSX:

Ponieważ przeglądarki nie interpretują bezpośrednio JSX, podczas budowy projektu React, kod JSX jest konwertowany na zwykłe instrukcje JavaScript. Na przykład:

function ButtonSubmit() {
  return <button id="submit">Wyślij</button>;
}

Po kompilacji, staje się:

function ButtonSubmit() {
  return React.createElement('button', {id: 'submit'}, 'Wyślij');
}

Oznacza to, że możemy korzystać z metody createElement Reacta, choć składnia JSX jest zdecydowanie bardziej przejrzysta i przyjazna dla programistów.