JSX (JavaScript XML) to rozszerzenie składni JavaScriptu pozwalające pisać kod przypominający HTML bezpośrednio w JS: const element = <h1>Hello</h1>. Wprowadzone przez Facebooka w 2013 r. razem z Reactem, stało się standardem tego ekosystemu. Pod maską JSX jest kompilowany do wywołań funkcji JavaScriptu przez narzędzia takie jak Babel, SWC, esbuild czy TypeScript. Poza Reactem i React Native używają go także Solid.js i Preact. Dla frontend developera pracującego w Reakcie JSX to umiejętność absolutnie podstawowa.

Jak wygląda składnia JSX?

Elementarz składni: podstawy — const el = <div>Hello</div>, atrybuty (props) — <img src="…" alt="…" /> jak w HTML, wyrażenia — <div>{user.name}</div>: klamry osadzają JavaScript, tagi samozamykające — <input /> jest obowiązkowe, komponenty — <Header />: wielka litera odróżnia komponent od elementu HTML, fragmenty — <>…</> grupują elementy bez zbędnego diva, renderowanie warunkowe — {isLoggedIn && <Dashboard />}, listy — {items.map(item => <li key={item.id}>{item.name}</li>)}, className zamiast class — bo „class" to słowo zastrzeżone JavaScriptu.

Czym JSX różni się od alternatyw?

Krajobraz alternatyw: szablony Vue to HTML z dyrektywami (v-if, v-for) i separacją szablonu od logiki; Svelte ma własną, kompilowaną składnię — bliższą HTML, mniej przesyconą JavaScriptem; Solid.js używa JSX podobnie jak React, ale z reaktywnością drobnoziarnistą; Lit stawia na tagowane template literals (html``). Wszystkie podejścia są pełnoprawne — składnię wybiera się razem z frameworkiem, nie osobno: JSX dla Reacta, Solida i Preacta, szablony dla Vue, własna składnia dla Svelte. Na polskim rynku JSX dominuje z prostego powodu — React jest najpopularniejszym frameworkiem frontendowym w kraju.

Jakie możliwości daje JSX?

Wyższa szkoła jazdy: typowanie — TypeScript zna typy elementów HTML i komponentów; autouzupełnianie i kontrola typów w całym drzewie UI, wsparcie IDE — VS Code i WebStorm z pełnym zapleczem: podpowiedzi, refaktoryzacja, stylowanie — prop style z obiektem, className dla klas CSS, biblioteki CSS-in-JS (Emotion, styled-components), zdarzenia — onClick, onChange w camelCase z referencjami do funkcji, spread — <Component {...props} /> rozsypuje obiekt na atrybuty, refs — atrybut ref daje dostęp do DOM. Typowa czkawka juniorów — mylenie className z class — mija po tygodniu; dalej JSX czyta się jak zwykły HTML z supermocami.

Jakie są dobre praktyki pisania JSX?

Kodeks dobrych praktyk: kompozycja — małe, skupione komponenty składane w większe całości, renderowanie warunkowe — && do prostych przypadków, ternary do „albo-albo", early return do złożonych, listy — zawsze unikalny key (id elementu, nie indeks), destrukturyzacja propsów — const Button = ({ label, onClick }) => …, fragmenty zamiast zbędnych divów — czystszy DOM, komentarze — {/* … */}, składnia specyficzna dla JSX, dostępność — semantyczny HTML (button, a, nagłówki) i poprawne atrybuty ARIA, wydajność z umiarem — memo i useCallback tam, gdzie pomiar to uzasadnia, nie wszędzie. Filozofia na koniec: czytelność ponad mikrooptymalizacje — to standard egzekwowany w code review większości dojrzałych zespołów reactowych.

Kontakt

Front-end

Czym jest JSX?

Zanurz się w fascynujący świat JSX, składni, która czyni pisanie kodu komponentów Reacta nie tylko efektywnym, ale i przyjemnym. Odkryj, jak JSX, będący połączeniem JavaScriptu i XML, rewolucjonizuje sposób, w jaki tworzymy interaktywne interfejsy użytkownika.

Tomasz Kozon

CEO

30 wrz 2023

JSX, które jest skrótem od JavaScript XML, to składnia rozszerzenia JavaScript, która dodaje możliwość wprowadzania HTML do kodu JavaScript. Jest to potężne narzędzie tworzenia interfejsów użytkownika, szczególnie w bibliotece React.js. Znaczenie JSX bierze się z jego unikalnych cech, takich jak możliwość osadzania dowolnych wyrażeń JavaScript bezpośrednio w kodzie HTML, co czyni go niezwykle wydajnym i elastycznym rozwiązaniem. Uproszcza i przyspiesza proces tworzenia interaktywnych stron internetowych, a jednocześnie zapewnia czytelność i łatwość utrzymania kodu.

