Actualmente, los marcos y las bibliotecas front-end se están convirtiendo en una parte esencial de la pila de desarrollo moderna. React.js es una biblioteca frontal que se ha convertido gradualmente en el marco principal para crear páginas web modernas en la comunidad de JavaScript.
Para aquellos nuevos en el desarrollo web o que intentan descubrir de qué se trata todo este alboroto, echemos un vistazo a React, cómo funciona y qué lo diferencia de otros marcos de JavaScript.
¿Qué es React.js?
React.js es una biblioteca y un marco JavaScript de código abierto desarrollado por Facebook. Se utiliza para crear de manera rápida y eficiente interfaces de usuario interactivas y aplicaciones web con mucho menos código que JavaScript estándar.
En React, creas tus aplicaciones creando componentes reutilizables que puedes tratar como piezas de Lego independientes. Estos componentes son las partes individuales de la interfaz final que, cuando se ensamblan, forman la interfaz de usuario completa de la aplicación.
La función principal de React en una aplicación es admitir la capa de vista de esa aplicación, similar a V en el patrón modelo-vista-controlador (MVC), lo que garantiza el mejor y más eficiente rendimiento de representación. En lugar de tratar con toda la interfaz de usuario como una sola entidad, React.js alienta a los desarrolladores a dividir estas complejas interfaces de usuario en componentes reutilizables individuales que forman los componentes básicos de toda la interfaz de usuario. De esta manera, el marco ReactJS combina la velocidad y el rendimiento de JavaScript con un método más eficiente de manipulación del DOM para generar páginas web más rápido y crear aplicaciones web altamente dinámicas y con capacidad de respuesta.
Una breve historia de React.js
En 2011, Facebook tenía una gran base de usuarios y se enfrentó a una tarea difícil. Quería ofrecer una experiencia de usuario más rica a los usuarios mediante la creación de una interfaz de usuario más dinámica y receptiva que fuera rápida y altamente eficiente.
jordan walke, uno de los ingenieros de software de Facebook, creó React con este mismo propósito. 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 suministro de noticias de Facebook lo usó primero. Con un enfoque revolucionario para manipular el DOM y las interfaces de usuario, React cambió radicalmente el enfoque de Facebook para el desarrollo web y rápidamente se hizo popular en el ecosistema de JavaScript después de su lanzamiento a la comunidad de código abierto.
¿Qué hace React.js?
Por lo general, solicita un sitio web ingresando su URL en un navegador web. Luego, su navegador realiza una solicitud para este sitio web, que su navegador procesa. Si hace clic en un vínculo de esa página para ir a otra página del sitio, se envía al servidor una nueva solicitud para descargar una nueva página.
Este patrón de carga entre su navegador (cliente) y el servidor continúa para cada nueva página o recurso al que intenta acceder en el sitio. Este enfoque común para cargar páginas web funciona bien, pero considere un sitio web basado en datos. Sería superfluo cargar todo el sitio web de un lado a otro y daría como resultado una experiencia de usuario deficiente.
Además, cuando los datos cambian en una aplicación de JavaScript tradicional, se requiere la manipulación manual del DOM para reflejar esos cambios. Debe identificar qué datos han cambiado y actualizar el DOM para reflejar estos cambios, lo que recargará completamente la página.
React adopta un enfoque diferente, lo que le permite crear lo que se conoce como aplicaciones de una sola página (SPA). Una aplicación de una sola página carga solo un documento HTML en la primera solicitud. Luego actualiza una parte, contenido o contenido específico del sitio web que debe actualizarse mediante JavaScript.
Este patrón se conoce como enrutamiento del lado del cliente porque el cliente no tiene que volver a cargar todo el sitio web para obtener una nueva página cada vez que el usuario realiza una nueva solicitud. En cambio, React intercepta la solicitud y descarga y cambia solo las secciones que deben cambiarse, sin tener que ejecutar una recarga de página completa. Este enfoque da como resultado un mejor rendimiento y una experiencia de usuario más dinámica.
React se basa en un DOM virtual, que es un duplicado del DOM real. El DOM virtual de React se vuelve a cargar inmediatamente para reflejar este nuevo cambio cada vez que hay un cambio en el estado de los datos. React luego compara el DOM virtual con el DOM real para averiguar qué cambió exactamente.
React luego encuentra la forma más económica de parchear el DOM real con esta actualización sin renderizar el DOM real. Como resultado, los componentes y las interfaces de React reflejan los cambios muy rápidamente, ya que no tiene que volver a cargar la página completa cada vez que se actualiza algo.
A diferencia de otros marcos como Angular, React no impone reglas estrictas sobre las convenciones de código o la organización de archivos. Esto significa que los desarrolladores y los equipos son libres de establecer las convenciones que más les convengan e implementar React como mejor les parezca. Con React, puede usar tanto o tan poco como necesite debido a su flexibilidad.
Con React, puede crear un solo botón, varios elementos de la interfaz de usuario o la interfaz de usuario de una aplicación completa. Puede adoptarlo gradualmente e integrarlo con su aplicación existente con un poco de interactividad, o mejor aún, usarlo para crear aplicaciones React potentes y completas desde cero, según sea necesario.
Conexión de React al sitio web
Puede conectar React a una aplicación web existente a través de una red de entrega de contenido (CDN) para agregar interactividad a esa página HTML. De esta manera, React obtiene control sobre una parte específica de ese sitio web, como una barra lateral, un widget o algo completamente diferente. Son solo componentes React interactivos y reutilizables con un poco de funcionalidad React.
Puedes lograrlo en tres sencillos pasos.
El primer paso es agregar los dos scripts CDN principales al archivo de índice HTML de su sitio web. Necesita estos scripts para cargar React en su aplicación a través de CDN.
<!-- The first link is that of the core React library API itself". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script><!-- The second link is that of the React DOM needed to render to the DOM". -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- The 3rd link is that of Babel, which is needed to compile our React code so it is understood by all browsers". -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<!-- Load the React component file. -->
<script type="text/babel" src="https://blog.hubspot.com/website/like_widget.js"></script>
En segundo lugar, creas
<!-- ... Your existing HTML markup ... --><div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
El paso final es crear el real. me gusta_widget archivo JavaScript como se muestra a continuación:
// Custom React component function that returns a JSX syntax
const ActualWidget = () => <h1>Hello World</h1>;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(<ActualWidget />, container);
Si ejecuta la aplicación, mostrará «Hello World» en el navegador exactamente donde seleccionó, como se muestra a continuación.
Es posible que haya notado la sintaxis extraña llamada JavaScript XML (JSX) devuelta por la función ActualWidget. Utiliza JSX con React para combinar fácilmente HTML y JavaScript. Facebook desarrolló JSX como una extensión de la sintaxis de JavaScript para ampliar la funcionalidad de HTML incrustándolo directamente en el código de JavaScript. Con JSX, no es necesario separar HTML y JS, ya que React le permite escribir HTML declarativo directamente en su código JavaScript.
Creación de una aplicación React completa
Si bien puede lanzar fácilmente React en una aplicación web existente para crear pequeños fragmentos de interfaz, es más práctico usar React para crear aplicaciones web completas. Sin embargo, React probablemente tenga requisitos de configuración de herramientas pesados que tienden a ser desalentadores y tediosos al crear nuevas aplicaciones React.
Afortunadamente, no necesita aprender esta configuración de compilación ni configurar las herramientas de compilación usted mismo. Facebook creó una herramienta de línea de comandos para el paquete Node llamada aplicación-crear-reaccionar para ayudarlo a generar una versión de plantilla de su aplicación React. Este paquete le brinda los beneficios de trabajar de inmediato y proporciona una estructura de aplicación React consistente que reconocerá a medida que avanza entre los proyectos de React.
Crear un nuevo proyecto React es tan simple como ejecutar los siguientes comandos en una Terminal:
npx create-react-app my-new-app
cd my-new-app
npm start
Ejemplos de React.js
La capacidad de React para crear aplicaciones web rápidas, eficientes y escalables lo ha hecho estable y popular. Miles de aplicaciones web lo utilizan hoy en día, desde empresas establecidas hasta nuevas empresas. Algunas menciones notables incluyen:
- netflix
- Uber
- airbnb
- New York Times
- academia Khan
- Academia de codificación
- Nube de sonido
- Discordia
- Red WhatsApp
React también se ha vuelto más confiable y ahora se puede usar para crear aplicaciones móviles nativas usando React Native y Desktop usando Electron.js.
Primeros pasos con React.JS
Este artículo presentó React.js, presentó su historia y mostró cómo React extiende JavaScript. También se proporcionan algunos casos de uso de muestra en los que los desarrolladores usan React.js y algunos fragmentos breves del código React.js y su sintaxis para resaltar por qué los desarrolladores eligen usar React.js en lugar de JavaScript. El artículo terminó con algunos ejemplos del mundo real de aplicaciones populares creadas con React.js.
React proporciona una funcionalidad de vanguardia y es una excelente opción para los desarrolladores que buscan un marco de JavaScript fácil de usar y de alto rendimiento. Al usar React, puede crear interacciones de interfaz de usuario complejas que se comunican con el servidor en un tiempo récord utilizando páginas basadas en JavaScript. Di adiós a la recarga innecesaria de páginas y comienza a construir con React.
