HTML:stä JSX:ään -muunnin
HTML → JSX// JSX output appears here
Miksi muuntaa HTML JSX:ksi?
Kun siirtät olemassa olevia HTML-malleja Reactiin, sinun on manuaalisesti muunnettava class className:ksi, for htmlFor:ksi ja inline-tyylit merkkijonoista JavaScript-objekteiksi. Työkalu automatisoi nämä muunnokset välittömästi ja antaa sinun keskittyä komponenttien logiikkaan.
Attribuuttien muunto
class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength ja muut
Inline-tyyliobjekti
Muuntaa style="color:red;" style={{color:'red'}}-muotoon — React:n JS-objektimerkintä
Self-closing-tagit
Lisää sulkevan vinoviivan tyhjiin elementteihin: <br> → <br />, <input> → <input />
HTML:n muuntaminen JSX:ksi 3 vaiheessa
Liitä HTML
Liitä HTML-malli, Figma-vienti tai HTML-koodinpätkä vasempaan paneeliin
Automaattinen muunto
Muunnin muuntaa kaikki attribuutit, tyylit ja tyhjät elementit JSX-syntaksiksi välittömästi
Kopioi JSX
Kopioi muunnettu JSX ja liitä se React-komponenttisi render/return-lohkoon
HTML:stä JSX:ään -muuntimen käyttötapaukset
Siirtyminen Reactiin
Siirrä olemassa olevia HTML-sivuja tai -malleja React-komponenteiksi ilman manuaalista attribuuttien muuntamista
Bootstrap Reactissa
Muunna Bootstrap HTML -komponentit JSX:ksi käytettäväksi react-bootstrap-kirjaston kanssa
Sähköpostipohjat
Muunna HTML-sähköpostipohjat JSX:ksi renderöintiä varten React Emaililla
CMS:stä Reactiin
Muunna WordPress:n tai perinteisten CMS:ien HTML-pohjat React-komponenttirakenteiksi
Vinkkejä HTML:stä JSX:ään -muuntamiseen
✓ class → className on tärkeä
class on JavaScriptin varattu avainsana. Reactissa className on käytettävä CSS-luokkien kanssa.
✓ label:n for → htmlFor
Attribuutti for <label>-elementissä muuttuu htmlFor:ksi JSX:ssä. Sen unohtaminen rikkoo saavutettavuuden.
✓ Päivitä tapahtumankäsittelijät muunnoksen jälkeen
HTML-attribuutti onclick='...' ei muunnu automaattisesti JSX:ssä. Korvaa inline-tapahtumankäsittelijät manuaalisesti React:n onClick={handler}-mallilla.
✓ HTML-kommentit muuttuvat JSX-kommenteiksi
<!-- kommentti --> muuntuu {/* kommentti */}-muotoon JSX:ssä.
❓ Usein kysytyt kysymykset
Miksi React käyttää className:iä class:n sijaan?
class on JavaScriptin varattu avainsana (käytetään ES6-luokkiin). Koska JSX on JavaScriptiä, class aiheuttaa syntaksikonfliktin. React valitsi className:in välttääkseen epäselvyydet.
Käsitteleekö työkalu React-tapahtumankäsittelijöitä?
Ei — HTML-tapahtumankäsittelijöitä onclick, onsubmit jne. ei muunneta automaattisesti React:n onClick, onSubmit-muotoon. Manuaalinen päivitys on tarpeen.
Mikä on ero HTML:n ja JSX:n välillä?
JSX on JavaScriptin syntaktinen laajennus, joka muistuttaa HTML:ää ja käännetään React.createElement()-kutsuiksi. Tärkeimmät erot: kaikki attribuutit camelCase-muodossa, class→className, for→htmlFor, tyhjät elementit vaativat self-closing, lausekkeet käyttävät {} merkintöjä.
Miksi tyhjät elementit vaativat self-closingin JSX:ssä?
JSX jäsennetään Babelilla XML:n kaltaisena syntaksina ja vaatii kaikkien elementtien asianmukaista sulkemista. Tyhjillä elementeillä kuten <br>, <img>, <input> ei ole lapsia ja ne vaativat /> self-closingin.