Wejscie HTML

Wyjscie JSX

Co to jest konwerter HTML na JSX?

Konwerter HTML na JSX przeksztalca standardowy znacznik HTML w poprawna skladnie React JSX. W JSX class staje sie className, a for staje sie htmlFor.

Wklejanie HTML do komponentow React powoduje bledy skladni. To narzedzie automatyzuje wszystkie wymagane transformacje.

Jak konwertowac HTML na JSX

Wykonaj te trzy kroki, aby przekonwertowac HTML na poprawny React JSX.

1

Wklej lub przeslij HTML

Wklej HTML do lewego panelu lub kliknij Przeslij.

2

Wyswietl wyjscie JSX

class jest zmieniane na className, a puste elementy staja sie samozamykajace.

3

Kopiuj lub pobierz

Kliknij Kopiuj lub Pobierz, aby zapisac jako .jsx.

Kiedy uzywac tego konwertera

Migracja HTML do React

Konwertuj istniejace szablony HTML na JSX do projektow React.

Korzystanie z makiet projektanta

Integruj makiety HTML od projektantow z komponentami React.

Nauka JSX

Zobacz odpowiednik JSX dla dowolnego HTML, ktory znasz.

Konwersja szablonow e-mail

Konwertuj szablony HTML e-mail dla bibliotek takich jak React Email.

Czesto zadawane pytania

Dlaczego class staje sie className?

W JSX atrybuty mapuja sie na wlasciwosci DOM JavaScript. Wlasciwosc DOM dla atrybutu class to className.

Jakie inne atrybuty sa zmieniane?

forhtmlFor, tabindextabIndex, onclickonClick.

Ktore puste elementy sa samozamykajace?

Wszystkie puste elementy HTML: <br />, <img />, <input />, itp.

Czy obsluguje style inline?

style="color:red" jest konwertowany na style={{ color: "red" }}.

Czy moj HTML jest przechowywany?

Nie. Wszystko dzieje sie w Twojej przegladarce.

Powiazane narzedzia

Wiecej narzedzi do pracy z HTML: