Creación y Funcionamiento de una SPA con Create React App

¿Cómo crear un Single Page Application (SPA) con Create React App?

Explorar cómo se crea una Single Page Application (SPA) utilizando Create React App es esencial para todo desarrollador web que desee implementar aplicaciones modernas y dinámicas. Este proceso es simple y muy potente, permitiendo que la aplicación sea rápidamente desplegada y funcional. ¡Veamos cómo puedes lograrlo paso a paso!

¿Cuál es el primer paso para crear una SPA?

Para comenzar, debes abrir tu terminal e iniciar tu navegador. Busca la documentación de Create React App y dirígete al apartado de "Get Started". Aquí encontrarás la sección "Quick Start" que proporciona el comando para crear una aplicación React. El comando básico es:

npx create-react-app my-app

En este ejemplo, puedes personalizar el nombre de tu aplicación, por ejemplo, sustituyéndolo por "SPA":

npx create-react-app SPA

Este comando descargará todas las dependencias necesarias para crear tu aplicación React. La velocidad del proceso puede depender de la conexión a Internet.

¿Cómo iniciamos la aplicación?

Una vez que Create React App ha finalizado su instalación, dirígete al nuevo directorio con:

cd SPA

Luego, inicia la aplicación con:

npm start

Esto ejecutará ciertos scripts y abrirá automáticamente una nueva ventana en tu navegador mostrando la aplicación mínima de React.

¿Qué encontramos dentro del entorno de desarrollo?

Una vez que la SPA está en funcionamiento, puedes abrir herramientas de desarrollo como Visual Studio Code para explorar el contenido. Dentro del archivo index.js, notarás cómo la aplicación React es creada y gestionada. Por ejemplo, podrías cambiar el nombre mostrado en la aplicación desde este archivo.

Además, React utiliza algo llamado Hot Module Replacement, que permite que los cambios se reflejen inmediatamente sin necesidad de recargar manualmente la página.

¿De qué se compone la estructura de archivos de una SPA?

Los archivos principales que se envían desde el servidor incluyen archivos estáticos, un bundle.js que incluye toda la lógica de la aplicación en un archivo JavaScript compacto, imágenes como el logo de React, y otros recursos necesarios. Estos archivos se identifican usando las herramientas de desarrollo del navegador que permiten ver su organización.

localhost:3000
  ├── index.html
  ├── bundle.js
  ├── favicon.ico
  └── (otros archivos necesarios)

¿Qué ocurre si desactivamos JavaScript?

Las aplicaciones React dependen en gran medida de JavaScript. Si deshabilitas JavaScript en el navegador, la aplicación dejará de funcionar correctamente. Utiliza el modo Debugger en el navegador para desactivar JavaScript y recarga la aplicación. Verás una leyenda advirtiendo que es necesario habilitar JavaScript para una correcta visualización.

Este comportamiento evidencia la relevancia del archivo index.html, el cual junto a etiquetas especializadas como <noscript> muestra un mensaje de aviso cuando JavaScript está deshabilitado.

¿Cuál es la importancia del ID root?

El archivo index.js crea un elemento root que es el punto de inserción donde React renderiza toda la aplicación. Este ID es esencial, pues sin él, el DOM inicial que ve cualquier herramienta de indexación, como el bot de Google, no se genera, dejando únicamente mensajes de aviso en ausencia de JavaScript.

El código dentro del index.js puede verse así:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Esta mecánica garantiza que la aplicación solo funcione correctamente si JavaScript está habilitado.

¿Qué podemos aprender de la indexación de Google con una SPA?

Las dificultades de indexación con SPAs están relacionadas con la dependencia de JavaScript para el renderizado inicial. Aunque los motores de búsqueda han evolucionado y ahora son capaces de indexar JavaScript, tener un HTML directamente servido desde el servidor es ideal para optimizar la indexación y evitar que el mensaje de "necesitas habilitar JavaScript" sea lo primero que vea un motor de búsqueda.

La comprensión y uso de alternativas más avanzadas como el serverless render pueden optimizar aún más tus aplicaciones React asegurando una mejora en la experiencia del usuario y en la visibilidad en motores de búsqueda. ¡Sigue aprendiendo y aplicando estas técnicas para llevar tus habilidades de desarrollo al siguiente nivel!