¿Qué es React?

Este es el primero de una serie de tres posts en los que iré explicando los puntos fuertes y no tan fuertes de las tres herramientas más usadas a día de hoy para construir frontends (React, Angular, Vue). Hoy es el turno de React, la librería JavaScript respaldada por facebook que se especializa en la creación de interfazes de usuario usando componentes y un DOM Virtual.

Bien, para poder decidir si nos conviene usar React, primero tenemos que saber un poco sobre esta genial librería.

Puntos fuertes

Sin duda uno de los puntos más fuertes es la eficiencia y rápidez de esta librería a la hora de renderizar la vista gracias al DOM Virtual, que no es más que una versión resumida del DOM real en el que se comprueba que cambios son necesarios para actualizar la vista entre cambios de estado.

Se basa en el paradigma declarativo a la hora de crear las interfazes de usuario. Es decir, con React indicamos que queremos mostrar cuando el estado de nuestra aplicación sea uno u otro y delegamos el cómo se va mostrar a la librería. De esta manera se consiguen unas vistas predecibles y con menores bugs.

Otro pilar es que se basa en componentes, algo bastante común en la actual generación de herramientas frontend. Los componentes permiten encapsular su estado y su comportamiento convirtiéndolos en código/interfazes altamente reutilizables. En este caso, los componentes se escriben enteramente en JavaScript, lo que nos lleva al siguiente punto.

Utiliza JSX para escribir las vistas, una extensión sintáctica de JavaScript. Eso quiere decir que no vamos a tener ficheros HTML en nuestra aplicación (con excepción del index.html). Hay que pensar que JSX es un traductor de JavaScript a HTML. ¿Por qué no se usa HTML directamente? Imagina poder poner un breakpoint dentro del HTML para poder depurar el código, o utilizar un loop de JavaScript para iterar una colección o un condicional, todo esto lo puedes hacer con JSX, de hecho puedes incluir cualquier expresión en JavaScript dentro de JSX.

Con su filosofia de "learn once, write everywhere" si aprendes React, estas aprendiendo una manera de desarrollar interfazes de usuario que puedes transportar a otras plataformas, de manera que puedes usar React para desarrollar aplicaciones móvil nativas (React Native) o realidad virtual (React VR).

¡La documentación y la comunidad son geniales! Facebook esta trabajando mucho en este sentido, tienen la documentación de React muy al día y puedes encontrar mil preguntas en stackoverflow, eso si, todo en inglés. Por otra parte también existen muchas librerías para reutilizar componentes que varían desde botones o enrutadores. A tener en cuenta por parte de Facebook, tienen un proyecto plantilla para empezar una aplicación lo más rápido y fácil posible llamado create-react-app.

Puntos no tan fuertes

React es tan solo una librería para crear interfazes de usuario, si bien puedes hacer lo más básico con ella, como llamadas a una API y guardar datos en el navegador, necesitarás otras librerías para administrar el estado de la aplicación.

No hay una manera correcta "oficial" de hacer aplicaciones con React, a diferencia de Angular que ya esta todo pensado con sus controladores, servicios, etc. Esto puede llevar a problemas en proyectos grandes o si trabajas en equipo, ya que habría que ponerse de acuerdo en cómo se quiere estructurar la aplicación.

No es muy fácil empezar y entender todo lo que esta pasando rápidamente si no has trabajado ya con Angular o Vue. Hay que aprender JSX, saber que es webpack, aprender JavaScript de última generación y lo más importante cambiar tu manera de desarrollar y pensar en que todo es un componente.

Experiencia personal y recomendaciones.

Personalmente React me ha gustado bastante, es verdad que al principio me costó asimilar el hecho de que incluso el enrutador sea un componente, eso quiere decir que no hay un fichero llamado routes.js en el que poder declarar las rutas de la aplicación si no que hay que envolver el componente padre de la aplicación dentro de una tag llamada . Al venir de AngularJS el tema de los componentes ya lo tenía medianamente asimilado ya que es como si todo fuera una directiva.

Por ahora he desarrollado una aplicación que te permite adoptar mascotas (ya veré si la publico) y la verdad es que me lo he pasado muy bien escribiendo componentes y viendo su potencial de reutilización. Para desarrollar esta aplicación no he necesitado nada más que React para el frontend, no he usado otras librerías como Flux o Redux. La empecé con create-react-app ya que me quitaba mucho trabajo de aprender y entender para poder empezar rápidamente y seguir las guias de estilo de Facebook, de todas maneras he terminado investigando que es y cómo funciona webpack y babel.

Si tienes en mente un proyecto pequeño y estas empezando, te recomiendo que pruebes React al menos una vez, te ayudará a entender hacia dónde va el futuro del desarrollo web frontend. En cuanto a equipos no lo recomendaría a no ser que tengas desarrolladores senior o experiencia en Angular o Vue ya que el aprender a trabajar a lo React os puede llevar tiempo a corto plazo y problemas de mantenimiento a largo plazo si no tenéis una sinergia a la hora de desarrollar.

¿Te ha gustado el artículo? ¿Quieres que te avise de mis próximas publicaciones?

¿Quieres seguir aprendiendo?

React Native: Primeras impresiones

Finalmente ya tengo una aplicación hecha con React Native en producción, así que ya te puedo contar con propiedad el estado del arte y mis primeros pasos con esta librería/framework para el desarrollo de aplicaciones con v...

Seguir leyendo