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.
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.
Especifique niños dentro de su JSX como así:
"js var Usuario, Perfil;
// Escribes en JSX: var app =
// Lo que se generará en JS: var app = React.createElement (User, className: "vip-user”, React.createElement (Profile, null, "click”)); "
Utilice el REPL Babel para probar JSX.
La creación de formularios es fácil con JSX y subcomponentes, por ejemplo:
"js var Form = FormComponent;
var App = (