por Stevenson Márquez, el 11 de abril de 2019
React fue la librería de Javascript para crear interfaces de usuario más popular de 2018, según State Of Js, la encuesta realizada cada año por la misma comunidad de desarrolladores, caracterizada por marcar una nueva era donde el programador enfoca el desarrollo en pequeñas partes funcionales, reutilizables y de fácil portabilidad.
React es una librería basada en componentes y un componente es una unidad de código que representa una parte visual, funcional e informativa en un aplicativo web.
Cada componente en React cuenta con un estado. Por ejemplo, el componente bombillo puede estar encendido o apagado. El estado de un componente puede ser inducido por externos, como cuando se va la luz y no se puede encender el bombillo, dado que si hay, o no luz, afecta el estado interno del bombillo.
Este ejemplo se puede expresar de la siguiente manera, siendo esta la sintaxis de clase de React desde sus primeras versiones.
Podemos notar lo siguiente:
- “This.state” es el estado de la luz, puede estar activa o inactiva.
- “Render” es el método de la clase que nos va a pintar el bombillo.
- Si la luz está activa nuestro bombillo se enciende.
- Si la luz se fue, nuestro bombillo se apaga.
Aún así en el anterior ejemplo hay muchas palabras que no representan la lógica de la luz, sino que son necesarias para el funcionamiento del componente, como en caso de las líneas “class”, “props”, “super”.
Lo anterior puede expresarse de una manera más entendible y legible para humanos. React Hooks es la nueva sintaxis que nos permite construir componentes con estado a través de funciones, siendo esta mucho más expresiva.
Podemos notar lo siguiente:
- Luz es nuestro componente externo, el cual puede es estar activo, o no,
- Si la luz está activa nuestro bombillo se enciende.
- Si la luz se fue, nuestro bombillo se apaga.
“Un bombillo se apaga si no hay luz, pero también dejar de funcionar por que se fundió”
Si funciona y está activo, el bombillo se va a encender, en cambio si no funciona o no está encendido, el bombillo va a estar apagado.
En los anteriores ejemplos se hizo uso de function “useState”, la cual nos permite utilizar estado en componentes funcionales declarados con la palabra reservada “function”.
Existen otros Hooks los cuales pueden ser referenciados en esta documentación que te permiten hacer lo mismo o inclusive más características desde la sintaxis de función que la sintaxis de clase
Bonus: Testing
Para realizar pruebas unitarias para las React Hooks, debes tener en cuenta que las mismas no trabajan como una función convencional, sino que deben ejecutarse dentro de componentes funcionales de React.
En este caso se utiliza el ejemplo de un contador, el cual cuenta con dos funciones: la de ser incrementado o disminuido, siendo useCounter un Hook escrito por nosotros que a su vez basa su funcionamiento en el Hook useState.
La siguiente prueba unitaria no funcionara, ya que los Hooks solo son efectivos dentro de componentes React.
A partir de la anterior condición, la prueba unitaria tiene un solo fin, cuando creamos nuestro contador, este inicia con valor 0, después de llamar la función de incrementar, el valor del contador debería ser 1 . Para ser realizada se debe testear el componente que implementa el Hook.
Bonus: re Bonus… Probando Hooks
con react-hooks-testing-library
React-hooks-testing-library nos permite probar Hooks sin necesidad de que un componente la implemente, es bastante útil si la hook se usa en distintos componentes.
React Hooks es una característica que ha generado muchas expectativas ya que a la vez representa un cambio en el paradigma en el que desarrollamos. El propósito es reducir la cantidad de código necesario para obtener un componente visual, y por supuesto hacer el código fuente más legible. En la vida real, los programadores pasamos más tiempo leyendo código, que escribiendo el mismo.
