Co to jest JSX? Zasady składni JSX w React z przykładami

JSX to rozszerzenie składni JavaScriptu, które pozwala pisać w kodzie znaczniki podobne do HTML. Komponenty Reacta zwracają JSX, żeby opisać, co ma się pojawić na ekranie, a narzędzie do budowania kompiluje go do zwykłych wywołań funkcji JavaScript. Wygląda jak HTML, ale kilka zasad jest innych, a nawiasy klamrowe pozwalają wstawić do znaczników dowolną wartość JavaScript.

export default function App() {
    const user = { name: 'Ada Lovelace', role: 'Engineer', skills: ['math', 'code'] };
    const initials = user.name.split(' ').map((part) => part[0]).join('');

    return (
        <div className="card">
            <h2>{user.name}</h2>
            <p>
                {initials} works as an {user.role.toLowerCase()} and knows{' '}
                {user.skills.length} skills.
            </p>
            <ul>
                {user.skills.map((skill) => (
                    <li key={skill}>{skill.toUpperCase()}</li>
                ))}
            </ul>
        </div>
    );
}

Wszystko wewnątrz {} jest JavaScriptem: właściwość, wywołanie metody, nawet map, które zamienia tablicę w elementy listy. Dodaj 'design' do tablicy skills, a zaktualizuje się zarówno licznik, jak i lista.

Zasady JSX

Zwracaj jeden element główny

Komponent zwraca jedną wartość, więc jego JSX potrzebuje jednego rodzica. Dwa elementy rodzeństwa na najwyższym poziomie to błąd składni. Gdy nie chcesz dodatkowego <div> na stronie, owiń je we fragment, <>...</>:

// Error: Adjacent JSX elements must be wrapped in an enclosing tag
return (
    <h1>Title</h1>
    <p>Text</p>
);

// OK: a fragment groups them without adding a DOM element
return (
    <>
        <h1>Title</h1>
        <p>Text</p>
    </>
);

Gdy grupa potrzebuje key, użyj długiej formy <Fragment key={id}>; zobacz fragmenty.

Zamykaj każdy tag

HTML pozwala zostawić niektóre tagi otwarte. JSX nie. Elementy bez dzieci zamykają się same przez />: <img />, <br />, <input /> i twoje własne komponenty, takie jak <Avatar />.

Używaj className, htmlFor i atrybutów camelCase

Atrybuty JSX stają się kluczami obiektu JavaScript, więc stosują nazewnictwo JavaScriptu. class i for to w JavaScripcie słowa zastrzeżone, dlatego JSX używa className i htmlFor. Atrybuty wielowyrazowe i każdy handler zdarzeń zapisuje się w camelCase: tabIndex, maxLength, autoFocus, onClick, onChange. Dwa wyjątki zachowują myślniki: atrybuty aria-* i data-* pisze się dokładnie tak jak w HTML.

export default function App() {
    return (
        <form onSubmit={(e) => e.preventDefault()}>
            <style>{`
                .field { display: block; margin-bottom: 8px; }
                .hint { color: #777; font-size: 13px; }
            `}</style>
            <label htmlFor="email" className="field">
                Email
            </label>
            <input id="email" type="email" maxLength={40} autoComplete="off" />
            <p className="hint" data-testid="hint" aria-live="polite">
                Clicking the label focuses the input, because htmlFor matches its id.
            </p>
            <button type="submit" disabled={false}>
                Send
            </button>
        </form>
    );
}

Zmień className="field" na class="field". Etykieta zachowuje styl, bo React i tak ustawia atrybut, ale build deweloperski wypisuje "Invalid DOM property class. Did you mean className?" Podgląd działa jak build produkcyjny, więc tutaj tego ostrzeżenia nie zobaczysz; używaj className. Atrybut tekstowy używa cudzysłowów (type="email"), każda inna wartość nawiasów klamrowych (maxLength={40}, disabled={false}).

Nawiasy klamrowe przyjmują wyrażenia, nie instrukcje

Wewnątrz {} możesz napisać wszystko, co daje wartość: zmienną, działanie arytmetyczne, wywołanie funkcji, operator warunkowy, &&, szablon tekstowy. Instrukcje takie jak if, for i const nie dają wartości, więc nie mogą się tam znaleźć. Wykonaj obliczenia przed return albo użyj formy wyrażenia:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    let message;
    if (count === 0) {
        message = 'No messages';
    } else {
        message = `${count} new message${count === 1 ? '' : 's'}`;
    }

    return (
        <div>
            <p>{message}</p>
            <p>{count > 5 ? 'Inbox is busy' : 'Inbox is calm'}</p>
            {count && <p>You have mail.</p>}
            <button onClick={() => setCount(count + 1)}>New message</button>
            <button onClick={() => setCount(0)}>Clear</button>
        </div>
    );
}

Przyjrzyj się, zanim klikniesz: strona pokazuje zabłąkane 0. count && <p>...</p> daje 0, gdy licznik wynosi zero, a React renderuje liczby, nawet zero. Zmień to na count > 0 && <p>You have mail.</p>, a 0 zniknie. false, null, undefined i true nie renderują niczego, dlatego wartość logiczna po lewej stronie && jest bezpieczna. Strona o renderowaniu warunkowym omawia te wzorce.

Style inline używają obiektu

