Come puoi vedere nel tuo snippet, il tag script è di tipo "text/babel", ed è perché stai codificando usando JSX (Javascript con XML su di esso) al suo interno.
JSX è una marcatura di zucchero creato per renderlo più "intuitiva" per costruire XML (HTML in questo caso) componenti in codice javascript (React non solo elementi, però). React lo utilizza come livello di astrazione rispetto ai metodi di composizione utilizzati per creare/definire elementi dell'interfaccia utente. Ma JSX non è uno standard accettato a livello globale, quindi non è supportato da tutti i browser. Questo è il motivo per cui hai bisogno di una libreria di "compilatori" di terze parti per trasformare JSX in vanilla JS, ed è qui che passa BABEL.
BABEL è un compilatore javascript e, importando il suo file "browser.min.js", si sta abilitando a "compilare" il codice all'interno dei tag di script "text/babel" ed eseguirlo come vanilla javascript.
Quindi, nel tuo esempio, si ha il codice successivo:
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
E "browser.min.js" di effettuare il trattamento quando la pagina è stata caricata e il codice JavaScript che verrà eseguito dovrebbe essere qualcosa in questo modo:
ReactDOM.render(
React.createElement('H1', null, 'Hello world!'),
document.getElementById('example'));
Le principali alternative che hai, se non si desidera caricare questo "browser.min.js" sono:
Avere il proprio codice React in file separati e compilarli ogni volta che si apporta una modifica (tutto questo è lato server). Il tuo codice html dovrebbe fare riferimento ai file compilati (che dovrebbero avere solo il codice JS vanilla) invece dei tuoi JSX originali. Esistono vari modi per eseguire questa operazione depending on your coding tools.
Utilizzare solo JS vaniglia per creare e definire la gerarchia "Html" di React (React.createElement (...)).
Spiegando in maggior dettaglio questi metodi dovrebbero essere trattati in altre domande.
grazie per la tua spiegazione – user1050619
Ho un'altra domanda: quello che vedo sempre se le persone usano 'var React = require ('react');' nei loro file. E ho letto che 'webpack' è lo strumento che usiamo per lavorare con questi comandi' require'. Come funziona qui? Avrei ancora bisogno di avere il mio codice di reazione (JSX) in un file separato (comprese le righe 'require')? Compilarlo per convertirlo in JS regolare> usa webpack? Esiste un processo più semplice/alternativo che non includa quel passaggio aggiuntivo? –
Non hai proprio bisogno di usare 'webpack'. Questo è solo se vuoi creare un singolo file ".js" che contenga tutto il codice da tutte le tue dipendenze (e il tuo codice effettivo) invece di usare più '
Hai scritto il codice a Babele (ES7) e non in una versione di JavaScript che il browser in grado di gestire in modo nativo, e si consegnano l'ES7 al browser, invece di transpiling è in fase di compilazione.
fonte
2016-04-18 14:20:56 Quentin
Penso che JSX non faccia parte delle specifiche ES7, sebbene babel 'browser.min.js' lo compili per React metodi createElem. – GonArrivi
Trovato che il "browser.js" di Babel non funziona più?
'browser.js' was deprecated indietro nel 2015, il che significa che continuare a essere in grado di compilare JSX nel browser è diventato un po 'più difficile.
Per fortuna, il progetto babel-standalone è una sostituzione drop-in e sembra essere in fase di sviluppo.
"babel-standalone" sembra essere endorsed by the BabelJS project itself, noted by its inclusion on this page.
fonte
2017-05-12 14:31:24