HTML-input

JSX-output

Hvad er en HTML til JSX Konverter?

En HTML til JSX konverter omdanner standard HTML-markering til gyldig React JSX-syntaks. I JSX skal class blive til className og for til htmlFor.

At indsaette HTML direkte i React-komponenter forarsager syntaksfejl. Dette vaerktoj automatiserer alle nodvendige transformationer.

Sadan konverterer du HTML til JSX

Folg disse tre trin for at konvertere HTML til gyldig React JSX.

Indsaet eller upload HTML

Indsaet din HTML i venstre panel, eller klik pa Upload.

Se JSX-output

class omdoennes til className og tomme elementer bliver selvlukkende.

Kopier eller download

Klik pa Kopier eller Download for at gemme som .jsx.

Hvornaar man bruger denne konverter

Migrere HTML til React

Konverter eksisterende HTML-skabeloner til JSX til React-projekter.

Bruge designer-mockups

Integrer HTML-mockups fra designere i React-komponenter.

Laere JSX

Se JSX-aekvivalenten for HTML, du allerede kender.

Konvertere e-mailskabeloner

Konverter HTML-e-mailskabeloner til biblioteker som React Email.

Hyppige sporgsmal

Hvorfor bliver class til className?

I JSX mappes attributter til JavaScript DOM-egenskaber. DOM-egenskaben for class er className.

Hvilke andre attributter omdoennes?

for→htmlFor, tabindex→tabIndex, onclick→onClick.

Hvilke tomme elementer bliver selvlukkende?

Alle tomme HTML-elementer: <br />, <img />, <input />, osv.

Haandterer det inline-stilarter?

style="color:red" bliver style={{ color: "red" }}.

Gemmes min HTML?

Nej. Alt sker i din browser.

Relaterede vaerktojter

Flere vaerktojter til at arbejde med HTML: