JSX in JavaScript: dal codice React al JS semplice
Portare JSX in JavaScript significa trasformare la sintassi a tag dei componenti React in JavaScript che il browser sa eseguire. Lo strumento usa Babel, quindi il risultato corrisponde a quello di un passaggio di build con Babel. Scegli tra le chiamate classiche a React.createElement e il runtime automatico jsx(), poi copi il risultato. Il codice viene compilato nel browser, non viene mai caricato né eseguito.
JSX in JS online: come si fa
Non devi installare nulla né creare un account:
- Incolla il tuo codice nel campo Codice JSX. Finché è vuoto, mostra «Incolla qui il JSX…». Il limite è di 1.000.000 di caratteri.
- Attendi un istante. Lo strumento compila mentre scrivi o incolli, circa un terzo di secondo dopo l'ultima modifica, quindi non c'è nessun pulsante da premere. La prima volta Babel viene scaricato una sola volta e ci vuole un po' più di tempo.
- Leggi il risultato sotto il titolo JavaScript. Appare come codice evidenziato di sola lettura.
- Scegli Copia negli appunti. Il pulsante cambia in Copiato.
- Per cambiare il modo in cui il JSX viene compilato, usa il pulsante a forma di ingranaggio accanto (Impostazioni del runtime JSX). Apre il gruppo Runtime JSX con due opzioni, Classico e Automatico. Dopo il cambio, il codice viene compilato di nuovo.
Se il testo non è JSX valido, compare un messaggio di errore di sintassi con riga e colonna, la riga incriminata e un ^ sotto il punto esatto, e non c'è nessun risultato finché non correggi l'errore. Se il codice non contiene affatto JSX, ti viene restituito com'è come JavaScript semplice, con l'avviso «In questo codice non c'è JSX, quindi torna indietro come JavaScript semplice.»
JSX React createElement: runtime classico o automatico
Con Classico, l'opzione predefinita, ogni elemento diventa una chiamata a React.createElement(type, props, ...children) e il frammento diventa React.Fragment. Non viene aggiunto alcun import, quindi React deve essere nello scope. Scegli questa opzione se il tuo progetto o tutorial importa ancora React in ogni file, oppure se punti a una configurazione più vecchia.
Con Automatico, il JSX diventa chiamate a jsx() o jsxs(), con i figli dentro le props, e il frammento si chiama _Fragment. Viene aggiunto l'import da react/jsx-runtime, solo con i nomi che il codice usa. Richiede React 17 o successivo e dà il risultato che produrrebbe una toolchain React attuale.
Cosa mantiene e cosa cambia il convertitore JSX
- Import ed export restano come li hai scritti.
- I commenti restano, al loro posto.
- Il JavaScript normale attorno al JSX non viene toccato, a parte l'impaginazione di Babel.
- La formattazione è quella di Babel, non di Prettier: le tue virgolette e i tuoi a capo dentro il JSX non vengono mantenuti. Per sistemare il risultato, passalo nello strumento Formattatore di Codice.
- Davanti alle chiamate degli elementi vengono aggiunte annotazioni
/*#__PURE__*/. Dicono ai bundler che la chiamata non ha effetti collaterali.
Cosa non fa: TSX, TypeScript e Flow
Compila solo JSX. Non legge TypeScript, quindi un TSX con annotazioni di tipo dà un errore di sintassi, e nemmeno Flow è supportato. Non esegue il tuo codice, non verifica che i componenti funzionino e non unisce i file in un bundle.
Per andare nella direzione opposta, da JavaScript semplice a codice tipizzato, usa lo strumento Convertitore da JS a TS. Per leggere script minificati o offuscati, usa lo strumento Deoffuscatore JS.
Babel JSX online, senza lasciare il browser
Babel viene caricato una sola volta, la prima volta che incolli, poi la compilazione avviene in un Web Worker sul tuo dispositivo. Il tuo componente non viene inviato da nessuna parte e non viene mai eseguito, quindi puoi incollare senza timori anche un file con effetti collaterali.
Domande frequenti
Come passo dal JSX al JS online?
Incolla il tuo JSX nel campo «Codice JSX». Circa un terzo di secondo dopo, il JavaScript compilato appare sotto il titolo «JavaScript». Non esiste un pulsante di conversione, e con «Copia negli appunti» prendi il risultato. Babel viene scaricato una volta alla prima incollata, quindi la prima conversione richiede un po' più di tempo.
Babel produce JavaScript dal JSX?
Sì. Il preset React di Babel trasforma il JSX in JavaScript, ed è ciò che questa pagina esegue nel tuo browser, quindi il risultato corrisponde a un passaggio di build con Babel. Gli strumenti di build fanno lo stesso in automatico quando costruisci un progetto. Usa questa pagina quando vuoi vedere o copiare il risultato di un singolo componente o frammento.
Che differenza c'è tra JS e JSX?
Nel codice React JS, il JSX è JavaScript con una sintassi simile a XML per descrivere l'interfaccia, per esempio un tag button con un gestore onClick. I browser non possono eseguirlo, quindi un compilatore riscrive ogni tag come normale chiamata di funzione. Il risultato è JavaScript ordinario. L'estensione .jsx è solo una convenzione di nome per i file che contengono JSX.
Che differenza c'è tra runtime classico e automatico?
Il classico trasforma il JSX in chiamate a React.createElement, quindi React deve essere nello scope in ogni file che usa JSX. L'automatico lo trasforma in chiamate a jsx() e jsxs() e aggiunge da solo l'import da react/jsx-runtime, così non importi React solo per scrivere JSX. L'automatico richiede React 17 o successivo. Qui il valore predefinito è «Classico».
Come ottengo React.createElement dal JSX?
Lascia il runtime JSX su «Classico», che è il valore predefinito. Ogni elemento diventa una chiamata a React.createElement: prima il nome del tag, poi l'oggetto delle props (null se non ce ne sono), poi i figli. Un frammento diventa React.Fragment.
Perché il risultato usa React ma non lo importa?
L'output classico chiama React.createElement e React.Fragment senza aggiungere un import, perché presuppone che React sia già nello scope. Se il tuo file non inizia con import React from 'react', aggiungi quella riga oppure porta il runtime JSX su «Automatico», che scrive l'import necessario.
Perché compaiono commenti /*#__PURE__*/ nel risultato?
Babel mette /*#__PURE__*/ davanti a ogni chiamata di elemento. Dice a minificatori e bundler che la chiamata non ha effetti collaterali, quindi un elemento mai usato può sparire dal bundle finale. Puoi lasciare i commenti o cancellarli: non cambiano ciò che fa il codice.
Può convertire TSX o TypeScript?
No. Si aspetta JSX dentro JavaScript semplice, quindi un'annotazione di tipo come props: Props è un errore di sintassi. Rimuovi prima i tipi oppure compila il TypeScript con il compilatore TypeScript. Anche la sintassi Flow non è supportata.
Il mio codice viene caricato o eseguito?
No. Babel compila il codice nel tuo browser, in un Web Worker, e non viene inviato nulla a un server. Il codice non viene nemmeno eseguito, quindi puoi incollare senza timori un componente con effetti collaterali. L'unico download è Babel stesso, una volta sola.
Consigliati
-
Lavagna bianca magnetica da scrivania con pennarelliDisegna l’albero dei componenti e vedi quale chiamata createElement sta dentro quale.
-
KYY Monitor Portatile 15.6"Tieni il tutorial o la documentazione su un secondo schermo mentre confronti il tuo JSX con l’output.
-
Barra LED da monitor QuntisIllumina la scrivania e non lo schermo durante le sessioni di debug a notte fonda.
Aiuta a mantenere gratuiti gli strumenti. ✨
Le immagini sono solo a scopo illustrativo. In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.
