Breve introducción a la famosa librería JavaScript de Facebook.
En este tutorial vamos a aprender a hacer nuestra primera aplicación en React. La intención es tener una visión global de la librería para que puedas ver sus Fortalezas y debilidades, y en última instancia valores aplicarlo en tu stack de programación.
Si este tutorial te abre el apetito, y quieres profundizar más, entonces te aconsejo que me hagas follow y me dejes tu email aquí.
Virtual DOM
Antes de empezar me gustaría destacar la maravilla del Virtual Dom (VDOM). Ya que en mi opinión es la característica más destacable que otros frameworks (Angular, Vue, …) han copiado. Básicamente es una abstracción del HTML DOM donde se almacena una copia ideal o virtual de la Interfaz en memoria y se mantiene sincronizada mediante un proceso que se llama reconciliación.
Es importante destacarlo, porque gracias al VDOM react consigue:
- Mejor rendimiento, porque solo actualiza las partes del DOM que cambian y solo cuando lo hacen. Cambiar la Interfaz de Usuario es muy costosa computacionalmente .
- Puede renderizarse en el backend
- Puede renderizar otras cosas diferentes a páginas HTML. Por ejemplo, aplicaciones móviles nativas.
Puesta en marcha
El mejor camino para arrancar un proyecto de React es utilizar el scaffolder oficial de facebook: create-react-app, sin embargo para nuestra primera aplicación vamos a utilizar React y JavaScript puro, sin otros sabores como webpack, ni otras herramientas.
De este modo a un index.html en blanco incluiremos los tags script necesarios:
- React: Es la librería frontend basada en componentes que queremos aprender.
- React Dom: React es una librería frontend agnóstica de dónde se va a renderizar. Dado que vamos a hacer webs, necesitamos apoyarnos en este paquete de React. Pero React es mucho más potente, ya que nos permite renderizar Aplicaciones Móviles Nativas con react-native y aplicaciones de Realidad Virtual con react-360 y todo esto utilizando código Javascript.
- Babel: Nos permite utilizar el Javascript del futuro hoy. Traduce nuestros ficheros JSX en javascript plano.
Además necesitamos
- Etiqueta div raíz
<div id="root">dentro del que se renderizará toda nuestra aplicación - Etiqueta script
<script type="text/babel>"en el que escribiremos nuestros componentes de React utilizando JSX.
Componentes
Los componentes son el factor clave de React. Es importante que lo entendamos bien, para cambiar nuestra mentalidad.
En vez de utilizar Servicios Singletons como en otros Frontend Frameworks, en react “Todo es un componente”.
Un componente es una pieza de código que nos permite aislar de forma independiente y reusable una parte de la Interfaz de Usuario (UI)
Así que vamos a crear nuestro primer componente que nos diga “Hola Mundo”.
Definimos nuestro componente como una clase de Javscript ES6 que extiende de React.Component . Dentro de la clase debemos definir un método render que será el que defina nuestro componente, devolviendo HTML y/o otros componentes.
A la mezcla de Javscript con HTML lo llamamos JSX, aunque en realidad Babel lo traducirá todo a Javascript plano, siendo el HTML en realidad un objeto JSON.
Por último, debemos llamar a ReactDom.render para indicar qué componente es la entrada a nuestra App y dónde debe renderizarse.
Fíjate como llamamos a nuestro componente con la etiqueta <Hola /> , y la etiqueta está autocerrada con el slash/> .
También es importante fijarse que la llamada document.getElementById("root") hace referencia a nuestra etiqueta <div id="root"> en nuestro index.html.
Y aquí puedes ver el resultado:
Si inspeccionas el código con el inspector, verás que el JSX se renderiza como HTML. Sin embargo si abres el código fuente de la página, verás solo el div vacío <div id="root"></div>.
Hasta aquí hemos aprendido a renderizar un componente. ¡Hurra! 🎉💪😎
Pero, ¿Que pasa si queremos renderizar algo más que contenido estático?
Entonces tenemos que aprender a utilizar los “parámetros” de los componentes, que se llaman Props.
Props
Las props, nos ayudarán a que nuestros componentes sean reutilizables, porque un componente podrá cambiar en función de las propiedades (props) que reciba.
El nombre Props viene de Properties = Propiedades
Todos los componentes tienen un atributo props, al cual se accede desde this.props .
Siempre que cambien las props , se evaluará el VDOM y si existen se renderizará de nuevo el componente.
Para demostrar cómo utilizar las props, vamos a enseñar Hola + un texto que le pasemos a nuestro componente.
Dentro de las etiquetas JSX para volver a utilizar Javascript, necesitamos utilizar los corchetes {} , de este modo el texto dinámico que mostrará nuestro componente está lo conseguimos con <h1>¡Hola {this.props.quien}!</h1>
Para pasarle un valor, en la invocación/llamada a nuestro componente le pasamos un atributo del mismo nombre. <Hola quien="Universo React" /> . Dentro del atributo quien, podemos pasar strings, tipos básicos de Javascript e incluso otras variables. Eso sí, recuerda que dentro de las etiquetas JSX, para pasar un valor, tienes que utilizar {} .
¡Muy Bien! , ya podemos mostrar componentes con contenido dinámico.
Composición
React se basa en un modelo de composición, en el que los componentes devuelven otros componentes y el código y los datos se comparten mediante las props.
En React es mejor utilizar composición en vez de herencia
En este ejemplo vemos como nuestro componente App devuelve nuestro componente Hola que devuelve el H1.
State
El estado interno de los componentes nos permiten reaccionar a las interacciones con el usuario y cambiar la interfaz en consecuencia. Siempre que se cambie el estado de un componente, se evaluarán los cambios en el VDOM y si existe alguna diferencia, se renderizará (función render) de ese componente.
Para inicializar el estado, basta con asignar la propiedad state correspondiente:
Vemos como state es una propiedad de clase Objeto {} .
Siempre que queramos cambiar el valor del estado, debemos llamar al método this.setState y nunca cambiar su valor directamente.
SetState
A continuación crearemos el método cambiarEmoticono , el cual cambiará el estado del componente Hola cada vez que lo invoquemos.
setState recibe un objecto con la parte del estado que queremos actualizar. Este método heredado de la clase React.Component, encola cambios y avisa a los componentes hijos que sean renderizados en el caso de ser necesario.
setState es el método principal para actualizar la interfaz de usuario
Utilizaremos principalmente este método para actualizar la interfaz ante las interacciones del usuario o las respuestas de las llamadas al servidor.
onClick
onClick no es un método de React, es la llamada clásica de Javascript puro. Esta es una de sus mayores ventajas, react no pone edulcorantes para trabajar con Javascript, por esto nos hará mejores desarrolladores que Angular o Vue.
Se ejecutará el métodocambiarEmoticono cada vez que el usuario haga click sobre el botón.
Aquí podemos ver el resultado y como cambia el emoticono cada vez que pinchamos en el botón.
¡ Felicidades !
Con esto ya has visto los fundamentos básicos de React y estás listo para probarlo y seguir aprendiendo.
Recuerda que todo el código fuente lo tienes disponible en github.
Muchas gracias por leerme. Soy Antonio Sejas, Founder de Baulen Desarrollo y JS School.
