Una introducción a JSX
Si alguna vez ha implementado una aplicación web con el marco "React.js", es posible que haya notado que la sintaxis para escribir componentes React.js se ve un poco diferente a su otro código Javascript. Aunque en su mayoría son iguales, los componentes de React se describen mediante corchetes especiales, los corchetes de ángulo izquierdo y derecho. Se parecen a la sintaxis de XML, el "Lenguaje de marcado extensible". En React.js, esta sintaxis se llama de forma similar "JSX", que significa "JavaScript XML".
El objetivo principal de esta sintaxis es simplificar la escritura de código React. El código JSX no puede ser interpretado por JVM, por lo tanto, debe compilarse en código Javascript real antes de su uso, una tarea que suelen realizar los paquetes como Babel o Webpack.
El código de React que probablemente nunca hayas escrito
Esto significa efectivamente que es muy probable que nunca hayas escrito componentes de React.js "verdaderos" que se generen a partir de tu código JSX. Pero no se preocupe, esto se puede hacer fácilmente sin muchos problemas. De hecho, incluso puede escribir una aplicación web React completa sin usar JSX. El siguiente fragmento de código muestra cómo se ve un verdadero componente React.js con solo Javascript.
// A common JSX-element.
<Header title="Lorem ipsum" variant="primary">
I am a subtitle
</Header>
//
// ...
//
// After the compilation step:
React.createElement(
Header,
{title: 'Lorem ipsum', variant: "primary"},
'I am a subtitle'
);
¡Incluso puede probar esto en su navegador, sin instalar ningún software! Simplemente desplácese hacia abajo hasta el final de esta página para usar el enlace en el apéndice.
Usando JSX para simplificar su código
Como puede ver, la principal ventaja de la sintaxis JSX es hacer que su código relacionado con la interfaz de usuario sea más simple de escribir y más fácil de distinguir de otras partes de su aplicación, ya que la sintaxis similar a XML proporciona una indicación clara del dominio del código.
Otra gran característica de JSX es que simplemente se convierte en una expresión después del paso de compilación. Por lo tanto, puede usarlo en sentencias if-else o incluso almacenar su resultado en una variable. Y debido a que los componentes de React.js pueden contener expresiones como hijos, usted puede escribir código de IU altamente componible.
Una importación predeterminada para cada archivo JSX
Es posible que haya notado que cada archivo JSX en varios tutoriales, guías y muy probablemente incluso su propio código tiene la importación predeterminada de la biblioteca React incluida, aunque nunca puede llamar a esta variable importada directamente. La razón detrás de esto es que después del paso de compilación, cada expresión JSX se convierte en una llamada "React.createElement", como ha visto en el ejemplo de código antes. Por lo tanto, es necesario tener la variable "React" de la importación predeterminada incluida en el alcance de cada archivo.
Parece HTML, pero no
Una restricción clave al codificar en sintaxis JSX es la notación del nombre de su componente. Para que el empaquetador identifique correctamente sus componentes, deben ser exclusivos de las etiquetas HTML estándar, ya que la sintaxis es la misma.
// 1. A valid example.
function Header(props){
return (
<div>
<h1>{props.title}</h1>
{props.children}
</div>
);
}
// 2. Invalid, only uppercase for React elements.
function header(props){
return (
// ...
);
}
// 3. Invalid, only uppercase
// when calling React components.
function Page(props){
// Notice the invalid 'layout':
return (
<div style={{ margin: 12 }}>
<layout>{/* ... */}</layout/>
</div>
);
}
Por lo tanto, es un requisito codificar los elementos JSX siempre en mayúsculas y minúsculas, lo que significa que la primera letra debe estar en mayúsculas.
La variante de TypeScript
Es posible que haya notado que muchos proyectos también usan TSX como sufijo de archivo para sus archivos de componentes React.js. Esta es solo una extensión del JSX original para que sea compatible con Typecript. Los archivos TSX le permiten escribir código Typecript junto con componentes de notación JSX.
Solo el comienzo
Este artículo proporcionó una introducción simple a JSX para codificar componentes de React. La principal ventaja es una sintaxis muy concisa que se siente natural en un entorno web. Puede escribir elementos altamente componibles con muy poco código, que sin duda es un factor clave del estado famoso y popular actual de React. Si tiene curiosidad, hay muchas más y excelentes guías detalladas del equipo de React en su sitio, los enlaces se encuentran en el apéndice al final de esta página.
