¿Te gustaría aprender React JS Desde Cero?
¡Haz clic aquí!
ReactJS es una librería JavaScript de código abierto enfocada a la visualización. Esta tecnología nos permite el desarrollo de interfaces de usuario de forma sencilla, esto es posible mediante componentes interactivos y reutilizables.
¿De dónde sale React?
La web tradicionalmente se ha construido en HTML, JavaScript y CSS, separados en distintas carpetas. Eso hace que sea complicado escalar y extraer ciertas partes del código (especialmente JS y CSS) para migrar o reutilizar funcionalidades debido a las dependencias entre estos lenguajes.
¿Pero que sucedería si metiéramos todo esto en un solo paquete? Esto es lo que debieron preguntarse los ingenieros de Facebook y propició que a mediados de 2013 se lanzara la primera versión de la ya famosa librería.
React está basado en un paradigma llamado programación orientada a componentes en el que cada componente es una pieza con la que el usuario puede interactuar. Estas piezas se crean usando una sintaxis llamada JSX permitiendo escribir HTML (y opcionalmente CSS) dentro de objetos JavaScript.
Estos componentes son reutilizables y se combinan para crear componentes mayores hasta configurar una web completa.
Esta es la forma de tener HTML con toda la funcionalidad de JavaScript y el estilo gráfico de CSS centralizado y listo para ser abstraído y usado en cualquier otro proyecto.
React y su Arquitectura
El elemento más importante de React es el componente, que es, en esencia, una pieza de la interfaz de usuario. Como norma general, al diseñar una aplicación con React, lo que estamos haciendo es crear componentes independientes y reusables para, poco a poco, crear interfaces de usuario más complejas.
En ese sentido, React es similar a Angular, ya que toda aplicación en React tiene al menos un componente; al que normalmente nos referimos como componente «raíz», que contiene otros componentes “hijos”, y estos a su vez otros, etc. De esta manera, se puede afirmar que la vista es un árbol de componentes, como se muestra en el siguiente diagrama de ejemplo:
Un componente básico se implementa como una clase de JavaScript (ES6) que tiene un estado y un método “render”:
El estado (state) son los datos con los que queremos trabajar e incluso mostrar cuando el componente se renderiza. El método “render”, por otro lado, es responsable de describir cómo se tiene que ver dicho componente.
Como se puede apreciar, React rompe las buenas prácticas que se han utilizado a lo largo de los últimos años al juntar la vista con la lógica, no obstante, al tratarse de pequeños componentes, el hecho de tener todo a disposición en un mismo lugar empieza a ser más un beneficio que una desventaja.
Virtual DOM
Es curioso no sólo el hecho de escribir la vista del componente junto a la lógica, sino escribir código HTML directamente en el archivo .js en el que se incluye el componente. Este “código HTML”, y ahora sí que lo pongo entre comillas, no es código HTML al uso, si no JSX; un lenguaje creado por la propia Facebook que, con sintaxis HTML, compila a un objeto JavaScript que se mapeara a un elemento del DOM.
Lo que hace React es, a través de este código JSX, crear una representación en memoria del DOM; denominada “Virtual DOM”, a partir de la cual luego crea el DOM definitivo en el navegador. Este “Virtual DOM”, a diferencia del DOM común, pesa muy poco y utiliza escasos recursos para ser creado. Así que, en caso de que un componente cambiase su estado, y con ello la información a renderizar, React compararía los cambios realizados en el Virtual DOM, vería qué elemento o elementos han cambiado, y actualizaría solo esas partes en el DOM real. Al tratarse solo y exclusivamente de código JavaScript, el compilado y renderizado de todos estos cambios se realiza rápidamente.
¿Qué aceptación tiene en el mercado?
La última encuesta de StackOverflow nos revela que React es el framework más querido y deseado en este último año, además de ser ya el segundo más usado solo por detrás de jQuery. Esto está fuertemente ligado a que Javascript vuelve a ser el lenguaje más popular por séptimo año consecutivo, cosa que marca una tendencia claramente ascendente.
No es casualidad que empresas como Netflix, Airbnb, Dropbox, Paypal, Tesla, Whatsapp, Uber, etc. hayan apostado por esta tecnología, la inversión que ha hecho Facebook junto al gran número de desarrolladores que han contribuido a esta librería de código abierto hacen que sea una apuesta segura de futuro.
Te invitamos a ver todos los artículos que tenemos para ti, coméntanos que tal te pareció este articulo y compártelo con más personas.
¿Te gustaría aprender React JS Desde Cero?
¡Haz clic aquí!
