JSX: składnia i transpilacja
Proszę pisać JSX, zrozumieć, jak Babel kompiluje go do wywołań React.createElement, oraz stosować zasady: jeden element główny, className i znaczniki samozamykające.
JSX: składnia i transpilacja to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest JSX
JSX (JavaScript XML) to rozszerzenie składni, które pozwala pisać znaczniki podobne do HTML wewnątrz JavaScriptu. Nie jest to funkcja przeglądarki — Babel lub TypeScript przekształca JSX w wywołania funkcji JavaScriptu, zanim kod zostanie uruchomiony.
Transpilacja JSX
Babel przekształca JSX w wywołania React.createElement(). W przypadku nowej transformacji JSX (React 17+) nie trzeba importować React — Babel automatycznie dodaje niezbędne importy.
// JSX:
const element = <h1 className="title">Hello</h1>;
// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });Zasady JSX: jeden element główny
Wyrażenia JSX muszą mieć dokładnie jeden element główny. Należy opakować sąsiednie elementy w <div> albo użyć Fragmentów (<></> lub <React.Fragment>), aby uniknąć dodawania zbędnych węzłów DOM.
// Error: adjacent elements need a wrapper
return (
<h1>Title</h1>
<p>Body</p>
);
// Use Fragment:
return (
<>
<h1>Title</h1>
<p>Body</p>
</>
);className i htmlFor
Atrybuty JSX używają zapisu camelCase. Ponieważ class i for są słowami zastrzeżonymi JavaScriptu, należy zamiast nich używać className i htmlFor.
<div className="card active">
<label htmlFor="email">Email</label>
<input id="email" type="email" />
</div>Tagi samozamykające
W JSX wszystkie tagi muszą być prawidłowo zamknięte. Elementy, które nie mają elementów potomnych, muszą używać ukośnika samozamykającego: <img />, <br />, <input />.
Wyrażenia w JSX: {}
Dowolne wyrażenie JavaScriptu można osadzić w JSX za pomocą nawiasów klamrowych. Działają zmienne, wywołania funkcji, operatory warunkowe i działania arytmetyczne. Instrukcje, takie jak if i for, nie działają.
const name = 'Alice';
const count = 5;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You have {count} messages.</p>
<p>Double: {count * 2}</p>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);JSX i stringi
Sąsiadujący tekst i wyrażenia JSX są automatycznie łączone. Wewnątrz elementu można swobodnie mieszać tekst i wyrażenia.
<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>Renderowanie niczego: null i false
Zwróć null lub false, aby niczego nie renderować. Obie wartości są prawidłowymi wartościami JSX i nie powodują powstania danych wyjściowych DOM. Jest to przydatne przy renderowaniu warunkowym.
function Banner({ show }: { show: boolean }) {
if (!show) return null; // renders nothing
return <div className="banner">Important notice!</div>;
}Atrybut style — składnia obiektu
Style wbudowane w JSX używają obiektu, a nie stringa. Nazwy właściwości zapisuje się w camelCase.
<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
Styled box
</div>JSX jest JavaScriptem
Ponieważ JSX jest kompilowane do JavaScriptu, można umieszczać JSX w zmiennych, zwracać je z funkcji, przekazywać jako props i przechowywać w tablicach. Elementy React są zwykłymi obiektami JavaScriptu.
const elements = ['apple', 'banana', 'cherry'].map(fruit => (
<li key={fruit}>{fruit}</li>
));
return <ul>{elements}</ul>;TypeScript i JSX: pliki .tsx
Plików TypeScript zawierających JSX należy używać z rozszerzeniem .tsx. TypeScript sprawdza typy JSX, wykrywając błędy typów propsów i brakujące propsy już podczas kompilacji.
Szybkie sprawdzenie
Dlaczego w JSX używamy className zamiast class?
Podsumowanie: JSX
JSX jest cukrem składniowym dla React.createElement(). Każde wyrażenie musi mieć jeden element główny albo Fragment. Atrybuty odpowiadające słowom zastrzeżonym to className i htmlFor. Wszystkie elementy bez zawartości należy zamykać samozamykająco. Wyrażenia osadza się za pomocą {}. Zwrócenie null lub false niczego nie renderuje. Style wbudowane używają składni obiektu z nazwami w camelCase. JSX jest JavaScriptem — należy traktować je jak wartość.
Często zadawane pytania
Czy lekcja „JSX: składnia i transpilacja” jest bezpłatna?
Tak — pełny tekst „JSX: składnia i transpilacja” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „JSX: składnia i transpilacja”?
Proszę pisać JSX, zrozumieć, jak Babel kompiluje go do wywołań React.createElement, oraz stosować zasady: jeden element główny, className i znaczniki samozamykające. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „JSX: składnia i transpilacja”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- JSX: składnia i transpilacja
- Komponenty funkcyjne i props
- Hook useState: stan i ponowne renderowanie
- Listy, klucze i renderowanie warunkowe