` do struktury, zamiast tego możesz użyć pary `<>` oraz ``:
+
+```js {1,11}
+<>
+
Lista zadań Hedy Lamarr
+
+
+
+```
+
+Ten pusty znacznik nazywamy *[fragmentem reactowym](TODO)*. Fragmenty pozwalają grupować rzeczy bez zostawiania śladu w drzewie HTML przesłanym do przeglądarki.
+
+
+
+Składnia JSX wygląda jak HTML, ale pod spodem jest transformowana do zwykłych obiektów javascriptowych. Nie można przecież zwrócić w funkcji dwóch obiektów bez uprzedniego opakowania ich w tablicę. Dlatego właśnie nie można zwrócić dwóch znaczników JSX bez opakowywania ich w jeden główny znacznik lub fragment.
+
+
+
+### 2. Zamknij wszystkie znaczniki {/*2-close-all-the-tags*/}
+
+JSX wymaga, by wszystkie znaczniki były jawnie zamknięte: samozamykające się znaczniki jak `
![]()
` musimy zapisać jako `
![]()
`, a znaczniki opakowujące jak `
pomarańcze` musimy zapisać jako `pomarańcze`.
+
+Tak wyglądałoby zdjęcie Hedy Lamarr i jej lista zadań z domkniętymi znacznikami:
+
+```js {2-6,8-10}
+<>
+
+
+ - Wynaleźć nową sygnalizację świetlną
+ - Przećwiczyć scenę do filmu
+ - Usprawnić technologię rozpraszania widma
+
+
+```
+
+### 3.
Wszystko Większość rzeczy musi być zapisana camelCasem! {/*3-camelcase-salls-most-of-the-things*/}
+
+JSX przekształcany jest w JavaScript, a atrybuty zapisane w JSX-ie stają się kluczami obiektów javascriptowych. W swoich własnych komponentach zwykle będziemy chcieli odczytywać wartości tych atrybutów pod postacią zmiennych. Jednak JavaScript ma pewne ograniczenia co do nazw zmiennych. Na przykład, nazwy nie mogą zawierać myślników ani być słowami zarezerwowanymi, jak `class`.
+
+To dlatego w Reakcie wiele atrybutów HTML-owych i SVG zapisujemy camelCasem. Dla przykładu, zamiast pisać `stroke-width`, piszemy `strokeWidth`. Z uwagi na fakt, że `class` jest słowem zarezerwowanym, w Reakcie zapisujemy go jako `className`, idąc w ślady za nomenklaturą [odpowiadającej mu właściwości DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+
+```js {4}
+
+```
+
+[Wszystkie te atrybuty znajdziesz w elementach React DOM](TODO). Jeśli zdarzy ci się pomylić, nie martw się - React wyświetli w [konsoli przeglądarki](https://developer.mozilla.org/docs/Tools/Browser_Console) błąd z instrukcją, jak naprawić problem.
+
+
+
+Ze względów historycznych atrybuty [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) oraz [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) piszemy tak, jak w HTML-u, czyli z myślnikami.
+
+
+
+### Wskazówka: Używaj konwertera JSX {/*pro-tip-use-a-jsx-converter*/}
+
+Konwertowanie wszystkich tych atrybutów w odpowiedni kod znaczników jest żmudne! Zalecamy korzystanie z [konwertera](https://transform.tools/html-to-jsx), który pomoże przekształcić istniejący kod HTML i SVG w JSX. Tego typu konwertery są pomocne w praktyce, jednak warto wiedzieć, co tak naprawdę dzieje się pod spodem, aby umieć pisać JSX samodzielnie.
+
+Oto nasz rezultat końcowy:
+
+
+
+```js
+export default function TodoList() {
+ return (
+ <>
+ Lista zadań Hedy Lamarr
+
+
+ - Wynaleźć nową sygnalizację świetlną
+ - Przećwiczyć scenę do filmu
+ - Usprawnić technologię rozpraszania widma
+
+
+ );
+}
+```
+
+```css
+img { height: 90px }
+```
+
+
+
+
+
+Teraz już wiesz, po co istnieje składnia JSX i jak jej używać w komponentach:
+
+* Komponenty reactowe grupują w sobie logikę renderowania ze strukturą elementów, ponieważ obie rzeczy są ze sobą powiązane.
+* JSX jest podobny do HTML-u, z kilkoma różnicami. Jeśli zajdzie potrzeba, możesz skorzystać z [konwertera](https://transform.tools/html-to-jsx).
+* Błędy wyświetlane na ekranie czy w konsoli przeglądarki zwykle poprowadzą cię do rozwiązania problemów z kodem.
+
+
+
+
+
+
+
+### Przepisz kod HTML na JSX {/*convert-some-html-to-jsx*/}
+
+Pewien kod HTML został wklejony do komponentu, jednak nie jest zgodny ze składnią JSX. Napraw go:
+
+
+
+```js
+export default function Bio() {
+ return (
+
+
Witaj na mojej stronie!
+
+
+ Wrzucam na nią swoje przemyślenia.
+
+ I zdjęcia naukowców!
+
+ );
+}
+```
+
+```css
+.intro {
+ background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
+ background-clip: text;
+ color: transparent;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.summary {
+ padding: 20px;
+ border: 10px solid gold;
+}
+```
+
+
+
+Od ciebie zależy, czy poprawisz go ręcznie, czy przepuścisz przez konwerter!
+
+
+
+
+
+```js
+export default function Bio() {
+ return (
+
+
+
Witaj na mojej stronie!
+
+
+ Wrzucam na nią swoje przemyślenia.
+
+ I zdjęcia of naukowców!
+
+
\ No newline at end of file