{"id":66193,"date":"2023-05-24T12:45:24","date_gmt":"2023-05-24T10:45:24","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=66193&post_type=knowledgebase&preview_id=66193"},"modified":"2025-10-01T21:29:45","modified_gmt":"2025-10-01T19:29:45","slug":"que-es-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/","title":{"rendered":"Gu\u00eda sin Complicaciones de la Sintaxis JSX"},"content":{"rendered":"

Tradicionalmente, los desarrolladores<\/a> han separado el marcado y la l\u00f3gica en archivos distintos, utilizando HTML<\/a> para la estructura y CSS<\/a> para el estilo y escribiendo despu\u00e9s JavaScript<\/a> para manejar las interacciones y la manipulaci\u00f3n de datos.<\/p>\n

Pero, \u00bfy si hubiera una forma de combinar estas tecnolog\u00edas, simplificando el proceso de desarrollo y facilitando la creaci\u00f3n de interfaces de usuario complejas? Ah\u00ed es donde entra JSX.<\/p>\n

En este art\u00edculo, aprender\u00e1s qu\u00e9 es JSX, c\u00f3mo funciona y por qu\u00e9 es importante para crear interfaces de usuario din\u00e1micas en el desarrollo web<\/a>.<\/p>\n

Exploremos esta revolucionaria tecnolog\u00eda con m\u00e1s detalle.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

\u00bfQu\u00e9 Es JSX?<\/h2>\n

JSX (JavaScript XML<\/a>) es una extensi\u00f3n sint\u00e1ctica para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar al HTML dentro de un archivo JavaScript. Fue desarrollada por Meta (antes Facebook).<\/p>\n

La sintaxis de JSX se parece a la de HTML, con etiquetas de apertura y cierre, atributos y elementos anidados.<\/p>\n

Por ejemplo, podr\u00edas escribir el siguiente c\u00f3digo JSX para representar un simple elemento de encabezamiento:<\/p>\n

const heading = <h1>Hello, JSX!<\/h1>;<\/code><\/pre>\n
Este c\u00f3digo parece HTML, pero es JavaScript<\/a>. La palabra clave const crea una nueva variable llamada heading, y el valor de esa variable es el resultado de la expresi\u00f3n JSX.<\/p>\n\n
\u00bfC\u00f3mo Funciona JSX?<\/h2>\n
JSX se transforma en JavaScript normal antes de ejecutarse en el navegador<\/a>. Esta transformaci\u00f3n se realiza mediante una herramienta llamada transpilador. El transpilador m\u00e1s popular para JSX es Babel.<\/p>\n
Babel transforma el c\u00f3digo JSX en una serie de llamadas a funciones. Estas llamadas a funciones son equivalentes al c\u00f3digo HTML escrito en JSX. El navegador puede entonces ejecutar el c\u00f3digo JavaScript resultante.<\/p>\n
Por ejemplo, el siguiente c\u00f3digo JSX:<\/p>\n
const element = <h1>Hello, world!<\/h1>;<\/code><\/pre>\n
se transforma en el siguiente c\u00f3digo JavaScript:<\/p>\n
const element = React.createElement(\"h1\", null, \"Hello, world!\");<\/code><\/pre>\n
Esta transformaci\u00f3n permite a los desarrolladores escribir c\u00f3digo en una sintaxis que les resulta familiar y f\u00e1cil de leer, sin dejar de aprovechar la potencia y flexibilidad de JavaScript.<\/p>\n
JSX y React<\/h2>\n
JSX es una parte integral de React<\/a>, que permite a los desarrolladores escribir el marcado y la l\u00f3gica de estos componentes en un \u00fanico archivo.<\/p>\n
Aqu\u00ed tienes un ejemplo sencillo de c\u00f3digo JSX en un componente<\/a> React:<\/p>\n
import React from 'react';\n\nfunction Greet() {\n  return <h1>Hello World!<\/h1>;\n}\n\nexport default Greeting;<\/code><\/pre>\n
En este ejemplo, tienes un componente funcional llamado Greet<\/code> que muestra un elemento h1<\/code> con un mensaje de saludo.<\/p>\n
El compilador de React transformar\u00e1 este c\u00f3digo en c\u00f3digo JavaScript optimizado que podr\u00e1 ser ejecutado por el navegador, permitiendo que el componente se renderice en la pantalla.<\/p>\n
Esto es en lo que el compilador de React transformar\u00eda el componente Greet<\/code>:<\/p>\n
import React from 'react'\n\nfunction Greet() {\n  return React.createElement(\"h1\", {}, \"Hello, World!\")\n}<\/code><\/pre>\n
En este c\u00f3digo, el c\u00f3digo JSX se ha transformado en una llamada a React.createElement<\/code> que crea la misma estructura y contenido que el c\u00f3digo JSX original.<\/p>\n
Esto es lo que ocurre entre bambalinas cuando React compila c\u00f3digo JSX, permitiendo que sea ejecutado por el navegador. Sin embargo, el c\u00f3digo transformado puede ser menos legible que el c\u00f3digo JSX original.<\/p>\n
En la versi\u00f3n 17 de React, se introdujo una nueva funci\u00f3n de transformaci\u00f3n JSX<\/a>, que importa autom\u00e1ticamente funciones especiales de los nuevos puntos de entrada del paquete React, permitiendo a los desarrolladores utilizar JSX sin tener que importar React al principio de sus archivos.<\/p>\n
\/\/ Inserted by a compiler (don't import it yourself!)\nimport {jsx as _jsx} from 'react\/jsx-runtime';\n\nfunction App() {\n  return _jsx('h1', { children: 'Hello world' });\n}<\/code><\/pre>\n
Uso de Expresiones de JavaScript con JSX<\/h3>\n
En JSX, las expresiones de JavaScript pueden incrustarse directamente dentro del marcado para generar contenido din\u00e1micamente. Esto permite a los desarrolladores utilizar c\u00f3digo JavaScript para calcular valores, realizar operaciones y generar contenido condicionalmente dentro de sus componentes JSX.<\/p>\n
Este ejemplo muestra c\u00f3mo utilizar dos expresiones JavaScript dentro de JSX:<\/p>\n
import React from 'react';\n\nconst MyComponent = () => {\n  const name = 'John';\n  const age = 30;\n\n  return (\n    <div>\n      <h1>Hello, {name}!<\/h1>\n      <p>You are {age} years old.<\/p>\n      <p>Next year, you will be {age + 1} years old.<\/p>\n      {age >= 18 && <p>You are an adult.<\/p>}\n    <\/div>\n  );\n};\n\nexport default MyComponent;<\/code><\/pre>\n
En este ejemplo, se utilizan expresiones de JavaScript como {name}<\/code>, {age}<\/code>, {age + 1}<\/code>, y {age >= 18 && <p>You are an adult.<\/p>}<\/code> para mostrar din\u00e1micamente el contenido en funci\u00f3n de los valores de las variables nombre y edad.<\/p>\n
Usar CSS con JSX<\/h3>\n
CSS puede aplicarse a componentes JSX de varias formas, como estilos inline, archivos CSS independientes o bibliotecas CSS-in-JS. Los estilos inline se definen directamente dentro del marcado JSX utilizando objetos JavaScript, mientras que los archivos CSS independientes o las bibliotecas CSS-en-JS permiten aplicar estilos externos y modulares a los componentes.<\/p>\n
Este ejemplo muestra c\u00f3mo aplicar estilos inline definidos mediante un objeto JavaScript a elementos utilizando el atributo style en JSX:<\/p>\n
import React from 'react';\n\nconst MyComponent = () => {\n  const styles = {\n    backgroundColor: 'blue',\n    color: 'white',\n    padding: '10px'\n  };\n\n  return (\n    <div style={styles}>\n      <h1>Hello, World!<\/h1>\n      <p>This is a component with inline styles.<\/p>\n    <\/div>\n  );\n};\n\nexport default MyComponent;<\/code><\/pre>\n
En este ejemplo, las propiedades CSS como backgroundColor<\/code>, color<\/code>, y padding se establecen como pares clave-valor en el objeto styles, y sus valores son cadenas que representan los valores CSS.<\/p>\n
Nota:<\/strong> Aunque los estilos inline proporcionan flexibilidad y simplicidad, se recomienda utilizar clases CSS o bibliotecas CSS-en-JS para estilos m\u00e1s complejos o reutilizables en aplicaciones m\u00e1s grandes.<\/p>\n
6 Reglas Importantes de JSX<\/h2>\n
Al escribir c\u00f3digo JSX, hay ciertas reglas que debes seguir para asegurarte de que es v\u00e1lido y f\u00e1cil de leer.<\/p>\n
1. Devuelve Siempre un \u00danico Elemento Root<\/h3>\n
En JSX, siempre debes devolver un \u00fanico elemento root. Esto significa que todo tu c\u00f3digo JSX debe estar contenido en un \u00fanico elemento exterior. Por ejemplo, esto es JSX v\u00e1lido:<\/p>\n
return (\n  <div>\n    <h1>Hello World!<\/h1>\n    <p>This is my first React component.<\/p>\n  <\/div>\n)<\/code><\/pre>\n
Pero no lo es porque devuelve dos elementos en lugar de uno:<\/p>\n
return (\n  <h1>Hello World!<\/h1>\n  <p>This is my first React component.<\/p>\n)<\/code><\/pre>\n
Esto es importante tenerlo en cuenta al convertir c\u00f3digos HTML a JSX.<\/p>\n
2. Utilizar className En Lugar De class<\/h3>\n
En HTML, utilizar\u00edas el atributo class<\/code> para especificar una clase CSS para un elemento. Sin embargo, en JSX, debes utilizar el atributo className<\/code> en su lugar. Por ejemplo:<\/p>\n
\/\/ Good\n<div className=\"my-class\">This element has a CSS class.<\/div>\n\n\/\/ Bad\n<div class=\"my-class\">This element has a CSS class.<\/div><\/code><\/pre>\n
Utilizar className<\/code> en lugar de class<\/code> es importante y evita conflictos de nombres porque class<\/code> es una palabra clave reservada en JavaScript.<\/p>\n
3. Utiliza Llaves para las Expresiones de JavaScript<\/h3>\n
Cuando necesites incluir una expresi\u00f3n de JavaScript dentro de tu c\u00f3digo JSX, debes envolverla en llaves {}<\/strong>. Esto se puede utilizar para cualquier cosa, desde mostrar datos din\u00e1micos hasta renderizar componentes condicionalmente. Aqu\u00ed tienes un ejemplo:<\/p>\n
\/\/ Good\n<div>{myVariable}<\/div>\n\n\/\/ Bad\n<div>myVariable<\/div><\/code><\/pre>\n
Tambi\u00e9n puedes ejecutar operaciones matem\u00e1ticas dentro de las llaves, como:<\/p>\n
<p>The total cost is {25*10}<\/p><\/code><\/pre>\n
Adem\u00e1s, dentro de las llaves, puedes establecer sentencias condicionales utilizando operadores ternarios:<\/p>\n
<h1>{(x) < 15 ? \"Welcome\" : \"Goodbye\"}<\/h1><\/code><\/pre>\n
Aqu\u00ed tienes un ejemplo mejor con el componente React:<\/p>\n
function Greeting() {\n  const isLoggedIn = true;\n\n  return (\n    <div>\n      {isLoggedIn ? (\n        <h1>\u00a1Bienvenido!<\/h1>\n      ) : (\n        <h1>Por favor, inicia sesi\u00f3n.<\/h1>\n      )}\n    <\/div>\n  );\n}<\/code><\/pre>\n
En este ejemplo, definimos un componente Greeting<\/strong>. El componente utiliza el operador ternario para mostrar condicionalmente un saludo en funci\u00f3n del valor de isLoggedIn<\/code>. Si isLoggedIn<\/code> es true<\/code>, el componente muestra un elemento h1<\/code> con el texto \u00ab\u00a1Bienvenido!\u00bb. Si isLoggedIn<\/code> es false<\/code>, el componente muestra un elemento h1<\/code> con el texto \u00abPor favor, inicia sesi\u00f3n\u00bb.<\/p>\n
4. Utiliza camelCase Para la Mayor\u00eda de las Cosas en JSX<\/h3>\n
En JSX, utiliza camelCase para la mayor\u00eda de las cosas, incluidos atributos, controladores de eventos y nombres de variables. Esta convenci\u00f3n es coherente con las convenciones de nomenclatura de JavaScript y ayuda a mantener la legibilidad.<\/p>\n
Por ejemplo, utiliza code>onClick en lugar de onclick<\/code>, y className<\/code> en lugar de class<\/code>.<\/p>\n
\/\/ Good\n<button onClick={handleClick} className=\"btn\">Click me!<\/button>\n\n\/\/ Bad\n<button onclick={handle_click} class=\"btn\">Click me!<\/button><\/code><\/pre>\n
5. Cierra Siempre las Etiquetas<\/h3>\n
En JSX, debes cerrar siempre las etiquetas, aunque no tengan contenido. Por ejemplo<\/p>\n
\/\/ Good\n<div><\/div>\n\n\/\/ Bad\n<div\/><\/code><\/pre>\n
6. Utiliza Etiquetas de Autocierre para Elementos Vac\u00edos<\/h3>\n
Si tienes un elemento que no tiene contenido, puedes utilizar una etiqueta de autocierre en lugar de una etiqueta de apertura y cierre. Por ejemplo<\/p>\n
\/\/ Good\n<img src=\"my-image.jpg\" alt=\"My Image\"\/>\n\n\/\/ Bad\n<img src=\"my-image.jpg\" alt=\"My Image\"><\/img><\/code><\/pre>\n
\u00bfPor Qu\u00e9 es Importante JSX para el Desarrollo Web?<\/h2>\n
JSX es importante para el desarrollo web porque:<\/p>\n
    \n
  1. Permite a los desarrolladores construir interfaces de usuario de una forma m\u00e1s intuitiva y familiar.<\/li>\n<\/ol>\n
      \n
    1. En lugar de manipular directamente el DOM, los desarrolladores pueden utilizar JSX para describir la estructura de su interfaz de usuario de una forma m\u00e1s parecida a escribir HTML.<\/li>\n<\/ol>\n
        \n
      1. Esto permite un desarrollo m\u00e1s eficaz y flexible. Como JSX es s\u00f3lo JavaScript, los desarrolladores pueden aprovechar todas las funciones de JavaScript para crear interfaces de usuario m\u00e1s complejas y din\u00e1micas.<\/li>\n<\/ol>\n
          \n
        1. Es una parte importante de la biblioteca React<\/a>, que es una de las opciones m\u00e1s populares para construir interfaces de usuario en el desarrollo web moderno. Si quieres utilizar React, tendr\u00e1s que aprender JSX.<\/li>\n<\/ol>\n\n
          Resumen<\/h2>\n
          JSX es una extensi\u00f3n sint\u00e1ctica de JavaScript que permite a los desarrolladores escribir marcas similares a HTML dentro de un archivo JavaScript. Esto facilita la creaci\u00f3n de interfaces de usuario din\u00e1micas e interactivas para aplicaciones web.<\/p>\n
          Has aprendido algunas reglas que debes seguir al utilizar JSX: siguiendo estas reglas, podemos escribir c\u00f3digo limpio, legible y mantenible, que sea coherente con las convenciones de nomenclatura de JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Tradicionalmente, los desarrolladores han separado el marcado y la l\u00f3gica en archivos distintos, utilizando HTML para la estructura y CSS para el estilo y escribiendo despu\u00e9s …<\/p>\n","protected":false},"author":287,"featured_media":66194,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1296,1337],"class_list":["post-66193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-herramientas-de-desarrollo-web"],"yoast_head":"\nGu\u00eda sin Complicaciones de la Sintaxis JSX - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende todo sobre JSX (JavaScript XML), una extensi\u00f3n de sintaxis para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar a HTML dentro de un archivo JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gu\u00eda sin Complicaciones de la Sintaxis JSX\" \/>\n<meta property=\"og:description\" content=\"Aprende todo sobre JSX (JavaScript XML), una extensi\u00f3n de sintaxis para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar a HTML dentro de un archivo JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-24T10:45:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:29:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende todo sobre JSX (JavaScript XML), una extensi\u00f3n de sintaxis para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar a HTML dentro de un archivo JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Gu\u00eda sin Complicaciones de la Sintaxis JSX\",\"datePublished\":\"2023-05-24T10:45:24+00:00\",\"dateModified\":\"2025-10-01T19:29:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\"},\"wordCount\":1416,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg\",\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\",\"name\":\"Gu\u00eda sin Complicaciones de la Sintaxis JSX - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg\",\"datePublished\":\"2023-05-24T10:45:24+00:00\",\"dateModified\":\"2025-10-01T19:29:45+00:00\",\"description\":\"Aprende todo sobre JSX (JavaScript XML), una extensi\u00f3n de sintaxis para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar a HTML dentro de un archivo JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg\",\"width\":1500,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Herramientas de Desarrollo Web\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gu\u00eda sin Complicaciones de la Sintaxis JSX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gu\u00eda sin Complicaciones de la Sintaxis JSX - Kinsta\u00ae","description":"Aprende todo sobre JSX (JavaScript XML), una extensi\u00f3n de sintaxis para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar a HTML dentro de un archivo JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/","og_locale":"es_ES","og_type":"article","og_title":"Gu\u00eda sin Complicaciones de la Sintaxis JSX","og_description":"Aprende todo sobre JSX (JavaScript XML), una extensi\u00f3n de sintaxis para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar a HTML dentro de un archivo JavaScript.","og_url":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-05-24T10:45:24+00:00","article_modified_time":"2025-10-01T19:29:45+00:00","og_image":[{"width":1500,"height":750,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprende todo sobre JSX (JavaScript XML), una extensi\u00f3n de sintaxis para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar a HTML dentro de un archivo JavaScript.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Gu\u00eda sin Complicaciones de la Sintaxis JSX","datePublished":"2023-05-24T10:45:24+00:00","dateModified":"2025-10-01T19:29:45+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/"},"wordCount":1416,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg","inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/","url":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/","name":"Gu\u00eda sin Complicaciones de la Sintaxis JSX - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg","datePublished":"2023-05-24T10:45:24+00:00","dateModified":"2025-10-01T19:29:45+00:00","description":"Aprende todo sobre JSX (JavaScript XML), una extensi\u00f3n de sintaxis para JavaScript que permite a los desarrolladores escribir c\u00f3digo similar a HTML dentro de un archivo JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/what-is-jsx-2.jpg","width":1500,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Herramientas de Desarrollo Web","item":"https:\/\/kinsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/"},{"@type":"ListItem","position":3,"name":"Gu\u00eda sin Complicaciones de la Sintaxis JSX"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=66193"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66193\/revisions"}],"predecessor-version":[{"id":66249,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66193\/revisions\/66249"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66193\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/66194"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=66193"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=66193"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=66193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}