JSX ( extensión de sintaxis de JavaScript y ocasionalmente denominado XML de JavaScript ) es una extensión de la sintaxis del lenguaje JavaScript . [1] De apariencia similar a HTML , JSX proporciona una forma de estructurar la representación de componentes utilizando una sintaxis familiar para muchos desarrolladores.
Los componentes de React generalmente se escriben usando JSX, aunque no es necesario que los componentes también se escriban en JavaScript puro. JSX es similar a otra sintaxis de extensión creada por Facebook para PHP llamada XHP .
Margen
Un ejemplo de código JSX:
La aplicación de clase extiende React . Componente { render () { retorno ( < div > < p > Encabezado < / p> < p > Contenido < / p> < p > Pie de página < / p> < / div> ); }}
Elementos anidados
Varios elementos en el mismo nivel deben estar envueltos en un solo elemento React, como el elemento que se muestra arriba, un fragmento delineado por
o en su forma abreviada <>
, o devuelto como una matriz. [2] [3]
Atributos
JSX proporciona una variedad de atributos de elementos diseñados para reflejar los proporcionados por HTML. Los atributos personalizados también se pueden pasar al componente. [4] El componente recibirá todos los atributos como accesorios.
Expresiones JavaScript
Las expresiones de JavaScript (pero no las declaraciones ) se pueden usar dentro de JSX con llaves {}
:
< h1 > { 10 + 1 } < / h1>
El ejemplo anterior representará:
< h1 > 11 h1 >
Declaraciones condicionales
Las declaraciones If – else no se pueden usar dentro de JSX, pero se pueden usar expresiones condicionales. El siguiente ejemplo se representará { i === 1 ? 'true' : 'false' }
como la cadena 'true'
porque i
es igual a 1.
La aplicación de clase extiende React . Componente { render () { constante i = 1 ; retorno ( < div > < h1 > { i === 1 ? 'verdadero' : 'falso' } < / h1> < / div> ); }}
Lo anterior generará:
< div > < h1 > verdadero h1 > div >
Las funciones y JSX se pueden utilizar en condicionales:
La aplicación de clase extiende React . Componente { render () { secciones const = [ 1 , 2 , 3 ]; retorno ( < div > { secciones . mapa (( n , i ) => ( / * 'key' es utilizada por react para realizar un seguimiento de los elementos de la lista y sus cambios * / / * Cada 'clave' debe ser única * / < div key = { "sección-" + n } > Sección { n } { i === 0 && < span > ( primera ) < / span>} < / div> ))} < / div> ); }}
Lo anterior generará:
< div > < div > Sección 1 div > < div > Sección 2 div > < div > Sección 3 div > div >
El código escrito en JSX requiere la conversión con una herramienta como Babel antes de que los navegadores web puedan entenderlo. [5] Este procesamiento se realiza generalmente durante un proceso de construcción de software antes de que se implemente la aplicación .
enlaces externos
Referencias
- ^ "Borrador: especificación JSX" . JSX . Facebook . Consultado el 7 de abril de 2018 .
- ^ Clark, Andrew (26 de septiembre de 2017). "React v16.0§Nuevos tipos de retorno de renderizado: fragmentos y cadenas" . React Blog .
- ^ "React.Component: render" . Reaccionar .
- ^ Clark, Andrew (26 de septiembre de 2017). "React v16.0§ Soporte para atributos DOM personalizados" . React Blog .
- ^ Fischer, Ludovico (6 de septiembre de 2017). Reaccionar de verdad: código front-end, desenredado . Estantería pragmática. ISBN 9781680504484.