Las aplicaciones de una sola página son sitios web que tienen páginas que se cargan en línea dentro de la misma página. Siga leyendo para descubrir cómo puede crear una aplicación de una sola página usando React.
¿Qué es una aplicación de una sola página?
Una aplicación de página única (SPA) es esencialmente una página web que interactúa dinámicamente con el navegador web al reescribir la página web actual con los datos obtenidos del servidor web. Por lo tanto, en una aplicación de una sola página, la página web no vuelve a cargar la página durante su tiempo de ejecución y, en cambio, funciona dentro de un navegador.
Solicitud de una sola página frente a solicitud de varias páginas
Solicitud de una sola página
Recarga : las aplicaciones de una sola página funcionan dentro de un navegador y no requieren recargar la página durante la ejecución de la página web.
UI/UX : ofrece una experiencia de usuario excepcional al imitar un entorno natural con el navegador al eliminar el tiempo de espera y las recargas de página. Consiste en una sola página web que carga todo el contenido usando JavaScript. Solicita el marcado y los datos de forma independiente y muestra las páginas directamente en el navegador.
Ejemplos : Gmail, Google Maps, Facebook, GitHub.
Solicitud de varias páginas
Recarga : las aplicaciones de varias páginas funcionan de la manera tradicional en la que cada cambio, como mostrar los datos o enviarlos de nuevo al servidor, genera nuevas páginas desde el servidor.
UI/UX : las aplicaciones de varias páginas son aplicaciones más grandes con una gran cantidad de contenido, por lo que la experiencia del usuario es limitada en comparación con las aplicaciones de una sola página.
Ejemplos : eBay y Amazon
¿Por qué elegir una aplicación de una sola página?
Los beneficios de elegir aplicaciones de una sola página (SPA) son:
- SPA es más rápido ya que todos los recursos de la página web se cargan una sola vez en toda la aplicación y los datos son el único recurso que se transmite.
- SPA almacena en caché el almacenamiento local de manera efectiva, ya que envía una solicitud, almacena todos los datos y los usa incluso cuando está fuera de línea.
- SPA simplifica y agiliza las actividades de desarrollo, ya que elimina la necesidad de escribir código para representar páginas en el servidor.
- SPA se puede depurar con facilidad con Chrome, ya que es posible investigar los elementos de la página y monitorear las operaciones de la red.
¿Cuándo no usar aplicaciones de una sola página?
Si bien SPA tiene sus ventajas, hay ciertos casos en los que no es adecuado usarlo:
- SEO: es difícil y complicado optimizar SPA para SEO ya que su contenido se carga mediante AJAX (JavaScript asíncrono y XML). Por lo tanto, los SPA no son adecuados para casos en los que el SEO es fundamental para el éxito empresarial.
- Javascript: requiere que los usuarios habiliten Javascript para que la aplicación y la acción se carguen correctamente. Por lo tanto, no es adecuado para casos en los que JavaScript pueda estar deshabilitado en el lado del usuario.
- Seguridad: SPA también es menos seguro en comparación con MPA, lo que lo hace inadecuado para aplicaciones altamente sensibles. SPA tiene secuencias de comandos entre sitios (XSS) y permite a los atacantes inyectar secuencias de comandos del lado del cliente en la aplicación web.
- Lento: si bien la experiencia del usuario de los SPA en tiempo de ejecución es rápida, la descarga es más lenta y también se puede ralentizar si hay pérdidas de memoria en JavaScript. Por lo tanto, no es adecuado para aplicaciones muy grandes con muchos datos.
¿Cómo crear una aplicación de una sola página usando React?
Para crear una aplicación de una sola página con React, siga los pasos que se mencionan a continuación:
1. Cree una aplicación de reacción en la ubicación deseada con el siguiente comando:
npx create-react-app nombre-de-aplicación
Se crea un directorio llamado app-name con los siguientes archivos predeterminados:
nombre de la aplicación
├── LÉAME.md
├── node_modules
├── paquete.json
├── .gitignore
├── público
│ ├── favicon.ico
│ ├── índice.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifiesto.json
│ └── robots.txt
└── origen
├── Aplicación.css
├── App.js
├── App.prueba.js
├── índice.css
├── index.js
├── logotipo.svg
└── serviceWorker.js
2. Instale react-router-dom para enrutar solicitudes ejecutando el siguiente comando:
npm instalar reaccionar-enrutador-dom
3. Envuelva el componente de la aplicación .
Hay dos tipos de enrutadores React, BrowserRouter (crea direcciones URL como ejemplo.com/acerca de) y HashRouter (crea direcciones URL como ejemplo.com/#/acerca de). Estamos usando BrowserRouter en este ejemplo y lo usamos para envolver el componente de la aplicación .
Su archivo src/index.js debe incluir el siguiente código:
importar reaccionar desde ‘reaccionar’
importar {renderizar} desde ‘react-dom’
importar {BrowserRouter} desde ‘react-router-dom’
Importar aplicación desde ‘./Aplicación’
hacer(
<BrowserRouter>
<Aplicación />
</BrowserRouter>,
documento.querySelector(‘#root’)
)
4. Cree un archivo llamado src/pages/HomePage.js con el siguiente código:
importar React desde “react”;
exportar la función predeterminada HomePage() {
regreso (
<>
<h1>Hola desde la página de inicio</h1>
<p>Este es tu increíble subtítulo de página de inicio</p>
</>
);
}
5. Cree un archivo llamado src/pages/UserPage.js con el siguiente código:
importar React desde “react”;
importar { useParams } desde “react-router-dom”;
exportar función predeterminada UserPage() {
let { id } = useParams();
regreso (
<>
<h1>Hola usuario {id}</h1>
<p>Esta es tu increíble página de perfil de usuario</p>
</>
);
}
6. Decide e incorpora los routers que quieres utilizar mediante Switch y Route . Switch agrupa todas las rutas juntas y garantiza que tengan prioridad de arriba a abajo. Ruta, por otro lado, define rutas individuales.
Su archivo App.js debe incluir las rutas decididas.
importar reaccionar desde ‘reaccionar’
importar {Ruta, Switch} desde ‘react-router-dom’
// Crearemos estas dos páginas en un momento
importar página de inicio desde ‘./pages/HomePage’
importar página de usuario desde ‘./pages/UserPage’
exportar función predeterminada App() {
regreso (
<Interruptor>
<Ruta ruta exacta=”/” componente={HomePage} />
<Ruta ruta=”/:id” componente={PáginaUsuario} />
</Cambiar>
)
}
El código anterior hace coincidir la ruta raíz (/) con HomePage y hace coincidir otras páginas dinámicamente con UserPage .
7. Enlace a una página dentro del SPA usando Enlace.
En el archivo src/pages/HomePage.js , incluya el siguiente código:
importar reaccionar desde ‘reaccionar’
importar {Enlace} desde ‘react-router-dom’
exportar la función predeterminada HomePage() {
regreso (
<div className=”contenedor”>
<h1>Inicio </h1>
<p>
<Link to=”/su enlace deseado”>Su enlace deseado.</Link>
</p>
</div>
)
}
Ahora puede ejecutar el código y ver el servidor de desarrollo disponible en https://localhost:3000 .
Pensamientos finales
¡Eso es todo amigos! Espero que este artículo te ayude a poner en marcha tu proyecto usando React. Si está entusiasmado con esto, debe saber que Creative Tim ofrece plantillas React gratuitas y premium fáciles de usar. Descargue los temas y plantillas de React desarrollados por Creative Tim hoy, para crear su aplicación de una sola página usando React con facilidad.
Otros recursos útiles:
- ¿Cómo usar Bootstrap con React?
- Más de 15 mejores ejemplos de proyectos React.js para 2020
- Más de 10 artículos de ReactJS Framework que deberías leer
- Esto es lo que necesita saber sobre React Development
