¡Hola Mundo! Estamos por empezar una serie de mini tutoriales para aprender los primeros pasos con React JS. Empecemos por saber que es y cuales son sus conceptos clave.
¿Qué es React JS?
React es una librería de javascript de código abierto creada por Facebook y la comunidad de software libre por ahí del 2013 después de que Facebook adquiriera Instagram. Desde entonces ha ganado una enorme popularidad y es una de las librerias más utilizadas para la creación de interfaces de usuario.
¿Por que usar React?
React tiene multiples beneficios para el desarrollo de interfaces de usuario, y la verdad es que una vez que aprendes cada aspecto de esta librería la pregunta cambia a ¿porque no usarlo?. Su flexibilidad nos permite crear desde mobile apps (tenemos un tuto aqui), SPA’s, PWA’s y más.
En este post vamos a hablar de 4 conceptos clave de React:
- DOM Declarativo
- Uso de Componentes
- Flujo de datos unidireccional
- UI
Revisemos cada uno de estos conceptos clave importantisimos, de verdad antes de hacer un react-create-app dale una leída para comprender como funciona React.
DOM Declarativo
React se encarga totalmente del uso de nuestro DOM, ok… pero ¿esto que quiere decir?
Recordemos que el DOM (Document Object Model) es la representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. Esencialmente, comunica nuestra página con el lenguaje de programación que utilicemos, en este caso javascript.
Ahora ¿que es un DOM declarativo?. Esto significa que todos los cambios en el contenido de nuestro árbol no tenemos que hacerlos de manera «manual» sino que React se hará cargo de ello.
Por ejemplo antes de trabajar con este tipo de librerias yo utilizaba JQuery y a pesar de que este te facilita muchas cosas ¿cuantos de nosotros no llegamos a fastidiarnos cambiando mil textos en nuestros labels, párrafos o botones?. Así es JQuery utiliza un DOM imperativo, nosotros tenemos que modificar nuestro árbol.
Además de cambiar de manera automática el DOM por nosotros React hace uso del llamado DOM virtual, con el, React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.
Componentes
Divide y vencerás.
Con React podemos utilizar componentes encapsulados que manejen su propio estado, y convertirlos en interfaces de usuario complejas. Estos componentes pueden anidarse y comunicarse entre si pasando propiedades a sus hijos.
Estos componentes retornan una vista creada en JSX, este es muy similar a HTML por lo que si estas acostumbrado a usarlo no deberías tener problemas.
Flujo de datos unidireccional
Como vimos en el diagrama anterior React me permite tener una única fuente de la verdad, en los componentes de mayor jerarquía manejaremos un set de datos principal que sera transmitido a los demás.
UI
Por ultimo con React nos permite configurar nuestras interfaces de usuario con total libertad, esto quiere decir que podemos manejar nuestros estilos en nuestros componentes de la manera que nosotros creemos conveniente, ya sea con un estilo general, por componente, etc.
En el siguiente post después de tanta teoría crearemos por fin nuestra primera app en React JS.