Powiązane case studies

Laptop z serwisem BlueApart — platforma rezerwacji apartamentów nad morzem

Dwucyfrowy wzrost widoczności organicznej i automatyzacja obsługi gości dla operatora apartamentów

Klient: Blueapart

Branża: Booking i hotele / TravelTech

Wynajem magazynu w minuty zamiast dni - automatyzacja umów i płatności

Klient: Balticon S.A.

Branża: Logistyka / LogTech

Platforma edukacyjna generująca materiały do nauki programowania z ChatGPT

Klient: Klient (Aplikacja webowa do nauki programowania)

Branża: Edukacja / EdTech

Podstawy składni JSX: Elementy, komponenty i właściwości

JSX, stanowi kluczowe narzędzie dla twórców React.js. Za sprawą składni JSX, która łączy kod JavaScript ze znacznikami HTML, deweloperzy mogą tworzyć bardziej intuicyjne, czytelne i zarazem rozbudowane struktury interfejsu użytkownika. Podstawą tej składni są elementy JSX, będące podstawowymi jednostkami budującymi interfejs. Są one analogiczne do elementów HTML, lecz oprócz typowych atrybutów, znanymi z języka HTML, mogą one obsługiwać eventy, takie jak onclick czy onkeydown. Kolejnym elementem składni są komponenty. Zdynamizowane elementy, które mogą mieć swój stan (state) i mieć różne zachowanie w zależności od niego. Są to odpowiedniki JavaScriptowe obiektów, a ich budowę zaczyna się z dużej litery. Trzecim elementem są właściwości (props), które mogą być przekazywane do komponentów, co pozwala na tworzenie skomplikowanych, ale modułowych i łatwych do testowania struktur.

programista, JSX

Powiązana usługa

Web development

Projektujemy i tworzymy dedykowane aplikacje webowe - od MVP, które pozwala szybko zweryfikować pomysł, po rozbudowane platformy i systemy rozwijane przez lata. Budujemy zarówno warstwę frontendową, jak i backend, API, bazy danych, panele administracyjne oraz integracje z zewnętrznymi systemami. Pracujemy m.in. z Next.js, React, Node.js, NestJS, Pythonem, PostgreSQL i MongoDB. Tworzymy rozwiązania dopasowane do konkretnego procesu biznesowego: aplikacje SaaS, systemy wewnętrzne, platformy sprzedażowe, serwisy internetowe, marketplace’y i systemy CMS.

Jak JSX integruje się z JavaScriptem?

JSX, jest rozszerzeniem składni JavaScript, które wprowadza możliwość bezpośredniego deklarowania składników interfejsu użytkownika wewnątrz kodu JS. Pozwala to na tworzenie bardziej zrozumiałego i czytelnego kodu, zwłaszcza w przypadku rozbudowanych struktur HTML. Nie jest jednak interpretowany bezpośrednio przez przeglądarki internetowe. Wymaga transpilacji do czystego JavaScriptu, co zwykle realizowane jest z użyciem narzędzi takich jak Babel. Komponenty JSX mają bezpośrednią relację z komponentami JS, co oznacza, że można je importować, eksportować i manipulować jak każdy inny obiekt w JavaScript. Dodatkowo, za pomocą JSX możliwe jest wstrzykiwanie zwykłego kodu JavaScript wprost do kodu HTML, co znacznie zwiększa elastyczność i poziom kontroli nad generowanymi elementami DOM.

Przetwarzanie warunkowe i iteracyjne w JSX

Mimo że pozwala na pisanie kodu, który wygląda jak HTML, zachowuje się znacznie bardziej jak JavaScript. Dlatego istotne elementy języka JavaScript, takie jak przetwarzanie warunkowe i iteracyjne, są w pełni wykorzystywane w JSX. Kontrola warunkowa może wystąpić w postaci wyrażeń logicznych 'if' lub operatora warunkowego, znany też jako operator trójargumentowy. Podobnie, JSX obsługuje pętle 'for', 'while' oraz metody iteracyjne jak 'map' dzięki czemu możemy wygenerować zestawy komponentów na podstawie danych. W przypadku JSX, kluczowym jest, że zarówno przetwarzanie warunkowe, jak i iteracyjne muszą zwracać elementy JSX, albo 'null', co umożliwia stworzenie dynamicznych i reaktywnych interfejsów użytkownika.

Zaawansowane techniki i najlepsze praktyki JSX

