JSX

Słownik kwalifikacji INF.04 - Projektowanie, programowanie i testowanie aplikacji

Co to jest JSX?

JSX to składnia używana najczęściej w React, która pozwala pisać strukturę interfejsu w formie podobnej do HTML bezpośrednio w kodzie JavaScript. Przykład:

<h2>{2 + 2}</h2>

Taki zapis nie oznacza wyświetlenia tekstu {2+2}. Nawiasy klamrowe w JSX służą do wstawiania wyrażeń JavaScript. Wyrażenie 2 + 2 zostanie obliczone, a w przeglądarce pojawi się:

<h2>4</h2>

Do czego służą nawiasy klamrowe w JSX?

W JSX nawiasy {} pozwalają wstawić wynik wyrażenia JavaScript do kodu widoku. Można w nich umieszczać m.in.:

  • działania arytmetyczne,
  • zmienne,
  • wywołania funkcji,
  • operatory warunkowe,
  • wartości właściwości komponentu.

Przykład:

const name = "Jan";
const age = 18;

return <p>{name} ma {age} lat.</p>;

Wynik:

Jan ma 18 lat.

Czego nie mylić?

JSX nie jest czystym HTML-em. Kod JSX jest przetwarzany, np. przez Babel, na zwykły JavaScript. Dlatego zapis {2 + 2} jest interpretowany jako wyrażenie, a nie jako zwykły tekst.

JSX a Angular

W Angularze podobną rolę pełni interpolacja z użyciem podwójnych nawiasów klamrowych:

<h2>{{ 2 + 2 }}</h2>

W obu przypadkach wynik działania zostanie obliczony i wyświetli się 4.