React.js #10: Introducción a los Hooks

En la primera entrada de esta serie de artículos sobre React.js, hablábamos sobre las diferentes formas de implementar componentes en React.js. Decíamos que hay componentes Stateless que se implementan con una función y, como su propio nombre indica, no tienen un estado (state) y tampoco se puede acceder a su ciclo de vida. El otro tipo, son los componentes Class que son componentes que se implementan con una clase de ES6 y, a diferencia de los Stateless, sí tienen un estado y se puede acceder al ciclo de vida del componente.

Pero en la versión 16.8 de React, se introdujeron los Hooks, que básicamente son funciones que nos permiten acceder al estado y al ciclo de vida de un componente funcional (Stateless).

Continuar leyendo «React.js #10: Introducción a los Hooks»

React.js #9: Añadir transiciones a las rutas con react-transition-group

En la entrada anterior de la serie sobre React.js, vimos cómo añadir rutas a nuestro proyecto con la librearía react-router. En esta entrada, vamos a añadir transiciones a esas rutas generadas en la entrada anterior para que al cambiar de ruta haga una animación.

Continuar leyendo «React.js #9: Añadir transiciones a las rutas con react-transition-group»

React.js #8: Añadir rutas a nuestro proyecto con React Router

En React.js existe un librería llamada React Router que nos permite añadir rutas a cualquier proyecto React. En esta entrada, lo que vamos a hacer va a ser crear una navegación por rutas. Crearemos un componente por cada ruta para que se muestre uno u otro según la ruta en la que estemos. También, veremos cómo pasar parámetros a las rutas y cómo gestionar el acceso a una página no existente (404).

Continuar leyendo «React.js #8: Añadir rutas a nuestro proyecto con React Router»

React.js #7: Refs

En esta entrada, vamos a ver las refs (referencias). Según la documentación de React.js, las refs son una forma de acceder a elementos del DOM o a elementos React creados en el método render. En el ejemplo que vamos a ver a continuación, lo que haremos será indicarle al componente del formulario (PostForm.js) que una vez se haya renderizado, haga focus en el input del título automáticamente y lo haremos mediante refs.

Continuar leyendo «React.js #7: Refs»

React.js #6: Consumir una API

En esta entrada, vamos a hacer que el ejemplo que hemos ido creando durante las entradas anteriores obtenga los posts de una API, en vez de que estén en el código hardcodeados. También, haremos que el formulario de creación se envíe a una API y que después se añada el post creado al listado y para eliminar lo mismo, que se haga una llamada a la API y se elimine el post del listado.

Continuar leyendo «React.js #6: Consumir una API»

React.js #5: Ciclo de vida de un componente

En los class components de React.js (los que heredan React.Component ) tenemos acceso a ciertos métodos que nos permiten ejecutar código en diferentes puntos de la vida de un componente. Hay que decir que en los functional components, no tenemos acceso a estos métodos.

Con estos métodos podríamos, por ejemplo, ejecutar código cuando el componente esté recién añadido al DOM o cuando se haya actualizado, también antes de que se elimine, entre otras opciones más.

Continuar leyendo «React.js #5: Ciclo de vida de un componente»