Zaawansowane techniki użycia JSX opierają się na kilku podstawowych zasadach. Pierwszą z nich jest składnia drzewa elementów. Zezwala na zagnieżdżanie elementów wewnątrz innych elementów, co pozwala na tworzenie skomplikowanych interfejsów przy użyciu znanej składni HTML. Drugą kluczową zasadą jest używanie wyrażeń JavaScript wewnątrz klamer, które umożliwiają dynamiczne generowanie kodu JSX. Kolejną ważną kwestią są komponenty. Komponenty są jedną z najmocniejszych cech JSX i React. W praktyce, zdecydowana większość kodu to właśnie komponenty. Ważne jest również pamiętanie o właśnie takiej zasadzie jak 'key prop', który pomaga React poprawnie identyfikować które elementy zostały zmienione, dodane, czy usunięte. Na koniec, zasada zachowania czystości kodu - wszystkie znaki specjalne powinny być 'uciekinierowane'. W przeciwnym razie mogą one prowadzić do błędów i niezrozumiałego zachowania kodu.

FAQ

FAQ – JSX

JSX (JavaScript XML) to rozszerzenie składni JavaScriptu pozwalające pisać kod przypominający HTML bezpośrednio w JS: const element = <h1>Hello</h1>. Wprowadzone przez Facebooka w 2013 r. razem z Reactem, stało się standardem tego ekosystemu. Pod maską JSX jest kompilowany do wywołań funkcji JavaScriptu przez narzędzia takie jak Babel, SWC, esbuild czy TypeScript. Poza Reactem i React Native używają go także Solid.js i Preact. Dla frontend developera pracującego w Reakcie JSX to umiejętność absolutnie podstawowa.
Elementarz składni:
podstawy — const el = <div>Hello</div>,
atrybuty (props) — <img src="…" alt="…" /> jak w HTML,
wyrażenia — <div>{user.name}</div>: klamry osadzają JavaScript,
tagi samozamykające — <input /> jest obowiązkowe,
komponenty — <Header />: wielka litera odróżnia komponent od elementu HTML,
fragmenty — <>…</> grupują elementy bez zbędnego diva,
renderowanie warunkowe — {isLoggedIn && <Dashboard />},
listy — {items.map(item => <li key={item.id}>{item.name}</li>)},
className zamiast class — bo „class" to słowo zastrzeżone JavaScriptu.
Krajobraz alternatyw: szablony Vue to HTML z dyrektywami (v-if, v-for) i separacją szablonu od logiki; Svelte ma własną, kompilowaną składnię — bliższą HTML, mniej przesyconą JavaScriptem; Solid.js używa JSX podobnie jak React, ale z reaktywnością drobnoziarnistą; Lit stawia na tagowane template literals (html``). Wszystkie podejścia są pełnoprawne — składnię wybiera się razem z frameworkiem, nie osobno: JSX dla Reacta, Solida i Preacta, szablony dla Vue, własna składnia dla Svelte. Na polskim rynku JSX dominuje z prostego powodu — React jest najpopularniejszym frameworkiem frontendowym w kraju.
Wyższa szkoła jazdy:
typowanie — TypeScript zna typy elementów HTML i komponentów; autouzupełnianie i kontrola typów w całym drzewie UI,
wsparcie IDE — VS Code i WebStorm z pełnym zapleczem: podpowiedzi, refaktoryzacja,
stylowanie — prop style z obiektem, className dla klas CSS, biblioteki CSS-in-JS (Emotion, styled-components),
zdarzenia — onClick, onChange w camelCase z referencjami do funkcji,
spread — <Component {...props} /> rozsypuje obiekt na atrybuty,
refs — atrybut ref daje dostęp do DOM.
Typowa czkawka juniorów — mylenie className z class — mija po tygodniu; dalej JSX czyta się jak zwykły HTML z supermocami.
Kodeks dobrych praktyk:
kompozycja — małe, skupione komponenty składane w większe całości,
renderowanie warunkowe — && do prostych przypadków, ternary do „albo-albo", early return do złożonych,
listy — zawsze unikalny key (id elementu, nie indeks),
destrukturyzacja propsów — const Button = ({ label, onClick }) => …,
fragmenty zamiast zbędnych divów — czystszy DOM,
komentarze — {/* … */}, składnia specyficzna dla JSX,
dostępność — semantyczny HTML (button, a, nagłówki) i poprawne atrybuty ARIA,
wydajność z umiarem — memo i useCallback tam, gdzie pomiar to uzasadnia, nie wszędzie.
Filozofia na koniec: czytelność ponad mikrooptymalizacje — to standard egzekwowany w code review większości dojrzałych zespołów reactowych.

Eleventy (11ty) to lekki i niezwykle elastyczny generator stron statycznych, który szybko zdobywa popularność wśród twórców ceniących prostotę i pełną kontrolę nad projektem. W świecie coraz bardziej rozbudowanych frameworków 11ty wyróżnia się minimalistycznym podejściem, oferując jednocześnie dużą swobodę w wyborze narzędzi i sposób pracy. Dzięki szybkim buildom, wsparciu dla wielu formatów danych i możliwości łączenia różnych języków templatingu, świetnie sprawdza się zarówno w prostych…