Usando JSX y React

Lo que vas a crear

JSX es similar a una mezcla de XML y HTML. Utiliza JSX dentro del código React para crear fácilmente componentes para sus aplicaciones. JSX se transforma en JavaScript cuando React compila el código.

La belleza de React es que puede crear código reutilizable y estructurar fácilmente su aplicación desde una mentalidad basada en componentes. Finalmente, la brecha entre burlarse de los esquemas de ideas semánticamente formadas e implementarlas nunca ha estado tan cerca.

Tu primer gusto de JSX

Aquí hay un ejemplo de JSX que se usa para representar HTML:

js var div =

; ReactDOM.render (div, document.getElementById ('example'));

Para crear un componente, solo use una variable local que comience con un letra mayúscula, p.ej.:

"js var MyComponent = React.createClass (/... /); var myElement = ;

ReactDOM.render (myElement, document.getElementById ('example')); "

Nota: hay palabras reservadas en JSX, ya que es esencialmente JavaScript después de las palabras clave, por ejemplo: clase y para se desalientan como nombres de atributos. En su lugar, los componentes React esperan los nombres de las propiedades React, como nombre de la clase y html para, por ejemplo.

Etiquetas de anidamiento

Especifique niños dentro de su JSX como así:

"js var Usuario, Perfil;

// Escribes en JSX: var app = hacer clic ;

// Lo que se generará en JS: var app = React.createElement (User, className: "vip-user”, React.createElement (Profile, null, "click”)); "

Probando JSX

Utilice el REPL Babel para probar JSX.

Subcomponentes y espacios de nombres

La creación de formularios es fácil con JSX y subcomponentes, por ejemplo:

"js var Form = FormComponent;

var App = (