react reactjs Javascript componentes

Algunos conceptos básicos de React: Componentes

Desarrollar aplicaciones con un nuevo framework, - por ejemplo React - pero con un lenguaje que ya dominas desde hace mucho tiempo, puede hacerte caer en muchas trampas, que según la dimensión del proyecto, puede ser más fácil o casi imposible difícil salir vivo. :) :)

Los vícios son evidentes y la herramienta que debería ser de ayuda se acaba convirtiendo en tu peor enemigo y, lo peor, en el peor enemigo de tu cliente.

Por eso creo que es fundamental conocer por lo menos los elementos básicos de la herramienta, para que la aventura no sea desagradable. Aunque la curva de aprendizaje sea elevada.

¿Qué es React?

React es un una biblioteca de Javascript  dinámica y flexible que sirve para desarrollar interfaces de usuarios. React fue creada y mantenida por Facebook y Jordan Walke y abierta a la comunidad en 2015.

Con React puedes puedes desarrollar tus aplicaciones web en forma de componentes encapsuladas que gestionan sus propios estados. Un estado sería un almacén mutable de datos. Por tanto, los valores de los estados pueden cambiar.

¿Alguien lo utiliza?

Solo para aportar el dato extra, muchas de las aplicaciones web que utilizas, han utilizado React para desarrollar sus interfaces de usuario. Algunos nombres serian: Netflix, Instagram, Airbnb, GoodReads, etc… React tiene buena documentación y una comunidad interesante por detrás. Si estás pensando en leerte algun libro: “React Quickly” de Azat Mardan me parece una buena opción.

¿Cuales son los conceptos básicos?

Obviamente que para hablar de todos los conceptos básicos y detallar sobre ellos, tendría que escribir un libro, pero hay algunos detalles que me parecen importantes para empezar.

React, como otras bibliotecas, o frameworks de Javascript no viene sola. En este caso deberás estar familiarizado con términos como JSX, state, props y components.

¿Qué es cada una de estas cosas?

En los enlaces de este artículo o en el libro de Azat encontrarás todo mucho más detallado, pero te dejo algunas pinceladas sobre los componentes.

 

¿Qué son los componentes?

Son el corazón de React. De hecho, una aplicación hecha en React es en sí un gran componente hecho de componentes menores. Estarás siempre pensando en componentes.

¡La verdad es que “toda la vida” has estado trabajando con componentes! Te suena el componente “<footer>” de HTML 5? Pues, Un <footer> puede ter atributos - ¿cierto?, puedes asignarle un comportamiento o darle estilos. En React lo que harás será crear tus propios components utilizando ES6.

¿Algún un ejemplo de componente?

class PieComponent extends React.Component {
  render() {
     return '<h2> ¡Mira mi componente! </h2>';
  }
}

Ya tienes un componente! que será declarado: <Pie></Pie>. ¿Interesante, no?

Eventos del ciclo de vida de los componentes

Otra característica vital e importante de React está directamente relacionada con los eventos del ciclo de vida del componente.

¿Qué es eso y como funciona?

Mediante los  “eventos del ciclo de vida del componente”, React te da algunos métodos que se disparan en diferentes puntos para crear un componente hasta que este se destruya.

Puedes declarar los métodos para “hacer hook” en los ciclos de vida de los componentes y así controlar, modificar, o mejorar los comportamientos de los componentes de tus apps. Una aplicación seria cuando necesites integrar con otras bibliotecas de Javascript. Por ejemplo.

¿Algun ejemplo de hook de ciclo de vida?

Algunos ejemplos de hooks de ciclo de vida en React son: componentDidMount(), componentWillMount(), componentWillUnmount(), shouldComponentUpdate(), componentWillUpdate().

¿Qué hace cada uno de estos eventos de ciclo de vida?

componentWillMount()

Este método es llamado antes de la renderización inicial del componente, para que pueda ser llamado antes que se ejecute el método render. No puedes ejecutar ningún tipo de manipulación del DOM aquí porque el componente aún no está disponible en el DOM. Este método es llamado en el servidor y en el cliente.

componentDidMount()

Este debe ser uno de los métodos más utilizados en algunas integraciones, pues es un método que es llamado justo después de la renderización del componente, para que pueda ser llamado después de que el método render es ejecutado. ¿Confuso?

Es el mejor sitio para ejecutar llamadas de AJAX, por ejemplo en un formulario autocomplete en que necesites hacer la petición al servidor y recoger la información del servidor, después de una acción del usuario. Este método se llama solamente en el cliente.

componentWillUnmount()

Este método es llamado justo después de que el componente es eliminado del DOM.

shouldComponentUpdate()

Este método determina si hay que renderizar o no. Nunca se llama en la renderización inicial y siempre se llama antes que se ejecute el método render. Este método te permite optimizar la renderización.

componentWillUpdate()

Este método es llamado justo cuando el shouldComponentUpdate retorna true. Es llamado justo antes de que el componente se renderize con nuevos datos.

Conclusión

Para terminar, creo que React es una herramienta potente para crear aplicaciones interactivas. Naturalmente que puedes programar sin estas características, pero conocer los eventos de ciclo de vida te permite inyectar solamente el código necesario en tus componentes y hacer de este código uno más inteligente. Está claro que tu código mejorará si lo utilizas, además no estarás reinventando la rueda. Porque al final de cuentas, fué por ello que seleccionaste este “framework”, ¿no es verdad?

Fuentes:

 

Migrar a GraphQL, ¿por qué no?

Artículo anterior

Algunos conceptos básicos de React: Props

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

Matrices mágicas: transformando la web con Álgebra Lineal y CSS

JavaScript: ¿Qué hay de nuevo en ES2020?

¿Por qué utilizar Hooks de React?

Un poco de Suspense con React.lazy()