Hispanopedia WikiJSX (a veces denominado JavaScript XML ) es una extensión similar a XML para la sintaxis del lenguaje JavaScript . [ 2 ] Inicialmente creado por Facebook para su uso con React , JSX ha sido adoptado por múltiples frameworks web . [ 3 ] : 5 [ 4 ] : 11 Al ser azúcar sintáctico , JSX generalmente se transpila en llamadas a funciones JavaScript anidadas estructuralmente similares al JSX original.
Cuando se utiliza con TypeScript , la extensión del archivo es .tsx . [ 5 ]
Proceso
El código escrito en JSX requiere conversión con una herramienta como Babel antes de que los navegadores web puedan entenderlo. [ 6 ] [ 3 ] : 5 Este procesamiento generalmente se realiza durante un proceso de compilación de software antes de que se implemente la aplicación .
El transpilador (como Babel) debe hacer suposiciones sobre la naturaleza del uso de JSX, de lo contrario no sabría en qué convertir las etiquetas JSX. En el caso de Babel (a continuación), lo usamos en un modo que asume que las etiquetas se usarán con React, por lo que convierte las etiquetas JSX en llamadas a funciones del React JSX Runtime, que devuelven valores correspondientes a la representación interna de estas etiquetas. [ 7 ]@babel/plugin-transform-react-jsx , que Babel usa para JSX, proporciona cierta flexibilidad para adaptarse a otras plataformas al permitir especificar pragmas alternativos que asumen el rol de React.createElementy React.Fragment. [ 7 ]
Margen
Los siguientes ejemplos incluyen tanto el código React-JSX/TSX como la salida transpilada de Babel.
Ejemplo básico
El /*#__PURE__*/comentario añadido por Babel indica que la llamada etiquetada es a una función pura , lo cual es relevante para pasos posteriores como la eliminación de código muerto (tree shaking) . [ 8 ] Dado que no es necesario para el funcionamiento del código, en los siguientes ejemplos se ha eliminado esta anotación para facilitar la lectura.
La salida del transpilador anterior indica una salida de React 17+. En versiones anteriores, la salida sería más sencilla:
const App = () => { return React . createElement ( "div" , null , React . createElement ( "p" , null , "Header" ), React . createElement ( "p" , null , "Content" ), React . createElement ( "p" , null , "Footer" )); }; export default App ;La interfaz clásica sigue siendo de uso común entre los usuarios de JSX que no utilizan React.
Elementos anidados
Varios elementos del mismo nivel deben encapsularse en un único elemento, como el <div>que se muestra arriba, un fragmento delimitado por <Fragment>o en su forma abreviada <>, o bien devolverse como una matriz. [ 9 ] [ 10 ] [ 4 ] : 68–69
Atributos
JSX proporciona una gama de atributos de elementos diseñados para reflejar los proporcionados por HTML. También se pueden pasar atributos personalizados al componente. [ 11 ] Todos los atributos serán recibidos por el componente como props (propiedades).
Los nombres de atributos JSX válidos son identificadores JSX válidos (nombres de variables), que se diferencian de los identificadores ECMAScript principalmente por permitir el -carácter guion (-) en una posición distinta a la inicial. Esto permite usar fácilmente atributos HTML con guiones como data-*y aria-role. Los atributos que aún contienen caracteres no válidos pueden indicarse con la {... spread}sintaxis . [ 2 ]
Componentes personalizados
Las "etiquetas" (componentes) personalizadas son simplemente funciones de JavaScript que aceptan un estilo de llamada específico.
Aquí name="Connor"simplemente se convierte en una opción { name: "Connor" }.
Los componentes que contienen componentes envolventes se pueden definir utilizando el childrenatributo que ya hemos visto en la salida transpilada:
Los nombres de etiquetas JSX válidos son identificadores JSX válidos (nombres de variables), lo que significa que las etiquetas XML y HTML con guiones se pueden usar sin problemas. Sin embargo, los componentes personalizados no pueden tener nombres con guiones debido a una limitación de la gramática de ECMAScript. [ 2 ]
expresiones JavaScript
Las expresiones JavaScript (pero no las sentencias ) se pueden usar dentro de JSX con llaves {}: [ 4 ] : 14–16
El ejemplo anterior mostrará:
< h1 > 11 </ h1 >Expresiones condicionales
Las sentencias if-else no se pueden usar dentro de JSX, pero sí se pueden usar expresiones condicionales. El siguiente ejemplo se mostrará como la cadena porque es igual a 1.{i===1?'true':'false'}'true'i
Lo anterior generará:
<div> <h1> verdadero </h1> </div>Las funciones y JSX se pueden usar en condicionales: [ 4 ] : 88–90
Lo anterior generará:
<div> <div> Sección 1 <span> ( primera ) </span> </div> <div> Sección 2 </div> <div> Sección 3 </div> </div>Babel: pragmas
Los transpiladores como Babel ofrecen la posibilidad de dirigir llamadas a funciones distintas de las de React. Aquí, Babel está dirigido a llamar a tagy fragen su lugar:
Con diferentes versiones de tagy frag, se pueden producir diferentes representaciones de la entrada:
Dialectos
Lo anterior cubre la conversión de código JSX a ECMAScript. Como se indica en la sección "pragma", el código ECMAScript que recibe objetos derivados de JSX es libre de hacer lo que quiera con estos datos:
- Las aplicaciones frontend como React generalmente traducen estas estructuras de datos en llamadas a funciones que manipulan el Modelo de Objetos del Documento (DOM) de una página. Estas bibliotecas también tienen variantes de renderizado del lado del servidor que, mediante la manipulación de un DOM "sin navegador", producen una página web HTML o XML ordinaria serializando el DOM. [ 12 ]
- Las aplicaciones de backend pueden optar por generar HTML o XML directamente uniendo cadenas, actuando efectivamente como un motor de plantillas. [ 13 ]
- Es posible que las aplicaciones más específicas (como las que se muestran arriba) no tengan nada que ver con HTML o XML.
En lo que respecta a HTML y XML, las áreas de divergencia más comunes son el manejo de atributos y la configuración de los componentes disponibles.
Atributos
Nombres
Aunque JSX define cómo deben analizarse los atributos —y Babel mantiene una convención sobre cómo deben transmitirse a otro código ECMAScript— ninguno define cómo se asignan estos atributos a los atributos HTML y XML reales. Por ejemplo, React utiliza la siguiente convención para minimizar la necesidad de la {... spread}sintaxis: [ 14 ]
- Los nombres de los atributos alfanuméricos simples no se modifican.
- Los nombres de atributos con guion de HTML se convierten a camelCase, con la excepción de
data-*yaria-*. Esto está en línea con la API DOM de JavaScript. - Los
xlink:*nombres de los atributos se convierten a camelCase, por ejemploxink:hrefse convierte enxlinkHref.
El renderizador DOM de React tiene una lista predefinida de atributos que reconoce. Algunos de estos son para la conversión a HTML/XML, otros son para su uso interno. En el modo de producción (no de desarrollo), solo se permiten estos atributos en las etiquetas de salida, a menos que la etiqueta sea "svg" o "math". [ 15 ]
Valores
El atributo HTML styleaplica una colección de estilos CSS al elemento que lo contiene. Como medida ergonómica, React-DOM no solo acepta pasar este valor en formato de cadena, sino también como un objeto JavaScript. En lugar de , se podría escribir . La implementación de la función "style" traduce automáticamente el objeto al formato de cadena correcto. Se realiza una operación similar de cambio de nombre a camel case para simplificar el uso de estilos con nombres compuestos. [ 16 ]<div style={"color:" + clr}><div style={{ color: clr }}>
React-DOM también permite pasar funciones de JavaScript en lugar de cadenas como valores para los atributos del controlador de eventos. [ 16 ]
Componentes
Dependiendo del lenguaje de salida, pueden estar disponibles diferentes componentes (que aparecen como "etiquetas" HTML/XML). Por ejemplo, las etiquetas HTML en React provienen de react-dom, que no se utiliza cuando se dirige a un lenguaje diferente. El entorno de ejecución también puede predefinir algunos componentes: es un ejemplo de ello, aunque se ha universalizado mediante la convención de Babel. [ 17 ]<Fragment>
Véase también
- ECMAScript para XML (E4X)
Referencias
- ↑ "Commit inicial del sitio web · facebook/jsx@c40e9b6" . GitHub .
- 1 2 3 "Borrador: Especificación JSX" . JSX . Facebook . Consultado el 7 de abril de 2018 .
- 1 2 Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode . Manning. ISBN 978-1720043997.
- 1 2 3 4 Wieruch, Robin (14 de septiembre de 2018). El camino hacia la reacción . Leanpub. ISBN 978-1720043997.
- ↑ "Documentación - JSX" . www.typescriptlang.org . Consultado el 13 de julio de 2025 .
- ↑ Fischer, Ludovico (06/09/2017). React for Real: Front-End Code, Untangled . Pragmatic Bookshelf. ISBN 9781680504484.
- 1 2 "@babel/plugin-transform-react-jsx · Babel" . babeljs.io .
- ↑ "compiler-notations-spec/pure-notation-spec.md en main · javascript-compiler-hints/compiler-notations-spec" . GitHub .
- ↑ Clark, Andrew (26 de septiembre de 2017). "React v16.0§Nuevos tipos de retorno de renderizado: fragmentos y cadenas" . Blog de React .
- ↑ "React.Component: render" . React .
- ↑ Clark, Andrew (26 de septiembre de 2017). "React v16.0§Soporte para atributos DOM personalizados" . Blog de React .
- ↑ "createRoot – React" . react.dev .
- ↑ "html/benchmarks en master · kitajs/html" . GitHub .
- ↑ "Componentes DOM de React – React" . react.dev .
- ↑ "react/packages/react-dom-bindings/src/client/ReactDOMComponent.js en 64b4605cb82367fa78a08b99bbee1c800e6af21a · facebook/react" . GitHub .
- 1 2 "Componentes comunes (por ejemplo) – React" . react.dev .
- ↑ "Componentes React integrados – React" . react.dev .
Enlaces externos
- Sitio web oficial , Borrador: Especificación JSX
