Aplicación React de una sola página

Las aplicaciones de una sola página, a menudo llamadas SPA, son cada vez más populares entre los desarrolladores web. React es una biblioteca de JavaScript que le permite crear interfaces de usuario complejas y dinámicas, lo que la convierte en una opción ideal para aplicaciones de una sola página. En este artículo, exploraremos cómo crear una aplicación de página única (SPA) de React. Analizaremos el enrutamiento, la obtención de datos y la integración de API para crear un SPA completo utilizando React.

React proporciona a los desarrolladores las herramientas que necesitan para desarrollar SPA rápidos y eficientes. Al utilizar el marco basado en componentes de React, los desarrolladores pueden dividir fácilmente su aplicación en partes individuales en las que se puede trabajar de forma independiente sin afectar otras partes del código base. Esto garantiza que solo se modifique el código relevante cuando se realicen cambios o actualizaciones, lo que reduce significativamente el tiempo de desarrollo en comparación con otros marcos o bibliotecas.

Las aplicaciones de una sola página (SPA) han ido ganando popularidad en los últimos años, particularmente con la aparición de marcos de desarrollo web como React y Angular. Según la encuesta State of JS que encuestó a más de 27.000 desarrolladores, el 49,5% de los encuestados informaron que utilizaban React, una popular biblioteca de JavaScript para crear SPA.

Ya sea un principiante o un desarrollador experimentado, este artículo le brindará una comprensión integral de las aplicaciones de una sola página. Elegir React para crear su próxima aplicación de una sola página sería beneficioso en términos de ahorro de costos y capacidad de mantenimiento durante un período a largo plazo. ¡Así que profundicemos en la creación de una aplicación de una sola página usando React!

Aplicación de una sola página frente a aplicación de varias páginas

¿Qué es una solicitud de página única (SPA)?

A diferencia de las aplicaciones web tradicionales, las aplicaciones de una sola página (SPA) solo necesitan actualizar la página que se muestra actualmente para responder al usuario, eliminando la necesidad de cargar páginas repetidamente desde el servidor. Este enfoque evita interrumpir la experiencia del usuario entre páginas sucesivas, haciendo que la aplicación se comporte más como una aplicación de escritorio.

Todo el código necesario, como HTML, JavaScript y CSS, se recupera cargando una sola página en un SPA. Los recursos apropiados se cargan y agregan dinámicamente a la página según sea necesario, lo que permite la navegación a través de clics en enlaces u otros elementos interactivos sin la necesidad de recargas completas de contenido.

Ventajas y desventajas

Veamos ahora algunas ventajas y desventajas de las aplicaciones de una sola página para comprender mejor cómo pueden ser beneficiosas para nosotros o no.

¿Qué son las aplicaciones multipágina?

Una aplicación multipágina (MPA) es un tipo de aplicación web tradicional que consta de varias páginas con su propia URL y se carga independientemente del servidor cuando se accede a ella. Son buenos si crea una tienda en línea, un sitio web de catálogo o un sitio web comercial con múltiples funciones en varias páginas.

Los usuarios pueden solicitar una página HTML representada en su navegador haciendo clic en un enlace o escribiendo una URL en la barra de direcciones, que el servidor muestra. Dado que el servidor es responsable de crear y entregar la página HTML cada vez que se carga una nueva página, el servidor debe realizar una nueva solicitud al cliente.

Las interacciones del usuario en aplicaciones típicas de varias páginas provocan recargas de la página, lo que puede impedir el flujo de usuarios y provocar retrasos. Esto se debe a que toda la página, incluidos todos los recursos estáticos como imágenes, hojas de estilo y scripts, debe recargarse desde el servidor.

Los AMP son fáciles de crear y rastrear. Pueden tardar más en cargarse y responder lentamente en comparación con las aplicaciones de una sola página (SPA), lo cual es una desventaja.

Se confía en las AMP para crear sitios web complejos con innumerables páginas y URL únicas. Sin embargo, los SPA son más adecuados para crear aplicaciones interactivas y responsivas que brinden una experiencia de usuario perfecta.

Crear una aplicación de una sola página en React usando React Router

En este tutorial, creará una aplicación React simple usando React Router.

Preparándose para comenzar a crear su aplicación SPA

Para implementar la aplicación React con éxito, debe tener lo siguiente en su máquina.

Requisitos previos

• Node.js : la última versión de Node.js en su máquina.
• Biblioteca React: la última versión de React en su máquina.
• Un editor de código : cualquier IDE que admita React.

A partir de

Ejecute el siguiente comando Crear aplicación React en su terminal para inicializar un React en su directorio. create-react-app es una herramienta que inicia una aplicación de reacción sin configuración de compilación.

 npx crear-reaccionar-aplicación spa_react

Ahora puede ver una carpeta llamada spa_react en su directorio. Esta es la carpeta de su proyecto React. Navegue a esta carpeta usando el siguiente comando:

 cd spa_reaccionar

Así es como debería verse su paquete.json.

 {
 "nombre": "spa_react",
 "versión": "0.1.0",
 "privado": verdadero,
 "dependencias": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "reaccionar": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.10.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
 },
 "guiones": {
  "inicio": "inicio de scripts de reacción",
  "build": "compilación de scripts de reacción",
  "prueba": "prueba de scripts de reacción",
  "eject": "expulsar scripts de reacción"
 },
 "eslintConfig": { 
"se extiende": (
 "aplicación de reacción",
 "aplicación de reacción/broma"
 )
 },
 "lista de navegadores": {
 "producción": (
 ">0,2%",
 "no muerto",
 "no op_mini todos"
 ),
 "desarrollo": (
 "última versión de Chrome",
 "última versión de Firefox",
 "última versión safari"
 )
 }
 }

Antes de continuar con la creación de nuestra aplicación, también es necesario instalar el paquete del enrutador React. Ejecute el siguiente comando para instalar el paquete dom del enrutador de reacción.

 npm instala reaccionar-router-dom

Creando tu primera aplicación de una sola página

La forma de desarrollar esta aplicación es la misma que se utiliza para todas las aplicaciones anteriores. Habrá un componente principal central. Las páginas de la aplicación serán subsistemas modulares que trabajarán juntos para formar el todo. React Router es útil a la hora de seleccionar qué componentes mostrar y cuáles ocultar.

Dado que el directorio del proyecto tiene código React predeterminado en este momento. Navegue a las carpetas src y public y elimine los contenidos respectivamente.

Ahora navegue a la carpeta pública y cree un archivo index.html con el siguiente código

 <!DOCTYPE html>
 <html lang="es">
 <cabeza>
  <meta juego de caracteres="utf-8">
  <meta nombre="ventana gráfica"
     contenido="ancho=ancho-dispositivo, escala-inicial=1, encogimiento-para-ajuste=no">
  <título>Aplicación React SPA</título>
 </cabeza>
 <cuerpo>
  <div></div>
 </cuerpo>
 </html>

Ahora agregue el siguiente código al archivo index.js en la carpeta src.

 importar Reaccionar desde 'reaccionar';
 importar ReactDOM desde 'react-dom/client';
 importar aplicación desde './App';
 const raíz = ReactDOM.createRoot(document.getElementById('raíz'));
 raíz.render(
  <Aplicación />
 );

En el código anterior debes importar los módulos React y ReactDOM. ReactDOM es la biblioteca que proporciona métodos para representar estos componentes en el DOM (Document Object Model).

Luego se llama al método ReactDOM.createRoot. Este método crea una nueva instancia raíz de ReactDOM que se usará para representar el componente de la aplicación. Luego, se llama al método root.render con el componente de la aplicación como argumento. Este método representa el componente de la aplicación en el DOM, reemplazando cualquier contenido existente en el elemento raíz.

Ahora cree un nuevo archivo llamado App.js que contenga el código del componente principal.

 importar React, {Componente} de "react";

 La aplicación de clase extiende el componente {
 prestar {
  devolver (
    <div className="Aplicación">
     <h1>Un SPA simple creado con React</h1>
     <ul className="encabezado">
      <li><ahref="
      <li><ahref="
      <li><ahref="
     </ul>
     <div className="páginaContenido">

     </div>
    </div>
  );
 }
 }

 exportar aplicación predeterminada;

En el código anterior, hay un componente llamado Aplicación que representa un diseño de aplicación estática de una sola página con un encabezado y una sección de contenido vacía. El encabezado contiene tres enlaces de navegación para diferentes rutas.

Cuando ejecuta el servidor de desarrollo usando el comando npm start en su terminal, puede ver el código HTML agregado en el componente raíz del navegador.

Ahora creemos páginas de contenido separadas para las rutas definidas previamente en el archivo App.js. Comencemos con el contenido de la página de inicio. Cree un nuevo archivo Home.js en la carpeta src. Ahora agregue el siguiente código:

 importar React, {Componente} de "react";

 clase Inicio extiende Componente {
 prestar {
  devolver (
   <div>
    <h3>Aplicación SPA - Inicio</h3>
    <p>Este es un párrafo en la página de inicio de la aplicación SPA.</p>
   </div>
  );
 }
 }

 exportar inicio predeterminado;

En el futuro, cree un nuevo archivo llamado About.js en la carpeta src y agregue el siguiente código:

 importar React, {Componente} de "react";

 clase Acerca de extiende el componente {
 prestar {
  devolver (
   <div>
    <h3>Aplicación SPA - Acerca de</h3>
    <p>Este es un párrafo sobre Acerca de la aplicación SPA.</p>
    <p>La aplicación Team of SPA.</p>
    <tabla>
    <cabeza>
      <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Correo electrónico</th>
      </tr>
    </thead>
    <tcuerpo>
      <tr>
      <td>1</td>
      <td>Juan Pérez</td>
      <td>(correo electrónico protegido)</td>
      </tr>
      <tr>
      <td>2</td>
      <td>Jane Doe</td> 
<td>(correo electrónico protegido)</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Bob Smith</td>
 <td>(correo electrónico protegido)</td>
 </tr>
 </tbody>
 </tabla>
 </div>
 );
 }
 }

 exportar por defecto Acerca de;

Ahora cree otro archivo en el mismo directorio llamado Contact.js y agregue el siguiente código:

 importar React, {Componente} de "react";

 clase Contacto extiende Componente {
 prestar {
  devolver (
   <div>
    <h3>Aplicación SPA - Contacto</h3>
    <p>No dude en contactarnos si tiene alguna pregunta o consulta. ¡Siempre estaremos felices de poder ayudar!</p>
    <h4>Detalles de contacto:</h4>
    <ul>
    <li><strong>Correo electrónico:</strong> (correo electrónico protegido)</li> 
<li><strong>Teléfono:</strong> 1-800-555-1234</li>
 <li><strong>Dirección:</strong> 123 Main St, Anytown EE. UU.</li>
 </ul>
 </div>
 );
 }
 }

 exportar contacto predeterminado;

Las páginas de contenido ya están listas. Cada archivo tiene un componente simple con algún contenido. El siguiente paso sería utilizar los componentes. Veamos ahora cómo usar esto.

Trabajando con React Router Dom

Ahora tendrás que agregar las páginas de contenido Inicio, Acerca de y Contacto al componente principal de la aplicación para poder usarla.

Ahora navegue hasta el archivo App.js.

Importe Route, NavLink, HashRouter desde el módulo React Router Dom agregando lo siguiente en la sección de importaciones

 importar {Ruta, NavLink, HashRouter} desde "react-router-dom";

 A continuación, importe también los componentes de las páginas de contenido creados anteriormente.

 importar Inicio desde "./Home";

 importar Acerca de desde "./Acerca de";

 importar contacto desde "./Contacto";

Ahora hagamos cambios en el componente de la aplicación e integremos el dom del enrutador de reacción adjuntando los siguientes cambios de código

 La aplicación de clase extiende el componente {
 prestar {
  devolver (
   <enrutador hash>
    <div className="Aplicación">
     <h1>Un SPA simple creado con React</h1>
     <ul className="encabezado">
      <li><NavEnlace a="
      <li><NavLink to="/about">Acerca de</NavLink></li>
      <li><NavLink to="/contact">Contacto</NavLink></li>
     </ul>
     <div className="contenido">
      <Ruta ruta exacta=" componente={Inicio}/>
      <Ruta ruta="/cosas" componente={Cosas}/>
      <Ruta ruta="/contacto" componente={Contacto}/>
     </div>
    </div>
   </HashRouter>
  );
 }
 }
 exportar aplicación predeterminada;

La función de la aplicación ahora utiliza el componente HashRouter de la biblioteca dom del enrutador de reacción para administrar el enrutamiento del lado del cliente.

El encabezado tiene los mismos enlaces de navegación, pero ahora usa el componente NavLink en lugar de la etiqueta de anclaje básica.

El área de contenido ahora muestra el contenido de cada ruta, que se especifica utilizando el componente Ruta del dom del enrutador de reacción.

El archivo App.js completo debería verse así

 importar React, {Componente} de "react";
 importar {Ruta, NavLink, Rutas, HashRouter} desde "react-router-dom";

 importar Inicio desde "./Home";
 importar Acerca de desde "./Acerca de";
 importar contacto desde "./Contacto";

 La aplicación de clase extiende el componente {
 prestar {
 devolver (
  <enrutador hash>
   <div className="Aplicación">
    <h1>Un SPA simple creado con React</h1>
    <ul className="encabezado">
     <li><NavEnlace a="
     <li><NavLink to="/about">Acerca de</NavLink></li> 
<li><NavLink to="/contact">Contacto</NavLink></li>
 </ul>
 <div className="contenido">
 <Rutas>
 <Ruta ruta exacta=" elemento={<Inicio />}></Ruta>
 <Ruta ruta exacta="/about" elemento={<Acerca de />}></Ruta>
 <Ruta ruta exacta="/contacto" elemento={<Contacto />}></Ruta>
 </Rutas>
 </div>
 </div>
 </HashRouter>
 );
 }
 }
 exportar aplicación predeterminada;

Ahora navegue hasta la ventana de la terminal y ejecute el comando npm start para ejecutar el servidor de desarrollo y probar el código anterior.

Así deberían verse las páginas web

Ciclo de vida del SPA

Desde el momento en que un usuario inicia una solicitud a la aplicación web hasta el momento en que abandona la página, este proceso se conoce como ciclo de vida de la aplicación de una sola página. Un SPA pasa por los siguientes pasos:

• Inicialización : cuando un usuario inicia una aplicación web, el navegador carga los archivos HTML, CSS y JavaScript de la aplicación. La gestión del estado del enrutador y de la aplicación se configura mediante código JavaScript.
• Enrutamiento: cuando se inicia la aplicación, el enrutador determina la mejor ruta a seguir dependiendo de la URL. El DOM se modifica cuando el enrutador carga la vista o componente correcto.
• Gestión del estado: el estado de la aplicación es una instantánea de su información actual y debe gestionarse. Una biblioteca, como Redux, se encarga del estado. La biblioteca activa una nueva representación de los componentes afectados cada vez que cambia el estado.
• Representación: durante la renderización, React.js utiliza un método de comparación para determinar cuántos cambios se deben realizar en el DOM para acomodar un componente actualizado. Luego se actualiza con el componente revisado.
• Llamadas API: ocurren cuando una aplicación responde a la entrada del usuario solicitando información de un servidor remoto. Al recibir una respuesta del servidor, el código JavaScript cambia de estado.
• Manejo de errores: la aplicación debe responder adecuadamente cada vez que ocurra un error durante cualquiera de los pasos anteriores. La aplicación vuelve al estado estable después de mostrar la advertencia de error al usuario.
• Descarga: cuando un usuario cierra una aplicación web, la función JavaScript correspondiente libera los datos previamente asignados. Esto soluciona problemas de velocidad del navegador y evita pérdidas de memoria.

Gestión del estado en React SPA

Uno de los aspectos más importantes de la creación de una aplicación de una sola página (SPA) es la gestión de su estado. En una aplicación tradicional de varias páginas, cada página tiene su propio estado, que se restablece cada vez que el usuario navega a una nueva página. Sin embargo, en un SPA, el estado debe persistir en múltiples vistas e interacciones del usuario.

React proporciona varias funciones integradas para administrar el estado, incluidos los ganchos useState y useContext y la biblioteca Redux. El gancho useState le permite configurar y actualizar el estado dentro de un componente, mientras que useContext le permite compartir el estado entre componentes sin soporte de perforación.

Consideraciones de seguridad en React SPA

A la hora de desarrollar un SPA es fundamental pensar en la seguridad, ya que puede estar expuesto a diversos ataques. Las secuencias de comandos entre sitios (XSS) y la falsificación de solicitudes entre sitios (CSRF) son las más populares. React incluye varias funciones integradas para ayudar a prevenir este tipo de ataques. React escapa automáticamente de los datos proporcionados a los componentes y tiene protección CSRF incorporada para consultas AJAX.

Optimización del rendimiento en React SPA

El tiempo de carga inicial de la aplicación en los SPA es crucial ya que los usuarios esperan aplicaciones rápidas y con capacidad de respuesta. React ofrece una variedad de técnicas de optimización de la velocidad para ayudar a acortar el tiempo de carga inicial. Las estrategias son división de código, carga diferida y renderizado del lado del servidor (SSR). Puedes separar el código de tu aplicación en partes más pequeñas mediante la división de código, que solo se carga cuando es necesario, minimizando el tiempo de carga inicial. La carga diferida le permite retrasar la carga de componentes hasta que sean necesarios, lo que optimiza aún más el tiempo de carga inicial. SSR incluye el servidor que representa el primer HTML, lo que permite a los usuarios ver la información más rápido y mejorar la optimización de los motores de búsqueda (SEO).

Prueba de aplicaciones de una sola página con React

Para crear un SPA confiable, es necesario realizar pruebas. El marco de prueba de Jest y la biblioteca de prueba de React son solo dos de las muchas herramientas de prueba que puede utilizar con React. Funciones como informes de cobertura de pruebas y pruebas instantáneas han hecho que Jest sea popular entre los evaluadores. La biblioteca de pruebas de React es un paquete pequeño y potente que proporciona una interfaz sencilla para probar módulos de React.

Implementación de aplicaciones de una sola página con React

La implementación incluye la configuración del servidor y la optimización de las aplicaciones de producción, que deben considerarse cuidadosamente al implementar un SPA. La utilidad create-react-app es solo un ejemplo de una herramienta React que simplifica los procesos de desarrollo e implementación. Las características listas para producción de React incluyen técnicas de minificación de código y almacenamiento en caché, entre otras.

Conclusión

Hemos cubierto la mayoría de las funciones útiles de React Router para crear un SPA. Sin embargo, eso no significa que no haya posibilidades más intrigantes para explorar. Las capacidades de enrutamiento requeridas para nuestra aplicación eran bastante modestas. Si está creando una aplicación de una sola página más complicada que las de nuestro tutorial, tómese el tiempo para consultar la documentación y los ejemplos de React Router .

En resumen, React es una biblioteca JavaScript robusta y ampliamente utilizada para desarrollar aplicaciones de una sola página (SPA) simplificadas e interactivas. Utilizando el rápido DOM virtual de React y el diseño basado en componentes, los desarrolladores pueden crear fácilmente aplicaciones web sofisticadas y responsivas. Al elegir adoptar React SPA para su próximo proyecto, debe considerar cuidadosamente los pros y los contras, teniendo en cuenta los posibles aspectos negativos de los SPA, como tiempos de carga inicial más prolongados y problemas de SEO.

Si te gustó esto, asegúrate de consultar nuestros otros artículos sobre React.

• Principales preguntas y respuestas de la entrevista de React que necesita saber
• Pruebas unitarias en React: guía detallada
• ¿Para qué proyectos puede su empresa utilizar React?
• Lo que necesitas saber sobre React antes de usarlo en tu negocio
• 6 razones por las que React es tan popular