Utilizzando JSX e React

Cosa starai creando

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.

Il tuo primo assaggio di JSX

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.

Tag di nidificazione

Specifica i bambini all'interno del tuo JSX in questo modo:

"js var User, Profile;

// Scrivi in ​​JSX: var app = clic ;

// Cosa verrà emesso in JS: var app = React.createElement (Utente, className: "vip-user", React.createElement (Profile, null, "click")); "

Test di JSX

Usa Babel REPL per testare JSX.

Sottocomponenti e Namespace

La creazione di moduli è semplice con JSX e sotto-componenti, ad esempio:

"js var Form = FormComponent;

var app = (