Introducción
Hoy en día, los frameworks y bibliotecas front-end se están convirtiendo en una parte esencial del desarrollo web moderno. React.js es una biblioteca front-end que se ha convertido gradualmente en el framework de referencia para el desarrollo web moderno en la comunidad JavaScript.
¿Qué es React.js?
React.js es una biblioteca JavaScript de código abierto, cuidadosamente diseñada por Facebook, que busca simplificar el complejo proceso de creación de interfaces de usuario interactivas. Imagine una interfaz de usuario creada con React como un conjunto de componentes, cada uno responsable de generar un pequeño fragmento de código HTML reutilizable.
En React, desarrollas tus aplicaciones creando componentes reutilizables, que puedes considerar como piezas de Lego independientes. Estos componentes son piezas individuales de una interfaz final que, al ensamblarse, forman la interfaz de usuario completa de tu aplicación.
La función principal de React en una aplicación es gestionar la capa de vista de la misma, proporcionando la mejor y más eficiente implementación de renderizado, similar a la V del patrón Modelo-Vista-Controlador (MVC). En lugar de abordar toda la interfaz de usuario como una sola unidad, React.js anima a los desarrolladores a descomponer estas complejas interfaces en componentes individuales reutilizables que conforman los componentes básicos de toda la interfaz. De este modo, el framework ReactJS combina la velocidad y la eficiencia de JavaScript con una forma más eficiente de manipular el DOM para renderizar páginas web más rápido y crear aplicaciones web altamente dinámicas y responsivas.
Una breve historia de React.js
En 2011, Facebook contaba con una gran base de usuarios y se enfrentaba a un reto: quería ofrecer una experiencia de usuario más completa mediante la creación de una interfaz más dinámica y responsiva, más rápida y eficiente.
Jordan Walk, ingeniero de software de Facebook, creó React precisamente para eso. React simplificó el proceso de desarrollo al proporcionar una forma más organizada y estructurada de crear interfaces de usuario dinámicas e interactivas con componentes reutilizables.
El canal de noticias de Facebook fue el primero en utilizarlo. Con su enfoque revolucionario en la manipulación del DOM y las interfaces de usuario, React cambió radicalmente el enfoque de Facebook hacia el desarrollo web y rápidamente se popularizó en el ecosistema JavaScript tras su lanzamiento a la comunidad de código abierto.
¿Qué hace React.js?
Normalmente, se solicita una página web escribiendo su URL en el navegador. Este envía una solicitud para esa página, que es procesada por el navegador. Si se hace clic en un enlace de esa página para ir a otra, se envía una nueva solicitud al servidor para obtener esa nueva página.
Este patrón de carga continua entre el navegador (cliente) y el servidor con cada nueva página o recurso al que se accede en un sitio web. Este método habitual para cargar sitios web funciona bien, pero considere un sitio web con un consumo de datos muy elevado. Recargar la página completa una y otra vez sería redundante y generaría una mala experiencia de usuario.
Además, cuando los datos cambian en una aplicación JavaScript tradicional, se requiere la manipulación manual del DOM para reflejar dichos cambios. Es necesario identificar qué datos han cambiado y actualizar el DOM para reflejarlos, lo que provoca una recarga de la página.
React adopta un enfoque diferente al permitir crear lo que se conoce como una aplicación de página única (SPA). Una aplicación de página única carga un solo documento HTML en la primera solicitud. Luego, actualiza la sección, el contenido o el cuerpo específico de la página web que necesita actualizarse mediante JavaScript.
Este patrón se conoce como enrutamiento del lado del cliente, ya que el cliente no tiene que recargar toda la página web cada vez que el usuario realiza una nueva solicitud para obtener una nueva página. En su lugar, React desglosa la solicitud y recupera solo las partes que deben cambiar, realizando los cambios sin tener que recargar toda la página. Este enfoque se traduce en un mejor rendimiento y una experiencia de usuario más dinámica.
React se basa en un DOM virtual, que es una copia del DOM real. Este DOM virtual se recarga inmediatamente para reflejar el nuevo cambio cada vez que se produce un cambio en el estado de los datos. React compara el DOM virtual con el real para determinar exactamente qué ha cambiado.
React encuentra entonces la manera más económica de aplicar esa actualización al DOM sin renderizarlo. Como resultado, los componentes y las interfaces de usuario de React reflejan los cambios rápidamente, ya que no es necesario recargar la página completa cada vez que se actualiza algo.
Cómo usar React.js
A diferencia de otros frameworks como Angular, React no impone reglas estrictas sobre las convenciones de código ni la organización de archivos. Esto significa que los desarrolladores y equipos tienen la libertad de establecer las convenciones que mejor les funcionen e implementar React como mejor les parezca. Con React, puedes usar tanto o tan poco como necesites gracias a su flexibilidad.
Con React, puedes crear un botón, algunas partes de una interfaz o la interfaz completa de tu aplicación. Puedes adoptarlo e integrarlo gradualmente en una aplicación existente con cierta interactividad, o mejor aún, usarlo para crear potentes aplicaciones React desde cero, según tus necesidades.
Integración de React en un sitio web existente
Si buscas añadir interactividad dinámica a tu sitio web, React es una excelente opción. Al integrar React, puedes crear componentes interactivos reutilizables que se pueden colocar en cualquier lugar de tu sitio, como barras laterales o widgets. Aquí tienes un sencillo desglose de los pasos para lograrlo.
Paso 1: Agregar scripts de CDN a HTML
- Comience agregando la API de la biblioteca principal de React desde la CDN al archivo de índice HTML de su sitio web.
- Luego, importe el DOM de React desde la CDN. Esto es necesario para renderizar los componentes en el Modelo de Objetos del Documento (DOM).
- A continuación, añade Babel desde la CDN, que traduce el código de React para garantizar la compatibilidad entre navegadores. No olvides subir el archivo de tu componente de React.
El primer paso es agregar dos scripts principales de CDN al archivo de índice HTML de tu sitio web. Necesitarás estos scripts para cargar React en tu aplicación a través del servicio CDN.
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<script type="text/babel" src="like_widget.js"></script>
Paso 2: Marque la ubicación de renderizado en su sitio web
Determine la ubicación en su HTML donde se renderizará el componente React. Esto se puede hacer añadiendo un elemento. <div> Lo hizo con un identificador único, al que haremos referencia en nuestro código React.
<!-- ... Your existing HTML markup ... -->
<div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
Paso 3: Construir el componente React
- Crea un componente React, en este caso llamado like_widget.js.
- Este componente tendrá una función simple que devuelve una declaración JSX que representa el mensaje "Hola mundo".
- Con la ayuda de ReactDOM, luego representamos este componente en el DOM, apuntando al ID único que configuramos anteriormente en nuestro HTML.
// Custom React component function that returns a JSX syntax
const ActualWidget = () => Hello World;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(, container);
Si ejecuta el programa, mostrará “Hola mundo” en el navegador en el lugar exacto que marcó en la imagen a continuación.
Quizás hayas notado una sintaxis extraña llamada JavaScript XML (JSX) devuelta por la función ActualWidget. JSX se usa con React para combinar fácilmente HTML y JavaScript. Facebook desarrolló JSX como una extensión de sintaxis para JavaScript para ampliar la funcionalidad de HTML integrándolo directamente en el código JavaScript. Con JSX, no es necesario separar el código HTML del JS, ya que React permite escribir HTML declarativo directamente en el código JavaScript.
Creación de una aplicación React completa
Si bien es fácil integrar React en una aplicación web existente para crear pequeñas partes de una interfaz, es más práctico usar React para crear aplicaciones web completas. Sin embargo, React requiere una configuración de herramientas compleja que suele ser abrumadora y tediosa al crear nuevas aplicaciones.
Afortunadamente, no necesitas aprender estas configuraciones de compilación ni configurar las herramientas tú mismo. Facebook ha creado una herramienta de línea de comandos de Node llamada cre-react-app para ayudarte a crear una aplicación React. Este paquete te ayuda a crear aplicaciones React de forma inmediata y proporciona una estructura consistente para aplicaciones React que reconocerás al cambiar de proyecto.
Crear un nuevo proyecto React es tan simple como ejecutar los siguientes comandos en tu terminal:
npx create-react-app my-new-app
cd my-new-app
npm start
Ejemplos de React.js
Como génesis de React.js, Facebook es un ejemplo de la destreza de la biblioteca. React simplifica las funciones en tiempo real de la plataforma, como los "me gusta", los comentarios y las actualizaciones de estado, garantizando una experiencia de usuario fluida y dinámica. La naturaleza modular de React facilita la interfaz de Facebook en constante evolución y se adapta a las necesidades de sus más de 2.800 millones de usuarios activos mensuales.
Instagram Web es un lienzo de elementos interactivos, todos impulsados por React.js. Cada imagen, al igual que la vista de la historia y el mensaje directo, enfatiza la capacidad de React para gestionar rápidamente interacciones complejas del usuario. La atractiva e intuitiva interfaz de la plataforma demuestra la capacidad de React para ofrecer interacciones de alto rendimiento.
Netflix
Airbnb demuestra cómo React.js puede transformar datos complejos en una experiencia de usuario intuitiva. Cada anuncio de propiedad, mapa interactivo y reserva en tiempo real son una sinfonía de componentes de React que trabajan en armonía para crear una experiencia de usuario fluida, desde la navegación hasta la reserva.
