React está lleno de patrones de diseño interesantes, cuando se introdujeron los Hooks, eliminó muchos de los problemas que la gente tenía con las características más frustrantes, como las clases y los métodos del ciclo de vida. En este artículo vamos a hablar de la incorporación de los Hooks en React y cómo nos permite desarrollar componentes funcionales con estado y ciclo de vida y, por lo tanto, prescindir de los componentes de clase.
Lo primero hay que decir que, a pesar de que ya se llevan usando algún tiempo, van a seguir estando muy presentes en nuestros desarrollos, ya que nos proporcionan un mejor mantenimiento y legibilidad del código. Al ser funciones aisladas, nos permite reutilizar la lógica de estados entre componentes. Gracias a los Hooks, podemos extraer lógica de estado de un componente, de tal forma que éste, pueda ser probado y reusado independientemente.
Los dos patrones principales para compartir código entre componentes (hasta ese momento), eran los High-Order Components y las Render Props. Si bien son formas correctas para lograr este objetivo, en algunos casos complejos esto podría derivar en un árbol de componentes anidados tan extenso que se conoce como Wrapper Hell.
Otro problema habitual es el desarrollo de componentes complejos y extensos. En ocasiones, existe la necesidad de tener que dividir la lógica de una misma funcionalidad utilizando los métodos componentDidMount, componentDidUpdate, componentWillUnmount. Por ejemplo, si tenemos que agregar eventListeners en componentDidMount y limpiarlos en componentWillUnmount, estamos separando lógica relacionada, por la necesidad de tener que realizar estas acciones en función del ciclo de vida del componente.
¿Por qué React-Typescript?
Usamos React con Typescript para sacar el máximo rendimiento de React.
Escribir código tipado nos permite desarrollar código más limpio y legible que está funcionando, y sin los errores que nos acarrea un js nativo, y si a eso agregamos que Typescript tiene muchas similitudes con otros lenguajes con tipado como C# nos permite un rápido aprendizaje.
Nuestro código Typescript a la hora de generar la build la magia de React lo transpila y genera un código js minificado de nuestra aplicación lo que nos permite poder correrla bajo cualquier explorador y con un peso en la build final muy reducido (sobre IE y Edge no funciona al 100%, por lo que si perdemos funcionalidad deberemos instalar un Polyfill)
Otra de las razones es que no dependemos de Babel y demás plugins de Babel, lo que hace que tengamos un espacio de trabajo no tan lleno de dependencias. Si utilizaremos otras que nos facilitan la flexibilidad y agilidad en la hora del desarrollo sin que notemos apenas peso en las dependencias.
CSS
En verdad no usaremos Css utilizaremos Sass. SASS es un preprocesador. Podríamos elegir otras alternativas como Less o Stylus y serían perfectamente válidos también, ya que al final todos ofrecen más o menos las mismas utilidades.
Sass se ha convertido en el preprocesador más usado y el más demandado, por lo que al haber recibido un mayor apoyo de la comunidad es más factible que encuentres soluciones ante posibles adversidades.
Al desarrollar con un preprocesador se consigue principalmente un ahorro de tiempo, ya que tenemos que escribir menos código para hacer las cosas. Pero también conseguimos una mayor facilidad de mantenimiento del código, gracias a una mejor organización del código y la posibilidad de editar una vez ciertos valores y que afecten a decenas, o cientos, de lugares del código CSS generado.
Tan sencillo como usar una dependencia para que nuestro compilador de React entienda Sass y a la hora de generar la build de igual manera que trasnpila el typescript el preprocesador nos genera un fichero Css único entendible por todos los exploradores.
Sintaxis SCSS
Dentro de lo que entendemos por Sass usaremos la Sintaxis SCSS. En la práctica, aunque podría ser más rápido escribir con sintaxis Sass, es menos recomendable, porque te aleja más del propio lenguaje CSS.
Al usar SCSS tienes la ventaja de que tu código CSS de toda la vida será válido para el preprocesador, pudiendo reutilizar más tus conocimientos y posibles códigos de estilo con los que vengas trabajando en los proyectos.
Mejoraremos mucho la carga con archivos css modulares, nuestra aplicación no tendrá que cargar todos los archivos necesarios de fonts, css de todas las páginas, bootstraps, etc., esos archivos hay que cargarlos por separado antes del render de la página y ralentizan mucho la fase más importante de la carga de una web. Si los incluyes como @imports de SASS en una hoja.scss y luego compilas, tendrás un único archivo .css y una única llamada al servidor con todo lo que necesitas.
Otra de las ventajas es que podemos incluir el plugin autoprefixer que añade los -webkit-, -moz-, -msfilter- etc. necesarios para visualizarse correctamente en todos los navegadores que le configuremos.
Y para mí la mayor ventaja es que te avisa de los errores. Trabajando con .css puedes olvidar un punto y coma, o equivocarte en la ortografía, y no te darás cuenta hasta que visites la parte de la web afectada, SASS no te permite compilar un archivo si contiene errores, avisándote de su localización, y en algunos editores como Visual Studio Code que es nuestro caso, en tiempo real mientras escribes el código.
Webpack
Webpack es un sistema de bundling para preparar el desarrollo de una aplicación web para producción. En cierta medida se puede considerar un Browserify avanzado ya que tiene muchas opciones de configuración.
También se puede considerar una evolución de Grunt y Gulp, ya que permite de alguna manera automatizar los procesos principales que son transpilar y preprocesar código de .scss a .css, de ES7 a ES5/6, etc…
Para poder utilizar Webpack en tu proyecto web debes tener instalado Node.js en tu equipo
En nuestro caso, el créate-app ya nos genera un webpack básico para poder trabajar, obviamente con un buen manejo del webpack podremos generar componentes más optimizados.
Configuración de entorno
- Instalacion de NodeJs y Typescript, se recomienda la última versión estable
https://nodejs.org/es/download/
- Comprobar la versión de node: en una consola node -v
- Sobre la consola ejecutar: npm install -g typescript
- Comprobar la versión de typescript: en una consola Typescript -v
- Instalar Visual studio Code
https://code.visualstudio.com/download
- Crear una carpeta en la raíz del repositorio ReactHook, a raíz de esta carpeta se creará la app de react y dentro los los componentes de la misma.
- Sobre la carpeta que hemos creado en la consola procedemos con los siguientes pasos:
Algo a tener en cuenta es que los directorios, nombre de carpetas ficheros y demás deben ir en minúsculas.
- Vamos a crear la base de una aplicación de React con Typescript.
Npx create react-app -my_name_app –typescript
Esperamos unos minutillos…(20-30’ no asustarse)
- Esto nos genera la estructura de carpetas y los ficheros necesarios básicos, ahora vamos a proceder a instalar nuestro preprocesador de Sass
Npm install node-sass sass-loader
- Ahora vamos a instalar un paquete que, a pesar de no ser obligatorio, es muy recomendable, que nos advierte cuando las dependencias se especifican incorrectamente y nos sugiere una solución.
npm install eslint-plugin-react-hooks@next
Tenemos que añadir en el package.json una configuración para este paquete,
«no-useless-escape»: «0» sirve para apagar la regla de caracteres especiales, asi podemos usarlos tranquilamente en literales de plantilla y expresiones regulares.
Quedará así:
- Otro factor a tener en cuenta es que si clonamos o copiamos la carpeta de la app en otra ruta funcionara perfectamente solo que deberemos volver a instalar los paquetes de dependencias (Y por supuesto tener NodeJs y Typescript instalado en la máquina que corra).
Npm install
- Para ejecutar nuestra aplicación de forma local debemos ejecutar
Npm run start o npm start
- Para generar los ficheros de producción
Npm run build
Con esto ya tendríamos nuestra base para crear cualquier aplicación con react-hook, y es desplegable en cualquier servidor, ya que al fin y al cabo tenemos nuestra aplicación en js y css, que es entendible por todos.
Cada componente debe ser generado de manera independiente para respetar su modularidad, su funcionalidad y su flexibilidad, y todos ellos ser integrados en nuestra aplicación.
Conclusión
Hemos podido comprobar que con React Hooks la gestión del estado se simplifica enormemente. Ahora bien, Hooks ofrece otras funcionalidades que no se limitan al estado en sentido estricto. Además de useState, React ofrece otros dos hooks básicos: useEffect y useContext.
También mencionaremos el hook useContext, que nos permite pasar datos a través del árbol de componentes sin tener que transmitirlos a través de cada uno de los hijos. Este hook crea un estado global que pueda compartirse entre componentes, lo que puede ser muy útil para tareas de autenticación, uso de temas CSS, localización, etc.
Además de estos hooks básicos, React ofrece otros adicionales como useReducer, useCallback, useMemo o useRef, o incluso podemos definir nuestros propios hooks para extraer lógica que se use en varios componentes y atenernos al principio D.R.Y (Don’t Repeat Yourself). No tenemos espacio para hablar de todo ello, pero en la página oficial de React podéis encontrar unas demos muy sencillas.
Los hooks suponen una adición a lo que ya existía y por lo tanto no implican el fin de los componentes de clase. Es decir, no es necesario refactorizar todo un proyecto hecho con clases para pasarlo a componentes funcionales con hooks, sino que pueden coexistir ambos, aunque yo recomiendo que para obtener un mayor rendimiento tener una arquitectura de cero pensada para trabajar con los hooks.
En proyectos pequeños nos pueden bastar funcionalidades de Hooks como useState, useContext o useReducer para gestionar adecuadamente el estado local del componente. Mientras que para proyectos más complejos (en lo que respecta al estado global) podemos recurrir a funcionalidades propias de Redux y, a la vez, mantener el estado local de componentes más pequeños mediante Hooks.
Bueno espero que os haya gustado y que estéis atentos para cuando saque la segunda parte del artículo entrando en detalle de cómo debemos realizar una buena arquitectura con algunos ejemplos, y ver como integramos estos componentes en nuestra aplicación base, hoy era solo la toma de contacto y para dejar creada la base que usaremos en futuras ocasiones.
¡Suscríbete a nuestras RRSS!
