JSX è simile a un mix di XML e HTML. Usi JSX all'interno del codice React per creare facilmente componenti per le tue app. JSX si trasforma in JavaScript quando React compila il codice.
La bellezza di React è che puoi creare codice riutilizzabile e strutturare facilmente la tua app da una mentalità basata sui componenti. Infine, il divario tra il deridere i wireframe di idee semanticamente formate e la loro implementazione non è mai stato più vicino.
Ecco un esempio di JSX utilizzato per il rendering di HTML:
js var div = ; ReactDOM.render (div, document.getElementById ('example'));
Per creare un componente, basta usare una variabile locale che inizia con un lettera maiuscola, per esempio.:
"js var MyComponent = React.createClass (/... /); var myElement =
ReactDOM.render (myElement, document.getElementById ('example')); "
Nota: ci sono parole riservate in JSX, poiché in sostanza è JavaScript, quindi parole chiave come classe
e per
sono scoraggiati come nomi di attributi. Invece, i componenti React si aspettano i nomi delle proprietà React come nome della classe
e htmlFor
, per esempio.
Specifica i bambini all'interno del tuo JSX in questo modo:
"js var User, Profile;
// Scrivi in JSX: var app =
// Cosa verrà emesso in JS: var app = React.createElement (Utente, className: "vip-user", React.createElement (Profile, null, "click")); "
Usa Babel REPL per testare JSX.
La creazione di moduli è semplice con JSX e sotto-componenti, ad esempio:
"js var Form = FormComponent;
var app = (