¿Sabes qué es una SPA en programación? Cuando hablamos de la herramienta React, tendemos a mencionar que es una librería de JavaScript ideal para la creación de interfaces de usuario en el desarrollo de SPA o single page application.
A pesar de la simplicidad de su nombre, este no es un término tan fácil de entender. Por ello, en este post, te explicaremos exactamente qué es una SPA en programación, el resultado de desarrollar con React.
¿Qué es una SPA en programación?
Para entender qué es una SPA en programación, te recomendamos utilizar la herramienta inspector de tu navegador para revisar el código fuente de algunas páginas web. Para ello, basta con hacer clic derecho sobre la página web a inspeccionar y seleccionar la opción ver código fuente de página.
Puedes hacer este proceso con github.com, donde verás un montón de líneas de código HTML que nos entrega el servidor. Es decir, al acceder a GitHub, verás que hay un servidor que analiza nuestra petición, genera un HTML y nos devuelve el código que ves en el inspector.
Ahora, te invitamos a hacer este mismo proceso con una aplicación creada con create-react-app. Aunque, si estás un poco perdido con esta aplicación, te invitamos a leer nuestros posts sobre create-react-app y código de una aplicación creada con create-react-app.
Entonces, para crear la misma petición que hacemos con GitHub en nuestra aplicación, basta con refrescar la página que te aparece en el servidor localhost:3000. Al hacer esta petición, este servidor nos entregará un código HTML muy similar al que tendríamos en nuestro index.html. Notarás que el HTML de esta aplicación es mucho más sencillo y corto que el de GitHub, pues no hace referencia a los elementos dentro de la página web. En este código, simplemente vemos un div.
Cuando este HTML pasa a nuestro navegador, este decide descargar, entre otras cosas, un script bundle. Aquí es donde se encuentra nuestro código de React, transformado a código JavaScript para que el navegador pueda entenderlo y que empieza a ejecutar. Este script bundle es el punto de entrada que nos lleva a nuestro index.js y, por ende, al comando ReactDOM.render. Es decir, el código que se renderiza en este comando, que normalmente es el componente de nuestra aplicación, no lo crea el servidor.
A partir de lo anterior, ¿qué es una SPA en programación? Pues una SPA o single page application es un tipo de aplicación con un solo punto de entrada, que generalmente es nuestro index.html o index.js.
¿Qué sigue?
Ahora que sabes qué es una SPA en programación, ¡es hora de que crees tus propias aplicaciones en React! Para aprender como desarrollar este y muchos otros proyectos de programación, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar herramientas como JavaScript, React, CSS y HTML. ¡No te lo pierdas!
