Które atrybuty są przemianowywane?

class na className, for na htmlFor, tabindex na tabIndex, readonly na readOnly, colspan na colSpan oraz camelCase dla wszystkich standardowych właściwości DOM i handlerów on*.

Jak konwertowany jest łańcuch style?

Dzielony jest po średnikach, każda właściwość CSS zostaje w camelCase, a całość trafia jako obiekt JSX w podwójnych nawiasach klamrowych. Prefiksy dostawców i właściwości niestandardowe są zachowane.

Czy data-* i aria-* się zmieniają?

Nie. JSX akceptuje je w formie kebab, więc konwerter ich nie rusza. Tylko standardowe atrybuty DOM trafiają na camelCase.

Czy komentarze HTML są konwertowane?

Tak. zamienia się w {/* komentarz */}, dzięki czemu intencja zostaje zachowana, a parser JSX nie pęka.

A skrypty i inline handlery?

Konwerter zmienia onclick na onClick i podobne handlery, ale ciało funkcji pozostaje łańcuchem. Zwykle przed wdrożeniem przepisujesz je jako prawdziwy callback Reacta.

Czy mój HTML jest gdzieś wysyłany?

Nie. Transformacja w całości pozostaje w tej karcie przeglądarki. Toova nie widzi tego, co wklejasz — żadnej analityki, żadnych logów, nic.

HTML do JSX — class, for, style, handlery

Konwerter HTML → JSX

Prywatne z założenia — działa w całości w Państwa przeglądarce

Wklej HTML po lewej, skopiuj JSX gotowy dla Reacta po prawej. Konwerter zamienia class na className, for na htmlFor, łańcuchy inline style na obiekty camelCase oraz samozamyka void elementy w stylu img i input, aby JSX mógł je sparsować.

Mapowanie atrybutów i zdarzeń

React korzysta z nazw właściwości DOM zamiast atrybutów HTML: tabindex zmienia się w tabIndex, readonly w readOnly, colspan w colSpan. Handlery inline z onclick przechodzą na onClick, z onmouseover na onMouseOver i tak dalej dla każdego standardowego handlera. Dwa charakterystyczne dla HTML przemianowania to class → className i for → htmlFor, ponieważ oba są słowami zarezerwowanymi JavaScriptu.

Łańcuchy style do obiektów camelCase

JSX wymaga, aby inline style był literałem obiektu, a każda właściwość CSS była w camelCase. Łańcuch padding: 1rem; background-color: #fff zamienia się w style={{ padding: '1rem', backgroundColor: '#fff' }}. Konwerter obsługuje kebab-case na camelCase, prefiksy dostawców (-webkit-, -moz-, -ms-) oraz właściwości niestandardowe CSS (--brand-color zostaje, w razie potrzeby z kluczem w cudzysłowie).

Prywatność i przypadki brzegowe

Transformacja działa w pojedynczej funkcji JavaScript w tej karcie. Twój HTML nie opuszcza przeglądarki, co ma znaczenie, gdy przenosisz znaczniki z danymi klienta. 14 void elementów (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) jest samozamykających, aby JSX je zaakceptował. Atrybuty data- i aria- pozostają nietknięte, bo w JSX są już poprawne.

Najczęściej zadawane pytania

Które atrybuty są przemianowywane?: class na className, for na htmlFor, tabindex na tabIndex, readonly na readOnly, colspan na colSpan oraz camelCase dla wszystkich standardowych właściwości DOM i handlerów on*.
Jak konwertowany jest łańcuch style?: Dzielony jest po średnikach, każda właściwość CSS zostaje w camelCase, a całość trafia jako obiekt JSX w podwójnych nawiasach klamrowych. Prefiksy dostawców i właściwości niestandardowe są zachowane.
Czy data-* i aria-* się zmieniają?: Nie. JSX akceptuje je w formie kebab, więc konwerter ich nie rusza. Tylko standardowe atrybuty DOM trafiają na camelCase.
Czy komentarze HTML są konwertowane?: Tak.  zamienia się w {/* komentarz */}, dzięki czemu intencja zostaje zachowana, a parser JSX nie pęka.
A skrypty i inline handlery?: Konwerter zmienia onclick na onClick i podobne handlery, ale ciało funkcji pozostaje łańcuchem. Zwykle przed wdrożeniem przepisujesz je jako prawdziwy callback Reacta.
Czy mój HTML jest gdzieś wysyłany?: Nie. Transformacja w całości pozostaje w tej karcie przeglądarki. Toova nie widzi tego, co wklejasz — żadnej analityki, żadnych logów, nic.