Seguro que muchos de vosotros cuando empezáis a investigar qué se necesita para ser un desarrollador frontend pensasteis que con HTML y CSS es suficiente; otros sabéis que también necesitáis una base importante de Javascript, pero seguro que si buscáis un poco más, encontráis que cada vez es más frecuente dominar algo nuevo: REACT. Puede que incluso os hayáis encontrado con la típica frase que React es solo Javascript.
Tanto si es la primera vez que lo escucháis o si ya os habéis encontrado con él en alguna búsqueda, no os preocupéis, en este artículo voy a explicaros qué es y cómo empezar!
Historia y porque existe React
React es una librería que nace de la mano de un grupo de desarrolladores de Facebook. Estos desarrolladores veían que mantener y controlar todo el código necesario para el funcionamiento de las conexiones entre datos y vista, crecía a un ritmo exponencial a la vez que la propia aplicación de Facebook evolucionaba.
Para dar solución a este problema crearon una librería que les permitía optimizar la forma en que se renderiza la vista de la aplicación cuando los datos cambiaban y facilitaba mucho más el desarrollo de la aplicación, al poder dividir cada parte en pequeños componentes reusables. Esta librería se denominó: React.
Facebook empezó a utilizar React en partes concretas de su aplicación y el buen resultado hizo que la plataforma de Instagram, también propiedad de Facebook, se desarrollara íntegramente en React. Los buenos resultados, facilidad de uso y popularidad hicieron que otras grandes aplicaciones web se fijaran en React y lo incorporaran a su stack tecnológico. Así, hoy en día vemos que aplicaciones web como Airbnb, Netflix, Paypal o Tesla utilizan React.
Entiendo… ¿Pero cómo funciona?
Este es un punto que bien podría dar para 20 artículos más, pero lo voy a intentar resumir para así tener una idea general.
React está basado en componentes. Podemos entender estos componentes como pequeños trozos de la interfaz, como por ejemplo: una barra de navegación, una imagen, un formulario… A su vez, estos componentes están definidos por otros componentes más pequeños como pueden ser botones, títulos, párrafos, etc.
Todos estos componentes pueden tener su comportamiento definido por un estado interno y unas propiedades determinadas. Cualquier cambio en ese estado interno o en esas propiedades (el usuario pasa de estar conectado a desconectado o un clic a un botón para cambiar el idioma de la página, etc) causa que el componente se vuelva a renderizar con las nuevas propiedades y estado definido. Todo este funcionamiento viene dado por lo que se conoce como el “lifecycle de los componentes”, (puedes consultar más detalles aquí).
Con esta forma de trabajar ganamos de forma inmediata varios beneficios como por ejemplo tener que escribir una sola vez el código de como se ve nuestro botón. Luego es a través de las propiedades y estado que definiremos si este es un botón primario, secundario, de un formulario de contacto o de uno de registro. Así pues conseguimos un código reusable y escalable que al fin y al cabo, se traduce en escribir menos código. ¡Todo ventajas!
Otro punto a destacar del funcionamiento de React es como funciona esta actualización de los componentes con el DOM (Document Object Model). El punto fuerte de React es que no trabaja tan solo con el DOM sino con un DOM virtual. React crea una memoria caché de la estructura de datos sobre una memoria, que se encarga de calcular las diferencias resultantes y luego actualiza el DOM visualizado por el navegador de forma eficiente. El hecho que React funcione de esta forma garantiza un aumento muy significativo de rendimiento si lo comparamos en hacer el mismo código con tan solo Javascript. Este tema tiene muchísimas más cosas detrás a cada una más compleja. Si te ves con fuerzas puedes empezar a leer más sobre el DOM virtual en la documentación oficial.
Suena interesante, pero ¿qué necesito para empezar con React?
Si preguntas a cualquier programador ¿qué se necesita para empezar a trabajar con React?, seguramente su respuesta sea algo parecido a: “¡Nada! React es solo Javascript!”
Y esto es una de las grandes ventajas de React, que al fin y al cabo, es una librería de Javascript, por lo que su código no es más que una extensión de las funcionalidades que ya conocemos de Javascript.
Si comparamos a React con otras alternativas como pueden ser Angular, Vue, o Ember, vemos que para poder trabajar con estos frameworks necesitamos adquirir un conocimiento de la herramienta y de la sintaxis que utiliza. En React tenemos en nuestro favor que esa sintaxis es tan sólo Javascript.
Como ya comenté anteriormente, React se basa en componentes y estos componentes no son nada más que clases de Javascript programadas por el equipo de desarrolladores de React. Lo que nosotros hacemos como usuarios es utilizar estas clases ya programadas, con sus métodos y funcionalidades y extender su código para conseguir una aplicación que cumpla con nuestros requisitos.
Así pues, React se convierte en el candidato perfecto para los programadores más expertos ya que verán cómo en tan solo unas horas, pueden empezar a armar aplicaciones con funcionalidades complejas, ya que la lógica que usaran es, otra vez, tan solo Javascript.
Pero si estás empezando a programar, React también es una alternativa perfecta para ti, ya que una vez entiendas cómo funciona su estructura y el flujo de la información dentro de estos componentes se convertirá en el entorno ideal para poner en práctica tus conocimientos de Javascript e ir mejorando a la vez que creas aplicaciones, ya que, lo volveré a repetir una vez más, ¡Simplemente es Javascript!
¡No empieces de cero, reutiliza el trabajo de otros!
Si bien antes lo comparábamos con frameworks como Angular, Vue o Ember, es cierto que el código base de React ofrecen menos funcionalidades que estos otros donde tienen muchas herramientas internas para desarrollar distintas funcionalidades como la gestión de las rutas a distintas páginas, la actualización de la UI (User Interface) al recibir nuevos datos o el estado general de la aplicación.
En React tú estás al mando de realizar todo esto.
Por una parte es bueno, ya que vas a poder hacerlo y enfocarlo como creas mejor, pero por otra parte puede dar incluso miedo pensar que vas a tener que escribir todas esas funcionalidades desde cero… Pero no, ¡ni mucho menos!
Para empezar, todas estas funcionalidades están encapsuladas en componentes, que como mencioné, es en lo que se basa el código de React y si os acordáis, la ventaja de utilizar componentes es que podíamos reutilizarlos en distintos lugares de nuestra aplicación, ¿verdad?
¡Entonces, buenas noticias!, porque también podemos reutilizarlos en distintos proyectos en forma de paquetes a través del gestor de paquetes de Node: npm (Node Package Manager y su sitio web). De modo que, podemos instalar un paquete que se encargará de gestionar las rutas en nuestro proyecto, otro para manejar el estado incluso un paquete que hará que nuestros componentes como botones, formularios, links, tengan un estilo propio (como Bootstrap).
Tan solo Javascript… ¿pero qué pasa con el HTML y CSS?
Sé que he repetido varias veces la frase de que React al final es solo Javascript pero ¿dónde queda en todo esto el código html y css?
Al final lo que busca React es juntar la lógica de cómo debe actuar la UI (User Interface), es decir, según qué lógica programemos. Para conseguir esto escribimos la lógica en cada componente. Es también en estos componentes dónde vamos a escribir nuestro código html.
Así es, en React vamos a mezclar el código de Javascript, encargado de definir el comportamiento de nuestros componentes con el código html, encargado de definir su estructura. Esto se consigue con JSX (Javascript XML). JSX es el encargado de transformar los tags del código html en elementos que React entiende y sabe manipular.
Como el css es el encargado de dar vida al código html (colores, fuente, espaciados, posicionamiento…) vamos a poder seguir escribiendo código css de la misma forma que hasta ahora, aunque existen ya algunos paquetes de npm que nos permiten también escribir el código css dentro de Javascript (como Styled Components o Material UI).
Me has convencido, ¿Cómo hago mi primera aplicación de React?
Donde vas a poder encontrar más material al respecto y de una forma perfectamente organizada es en la propia documentación de React. Recomiendo especialmente la parte del tutorial introductorio. La documentación de React contiene muchas guías paso a paso con múltiples ejemplos que muestran tanto lo más básico como conceptos ya muchos más avanzados o para códigos muy específicos.
Si sigues esta documentación vas a poder ver que hay dos formas de empezar a utilizar React. Una de las formas puede ser importandolo en tu fichero html con un tag de script (al final tenemos que recordar que React es una librería de Javascript). Con esto, lo que ganamos es un acceso muy rápido y directo para empezar a utilizar React y puede ser una buena opción si queremos trabajar en una aplicación pequeña.
La otra opción es crear un entorno de trabajo con una herramienta para controlar y gestionar todos los paquetes que instalamos y usamos a través de npm; una de las herramientas más populares hoy en día es Webpack junto con un transpiler de código como Babel. Entonces, ¿esto significa que también debes aprender Webpack y Babel?
¡Por suerte no! Siempre es recomendable aprender y conocer estas herramientas, eso seguro, pero no es necesario conocerlos para poder empezar a trabajar con React gracias a una herramienta que desarrolló el propio equipo de Facebook llamada create-react-app.
Este es un paquete que puedes instalar y al ejecutarlo va a crear todo el entorno necesario para poder trabajar con React y utilizar todas sus funcionalidades sin tener que preocuparte de nada más que empezar a programar el código necesario para tu aplicación! Puedes leer más sobre cómo instalarla y usarla aquí.
¡Espera, que aún hay más!
¿Crees que todo esto es lo que ofrece React? ¿Solo aplicaciones web? ¡Pues hay más cosas! Todas las funcionalidades y metodologías de trabajo que React utiliza han sido ampliadas a React Native y React 360.
La primera, React Native, es un framework que permite desarrollar aplicaciones nativas tanto para Android como IOS y la segunda, React 360 permite desarrollar aplicaciones de realidad aumentada y de realidad virtual. Así que una vez empieces a dominar y programar con más facilidad aplicaciones web de React, te va a ser bastante fácil dar el salto a aplicaciones móvil o incluso a aplicaciones de realidad virtual!
Otro punto fuerte y a tener en cuenta sobre React es que es un proyecto Open Source, con lo que su código está abierto a cualquier desarrollador para inspeccionar y poder directamente colaborar en cualquier posible mejora. Puedes ver el código en su GitHub.
Así que si al leer esto te has quedado con las ganas de probarlo y empezar a escribir tus primeras líneas de código con React, no lo dudes, lánzate y ¡empieza a probarlo ya!
Y no olvides que en Wild Code School, nuestros bootcamps utilizan React desde el principio y es una excelente opción para, en pocos meses, convertirte en un verdadero experto y poder mostrar todo lo que has aprendido en varios proyectos!
¡Como empezar con React: Puedes ver todos nuestros programas aquí!
