{"id":1261,"date":"2021-01-21T11:58:23","date_gmt":"2021-01-21T11:58:23","guid":{"rendered":"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/?p=1261"},"modified":"2021-02-04T11:10:11","modified_gmt":"2021-02-04T11:10:11","slug":"react-hooks-presente-y-futuro","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/react-hooks-presente-y-futuro\/","title":{"rendered":"React Hooks, presente y futuro"},"content":{"rendered":"

\"\"<\/p>\n

React est\u00e1 lleno de patrones de dise\u00f1o interesantes, cuando se introdujeron los Hooks, elimin\u00f3 muchos de los problemas que la gente ten\u00eda con las caracter\u00edsticas m\u00e1s frustrantes, como las clases y los m\u00e9todos del ciclo de vida. En este art\u00edculo vamos a hablar de la incorporaci\u00f3n de los Hooks en React y c\u00f3mo nos permite desarrollar componentes funcionales con estado y ciclo de vida y, por lo tanto, prescindir de los componentes de clase.<\/p>\n

<\/p>\n

Lo primero hay que decir que, a pesar de que ya se llevan usando alg\u00fan tiempo, van a seguir estando muy presentes en nuestros desarrollos, ya que nos proporcionan un mejor mantenimiento y legibilidad del c\u00f3digo. Al ser funciones aisladas, nos permite reutilizar la l\u00f3gica de estados entre componentes. Gracias a los Hooks, podemos extraer l\u00f3gica de estado de un componente, de tal forma que \u00e9ste, pueda ser probado y reusado independientemente.<\/p>\n

Los dos patrones principales para compartir c\u00f3digo entre componentes (hasta ese momento), eran los High-Order Components<\/strong> y las Render Props.<\/strong> Si bien son formas correctas para lograr este objetivo, en algunos casos complejos esto podr\u00eda derivar en un \u00e1rbol de componentes anidados tan extenso que se conoce como Wrapper Hell.<\/p>\n

Otro\u00a0problema\u00a0habitual\u00a0es el\u00a0desarrollo\u00a0de componentes complejos y extensos<\/strong>. En ocasiones, existe la\u00a0necesidad\u00a0de\u00a0tener\u00a0que\u00a0dividir\u00a0la\u00a0l\u00f3gica\u00a0de una misma funcionalidad utilizando los m\u00e9todos componentDidMount, componentDidUpdate, componentWillUnmount. Por\u00a0ejemplo, si tenemos que\u00a0agregar\u00a0eventListeners en componentDidMount y limpiarlos en componentWillUnmount, estamos separando\u00a0l\u00f3gica\u00a0relacionada, por la\u00a0necesidad\u00a0de\u00a0tener\u00a0que\u00a0realizar\u00a0estas acciones en\u00a0funci\u00f3n\u00a0del\u00a0ciclo\u00a0de\u00a0vida\u00a0del componente.<\/p>\n

\u00bfPor qu\u00e9 React-Typescript?<\/h2>\n

Usamos React con Typescript para sacar el m\u00e1ximo rendimiento de React.<\/p>\n

Escribir c\u00f3digo tipado nos permite desarrollar c\u00f3digo m\u00e1s limpio y legible que est\u00e1 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\u00e1pido aprendizaje.<\/p>\n

Nuestro c\u00f3digo Typescript a la hora de generar la build la magia de React lo transpila y genera un c\u00f3digo js minificado de nuestra aplicaci\u00f3n 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)<\/p>\n

Otra de las razones es que no dependemos de Babel y dem\u00e1s 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.<\/p>\n

CSS<\/h2>\n

En verdad no usaremos Css utilizaremos Sass<\/strong>.\u00a0SASS es un preprocesador. Podr\u00edamos\u00a0 elegir otras alternativas como Less o Stylus y ser\u00edan perfectamente v\u00e1lidos tambi\u00e9n, ya que al final todos ofrecen m\u00e1s o menos las mismas utilidades.<\/p>\n

Sass se ha convertido en el preprocesador m\u00e1s usado y el m\u00e1s demandado, por lo que al haber recibido un mayor apoyo de la comunidad es m\u00e1s factible que encuentres soluciones ante posibles adversidades.<\/p>\n

Al desarrollar con un preprocesador se consigue principalmente un ahorro de tiempo, ya que tenemos que escribir menos c\u00f3digo para hacer las cosas. Pero tambi\u00e9n conseguimos una mayor facilidad de mantenimiento del c\u00f3digo, gracias a una mejor organizaci\u00f3n del c\u00f3digo y la posibilidad de editar una vez ciertos valores y que afecten a decenas, o cientos, de lugares del c\u00f3digo CSS generado.<\/p>\n

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 \u00fanico entendible por todos los exploradores.<\/p>\n

Sintaxis SCSS<\/h2>\n

Dentro de lo que entendemos por Sass usaremos la Sintaxis SCSS. En la pr\u00e1ctica, aunque podr\u00eda ser m\u00e1s r\u00e1pido escribir con sintaxis Sass, es menos recomendable, porque te aleja m\u00e1s del propio lenguaje CSS.<\/p>\n

Al usar SCSS tienes la ventaja de que tu c\u00f3digo CSS de toda la vida ser\u00e1 v\u00e1lido para el preprocesador, pudiendo reutilizar m\u00e1s tus conocimientos y posibles c\u00f3digos de estilo con los que vengas trabajando en los proyectos.<\/p>\n

Mejoraremos mucho la carga con archivos css modulares, nuestra aplicaci\u00f3n no tendr\u00e1 que cargar todos los archivos necesarios de fonts, css de todas las p\u00e1ginas, bootstraps, etc., esos archivos hay que cargarlos por separado antes del render de la p\u00e1gina y ralentizan mucho la fase m\u00e1s importante de la carga de una web. Si los incluyes como @imports de SASS en una hoja.scss y luego compilas, tendr\u00e1s un \u00fanico archivo .css y una \u00fanica llamada al servidor con todo lo que necesitas.<\/p>\n

Otra de las ventajas es que podemos incluir el plugin autoprefixer que a\u00f1ade los -webkit-,\u00a0 -moz-,\u00a0 -msfilter- etc. necesarios para visualizarse correctamente en todos los navegadores que le configuremos.<\/p>\n

Y para m\u00ed la mayor ventaja es que te avisa de los errores. Trabajando con .css puedes olvidar un punto y coma, o equivocarte en la ortograf\u00eda, y no te dar\u00e1s cuenta hasta que visites la parte de la web afectada, SASS no te permite compilar un archivo si contiene errores, avis\u00e1ndote de su localizaci\u00f3n, y en algunos editores como Visual Studio Code que es nuestro caso, en tiempo real mientras escribes el c\u00f3digo.<\/p>\n

Webpack<\/h2>\n

Webpack es un sistema de bundling para preparar el desarrollo de una aplicaci\u00f3n web para producci\u00f3n. En cierta medida se puede considerar un Browserify avanzado ya que tiene muchas opciones de configuraci\u00f3n.<\/p>\n

Tambi\u00e9n se puede considerar una evoluci\u00f3n de Grunt y Gulp, ya que permite de alguna manera automatizar los procesos principales que son transpilar y preprocesar c\u00f3digo de .scss a .css, de ES7 a ES5\/6, etc…<\/p>\n

Para poder utilizar Webpack en tu proyecto web debes tener instalado Node.js en tu equipo<\/p>\n

En nuestro caso, el cr\u00e9ate-app ya nos genera un webpack b\u00e1sico para poder trabajar, obviamente con un buen manejo del webpack podremos generar componentes m\u00e1s optimizados.<\/p>\n

Configuraci\u00f3n de entorno<\/h2>\n