Razvoj / React

Konvertor HTML-a u JSX

Pretvorite HTML u JSX za React: class u className, umetnute stilove u objekte, zatvorene prazne elemente, escape-ovane viticaste zagrade i komentare, uz opcionalno umotavanje u komponentu.

Konvertor HTML-a u JSX: HTML se raščlanjuje na elemente, pa se atributi preimenuju za React (class, for, tabindex, readonly, maxlength i drugi), stilovi postaju objekti sa camelCase ključevima, a prazni elementi kao što su <br> i <img> dobijaju završne oznake. Viticaste zagrade i znakovi manje i veće u tekstu se escape-uju, komentari postaju {/* */}, a vrednosti obrazaca postaju defaultValue i defaultChecked, kako bi polja ostala izmenjiva. Izlaz sa test stranica kompajlira se kao TSX. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija: Alatke za programere
Pokretanja: U vašem pregledaču
Trošak: Besplatno · bez registracije
Dostupnost: Spremno za upotrebu

HTML u JSXLokalna obrada

U potpunosti radi u vašem pregledaču

HTML

<div class="card" style="margin-top: 8px; background-color: #fff">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required>
  <button onclick="send()" tabindex="0">Send</button>
  <!-- footer -->
  <p>Price: {price} &gt; 0</p>
</div>

Umotaj u komponentu

Uklonjeno je onclick="send()" sa <button>: napišite ga kao funkciju, na primer onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Atributi se preimenuju za React (class u className, for u htmlFor, tabindex u tabIndex), stilovi postaju objekti, prazni i void elementi se zatvaraju, komentari postaju {/* */}, a vrednosti obrazaca postaju defaultValue kako bi polja ostala izmenjiva.

Nakon konvertovanja

Pretvorite ponovljenu oznaku u komponente koje primaju props, zamenite unapred upisan tekst promenljivama u vitičastim zagradama i premestite umetnute stilove u CSS klase ili svoj sistem stilizovanja, jer se objekti stilova ponovo prave pri svakom renderovanju.

Za SVG ikone, alat SVG u JSX pravi komponentu koja prosleđuje props; da biste najpre uklonili komentare i višak razmaka, koristite HTML minifikator.

Razlike koje često zbunjuju

JSX zahteva jedan korenski element, pa se nekoliko elemenata obavija fragmentom (<>…</>). Svaki element mora biti zatvoren, nazivi atributa pišu se camelCase stilom, a tekst koji sadrži { ili } mora se zapisati kao {"{"}, što konverter radi umesto vas.

Kako se koristi

Nalepite HTML, od jednog elementa do cele sekcije stranice.
Po želji umotajte rezultat u imenovanu komponentu.
Kopirajte JSX i prepravite sve umetnute rukovaoce događajima navedene u upozorenjima.

Privatnost i ograničenja

HTML se konvertuje u vašem pregledaču i nikada se ne otprema.

Srodne alatke

Često postavljana pitanja

Zašto se onclick atributi uklanjaju?

U HTML-u su to stringovi koda, dok u React-u moraju biti funkcije. Konvertor navodi svaki od njih kako biste mogli da ga prepravite, na primer onclick="save()" u onClick={save}.

Zašto value postaje defaultValue?

Atribut value u React-u čini polje kontrolisanim, pa u njega ne može da se unosi tekst bez onChange rukovaoca; defaultValue postavlja početni tekst i ostavlja polje izmenjivim.

Da li podržava SVG?

Da: SVG atributi kao što je stroke-width postaju strokeWidth. Za ceo SVG fajl pretvoren u komponentu, alat SVG u JSX dodaje props.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban