React: Esto es lo que necesitas para empezar

El desarrollo frontend con Javascript ha evolucionado mucho en los últimos años y React es una de las librerías más populares en este ámbito. Si no has ido más allá de utilizar jQuery para algún arreglo aquí y allá, es probable que te haya mareado la cantidad de cosas nuevas que necesitas aprender para utilizar una librería de este tipo. Si este es tu caso, este artículo te ayudará a guiarte para que puedas empezar lo antes posible.

logo react

ECMAScript 6

Empecemos por la base. JavaScript ha evolucionado mucho en los últimos años para adaptarse a lo que sus usuarios necesitaban. La versión 6 de ECMAScript, que es el estándar en el que se basa este lenguaje, se lanzó oficialmente en 2015, e incluso ya hay una revisión superior que es ECMAScript 7 de 2016 con algunas características aún más nuevas.

Las librerías y frameworks actuales también han ido actualizando su código para adaptarse a las nuevas características de JavaScript, y por supuesto React es una de ellas. Por lo tanto, para empezar a trabajar con esta librería, aunque no es obligatorio, es muy interesante que primero aprendas la nueva sintaxis para poder entender la documentación existente. Además, estas nuevas características te ayudarán a que el código de tu aplicación esté mejor organizado y sea más legible.

No te preocupes, si ya sabes JavaScript, no es mucho lo nuevo que debes aprender. Aquí te dejo un artículo que resume las nuevas características que incorpora: Introducción a ES6.

Soporte actual

Quizá mientras leías el punto anterior ya te has preguntado si este lenguaje está actualmente soportado por todos los navegadores. Y la respuesta es que no, aunque cada vez más navegadores tienen soporte completo, hay que tener en cuenta que aún muchos usuarios utilizan navegadores desactualizados, como por ejemplo IE11 que no interpreta correctamente muchas de estas nuevas características.

¿De qué sirve entonces ES6? No te preocupes porque existen transpiladores que se encargan automáticamente de convertir nuestro código a la versión de ECMAScript anterior para que sea compatible con todos los navegadores. Desarrollas con ES6 aprovechándote de sus ventajas y entregas al navegador una versión en ES5 que entiende perfectamente, incluso si este está desarrollado por Microsoft.

Herramientas necesarias

Aquí es donde empieza a complicarse un poco la cosa ya que para tener un buen flujo de trabajo dependemos de otras herramientas que debemos incorporar durante el desarrollo, pero que no tienen mucho que ver con nuestro proyecto.

Como hemos dicho, necesitamos un transpilador que haga la traducción de nuestro código. Este será BabelJS, ya que es uno de los más utilizados para esta función. Pero claro, este módulo, al igual que muchos otros que utilizaremos después, necesita que tengamos instalado en nuestro equipo NodeJS, que es el intérprete que ejecutará el código de estos módulos.

Puedes instalar Node en tu equipo ya sea Windows, Linux o Mac, y su instalación es tan simple como la de cualquier otro programa. NodeJS incorpora un gestor de paquetes llamado npm que es el que nos permitirá añadir y manejar las dependencias de nuestro proyecto, como Babel. Este se instala junto con Node, solo asegúrate de que npm está disponible desde la línea de comandos para poder usarlo.

Además, siempre que modificamos nuestro código fuente y queremos probarlo, debemos primero transpilarlo, una tarea que puede hacerse muy tediosa. Por este motivo existen multitud de automatizadores de tareas para el desarrollo, como por ejemplo Gulp, o el que es tendencia ahora: Webpack.

Habrá entonces que añadir varios paquetes y configurar el entorno antes de poder empezar a programar, algo que pese a no ser inicialmente muy complicado, es un problema cuando no controlas estas herramientas. Pues tampoco te preocupes por esto, porque más adelante veremos una herramienta que te ayudará a iniciarte de una manera muy rápida con tu primer proyecto.

React

Llegamos a lo que nos interesa, la librería tan de moda que queremos aprender para poder crear aplicaciones con una interfaz muy compleja sin volvernos locos parcheando con jQuery.

Pues la mejor manera de aprenderla no es ni más ni menos que a través de la página oficial, que además de toda la documentación, incorpora un pequeño tutorial dónde va explicando las características principales y el modo de funcionamiento de esta librería. Eso sí, está en inglés, aunque es fácil de seguir aunque no lo domines. Enlace al tutorial.

Iniciar el proyecto

Si ya quieres lanzarte a la aventura, y no tienes ganas de profundizar en las herramientas que necesitas para empezar, ya que lo que quieres es picar código rápidamente, tienes una solución a tu alcance.

Create React App es una utilidad, con soporte oficial, pensada para iniciar rápidamente un proyecto con React. La instalas globalmente la primera vez, y después simplemente con un comando creas toda la estructura y la configuración inicial. Arrancas el servidor y ya puedes visualizar la aplicación y empezar a escribir código. Consulta su documentación oficial.

Utiliza Webpack, ya configurado, que se encargará de observar nuestros archivos .js para transpilarlos automáticamente cuando detecte cambios. Además, cada vez que hace esto, recarga nuestro navegador web para ahorrarnos ese trabajo también.

Rutas de tu aplicación

Hay frameworks que incorporan el enrutamiento, pero la filosofía de React es distinta. Esta librería no lo incluye todo, sino que te aporta lo necesario para poder construir las vistas, y permite que tú elijas con qué integrarlo, lo que permite que los desarrollos sean muy flexibles y que integres tus vistas en casi cualquier lugar, incluso dentro de otro framework.

Sin embargo, nada más empezar, para poder crear una SPA (Single-page Application) necesitamos un sistema de enrutamiento. El más popular en este entorno es React Router, ya que está pensado completamente para ser usado con React.

Por suerte, también tenemos un tutorial creado por los propios desarrolladores que te permitirá aprender rápidamente los conceptos básicos de esta herramienta. Enlace al tutorial.

Controlar el estado

Cuando empiezas a desarrollar y a crear una jerarquía de varios niveles de componentes, empiezas a tener un problema para mantener el estado de tu aplicación, ya que este está repartido en varios lugares. Esto hace que sea difícil de interpretar y de trabajar con él.

Llegados a este punto, es probable que ya hayas oído hablar de Redux. Esta librería, por su filosofía, encaja a la perfección con React, aunque se puede integrar con otras librerías perfectamente. Con ella, puedes mantener el estado de tu aplicación en un solo objeto JavaScript, y controlar desde un único lugar las modificaciones que se hacen sobre él.

De este modo, el estado de toda la aplicación se convierte en algo más simple de entender y de administrar.

Además de la documentación oficial, que incorpora una introducción y un tutorial, también te recomiendo que eches un ojo a esta serie de vídeos cortos para aprender rápidamente lo que ofrece esta librería y cómo integrarla con React: Redux videotutorial.

Resumen

Espero que te hayas hecho una idea de lo que necesitas para crear una aplicación con React, y a partir de ahora puedas empezar a desarrollar aplicaciones modernas con una interfaz más rica y fácil de mantener.

Recapitulando, estas son las herramientas que vas a necesitar para iniciarte:

  • ECMAScript 2015 (ES6): nuevas características para JavaScript.
  • NodeJS: imprescindible para que funcionen el resto de herramientas.
  • Create React App: iniciar un proyecto rápidamente con React sin necesidad de realizar manualmente las configuraciones. Incorpora, ya configurado:
    • BabelJS: convierte el código ES6 a ES5 para que lo entiendan los navegadores.
    • Webpack: automatiza tareas, como observar nuestros archivos .js y lanzar el transpilador Babel automáticamente.
    • React: ya está disponible con esta configuración.
  • React Router: nos permite incorporar un sistema de enrutamiento a nuestra aplicación.
  • Redux: nos permite mantener el estado de nuestra aplicación de una manera mucho más sencilla y en un único punto.