Konwerter HTML na JSX
Darmowy konwerter HTML na JSX online. Wklej kod HTML i natychmiast otrzymaj czysty JSX dla React: className, htmlFor, style camelCase, znaczniki samozamykające i bezpieczne komentarze, wszystko w przeglądarce.
Co robi konwerter HTML na JSX?
Zamienia zwykły kod HTML na JSX, który potrafi wyrenderować React. Wklej HTML w pole wejściowe, a odpowiadający mu JSX pojawi się w panelu wyjściowym, aktualizowany na bieżąco podczas pisania z krótkim opóźnieniem.
Które atrybuty są zmieniane?
class staje się className, for staje się htmlFor, tabindex staje się tabIndex, a inne atrybuty z myślnikami jak maxlength, colspan czy stroke-width otrzymują camelCase’owe nazwy Reacta. Atrybuty data-* i aria-* pozostają bez zmian.
Jak jest zamieniany atrybut style?
Łańcuch CSS taki jak style="background-color: red; font-size: 12px" staje się obiektem JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}, gdzie każda właściwość CSS zapisana jest camelCase’em, a wartość w cudzysłowie.
Jak traktowane są elementy puste (void)?
Elementy, które nie mogą mieć dzieci — img, br, input, hr, meta, link i inne — są normalizowane do składni samozamykającej: <img> staje się <img />, dokładnie tak, jak wymaga JSX. Puste divy i spany zamykane są tak samo.
Co dzieje się z komentarzami HTML?
Zamieniane są na komentarze JSX: <!-- nota --> staje się {/* nota */}. Każda sekwencja, która zakończyłaby komentarz przedwcześnie, jest neutralizowana, więc wygenerowany kod zawsze się kompiluje.
Jak traktowane są encje i znaki specjalne?
Encje takie jak & czy © są dekodowane do prawdziwych znaków, a następnie klamry i nawiasy ostre są ponownie escapowane w formie bezpiecznej dla JSX, więc tekst z { } lub < renderuje się poprawnie, nie psując komponentu.
Do czego służy opcja komponentu funkcyjnego?
Opakowuje przekonwertowany kod w gotowy szablon: function Component() { return ( ...twój JSX... ) } zamiast gołego JSX-a. Włącz ją, gdy chcesz wkleić fragment od razu do pliku Reacta.
Czy mój HTML jest gdzieś wysyłany?
Nie. Parsowanie odbywa się w całości w przeglądarce za pomocą wbudowanego DOMParsera. Nic nie trafia na serwer, więc można bezpiecznie konwertować prywatny kod, a narzędzie działa też offline.
Jak korzystać z Konwerter HTML na JSX
Konwertuj zwykły HTML na gotowy do użycia React JSX bez opuszczania przeglądarki. Wszystko jest parsowane lokalnie wbudowanym DOMParserem — Twoje znaczniki nigdy nie są wysyłane.
- Wklej swój HTML do lewego edytora; wynik JSX pojawia się po prawej i odświeża się podczas pisania (debounce 300 ms).
- Wybierz szerokość wcięcia w "Wcięcie" — 2 lub 4 spacje na poziom zagnieżdżenia.
- Włącz "Komponent funkcyjny", aby owinąć wyjście w function Component() { return ( ... ) }, gotowe do wklejenia do pliku React.
- Użyj Kopiuj, aby zabrać wynik, Przykład, aby wczytać próbkę, lub Wyczyść, by zacząć od nowa.
class, for i tabindex stają się className, htmlFor i tabIndex, ciągi style zmieniają się w obiekty camelCase, a elementy puste jak img lub br są wypisywane jako samozamykające — dokładnie to, czego oczekuje JSX.
Powiązane narzędzia
- Upiększacz HTML Formatuj i upiększaj kod HTML natychmiast. Konwertuj zminifikowany HTML na czysty, czytelny kod. Darmowe narzędzie online, bez rejestracji.
- Kod na Obraz Konwertuj fragmenty kodu na udostępniane obrazy z podświetleniem składni, niestandardowymi motywami i dekoracjami okna. 100% prywatność, wszystko w przeglądarce.
- Sprawdzanie Hash Obliczaj i weryfikuj hashe MD5, SHA-1, SHA-256, SHA-512 lokalnie
- Kalkulator Chmod Darmowy kalkulator chmod online do wizualizacji i obliczania uprawnień plików Linux za pomocą pól wyboru. Natychmiastowa konwersja między notacją liczbową (755, 644) a symboliczną (rwxr-xr-x). Obsługuje specjalne uprawnienia jak setuid, setgid, sticky bit.
- Tabela ASCII Kompletna referencja kodowania znaków ASCII z kodami dziesiętnymi, szesnastkowymi, ósemkowymi, binarnymi, encjami HTML i opisami znaków. Natychmiastowe wyszukiwanie i filtrowanie.
- Przeglądarka Hex Przeglądaj zawartość plików w formacie hex dump z wyszukiwaniem, nawigacją offsetu i wirtualnym przewijaniem
- Wyszukiwarka Typów MIME Błyskawicznie znajdź typy MIME po rozszerzeniu pliku lub wyszukaj rozszerzenia po typie MIME. Darmowa referencja online z ponad 1000 wpisami.
- Sprawdzanie rozdzielczości ekranu Wykrywa rozdzielczość ekranu, rozmiar viewport, DPI i głębię kolorów w czasie rzeczywistym.