Convertor HTML în JSX
Convertor gratuit de HTML în JSX online. Lipește codul HTML și primești instant JSX curat pentru React: className, htmlFor, stiluri camelCase, etichete autoînchise și comentarii sigure, totul în browser.
Ce face convertorul HTML în JSX?
Transformă markup HTML obișnuit în JSX pe care React îl poate reda. Lipește HTML în zona de intrare, iar JSX-ul echivalent apare în panoul de ieșire, actualizat în timp ce scrii, cu o scurtă întârziere.
Ce atribute sunt redenumite?
class devine className, for devine htmlFor, tabindex devine tabIndex, iar alte atribute cu cratimă precum maxlength, colspan sau stroke-width primesc numele camelCase din React. Atributele data-* și aria-* rămân neschimbate.
Cum este convertit atributul style?
Un șir CSS precum style="background-color: red; font-size: 12px" devine un obiect JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}, fiecare proprietate CSS fiind scrisă în camelCase, iar valoarea între ghilimele.
Cum sunt tratate elementele void?
Elementele care nu pot avea copii — img, br, input, hr, meta, link și celelalte — sunt normalizate la sintaxă autoînchisă: <img> devine <img />, exact cum cere JSX. Div-urile și span-urile goale se închid la fel.
Ce se întâmplă cu comentariile HTML?
Devin comentarii JSX: <!-- notă --> devine {/* notă */}. Orice secvență care ar închide comentariul prea devreme este neutralizată, astfel încât codul generat compilează întotdeauna.
Cum sunt tratate entitățile și caracterele speciale?
Entitățile precum & sau © sunt decodate în caractere reale, apoi acoladele și parantezele unghiulare sunt re-escapate în formă sigură pentru JSX, deci textul cu { } sau < se afișează corect fără a rupe componenta.
Ce face opțiunea componentă funcție?
Învăluie markupul convertit într-un șablon gata de folosit: function Component() { return ( ...JSX-ul tău... ) } în loc de JSX brut. Activeaz-o când vrei să lipești fragmentul direct într-un fișier React.
HTML-ul meu este trimis undeva?
Nu. Analiza rulează integral în browserul tău cu DOMParserul integrat. Nimic nu este trimis către server, deci poți converti în siguranță markup privat, iar instrumentul funcționează și offline.
Cum se folosește Convertor HTML în JSX
Convertește HTML obișnuit în React JSX gata de folosit fără să părăsești browserul. Totul este analizat local cu DOMParser-ul integrat — marcajul tău nu este niciodată trimis.
- Lipește HTML-ul tău în editorul din stânga; rezultatul JSX apare în dreapta și se actualizează pe măsură ce scrii (debounce de 300 ms).
- Alege lățimea indentării în "Indentare" — 2 sau 4 spații pe nivel de imbricare.
- Pornește "Componentă funcție" ca să învelești rezultatul în function Component() { return ( ... ) }, gata de lipit într-un fișier React.
- Folosește Copiază ca să iei rezultatul, Exemplu ca să încarci un eșantion, sau Golește ca să începi de la capăt.
class, for și tabindex devin className, htmlFor și tabIndex, șirurile style devin obiecte camelCase, iar elementele goale precum img sau br sunt emise auto-închise — exact ce așteaptă JSX.
Instrumente conexe
- Frumusețare HTML Formatați și frumusețați codul HTML instantaneu. Convertiți HTML minificat în cod curat și lizibil. Instrument online gratuit, fără înregistrare.
- Cod în Imagine Convertiți fragmente de cod în imagini partajabile cu evidențiere sintaxă, teme personalizate și decorațiuni fereastră. 100% confidențialitate, totul în browser.
- Verificare Hash Calculați și verificați hash-uri MD5, SHA-1, SHA-256, SHA-512 local
- Calculator Chmod Calculator chmod online gratuit pentru vizualizarea și calcularea permisiunilor fișierelor Linux cu casete de selectare. Conversie instantanee între notația numerică (755, 644) și simbolică (rwxr-xr-x). Suportă permisiuni speciale precum setuid, setgid, sticky bit.
- Tabel ASCII Referință completă de codificare a caracterelor ASCII cu coduri zecimale, hexazecimale, octale, binare, entități HTML și descrieri de caractere. Căutare și filtrare instantanee.
- Vizualizator Hex Vizualizați conținutul fișierelor în format hex dump cu căutare, navigare offset și derulare virtuală
- Căutare Tipuri MIME Găsiți instant tipuri MIME după extensia fișierului sau căutați extensii după tip MIME. Referință online gratuită cu peste 1000 de intrări.
- Verificare rezoluție ecran Detectează rezoluția ecranului, dimensiunea viewport, DPI și adâncimea culorii în timp real.