Atrybut style przyjmuje obiekt JavaScript, a nie tekst CSS. Stąd wygląd „podwójnych nawiasów": zewnętrzna para oznacza „tu jest JavaScript", wewnętrzna to literał obiektu. Nazwy właściwości są w camelCase (backgroundColor, fontSize), a zwykła liczba oznacza piksele dla większości właściwości rozmiaru.

import { useState } from 'react';

export default function App() {
    const [big, setBig] = useState(false);
    const boxStyle = {
        padding: 12,
        borderRadius: 8,
        backgroundColor: big ? '#dbeafe' : '#f3f4f6',
        fontSize: big ? 24 : 16,
    };

    return (
        <div>
            <div style={boxStyle}>Styled with a JavaScript object</div>
            <p style={{ color: '#555', marginTop: 8 }}>Double braces: an object literal.</p>
            <button onClick={() => setBig(!big)}>Toggle size</button>
        </div>
    );
}

Ponieważ styl jest obiektem, można go wyliczyć ze stanu jak każdą inną wartość. Spróbuj zmienić fontSize: big ? 24 : 16 na fontSize: big ? '2em' : '1em': teksty są przekazywane razem z jednostką.

Komentarze

Komentarz wewnątrz JSX umieszcza się w nawiasach klamrowych: {/* to jest komentarz */}. Komentarze HTML (<!-- -->) są błędem składni. Poza znacznikami, w ciele funkcji, zwykłe komentarze // działają jak zwykle.

return (
    <div>
        {/* The header is hidden on small screens */}
        <Header />
    </div>
);

Zamiana HTML na JSX

Wklejenie HTML do komponentu to częsty pierwszy krok i większość działa. Oto zmiany, które zwykle trzeba wprowadzić:

• class zmienia się w className, a for w htmlFor.
• Tagi puste zamykają się same: <br> zmienia się w <br />, <img src="a.png"> w <img src="a.png" />.
• style="color: red; font-size: 14px" zmienia się w style={{ color: 'red', fontSize: 14 }}.
• Atrybuty zdarzeń przyjmują funkcję, a nie tekst: onclick="save()" zmienia się w onClick={save}.
• Nazwy atrybutów przechodzą na camelCase: tabindex zmienia się w tabIndex, a stroke-width z SVG w strokeWidth.
• <!-- comments --> zmieniają się w {/* comments */}.
• Kilka elementów na najwyższym poziomie potrzebuje jednego rodzica albo fragmentu.

Konwertery HTML na JSX online robią te kroki za ciebie, ale gdy je znasz, łatwo odczytasz komunikaty o błędach, kiedy któryś pominiesz.

Do czego kompiluje się JSX

Przeglądarki nie potrafią uruchomić JSX. Kompilator (taki jak Babel, SWC albo Oxc, które Vite i frameworki uruchamiają za ciebie) zamienia każdy tag w wywołanie funkcji z react/jsx-runtime:

// What you write
const element = <h1 className="title">Hello, {name}</h1>;
const button = <Button size="small">OK</Button>;

// What the compiler produces (roughly)
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

const element = _jsxs('h1', { className: 'title', children: ['Hello, ', name] });
const button = _jsx(Button, { size: 'small', children: 'OK' });

Tag pisany małą literą staje się tekstem ('h1', element HTML), tag z wielkiej litery odwołaniem do twojej funkcji (Button), atrybuty stają się obiektem propsów, a zawartość trafia do children. Starsze konfiguracje kompilowały zamiast tego do React.createElement(type, props, ...children), dlatego stare pliki zaczynają się od import React from 'react', nawet jeśli nigdzie nie używają React. Wywołanie zwraca zwykły obiekt nazywany elementem Reacta. Możesz go wypisać w konsoli:

function Badge({ label }) {
    return <span style={{ border: '1px solid', padding: '0 6px' }}>{label}</span>;
}

export default function App() {
    const heading = <h3 className="title">Hello</h3>;
    const badge = <Badge label="new" />;

    console.log('heading type:', heading.type, 'props:', heading.props);
    console.log('badge type is the Badge function:', badge.type === Badge);

    return (
        <div>
            {heading}
            {badge}
        </div>
    );
}

Konsola pokazuje, że heading to po prostu dane: typ 'h3' i obiekt propsów. Dlatego też JSX można przechowywać w zmiennych, przekazywać do funkcji i z nich zwracać.

JSX escapuje tekst za ciebie

Każdy tekst, który wstawisz w nawiasy klamrowe, jest renderowany jako tekst, nigdy jako HTML. Jeśli użytkownik wpisze <img src=x onerror=alert(1)> w polu komentarza, React pokaże te znaki na ekranie, zamiast tworzyć tag obrazu. Domyślnie blokuje to najczęstszą formę cross-site scripting (XSS).

export default function App() {
    const comment = 'Nice post! <b>bold?</b> <img src="x" onerror="alert(1)">';
    const trustedHtml = 'This came from <b>our own</b> markdown renderer.';

    return (
        <div>
            <p>{comment}</p>
            <p dangerouslySetInnerHTML={{ __html: trustedHtml }} />
        </div>
    );
}

Pierwszy akapit wypisuje tagi jako zwykłe znaki. Drugi używa dangerouslySetInnerHTML, które pomija escapowanie i wstawia tekst jako prawdziwy HTML, więc "our own" jest pogrubione. Długa nazwa to ostrzeżenie: przekazuj tam tylko HTML, który sam wygenerowałeś albo oczyściłeś sanitizerem takim jak DOMPurify. Przekazanie tam danych od użytkownika ponownie otwiera lukę XSS, którą JSX zamknął.