JSX naar JavaScript: van React-code naar gewone JS
JSX naar JavaScript betekent dat de tagsyntax van React-componenten gewone JavaScript wordt die een browser kan uitvoeren. De tool gebruikt Babel, dus de uitvoer komt overeen met wat een Babel-buildstap schrijft. Je kiest tussen de klassieke React.createElement-aanroepen en de automatische jsx()-runtime en kopieert het resultaat. Je code wordt in je browser gecompileerd, nooit geüpload en nooit uitgevoerd.
JSX naar JS online: zo werkt het
Je hebt niets te installeren en geen account nodig:
- Plak je code in het veld JSX-code. Zolang het leeg is, staat er „Plak hier je JSX…”. De limiet is 1.000.000 tekens.
- Wacht even. De tool compileert terwijl je typt of plakt, ongeveer een derde seconde na de laatste wijziging, dus er is geen knop om op te drukken. De eerste keer wordt Babel eenmalig gedownload, dat duurt iets langer.
- Lees het resultaat onder de kop JavaScript. Het staat er als alleen-lezen code met kleurmarkering.
- Kies Kopiëren naar klembord. De knop verandert in Gekopieerd.
- Wil je veranderen hoe de JSX wordt gecompileerd, gebruik dan de tandwielknop ernaast (JSX-runtime-instellingen). Die opent de groep JSX-runtime met twee keuzes, Klassiek en Automatisch. Na een wijziging wordt de code opnieuw gecompileerd.
Is de tekst geen geldige JSX, dan zie je een syntaxfoutmelding met regel en kolom, de foute regel en een ^ onder de plek, en geen uitvoer tot je de fout hebt verholpen. Staat er helemaal geen JSX in de code, dan krijg je hem terug als gewone JavaScript, met de melding „Er is geen JSX gevonden in deze code, dus hij komt terug als gewone JavaScript.”
JSX React createElement: klassiek of automatisch
Bij Klassiek, de standaardkeuze, wordt elk element een aanroep van React.createElement(type, props, ...children) en een fragment React.Fragment. Er wordt geen import toegevoegd, dus React moet in scope zijn. Kies dit als je project of tutorial React nog in elk bestand importeert, of als je op een oudere opzet mikt.
Bij Automatisch wordt JSX omgezet in aanroepen van jsx() of jsxs(), met de kinderen in de props, en heet een fragment _Fragment. De import uit react/jsx-runtime wordt toegevoegd, alleen met de namen die de code gebruikt. Daarvoor heb je React 17 of nieuwer nodig, en je krijgt wat een actuele React-toolchain zou maken.
Wat de JSX converter behoudt en wat verandert
- Imports en exports blijven zoals je ze schreef.
- Opmerkingen blijven op hun plek staan.
- Gewone JavaScript rond de JSX blijft ongemoeid, op de opmaak van Babel na.
- De opmaak is die van Babel, niet van Prettier: je aanhalingstekens en regeleinden in de JSX blijven niet behouden. Wil je het resultaat opruimen, haal het dan door Code Formatter.
- Voor elke elementaanroep komt een
/*#__PURE__*/-annotatie. Die vertelt bundlers dat de aanroep geen neveneffecten heeft.
Wat de JSX naar JS converter niet doet: TSX, TypeScript en Flow
Hij compileert alleen JSX. TypeScript leest hij niet, dus TSX met typeannotaties geeft een syntaxfout, en Flow wordt ook niet ondersteund. Hij voert je code niet uit, controleert niet of je componenten werken en bundelt geen bestanden.
Wil je de andere kant op, van gewone JavaScript naar getypte code, gebruik dan JS naar TS converter. Voor het lezen van geminimaliseerde of versluierde scripts is er JS-deobfuscator.
Babel JSX online, zonder je browser te verlaten
Babel wordt één keer geladen, de eerste keer dat je plakt, en daarna gebeurt het compileren in een Web Worker op je eigen apparaat. Je component wordt nergens heen gestuurd en nooit uitgevoerd, dus je kunt ook een bestand met neveneffecten veilig plakken.
Veelgestelde vragen
Hoe krijg ik JavaScript uit mijn JSX, online?
Plak je JSX in het veld „JSX-code”. Ongeveer een derde seconde later verschijnt de gecompileerde JavaScript onder de kop „JavaScript”. Er is geen knop om te converteren, met „Kopiëren naar klembord” neem je het resultaat mee. Babel wordt de eerste keer dat je plakt eenmalig gedownload, dus die eerste keer duurt iets langer.
Maakt Babel van JSX gewone JavaScript?
Ja. De React-preset van Babel compileert JSX naar JavaScript, en dat is wat deze pagina in je browser uitvoert, dus de uitvoer komt overeen met een Babel-buildstap. Buildtools doen hetzelfde automatisch als je een project bouwt. Gebruik deze pagina als je het resultaat van één component of snippet wilt zien of kopiëren.
Wat is het verschil tussen JS en JSX?
JSX is JavaScript met een op XML lijkende syntaxis om een interface te beschrijven, bijvoorbeeld een button-tag met een onClick-handler. Browsers kunnen dat niet uitvoeren, dus een compiler schrijft elke tag om tot een gewone functieaanroep. Het resultaat is gewone JavaScript. De extensie .jsx is alleen een naamconventie voor bestanden die JSX bevatten.
Wat is het verschil tussen de klassieke en de automatische runtime?
Klassiek maakt van JSX aanroepen van React.createElement, dus React moet in elk bestand met JSX in scope zijn. Automatisch maakt er aanroepen van jsx() en jsxs() van en voegt zelf de import uit react/jsx-runtime toe, zodat je React niet hoeft te importeren om JSX te schrijven. Automatisch vereist React 17 of nieuwer. De standaard is hier „Klassiek”.
Hoe krijg ik React.createElement uit mijn JSX?
Laat de JSX-runtime op „Klassiek” staan, dat is de standaard. Elk element wordt een aanroep van React.createElement: eerst de tagnaam, dan het props-object (null als er geen zijn), dan de kinderen. Een fragment wordt React.Fragment.
Waarom gebruikt mijn uitvoer React maar importeert hij het nooit?
De klassieke uitvoer roept React.createElement en React.Fragment aan zonder een import toe te voegen, omdat hij ervan uitgaat dat React al in scope is. Begint je bestand niet met import React from 'react', voeg die regel dan toe of zet de JSX-runtime op „Automatisch”, die de benodigde import zelf schrijft.
Waarom staan er /*#__PURE__*/-opmerkingen in de uitvoer?
Babel zet /*#__PURE__*/ voor elke elementaanroep. Dat vertelt minifiers en bundlers dat de aanroep geen neveneffecten heeft, zodat een element dat nooit wordt gebruikt uit de uiteindelijke bundel kan vallen. Je mag de opmerkingen laten staan of verwijderen, aan wat de code doet veranderen ze niets.
Kan hij TSX of TypeScript aan?
Nee. Hij verwacht JSX in gewone JavaScript, dus een typeannotatie zoals props: Props is een syntaxfout. Haal eerst de types weg of compileer TypeScript met de TypeScript-compiler. Flow-syntaxis wordt ook niet ondersteund.
Wordt mijn code geüpload of uitgevoerd?
Nee. Babel compileert de code in je browser, in een Web Worker, en er wordt niets naar een server gestuurd. De code wordt ook nooit uitgevoerd, dus je kunt een component met neveneffecten veilig plakken. Het enige wat wordt gedownload is Babel zelf, één keer.
Aanbevolen
-
Magnetisch bureauwhiteboard met stiftenSchets de componentenboom en zie welke createElement-aanroep in welke zit.
-
KYY 15,6" draagbare monitorHoud de tutorial of docs op een tweede scherm terwijl je je JSX met de uitvoer vergelijkt.
-
Quntis monitorlampVerlicht je bureau in plaats van je scherm tijdens late debugsessies.
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
