Guía rápida de React

En el comienzo solo había solo caos y oscuridad. . .

 

Entonces alguien creó HTML (Hypertext Markup Language) para hacer sitios webs aceptables, aunque rudimentarios. Tiempo después, otra persona dijo: “No es bueno que los colores del sitio y el tamaño de las fuetes estén todos mezclados en el mismo archivo. Construiré un ayudante.” Y de esa forma, CSS fue creado como un archivo diferente para ocuparse de tamaños, colores y posiciones.

 

Más tarde, alguien quiso darles vida a las páginas web. Y creó JavaScript para hacer que las páginas respondan a las interacciones con los usuarios. Todo estaba funcionando de acuerdo al plan: tres archivos distintos en tres carpetas diferentes (public para HTML, assets, para CSS y scripts para JS). Hasta que otra persona se dio cuenta de que mientras el sitio se volvía más grande, debía escribir más código para seguir dándole funcionalidad.

 

Así es como React vino al rescate. React trabaja con componentes reutilizables, no hay necesidad de reescribir líneas de código, repitiendo el mismo (o casi el mismo) código. Para React, la estructura va de la mano con la lógica.

 

¡Bienvenido seas, sagrado JSX!

 

React introdujo JSX, que es una extensión de JavaScript que permite la creación de HTML dentro del código JS. Si usas JSX para create elementos HTML, estos serán ubicados dentro del DOM.

 

Lo se, lo se. Debes estar preguntándote qué es el DOM, ¿verdad? DOM significa Document Object Model. Sí, no explica mucho. Déjame decirlo mejor: el DOM representa toda la interfaz de usuario de la app o sitio, como si fuera un árboll. En otras palabras, es la representación del diseño del sitio.

 

Por cada cambio que hagas en tu sitio, así sea muy pequeño, el DOM vuelve a recargar la página, creando un uso extremo de la memoria y por lo tanto haciendo que el sitio tarde mucho en cargar. Para solucionar este problema, React trabaja con un DOM virtual, para entregarle al usuario un rendimiento más rápido. ¿De qué manera? El DOM virtual recarga solo los nodos afectados por esos cambios, ordenando al DOM cambiar solo esa parte afectada. Esto hace que el renderizado de la página sea más veloz.

 

Déjame aclararlo mejor: cada interfaz de usuario es un componente individual de React. Clada uno de ellos tienen su propio estado. React inspecciona esos estados y si detecta un cambio, actualiza el árbol del DOM virtual sin tocar el DOM real. Una vez que React termina de actualizar, compara la versión actual del DOM virtual con la anterior. Si detecta un cambio, en el DOM real va a cambiar solo esos componentes. De esta manera, la manipulación es mínima.

 

¿Estados? ¿De qué estás hablando?

 

¡Perdón! Olvidé mencionar lo siguiente: los estados funcionan como la llave de luz con encendido/apagado. Los estados trabajan como canales de comunicación entre lo que el usuario hace y lo que la computadora recibe. Déjame darte un ejemplo: Estás mirando un sitio web y decides comprar algo. Haces clic en un producto y ese producto aparece en tu carrito de compras. No es magia. Ese componente recibe el clic y lo informa al estado global. A través de esa comunicación, el componente sabe que hubo un cambio y agrega ese producto a tu carrito. De esa forma se comunican entre sí.

 

Por último, déjame comentarte que ReactJs no solo es usado en el front-end, sino también para:

• Apps nativas para iOS y Android
• Back-end
• Realidad virtual
• Apps de escritorio

 

Con su versatilidad y facilidad de uso, React es la librería más amada por desarrolladores y compañías.

 

En Awkbit, amamos trabajar con tecnologías de punta y de código abierto. React pertenece a ese grupo. Te invitamos a ponerte en contacto con nosotros y descubrir cómo podemos ayudarte a hacer tus ideas realidad.

 

 

+1 (786) 321-3247 Mara Destefanis - Marketing

Take a nap, your new tech partner is on the way.