Cargando...

Te pasa que queres probar React pero te da vagancia iniciar un proyecto con React, webpack y las dependencias instaladas? O quizás queres conocer como funciona React por detras del codigo JSX y como se ve el compilado que se ejecuta en el navegador?

Bueno, en este post vamos a ver como funciona React detrás de JSX. Y luego vamos a agregar babel a nuestro index.html para poder usar JSX y ver como este es compilado.

React para el desarrollo frontend esta compuesto por dos librerias, React y ReactDOM, React contiene las funcionalidades de React, podemos crear componentes, usar los hooks, entre otras cosas y por otro lado tenemos a ReactDOM, que es utilizada en el desarrollo frontend para interactuar con los elementos del navegador.

Esto se pensó separado ya que las funcionalidades de React son independientes de donde se usen y ReactDOM se encarga de la conexión con el DOM en el caso del frontend, pero esto en mobile, con React Native, no seria necesario.

Agregando React en el index.html

Cuando queremos usar React en el front instalamos ambas dependencias desde NPM, pero tambien las tenemos disponibles como CDN en el caso de que las queramos usar sin la necesidad de levantar un proyecto con Node. Para esto deberíamos agregar los siguientes tags <script> en el head de nuestro html.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

reactjs.org/Enlaces CDN

Como veras también existen los CDN's de producción, la diferencia es que el compilado de producción esta mejor optimizado y pensado para una aplicación desplegada. Pero esta bueno para desarrollar usar el compilado de desarrollo, ya que este tiene alertas en la consola que pueden ayudarnos a evitar bugs.

Algo a tener en cuenta es que ambos CDN's contienen lo mismo, compilado de distinta manera, por lo tanto tenes que usar el par de desarrollo o el par de producción, no ambos. En mi caso voy a usar solo el de desarrollo.

Una vez que los hayamos agregado vamos a tener disponibles a nivel global las variables React y ReactDOM. En el caso de React vas a ver cosas como los hooks, la función para crear un componente y básicamente el core de React. Y en el caso de ReactDOM encontraras las funciones para interactuar con el DOM, particularmente la función render la vamos a usar en un momentito.

También ambas variables tienen una sección curiosa llamada __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 👀, Te invito a que imprimas ambas variables en la consola y revises que contienen, para esto ejecuta: console.log(React) y console.log(ReactDOM).

Escribiendo un Hello World con React

Bien, lo primero que vamos a hacer es agregar un <div> en nuestro <body>, en donde después le vamos a decir a React, "Hey React, renderiza acá mi aplicación plis", generalmente se le suele poner el id root a este div, no hay un porque, si te gusta otro id, o otra manera de identificarlo sentite libre de hacerlo, el objetivo es luego poder hacer referencia a ese div. Por lo tanto, en mi caso quedaría así:

<div id="root"></div>

Y eso seria todo el HTML que tenemos que agregar, ahora la idea es construir la aplicación desde código javascript con las funcionalidades que nos aporta React.

Ahora nuestro objetivo es renderizar un span que contenga el texto "Hello World ;)". Para esto agregaríamos un tag script y así quedaría nuestro html:

Hello World en React

Vamos por partes:

Primero obtenemos el elemento root y lo guardamos en una variable para luego pasarselo a ReactDOM.

Después creamos un elemento con la función React.createElement, a la cual le pasamos dos parámetros, primero el nombre del tag html que queremos crear, podríamos crear divs, headers, sections, o lo que quieramos pasándole el nombre del tag html correspondiente, en este caso queremos un span. Y el segundo parámetro representa las props de ese elemento y particularmente la prop children en react representa el contenido que va dentro el elemento que se esta creando, podemos pasarle un string plano o podríamos meter otro React.createElement si así lo quisiéramos.

Y por ultimo combinamos lo que queremos renderizar y en donde, se lo pasamos a la funcion render de ReactDOM y listo! si ejecutas el html ya se estaría renderizando de la siguiente manera:

Hello World en React

Genial! ya renderizaste tu primer elemento mediante React 😄. En la siguiente sección vamos a crear un componente y renderizar una lista, pero si queres podes detenerte acá y jugar un poco con el createElement, renderizar un elemento que tenga otro elemento adentro, probar pasarle mas props, las props, cuando creamos elementos html, serian como los atributos de los elementos, hay prop className, onClick, onChange, id, name, y así vas a encontrar lo mismo que se puede usar en elementos html.

Creando un componente

Un componente es de los conceptos mas importantes de React, en este caso lo voy a resumir en que el objetivo de un componente es algo que se va a reutilizar y que centraliza cierta lógica para que la misma no se repita en toda la aplicación. Además, un componente debería retornar un elemento que varia por las props y listo para ser renderizado.

Nosotros vamos a crear un componente Box, el mismo va a ser un div, con ciertos estilos que estan dentro de la clase "box"(te dejo la hoja de estilos, ya que el objetivo no son los estilos: styles.css) y que va a contener el children que reciba por props.

Por lo tanto el componente Box debería lucir así:

Componente Box en React

Es importante que las funciones que representan un componente empiecen con mayúscula, sino React no la va a reconocer como tal.

Y listo, ya tenemos nuestro componente. Crear un elemento con algún tag html o un componente es igual, para ambos ejecutamos la función React.createElement con la diferencia de que para tags html pasamos como primer parámetro el nombre del tag entre comillas y para componentes pasamos el nombre de la función, en este caso seria:

React.createElement(Box, {...props});

Entonces, podría ejecutarlo en la consola y se renderizaría mi cajita:

Componente Box renderizado

Agregando Babel para usar JSX

Por ultimo, vos estarás pensando que esto no es el React que esta en todos lados, realmente hay que usar React.createElement para cada componente/tag html que necesitamos renderizar? La respuesta es no, así es como funciona React por detrás, pero en el desarrollo se usa JSX, Que es JSX? Otro día voy a escribir sobre eso, mientras te dejo un link hacia la doc oficial acá.

Ahora vamos a usar jsx en archivos html, para esto deberiamos agregar babel como CDN, agregando en nuestro head la siguiente linea:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Babel nos ayuda a convertir código js moderno en código que puedan soportar los navegadores. En este caso lo vamos a usar para compilar código JSX a código js.

Y el tag script que va a contener el código JSX debe ser del tipo "text/babel". De la siguiente manera:

<script type="text/babel">...code</script>

También es posible tener un archivo app.jsx y hacer referencia como source del script:

<script type="text/babel" src="./app.jsx"></script>

Es lo mismo de ambas maneras. Y así es como se transformaría nuestro componente y nuestra app a código JSX:

Componente Box con JSX

Y se renderizarían exactamente de la misma manera:

Comparacion entre js y JSX

Algo curioso, una vez renderizado te invito a revisar como quedo el head en el navegador, ahí vas a ver el código compilado que genero babel y vas a ver que es lo mismo que hicimos antes con React.createElement. Esto porque en definitiva React funciona así y JSX nos facilita la sintaxis a la hora de codear.

Por ultimo, te dejo el link a mi repo acá, por si queres clonarlo/revisarlo o lo que necesites. Nos vemos! 😄

Volver