Convertor HTML în JSX
HTML → JSX// JSX output appears here
De ce să convertiți HTML în JSX?
Când migrați șabloane HTML existente la React, trebuie să convertiți manual class în className, for în htmlFor și stilurile inline din șiruri la obiecte JavaScript. Instrumentul automatizează aceste conversii instant și vă permite să vă concentrați pe logica componentelor.
Conversia atributelor
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength și altele
Obiect stil inline
Convertește style="color:red;" în style={{color:'red'}} — notația obiect JS a React
Tag-uri self-closing
Adaugă slash de închidere la elementele void: <br> → <br />, <input> → <input />
Convertiți HTML în JSX în 3 pași
Inserați HTML
Inserați șablonul HTML, exportul din Figma sau fragmentul de cod HTML în panoul stâng
Conversie automată
Convertorul transformă instantaneu toate atributele, stilurile și elementele void la sintaxa JSX
Copiați JSX
Copiați JSX-ul convertit și lipiți-l în blocul render/return al componentei React
Cazuri de utilizare pentru convertorul HTML în JSX
Migrare la React
Migrați paginile sau șabloanele HTML existente la componente React fără conversie manuală a atributelor
Bootstrap în React
Convertiți componentele Bootstrap HTML la JSX pentru utilizare cu react-bootstrap
Șabloane email
Convertiți șabloanele email HTML la JSX pentru randare cu React Email
Din CMS la React
Convertiți șabloanele HTML WordPress sau CMS tradițional la structura componentelor React
Sfaturi pentru conversia HTML în JSX
✓ class → className este important
class este un cuvânt cheie JavaScript rezervat. În React, className trebuie folosit pentru clasele CSS.
✓ for în label → htmlFor
Atributul for pe <label> devine htmlFor în JSX. Uitarea acestuia strică accesibilitatea.
✓ Actualizați handler-ele de evenimente după conversie
Atributul HTML onclick='...' nu se convertește automat în JSX. Înlocuiți manual handler-ele inline cu modelul onClick={handler} al React.
✓ Comentariile HTML devin comentarii JSX
<!-- comentariu --> este convertit la {/* comentariu */} în JSX.
❓ Întrebări frecvente
De ce React folosește className în loc de class?
class este un cuvânt cheie JavaScript rezervat (folosit pentru clasele ES6). Deoarece JSX este JavaScript, class creează un conflict de sintaxă. React a ales className pentru a evita ambiguitatea.
Instrumentul gestionează handler-ele de evenimente React?
Nu — handler-ele HTML onclick, onsubmit etc. nu se convertesc automat la onClick, onSubmit al React. Este necesară actualizarea manuală.
Care este diferența dintre HTML și JSX?
JSX este o extensie de sintaxă JavaScript similară HTML compilată în apeluri React.createElement(). Diferențe cheie: toate atributele în camelCase, class→className, for→htmlFor, elementele void necesită self-closing, expresiile folosesc {} în loc de șiruri.
De ce elementele void necesită self-closing în JSX?
JSX este analizat de Babel ca sintaxă similară XML și necesită închiderea corectă a tuturor elementelor. Elementele void ca <br>, <img>, <input> nu au copii și necesită /> self-closing.