{"id":2620,"date":"2021-08-21T14:49:52","date_gmt":"2021-08-21T19:49:52","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=2620"},"modified":"2024-04-02T21:43:21","modified_gmt":"2024-04-03T03:43:21","slug":"como-relaciona-react-reactdom-jsx","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-relaciona-react-reactdom-jsx\/","title":{"rendered":"\u00bfC\u00f3mo funciona React con ReactDOM y JSX?"},"content":{"rendered":"

En esta publicaci\u00f3n veremos como crear un componente,<\/strong> y comprender como se relaciona react<\/strong> con ReactDOM<\/strong> and JSX<\/strong>. Tener buenos fundamentos sobre el funcionamiento de React es muy importante para aprender m\u00e1s r\u00e1pido esta librer\u00eda. Adem\u00e1s, al entender bien estos fundamentos, es f\u00e1cil arreglar errores a la hora de crear nuestros componentes y aplicaciones. <\/p>\n\n\n\n

Primero utilizaremos solo react<\/strong> para crear un elemento y ReactDOM<\/strong> para pintarlo, luego agregaremos JSX<\/strong> y finalmente veremos como podemos convertir ese elemento en un componente reutilizable.<\/p>\n\n\n\n

Para los que no tienen idea que es React, es una librer\u00eda escrita en JavaScript que facilita la creaci\u00f3n de interfaces gr\u00e1ficas de usuario para aplicaciones web y m\u00f3viles. Esta basada en componentes y composici\u00f3n en lugar de herencia<\/a>.<\/p>\n\n\n\n

Vamos a usar una herramienta en l\u00ednea llamada condesandbox<\/a>. Aqu\u00ed crearemos un nuevo sandbox con la plantilla de HTML 5<\/strong>, tambien se le llama static<\/strong>.<\/p>\n\n\n\n

\"Plantilla
Plantilla sandbox HTML5<\/figcaption><\/figure>\n\n\n\n

Luego creamos un archivo api-dom.html<\/code> y otro react.html<\/code>, en el body de ambos archivos agregamos un div con el atributo id igual a \"raiz-app\"<\/strong><\/code>, en este elemento contenedor vamos a insertar todos los elementos nuevos.<\/p>\n\n\n\n

Todo lo referente a API DOM<\/strong> deber estar en el archivo api-dom.html<\/code> y todo lo referente a react<\/strong> in react.html<\/code>.<\/p>\n\n\n\n

API DOM: Crear un elemento saludo simple<\/h2>\n\n\n\n

El objetivo es crear un elemento donde saludemos a nuestro usuario a trav\u00e9s de un texto. Primero usaremos el API del DOM que se encuentra en todos los navegadores. Esto nos ayudar\u00e1 a comparar y visualizar los beneficios de usar React.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>body<\/span>><\/span><\/span>\n  <\/span><<\/span>div<\/span> <\/span>id<\/span>=<\/span>"<\/span>raiz-app<\/span>"<\/span>><\/<\/span>div<\/span>><\/span><\/span>\n  <\/span><<\/span>script<\/span>><\/span><\/span>\n    const saludo = document.createElement('div');<\/span><\/span>\n    saludo.textContent = 'Hola, soy un elemento saludo creado con API DOM';<\/span><\/span>\n    const raiz = document.getElementById('raiz-app');<\/span><\/span>\n    raiz.appendChild(saludo);<\/span><\/span>\n  <\/span><\/<\/span>script<\/span>><\/span><\/span>\n<\/<\/span>body<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Creamos un elemento div<\/code> y dentro agregamos el texto del saludo. Finalmente agregamos nuestro saludo<\/strong> a nuestro contenedor raiz-app<\/strong> con node.appenChild(node)<\/code>.<\/p>\n\n\n\n
Si abres tu archivo api-dom.html<\/strong> usando el navegador web del lado derecho de la interfaz de condesandbox, el resultado debe ser algo as\u00ed.<\/p>\n\n\n\n
\"Resultado
Resultado de document.createElement<\/figcaption><\/figure>\n\n\n\n
React: crear elemento saludo<\/h2>\n\n\n\n
Ahora vamos a crear el mismo elemento de la secci\u00f3n anterior con React.<\/p>\n\n\n\n
Importar c\u00f3digo de la librer\u00eda<\/h3>\n\n\n\n
Para empezar a utilizar React es necesario descargar su c\u00f3digo, existen varias formas de usar el c\u00f3digo de React, por el momento simplemente descargamos la librer\u00eda usando la etiqueta <script><\/code> dentro de la etiqueta <head><\/code> de nuestro archivo react.html<\/code>. De la siguiente manera.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>head<\/span>><\/span><\/span>\n  <\/span><<\/span>title<\/span>><\/span>React.createElement<\/span><\/<\/span>title<\/span>><\/span><\/span>\n  <\/span><<\/span>script<\/span> <\/span>src<\/span>=<\/span>"<\/span>https:\/\/unpkg.com\/react@17\/umd\/react.development.js<\/span>"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Algo muy bueno de React es que separa las responsabilidades, lo que acabamos de agregar, descarga el c\u00f3digo necesario para crear elementos y componentes. Para poder pintar esos elementos en nuestra p\u00e1gina web, usamos ReactDOM<\/code>. Pintar elementos en la p\u00e1gina web desde luego que debe ser otra responsabilidad.<\/p>\n\n\n\n
Para usar ReactDOM.render()<\/code> necesitamos descargar su c\u00f3digo usando de nuevo la etiqueta <script><\/code>, igual que hicimos con react<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>head<\/span>><\/span><\/span>\n  <\/span><<\/span>title<\/span>><\/span>React.createElement<\/span><\/<\/span>title<\/span>><\/span><\/span>\n  <\/span><<\/span>script<\/span> <\/span>src<\/span>=<\/span>"<\/span>https:\/\/unpkg.com\/react@17\/umd\/react.development.js<\/span>"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n  <\/span><<\/span>script<\/span> <\/span>src<\/span>=<\/span>"<\/span>https:\/\/unpkg.com\/react-dom@17\/umd\/react-dom.development.js<\/span>"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Crear saludo con React.createElement() y ReactDOM.render()<\/h3>\n\n\n\n
Ahora s\u00ed, creamos nuestro nuevo elemento usando React.createElement(component, props, ...children)<\/strong><\/code><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>body<\/span>><\/span><\/span>\n  <\/span><<\/span>div<\/span> <\/span>id<\/span>=<\/span>"<\/span>raiz-app<\/span>"<\/span>><\/<\/span>div<\/span>><\/span><\/span>\n  <\/span><<\/span>script<\/span>><\/span><\/span>\n    const saludo = React.createElement(<\/span><\/span>\n      'div',<\/span><\/span>\n      null,<\/span><\/span>\n      'Hola, soy un elemento saludo creado con React');<\/span><\/span>\n\tReactDOM.render(saludo, document.getElementById('raiz-app'));<\/span><\/span>\n  <\/span><\/<\/span>script<\/span>><\/span><\/span>\n<\/<\/span>body<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
La primera diferencia con document.createElement()<\/code>, es que React.createElement()<\/code> recibe como par\u00e1metros adicionales un objeto de propiedades y luego cualquier n\u00famero  de par\u00e1metros que se convertir\u00e1n en elementos hijos. <\/p>\n\n\n\n
De momento no le agregamos propiedades, pero si queremos agregar el saludo como un elemento de tipo texto, este elemento de tipo texto ser\u00e1 un elemento hijo. Es lo que en API DOM seria node.textContent<\/code>.<\/p>\n\n\n\n
Finalmente pintamos nuestro saludo<\/strong> usando el m\u00e9todo ReactDOM.render()<\/code>.  Por el momento digamos que ReactDOM.render()<\/code> es como el node.appendChild()<\/code>.<\/p>\n\n\n\n
\"Resultado
Resultado de React.createElement<\/figcaption><\/figure>\n\n\n\n
Podemos agregar m\u00e1s elementos hijos simplemente agregando m\u00e1s par\u00e1metros, de la siguiente forma:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> saludo <\/span>=<\/span> react<\/span>.<\/span>createElement<\/span>(<\/span><\/span>\n  <\/span>'<\/span>div<\/span>'<\/span>,<\/span><\/span>\n  <\/span>null,<\/span><\/span>\n  <\/span>'<\/span>Hola, soy un saludo creado con React<\/span>'<\/span>,<\/span><\/span>\n  <\/span>'<\/span> Y yo soy otro hijo<\/span>'<\/span>,<\/span><\/span>\n  <\/span>'<\/span> Y yo otro hijo m\u00e1s<\/span>'<\/span><\/span>\n)<\/span>;<\/span><\/span>\nReactDOM<\/span>.<\/span>render<\/span>(saludo<\/span>,<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>))<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
El par\u00e1metro children<\/code> es un par\u00e1metro rest, el cual puede tomar cualquier n\u00famero de par\u00e1metros e internamente hacer referencia a ellos a trav\u00e9s de un array, React sabe como usarlos para pintarlos. En este ejemplo children<\/code> contiene lo siguiente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
children <\/span>=<\/span> [<\/span><\/span>\n  <\/span>'<\/span>Hola, soy un saludo creado con React<\/span>'<\/span>,<\/span><\/span>\n  <\/span>'<\/span> Y yo soy otro hijo<\/span>'<\/span>,<\/span><\/span>\n  <\/span>'<\/span> Y yo otro hijo m\u00e1s<\/span>'<\/span><\/span>\n]<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
API DOM: Modificamos el elemento saludo agregando propiedades y estilos<\/h2>\n\n\n\n
Nuestro elemento hasta ahora es demasiado simple, vamos a agregarle algunos estilos, y para eso vamos a utilizar dos propiedades, className<\/code> and style<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> saludo <\/span>=<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>div<\/span>'<\/span>)<\/span>;<\/span><\/span>\nsaludo<\/span>.<\/span>textContent <\/span>=<\/span> <\/span>'<\/span>Hola, soy un elemento saludo creado con API DOM<\/span>'<\/span>;<\/span><\/span>\nsaludo<\/span>.<\/span>className <\/span>=<\/span> <\/span>"<\/span>saludo<\/span>"<\/span>;<\/span><\/span>\nsaludo<\/span>.<\/span>style <\/span>=<\/span> <\/span>'<\/span>font-weight:bold; text-transform:uppercase;<\/span>'<\/span>;<\/span><\/span>\nconst<\/span> contenedor <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>)<\/span>;<\/span><\/span>\ncontenedor<\/span>.<\/span>appendChild<\/span>(saludo)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The property className<\/code> no se llama class<\/code> para evitar conflictos, debido a que class<\/code> es una palabra reservada en JavaScript usada para definir clases.<\/p>\n\n\n\n
Ahora creamos la reglas de estilo para la clase de estilos saludo<\/code>. Vamos a usar la etiqueta <style> dentro de <head><\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>head<\/span>><\/span><\/span>\n  <\/span><<\/span>style<\/span>><\/span><\/span>\n    .saludo <\/span>{<\/span><\/span>\n      background: orange;<\/span><\/span>\n      padding: 16px;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span><\/<\/span>style<\/span>><\/span><\/span>\n<<\/span>head<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The property style<\/code> tambi\u00e9n aplica estilos, en este ejemplo pone el texto en negritas<\/strong> lo convierte a may\u00fasculas<\/strong>. El resultado debe ser algo como la imagen de abajo.<\/p>\n\n\n\n
\"Resultado
Resultado de document.createElement con estilos y propiedades<\/figcaption><\/figure>\n\n\n\n
React: Modificamos el elemento saludo agregando propiedades y estilos<\/h2>\n\n\n\n
En props<\/code> podemos agregar las propiedades que necesitemos, en este ejemplo solo agregamos className<\/code> and styl<\/code>e. <\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> saludo <\/span>=<\/span> react<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>div<\/span>'<\/span>,<\/span> <\/span>{<\/span><\/span>\n    <\/span>className<\/span>:<\/span> <\/span>'<\/span>saludo<\/span>'<\/span>,<\/span><\/span>\n    <\/span>style<\/span>:<\/span> <\/span>{<\/span><\/span>\n      <\/span>'<\/span>font-weight<\/span>'<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span><\/span>\n      <\/span>'<\/span>text-transform<\/span>'<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span><\/span>\n    <\/span>},<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>'<\/span>Hola, soy un elemento saludo creado con React<\/span>'<\/span><\/span>\n)<\/span>;<\/span><\/span>\nconst<\/span> contenedor <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>))<\/span><\/span>\nReactDOM<\/span>.<\/span>render<\/span>(saludo<\/span>,<\/span> container)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
En la propiedad style<\/code>, los estilos son agregados a trav\u00e9s de un objeto en lugar de una cadena de caracteres, esto es m\u00e1s c\u00f3modo y legible, \u00bfImag\u00ednate que fueran muchos estilos?, la supercadena larga que se formar\u00eda. <\/p>\n\n\n\n
Tampoco no es que se recomiende esta forma de aplicar estilos a tus elementos en React, pero podemos aprovechar esta comodidad por el momento.<\/p>\n\n\n\n
Otro beneficio en la propiedad style<\/code>, es que en las declaraciones de estilos pueden ser escritas en camelCase<\/strong>, de hecho esa es la convenci\u00f3n en Javascript y en React. Es m\u00e1s simple escribir en camelCase<\/strong> que estar encerrando todas las propiedades en comillas y con guiones medios entre palabras.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> saludo <\/span>=<\/span> react<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>div<\/span>'<\/span>,<\/span> <\/span>{<\/span><\/span>\n    <\/span>style<\/span>:<\/span> <\/span>{<\/span><\/span>\n      <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span><\/span>\n      <\/span>textTransform<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span><\/span>\n    <\/span>},<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>'<\/span>Hola, soy un elemento saludo creado con React<\/span>'<\/span><\/span>\n})<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Si usas la forma, property-name<\/strong><\/code>, React te mostrara unos “warnings” en la consola. Estos “warnings” solo saldr\u00e1n en modo develop, <\/strong>en producci\u00f3n no hay problema. Solo es una convenci\u00f3n y no es obligatoria.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
Warning<\/span>:<\/span> Unsupported style property font<\/span>-<\/span>weight<\/span>.<\/span> Did you mean fontWeight<\/span>?<\/span><\/span>\n    at div<\/span><\/span>\nprintWarning @ react<\/span>-<\/span>dom<\/span>.<\/span>development<\/span>.<\/span>js<\/span>:<\/span>61<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Por \u00faltimo agregamos los estilos CSS que usara la clase saludo<\/strong>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>head<\/span>><\/span><\/span>\n  <\/span><<\/span>style<\/span>><\/span><\/span>\n    .saludo <\/span>{<\/span><\/span>\n      border: 1px solid #eee;<\/span><\/span>\n      padding: 10px;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span><\/<\/span>style<\/span>><\/span><\/span>\n<<\/span>head<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Al final debes tener un resultado como el de la imagen de abajo.<\/p>\n\n\n\n
\"Resultado
Resultado de React.createElement y definiendo propiedades<\/figcaption><\/figure>\n\n\n\n
React: children<\/code> in props<\/code><\/h2>\n\n\n\n
El contenido de nuestro saludo lo podemos agregar en el object props<\/code><\/strong>, en la propiedad children<\/strong><\/code>, en lugar del \u00faltimo par\u00e1metro de la funci\u00f3n. children<\/strong><\/code>, en este caso funciona como la propiedad textContent<\/code> del ejemplo usando API DOM.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> saludo <\/span>=<\/span> react<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>div<\/span>'<\/span>,<\/span> <\/span>{<\/span><\/span>\n  <\/span>className<\/span>:<\/span> <\/span>'<\/span>saludo<\/span>'<\/span>,<\/span><\/span>\n  <\/span>style<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span><\/span>\n    textTransform<\/span>'<\/span>: <\/span>'<\/span>uppercase<\/span>'<\/span><\/span>\n  },<\/span><\/span>\n  children<\/span>:<\/span> <\/span>'<\/span>Hola, soy un elemento saludo creado con React<\/span>'<\/span><\/span>\n}<\/span>);<\/span><\/span>\nReactDOM<\/span>.<\/span>render<\/span>(saludo<\/span>,<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>));<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
En un ejemplo anterior comentamos que el tercer par\u00e1metro children<\/code> es un par\u00e1metro rest<\/strong>, el cual recibe cualquier n\u00famero de par\u00e1metros los almacena en un array<\/strong><\/code>. Pues la propiedad children<\/code> tambi\u00e9n puede recibir un Array de hijos que React puede pintar.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> saludo <\/span>=<\/span> react<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>div<\/span>'<\/span>,<\/span> <\/span>{<\/span><\/span>\n  <\/span>className<\/span>:<\/span> <\/span>'<\/span>saludo<\/span>'<\/span>,<\/span><\/span>\n  <\/span>style<\/span>:<\/span> <\/span>{<\/span><\/span>\n     <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span><\/span>\n     <\/span>textTransform<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>chidren<\/span>:<\/span> [<\/span><\/span>\n    <\/span>'<\/span>Hola, soy un saludo creado con React<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span> Y yo soy otro hijo<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span> Y yo otro hijo m\u00e1s<\/span>'<\/span><\/span>\n  ]<\/span><\/span>\n);<\/span><\/span>\nconst contenedor <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>);<\/span><\/span>\nReactDOM<\/span>.<\/span>render<\/span>(saludo<\/span>,<\/span> contenedor);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
A lo mejor  te parezca un poco complicado, pero es mucho m\u00e1s sencillo que el ejemplo del API DOM, imag\u00ednate que en lugar de texto  fueran otros elementos como <h1><\/code>, <p>, otros <div><\/code>. Tendr\u00edas que crear elementos, agregarles el contenido y luego insertarlos  dentro del elemento saludo<\/strong>. <\/p>\n\n\n\n
Aun con este ejemplo, aunque es m\u00e1s sencillo que usar el API del DOM, se empieza a complicar cuando un elemento tiene muchos elemento hijos, por eso en React se recomienda usar JSX. Lo veremos a continuaci\u00f3n.<\/p>\n\n\n\n
React con ReactDOM y JSX<\/h2>\n\n\n\n
Ok, ya vimos como crear un elemento en React, pero ahora vamos a simplificar su implementaci\u00f3n,  JSX internamente utiliza React.createElement(component, props, ...children)<\/code>, pero estar llamando una funci\u00f3n para crear un elemento complica la legibilidad del c\u00f3digo.<\/p>\n\n\n\n
Que tal si en lugar de escribir la funci\u00f3n para crear un elemento, simplemente lo creas como cualquier otro codigo HTML, es mucho mas facil de escribir y leer, veamos la creaci\u00f3n del elemento saludo con React y JSX.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> saludo <\/span>=<\/span> <\/span><<\/span>div<\/span>><\/span>Hola, soy un elemento saludo creado con React y JSX<\/span><\/<\/span>div<\/span>>;<\/span><\/span>\nconst<\/span> contenedor <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>)<\/span>;<\/span><\/span>\nReactDOM<\/span>.<\/span>render<\/span>(saludo<\/span>,<\/span> contenedor)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Mucha m\u00e1s f\u00e1cil, \u00bfCierto?, si te das cuenta no encerramos entre comillas el contenido del elemento saludo, JSX es lo suficientemente inteligente para entenderlo, pero para ellos es necesario descargar la herramienta llamada babel.js<\/code> que lo hace posible. <\/p>\n\n\n\n
Babel es una herramienta que no solo se encarga de convertir codigo JSX a invocaciones de React.createElement<\/code>, sino que tambi\u00e9n convierte c\u00f3digo con las \u00faltimas caracter\u00edsticas del est\u00e1ndar ECMAScript<\/a> a c\u00f3digo que los navegadores web puedan entender. Para m\u00e1s informaci\u00f3n visita su sitio oficial.<\/a><\/p>\n\n\n\n
Es importante aclarar que JSX internamente sigue siendo c\u00f3digo JS, aunque parezca HTML y el uso de sintaxis HTML sea casi id\u00e9ntica.<\/p>\n\n\n\n
Usar babel para convertir JSX a JS<\/h2>\n\n\n\n
Todo muy bonito, pero para que podamos usar c\u00f3digo JSX tenemos que descargar la herramienta.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>head<\/span>><\/span><\/span>\n <\/span><<\/span>script<\/span> <\/span>src<\/span>=<\/span>"<\/span>https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js<\/span>"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Al principio nuestro c\u00f3digo lo insertamos dentro de las etiquetas <script><\/code>, pero para que babel pueda identificar que debe convertir codigo JSX a JS, es necesario decirle que es de tipo text\/babel<\/code> con el atributo type<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>script<\/span> <\/span>type<\/span>=<\/span>"<\/span>text\/babel<\/span>"<\/span>><\/span><\/span>\n  const saludo = <\/span><<\/span>div<\/span>><\/span>Hola, soy un elemento saludo creado con React y JSX<\/span><\/<\/span>div<\/span>><\/span>;<\/span><\/span>\n  const contenedor = document.getElementById('raiz-app');<\/span><\/span>\n  ReactDOM.render(saludo, contenedor)<\/span><\/span>\n<\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Ahora vamos agregar las propieades className y style para que tenga los mismos estilos que los ejemplos anteriores.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>script<\/span> <\/span>type<\/span>=<\/span>"<\/span>text\/babel<\/span>"<\/span>><\/span><\/span>\n  const saludo = (<\/span><\/span>\n    <\/span><<\/span>div<\/span><\/span>\n\t  <\/span>className<\/span>=<\/span>"<\/span>saludo<\/span>"<\/span><\/span>\n\t  <\/span>style<\/span>={{<\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span> <\/span>textTransform<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span>}}<\/span><\/span>\n\t><\/span><\/span>\n      Hola, soy un elemento saludo creado con React y JSX<\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  );<\/span><\/span>\n  const contenedor = document.getElementById('raiz-app');<\/span><\/span>\n  ReactDOM.render(saludo, contenedor)<\/span><\/span>\n<\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Cuando se tiene m\u00e1s de una l\u00ednea de JSX, es recomendado encerrarlo entre par\u00e9ntesis para mejorar el entendimiento y evitar errores de JavaScript debido a la inserci\u00f3n autom\u00e1tica de punto y coma. <\/p>\n\n\n\n
Expresiones JS en atributos JSX<\/h3>\n\n\n\n
Algo interesante es como definimos el valor del atributo styles<\/code>, usamos un par de llaves {}<\/code>, todo lo que est\u00e1 encerrado en un par de llaves se ejecuta, por qu\u00e9 JSX lo identifica como una expresi\u00f3n de Javascript. En este caso JSX identifica que estamos definiendo un objeto para ser asignado a la propiedad style<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> saludo <\/span>=<\/span> (<\/span><\/span>\n  <\/span><<\/span>div<\/span><\/span>\n  <\/span>className<\/span>=<\/span>"<\/span>saludo<\/span>"<\/span><\/span>\n  <\/span>style<\/span>={{<\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span> <\/span>textTransform<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span>}}<\/span><\/span>\n  ><\/span><\/span>\n    Hola, soy un elemento saludo creado con React y JSX<\/span><\/span>\n  <\/span><\/<\/span>div<\/span>><\/span><\/span>\n)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Tambi\u00e9n podemos definir el objeto en otra l\u00ednea y luego usar esa variable para realizar la asignaci\u00f3n. <\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> styles <\/span>=<\/span> <\/span>{<\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span> <\/span>textTransform<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span>};<\/span><\/span>\nconst<\/span> saludo <\/span>=<\/span> (<\/span><\/span>\n  <\/span><<\/span>div<\/span><\/span>\n  <\/span>className<\/span>=<\/span>"<\/span>saludo<\/span>"<\/span><\/span>\n  <\/span>style<\/span>={<\/span>styles<\/span>}<\/span><\/span>\n  ><\/span><\/span>\n    Hola, soy un elemento saludo creado con React y JSX<\/span><\/span>\n  <\/span><\/<\/span>div<\/span>><\/span><\/span>\n)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
El resultado de utilizar React con ReactDOM y JSX debe ser el mismo que en las \u00faltimas secciones, algo como la imagen de abajo.<\/p>\n\n\n\n
\"Resultado
Resultado React con ReactDOM y JSX<\/figcaption><\/figure>\n\n\n\n
Componente reutilizable de React con ReactDOM y JSX<\/h2>\n\n\n\n
Ya que comprendemos la relaci\u00f3n que tiene React con ReactDOM y JSX, es hora de que nuestro elemento saludo se convierta en un elemento reutilizable para saludar.<\/p>\n\n\n\n
En Javascript el concepto de reutilizaci\u00f3n son las funciones<\/a>, en React serian los componentes. Algo muy bueno de React, es que podemos hacer un componente usando una funci\u00f3n. \u00bfQu\u00e9 cosa puede ser m\u00e1s transparente que eso?<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>Saludo<\/span>(<\/span>props<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span><\/span>\n      <\/span>className<\/span>=<\/span>'<\/span>Saludo<\/span>'<\/span><\/span>\n      <\/span>style<\/span>={<\/span>props<\/span>.<\/span>style<\/span>}<\/span><\/span>\n    ><\/span><\/span>\n      <\/span>{<\/span>props<\/span>.<\/span>children<\/span>}<\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Analizando un poco el c\u00f3digo, vemos como la funci\u00f3n Saludo<\/code>, recibe un objeto de propiedades para ser usadas en el componente, recordemos que el contenido de este ejemplo se convierten en invocaciones a React.createElement(component, props, ...children)<\/strong><\/code>. <\/p>\n\n\n\n
En un ejemplo anterior vimos como asignar valores a las propiedades encerrando expresiones con llaves {}<\/code>, no solo podemos hacer eso con atributos, sino tambi\u00e9n para pintar los elementos hijos, ejecutando {props.children}.<\/code><\/p>\n\n\n\n
El c\u00f3digo anterior JSX, se convierte en c\u00f3digo JS, as\u00ed:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>Saludo<\/span>(<\/span>props<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>react<\/span>.<\/span>createElement<\/span>(<\/span>"<\/span>div<\/span>"<\/span>,<\/span> <\/span>{<\/span><\/span>\n    className<\/span>:<\/span> <\/span>"<\/span>Saludo<\/span>"<\/span>,<\/span><\/span>\n    style<\/span>:<\/span> <\/span>props<\/span>.<\/span>style<\/span><\/span>\n  <\/span>},<\/span> <\/span>props<\/span>.<\/span>children<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Ahora que tenemos un componente funci\u00f3n, podemos usarlo de las siguientes formas.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> styles <\/span>=<\/span> <\/span>{<\/span> <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span> <\/span>textTransform<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span> <\/span>};<\/span><\/span>\nconst<\/span> contenido <\/span>=<\/span> (<\/span><\/span>\n  <\/span><<\/span>div<\/span>><\/span><\/span>\n   <\/span>{<\/span> <\/span>Saludo<\/span>(<\/span>{<\/span> <\/span>children<\/span>:<\/span> <\/span>'<\/span>Instancia de Saludo<\/span>'<\/span> <\/span>}<\/span>) <\/span>}<\/span><\/span>\n   <\/span>{<\/span><\/span>\n     <\/span>Saludo<\/span>(<\/span>{<\/span><\/span>\n       <\/span>children<\/span>:<\/span> <\/span>'<\/span>Instancia de Saludo en negritas<\/span>'<\/span>,<\/span><\/span>\n       <\/span>style<\/span>:<\/span> <\/span>{<\/span> <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span> <\/span>}<\/span><\/span>\n     <\/span>}<\/span>)<\/span><\/span>\n   <\/span>}<\/span><\/span>\n   <\/span><<\/span>Saludo<\/span> <\/span>style<\/span>={<\/span>styles<\/span>}><\/span>Instancia de Saludo con etiqueta<\/span><\/<\/span>Saludo<\/span>><\/span><\/span>\n  <\/span><\/<\/span>div<\/span>><\/span><\/span>\n)<\/span>;<\/span><\/span>\nconst<\/span> contenedor <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>)<\/span>;<\/span><\/span>\nReactDOM<\/span>.<\/span>render<\/span>(contenido<\/span>,<\/span> contenedor)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Lo mismo, todo este c\u00f3digo se convierte a algo como lo siguiente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>Saludo<\/span>(<\/span>props<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>react<\/span>.<\/span>createElement<\/span>(<\/span>"<\/span>div<\/span>"<\/span>,<\/span><\/span>\n    <\/span>{<\/span><\/span>\n      className<\/span>:<\/span> <\/span>"<\/span>Saludo<\/span>"<\/span>,<\/span><\/span>\n      style<\/span>:<\/span> <\/span>props<\/span>.<\/span>style<\/span><\/span>\n    <\/span>},<\/span><\/span>\n    <\/span>props<\/span>.<\/span>children<\/span><\/span>\n )<\/span>;<\/span><\/span>\n}<\/span><\/span>\nconst<\/span> styles <\/span>=<\/span> <\/span>{<\/span> <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span> <\/span>textTransform<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span> <\/span>};<\/span><\/span>\nconst<\/span> contenido <\/span>=<\/span> react<\/span>.<\/span>createElement<\/span>(<\/span><\/span>\n  <\/span>"<\/span>div<\/span>"<\/span>,<\/span><\/span>\n  <\/span>null,<\/span><\/span>\n  <\/span>Saludo<\/span>(<\/span>{<\/span> <\/span>children<\/span>:<\/span> <\/span>'<\/span>Instancia de Saludo<\/span>'<\/span> <\/span>}<\/span>)<\/span>,<\/span><\/span>\n  <\/span>saludo<\/span>(<\/span>{<\/span><\/span>\n    <\/span>children<\/span>:<\/span> <\/span>'<\/span>Instancia de Saludo en negritas<\/span>'<\/span>,<\/span><\/span>\n    <\/span>style<\/span>:<\/span> <\/span>{<\/span><\/span>\n      <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>}<\/span>)<\/span>,<\/span><\/span>\n  react<\/span>.<\/span>createElement<\/span>(Saludo<\/span>,<\/span> <\/span>{<\/span> <\/span>style<\/span>:<\/span> styles <\/span>},<\/span> <\/span>"<\/span>Instancia de Saludo con etiqueta<\/span>"<\/span>)<\/span><\/span>\n)<\/span>;<\/span><\/span>\nconst<\/span> contenedor <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>)<\/span>;<\/span><\/span>\nReactDOM<\/span>.<\/span>render<\/span>(contenido<\/span>,<\/span> contenedor)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Y el resultado visual es esto.<\/p>\n\n\n\n
\"Resultado
Resultado de usar un componente reutilizable con React<\/figcaption><\/figure>\n\n\n\n
Date cuenta de que las invocaciones a la funci\u00f3n Saludo<\/code>, as\u00ed como el uso de la etiqueta Saludo<\/code>, se convierten en invocaciones a React.createElement(component, props, ...children)<\/code>. Y como el uso del JSX con la etiqueta <Saludo><\/code> facilita la lectura y creaci\u00f3n del componente. Veamos un ejemplo solo usando etiquetas.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> styles <\/span>=<\/span> <\/span>{<\/span> <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span>,<\/span> <\/span>textTransform<\/span>:<\/span> <\/span>'<\/span>uppercase<\/span>'<\/span> <\/span>};<\/span><\/span>\nconst<\/span> contenido <\/span>=<\/span> (<\/span><\/span>\n  <\/span><<\/span>div<\/span>><\/span><\/span>\n   <\/span><<\/span>Saludo<\/span>><\/span>Instancia de Saludo<\/span><\/<\/span>Saludo<\/span>><\/span><\/span>\n   <\/span><<\/span>Saludo<\/span> <\/span>style<\/span>={{<\/span> <\/span>fontWeight<\/span>:<\/span> <\/span>'<\/span>bold<\/span>'<\/span> <\/span>}}><\/span>Instancia de Saludo en negritas<\/span><\/<\/span>Saludo<\/span>><\/span><\/span>\n   <\/span><<\/span>Saludo<\/span> <\/span>style<\/span>={<\/span>styles<\/span>}><\/span>Instancia de Saludo con etiqueta<\/span><\/<\/span>Saludo<\/span>><\/span><\/span>\n  <\/span><\/<\/span>div<\/span>><\/span><\/span>\n)<\/span>;<\/span><\/span>\nconst<\/span> contenedor <\/span>=<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>raiz-app<\/span>'<\/span>)<\/span>;<\/span><\/span>\nReactDOM<\/span>.<\/span>render<\/span>(contenido<\/span>,<\/span> contenedor)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\u00bfQu\u00e9 tal? Mucho m\u00e1s simple \u00bfVerdad? <\/p>\n\n\n\n
Una \u00faltima cosa, cuando uses etiquetas de los componentes de React, siempre deben empezar con la primera letra May\u00fascula, as\u00ed es como reconoce JSX que debe invocar a una funci\u00f3n con ese nombre. De lo contrario se confundir\u00eda con las etiquetas normales de HTML y te lanzar\u00e1 un error como el siguiente. <\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
Warning<\/span>:<\/span> The tag <\/span><<\/span>saludo<\/span>><\/span> is unrecognized <\/span>in<\/span> <\/span>this<\/span> browser<\/span>.<\/span> If you want to render a React component<\/span>,<\/span> start its name <\/span>with<\/span> an uppercase letter<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
References<\/h2>\n\n\n\n
https:\/\/reactjs.org\/<\/a><\/p>\n\n\n\n
https:\/\/babeljs.io\/<\/a><\/p>","protected":false},"excerpt":{"rendered":"
Comprende como se relacionan React con ReactDOM y JSX. Crea tu componente de React usando simplemente una funci\u00f3n.<\/p>","protected":false},"author":2,"featured_media":3719,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28,35],"tags":[55,73,75],"class_list":["post-2620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react","tag-jsx","tag-react","tag-reactdom"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/2620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=2620"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/2620\/revisions"}],"predecessor-version":[{"id":3810,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/2620\/revisions\/3810"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3719"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=2620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=2620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=2620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}