A JavaScript library for building user interfaces
Es una librería de JavaScript que nos va a ayudar a construir interfaces de usuario(UI). La UI es todo lo que "toca y ve" un usuario en una aplicación(header, body, footer, botones, listas, imágenes, etc).
Desde hace un tiempo, las necesidades de las UI han ido aumentando. Las aplicaciones son cada día mas complejas y ya no nos alcanza con tener páginas simples con HTML algo de JavaScript y CSS.
Hoy en día las aplicaciones son dinámicas, manejan datos, disparan muchos eventos, contienen animaciones complejas, se comunican con otros sistemas y muchas cosas más. ¿Todo esto se podría hacer con JavaScript vanilla? Si, se podría. ¿Vale la pena? Depende del caso, pero usualmente esa opción tiene algunas desventajas como por ejemplo poca escalabilidad, el código es usualmente complejo de entender, problemas de performance, etc.
Antes de convencerte sobre porque utilizar react y porque es una buena opción dentro del desarrollo front end hablemos un poquito de cómo evolucionó JavaScript y como tomó todas estas responsabilidades.
Nos remontamos al año 2005, dónde quizás comenzó todo este cambio de la mano de el viejo y querido jQuery.
jQuery es una librería de JavaScript que como dice su slogan "escribe menos hace más" busca facilitar el desarrollo con JavaScript brindando una API más amigable que la API nativa nativa. Soluciona problemas de compatibilidad entre navegadores, manejo de eventos, etc.
Si hoy en día tenemos problemas entre diferentes navegadores, eventos, etc imagina en el año 2005. Esta librería era un super en el año 2005. Pero las UI comenzaron a tener más complejidad y se fue quedando chica.
Luego de un tiempo, comenzaron a aparecer las primeras señales de frameworks. La primera fue BackboneJS, un framework de js que trata de facilitar el manejo de modelos, colecciones y vistas, buscando ser un framework MVC.
Si bien se lanzaron muchos, Angular 1, Ember y Meteor fueron los más importantes. Se crean para ayudarnos a lograr lo que hacíamos mezclando jQuery y Backbone pero de una manera amigable. Cada uno de ellos es casi un lenguaje de programación en si mismo(se que me van a criticar este comentario), cada uno tiene su manera de interactuar con los datos, manejar los eventos y dibujar los elementos HTML.
Es un enfoque muy interesante, pero recordemos que cada día las aplicaciones se ponen más complejas, los navegadores se optimizan y los requerimientos de los usuarios aumentan. Ese es un punto débil de los frameworks, al ser casi un lenguaje nuevo de programación, nuestras aplicaciones quedan atadas al avance del framework en si mismo y algunas veces no llevan el ritmo que quisiéramos.
Luego del largo camino recorrido, los desarrolladores llegamos a la conclusión de que debíamos poder escribir nuestras aplicaciones enfocadas a componentes. Toda la vida lo hicimos en el CSS, pero ahora también lo aplicamos a la lógica de las aplicaciones. Teniendo esto en mente los grandes protagonistas son Angular 2, VueJS y React.
Es un enfoque muy interesante para construir aplicaciones que escalen y puedan mantenerse en el tiempo.
En este Workshop vas a aprender react y estas son algunas de las particularidades que hacen que sea una excelente opción.
Es declarativo. A continuación vemos un ejemplo de cómo podría estructurarse una aplicación.
<MyApp>
<Header>
<Menu />
</Header>
<Main>
<Products />
</Main>
<Footer />
</MyApp>Cómo vés, es muy sencillo de leer y se entiende rápidamente lo que hace nuestra aplicación.
Crear aplicaciones con react es algo así como construir con Legos.
Imagina que cada ficha de lego es un componente(el header, el menu, el footer). Para construir la aplicación basta con ir conectándolos unos con otro en el orden que corresponda. Cada componente puede ser tan grande o tan pequeño como tu quieras, cuando más pequeño sea, podrás mantenerlo mejor.
Crear aplicaciones en React es como jugar con Legos. Me pagan por jugar con Legos - Martín
Cada componente debe funcionar por sí mismo pero a la vez debe poder ser conectado fácilmente con los demás.
Algo muy interesante de react es que una vez que decides utilizarlo en una aplicación existente, no debes migrar toda tu aplicación a react. Migrarla puede ser un trabajo de días, meses o años.
Los creadores pensaron en que se pudiera utilizar de forma independiente. Imagina que tienes una aplicación desarrollada con Angular y deseas pasarte a react. Lo que puedes ir haciendo es escribir los componentes nuevos en react, ellos se integraran de forma transparente con el resto de tu aplicación, sin necesidad de tirar el código que ya tienes en Angular.
- Creada y utilizada por Facebook. Es una empresa con grandes ingenieros con una aplicación gigante. El hecho de que crearon react para ellos mismos otorga credibilidad a la librería.
- Se utiliza muchísimo. Es uno de los lenguajes más utilizados en la actualidad, y te puede abrir muchas puertas!
- Se puede utilizar en diferentes tipos de aplicaciones. Con react no solo puedes crear aplicaciones web, sino que también móviles con React Native y realidad virtual con React 360.
- Grandes empresas la utilizan. Utilizado por Instagram, Netflix, Paypal, Apple, Airbnb, Mercado Libre, etc.
Tiene un gran ecosistema. Como dijimos hace un rato, react se encarga de la UI, pero en el desarrollo front end necesitamos resolver más cosas además de la UI, para ello existen algunas librerías que complementan a react:
- Redux: Ayuda a manejar el estado de la aplicación.
- React Native: Para construir aplicaciones móviles nativas.
- React router: Para manejar las rutas de la aplicación.
- NextJs: Para hacer server side rendering.
- Más