HTML–JSX-muunnin
Ilmainen HTML–JSX-muunnin verkossa. Liitä HTML ja saat heti siistin React-JSX:n: className, htmlFor, camelCase-tyylit, itsestään sulkeutuvat tagit ja turvalliset kommentit – kokonaan selaimessa.
Mitä HTML–JSX-muunnin tekee?
Se muuttaa tavallisen HTML-merkkauksen JSX:ksi, jonka React osaa renderöidä. Liitä HTML syötekenttään, ja vastaava JSX ilmestyy tulostuskenttään päivittyen kirjoittaessa lyhyellä viiveellä.
Mitkä attribuutit nimetään uudelleen?
class muuttuu muotoon className, for muotoon htmlFor ja tabindex muotoon tabIndex, ja muut väliviivaiset attribuutit kuten maxlength, colspan tai stroke-width saavat Reactin camelCase-nimet. data-* ja aria-* jäävät ennalleen.
Miten style-attribuutti muunnetaan?
CSS-merkkijono kuten style="background-color: red; font-size: 12px" muuttuu JavaScript-objektiksi: style={{backgroundColor:'red', fontSize:'12px'}}, jossa jokainen CSS-ominaisuus on camelCase-muodossa ja arvo lainausmerkeissä.
Miten void-elementit käsitellään?
Elementit, joilla ei voi olla lapsia — img, br, input, hr, meta, link ja muut — normalisoidaan itsestään sulkeutuvaan muotoon: <img> muuttuu muotoon <img />, aivan kuten JSX vaatii. Tyhjät div:t ja span:t sulkeutuvat samalla tavalla.
Mitä HTML-kommenteille tapahtuu?
Ne muuttuvat JSX-kommenteiksi: <!-- huomio --> muuttuu muotoon {/* huomio */}. Sekvenssit, jotka päättäisivät kommentin liian aikaisin, poistetaan käytöstä, joten tuotettu koodi kääntyy aina.
Miten entiteetit ja erikoismerkit käsitellään?
Entiteetit kuten & tai © dekoodataan oikeiksi merkeiksi, minkä jälkeen aaltosulkeet ja kulmasulkeet eskataan uudelleen JSX-turvallisessa muodossa, joten teksti, jossa on { } tai <, renderöityy oikein rikkomatta komponenttia.
Mitä funktiokomponentti-valitsin tekee?
Se käärii muunnetun merkkauksen valmiiseen mallipohjaan: function Component() { return ( ...sinun JSX... ) } pelkän JSX:n sijaan. Ota käyttöön, kun haluat liittää pätkän suoraan React-tiedostoon.
Ladataanko HTMLiani jonnekin?
Ei. Jäsennys tapahtuu kokonaan selaimessasi sisäänrakennetulla DOMParserilla. Mitään ei lähetetä palvelimelle, joten yksityisenkin merkintäkielen muuntaminen on turvallista, ja työkalu toimii myös ilman verkkoyhteyttä.
Näin käytät työkalua HTML–JSX-muunnin
Muunna tavallinen HTML heti käyttövalmiiksi React JSX -muotoon poistumatta selaimesta. Kaikki jäsennetään paikallisesti sisäänrakennetulla DOMParserilla — merkintäsi ei koskaan lähde palvelimelle.
- Liitä HTML:si vasempaan editoriin; JSX-tulos ilmestyy oikealle ja päivittyy kirjoittaessasi (300 ms viiveenpoisto).
- Valitse sisennysleveys kohdasta "Sisennys" — 2 tai 4 välilyöntiä per sisäkkäystaso.
- Kytke "Funktiokomponentti" päälle kääriäksesi tulosteen muotoon function Component() { return ( ... ) }, valmiina liitettäväksi React-tiedostoon.
- Käytä Kopioi tuloksen nappaamiseen, Esimerkki näytteen lataamiseen tai Tyhjennä aloittaaksesi alusta.
class, for ja tabindex muuttuvat muotoon className, htmlFor ja tabIndex, style-merkkijonot camelCase-objekteiksi ja tyhjät elementit kuten img tai br tulostuvat itsesulkeutuvinä — täsmälleen sen, mitä JSX odottaa.
Aiheeseen liittyvät työkalut
- HTML-kaunistaja Muotoile ja kaunista HTML-koodia välittömästi. Muunna minifioitu HTML puhtaaksi, luettavaksi koodiksi. Ilmainen online-työkalu, ei rekisteröitymistä.
- Koodi kuvaksi Muunna koodinpätkät jaettaviksi kuviksi syntaksikorostuksella, mukautetuilla teemoilla ja ikkunakoristeilla. 100% yksityisyys, kaikki selaimessasi.
- Tiivistetarkistus Laske ja vahvista MD5, SHA-1, SHA-256, SHA-512 tiedostotiivisteet paikallisesti
- Chmod-laskin Ilmainen online chmod-laskin Linux-tiedostooikeuksien visualisointiin ja laskentaan valintaruuduilla. Muunna heti numeerisen (755, 644) ja symbolisen merkintätavan (rwxr-xr-x) välillä. Tukee erikoisoikeuksia kuten setuid, setgid, sticky bit.
- ASCII-taulukko Täydellinen ASCII-merkkikoodausviite desimaali-, heksadesimaali-, oktaali-, binäärikoodeilla, HTML-entiteeteillä ja merkinkuvauksilla. Välitön haku ja suodatus.
- Hex-katselin Näytä tiedostojen sisältö hex-dump-muodossa haulla, siirtymällä ja virtuaalisella vierityksellä
- MIME-tyypin Haku Löydä MIME-tyypit heti tiedostotunnisteella tai hae tunnisteita MIME-tyypillä. Ilmainen verkkoviite yli 1000 merkinnällä.
- Näytön tarkistus Tunnistaa näytön resoluution, viewport-koon, DPI:n ja värisyvyyden reaaliajassa.