Zasady JSX: wyrażenia, atrybuty i fragmenty
Proszę używać wyrażeń JSX z { }, stosować atrybuty camelCase (className, onClick) oraz zwracać wiele elementów za pomocą fragmentów.
Zasady JSX: wyrażenia, atrybuty i fragmenty to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 3. 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 3 lekcji w sumie.
Co daje JSX
Cel: opanować podstawy JSX — używać { } do wyrażeń, stosować atrybuty w camelCase i grupować elementy tego samego poziomu za pomocą fragmentów.
Wyrażenia i atrybuty
Wyrażenia umieszcza się wewnątrz { } i mogą nimi być zmienne, wywołania funkcji lub proste działania matematyczne. Atrybuty używają zapisu camelCase, na przykład className, htmlFor i onClick.
Demonstracja: wyrażenia i atrybuty
Renderuj dynamiczne wartości za pomocą { } i używaj className/title/onClick jako atrybutów w zapisie camelCase.
<div id="root"></div>
Fragmenty dla elementów tego samego poziomu
Zwracanie wielu elementów rodzeństwa za pomocą fragmentu: <>...</> albo <React.Fragment>. Fragmenty pozwalają uniknąć dodatkowych divów opakowujących.
Demo: fragmenty
Proszę używać krótkich fragmentów <> do grupowania elementów rodzeństwa; nie renderują one dodatkowych węzłów DOM.
<div id="root"></div>
Wskazówki i pułapki
Wskazówki:
- Dozwolone są tylko wyrażenia w { } (nie instrukcje).
- Proszę używać className zamiast class.
- Proszę wybierać fragmenty zamiast niepotrzebnych divów opakowujących.
Zasada wyrażeń JSX
Podsumowanie
Podsumowanie: Wartości dynamiczne należy umieszczać w { }, atrybuty zapisywać w konwencji camelCase, a elementy rodzeństwa grupować za pomocą fragmentów, aby zachować przejrzystość znaczników.
Często zadawane pytania
Czy lekcja „Zasady JSX: wyrażenia, atrybuty i fragmenty” jest bezpłatna?
Tak — pełny tekst „Zasady JSX: wyrażenia, atrybuty i fragmenty” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Zasady JSX: wyrażenia, atrybuty i fragmenty”?
Proszę używać wyrażeń JSX z { }, stosować atrybuty camelCase (className, onClick) oraz zwracać wiele elementów za pomocą fragmentów. Ćwiczysz React 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ąć React Academy?
Nie wymagamy żadnego doświadczenia. React 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 3.
Ile czasu zajmuje lekcja „Zasady JSX: wyrażenia, atrybuty i fragmenty”?
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 React Academy?
Tak. Każda lekcja React 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
- Zasady JSX: wyrażenia, atrybuty i fragmenty
- Listy i klucze; renderowanie warunkowe
- Opcje stylowania: CSS Modules, style inline i pomocniki klas