Konwerter HTML do JSX
HTML → JSX// JSX output appears here
Dlaczego konwertować HTML do JSX?
Podczas migrowania istniejących szablonów HTML do React lub kopiowania makiet do komponentów musisz ręcznie konwertować class na className, for na htmlFor i style inline z ciągów na obiekty JavaScript. Nasz konwerter automatyzuje wszystkie te transformacje natychmiast, obsługując całe mapowanie atrybutów HTML→JSX, dzięki czemu możesz skupić się na logice komponentu zamiast konwersji składni.
Konwersja atrybutów
Konwertuje class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength i wiele innych
Inline obiekty stylów
Przekształca style="color: red;" na style={{color: 'red'}} — prawidłowa notacja obiektów JS dla React
Tagi samozamykające
Dodaje ukośnik zamykający do elementów void: <br> staje się <br />, <input> staje się <input />
Jak konwertować HTML do JSX
Wklej HTML
Wklej szablon HTML, eksport z Figmy lub dowolny fragment HTML w lewym panelu
Automatyczna konwersja
Konwerter natychmiastowo transformuje wszystkie atrybuty, style i elementy void do składni JSX
Skopiuj JSX
Skopiuj przekonwertowany JSX i wklej go w bloku render/return komponentu React
Przypadki użycia konwertera HTML do JSX
Migracja do React
Migruj istniejące strony lub szablony HTML do komponentów React bez ręcznej konwersji atrybutów
Bootstrap do React
Konwertuj komponenty HTML Bootstrap do JSX do użytku z react-bootstrap lub styled components
Szablony e-mail
Konwertuj szablony HTML e-mail do JSX do renderowania za pomocą React Email lub podobnych bibliotek
CMS do React
Konwertuj szablony HTML WordPressa lub tradycyjnych CMS do struktury komponentów React
Wskazówki dotyczące HTML do JSX
✓ class → className jest kluczowe
class jest zarezerwowanym słowem kluczowym JavaScript. React wymaga className dla klas CSS. Zapomnienie o tym powoduje ostrzeżenia React i może prowadzić do nieoczekiwanego zachowania.
✓ for → htmlFor na labelach
Atrybut for na <label> staje się htmlFor w JSX. Zapomnienie o tym psuje dostępność — czytniki ekranu polegają na skojarzeniu etykieta-pole.
✓ Aktualizuj handlery zdarzeń po konwersji
HTML onclick='...' nie jest automatycznie konwertowany na JSX. Ręcznie zastąp handlery zdarzeń inline wzorcem React onClick={handler} po konwersji.
✓ Komentarze HTML stają się komentarzami JSX
<!-- komentarz --> jest konwertowany na {/* komentarz */} w JSX. JSX nie obsługuje składni komentarzy HTML wewnątrz znaczników JSX.
❓ Często zadawane pytania
Dlaczego React używa className zamiast class?
class jest zarezerwowanym słowem kluczowym w JavaScript (używanym dla klas ES6). Ponieważ JSX to JavaScript, użycie class spowodowałoby konflikt składni. React wybrał className, aby uniknąć niejednoznaczności ze słowem kluczowym class JavaScript.
Czy to narzędzie obsługuje handlery zdarzeń React?
Nie — handlery zdarzeń HTML jak onclick i onsubmit nie są automatycznie konwertowane na React's onClick i onSubmit, ponieważ ich wartości (ciągi JavaScript w HTML) muszą odwoływać się do funkcji/stanu komponentów React. Muszą być aktualizowane ręcznie.
Jaka jest różnica między HTML a JSX?
JSX to rozszerzenie składni JavaScript wyglądające jak HTML, ale kompilowane do wywołań React.createElement(). Kluczowe różnice: wszystkie atrybuty camelCase, class to className, for to htmlFor, elementy void muszą być samozamykające, a wyrażenia używają {} zamiast ciągów.
Dlaczego elementy void muszą być samozamykające w JSX?
JSX jest parsowany przez Babel jako składnia podobna do XML, która wymaga poprawnego zamknięcia wszystkich elementów. Elementy void jak <br>, <img>, <input> nie mają dzieci, więc muszą być samozamykające /> zamiast pozostawiać niezamknięty tag.