SPA (Single Page Aplication)

SPA significa Single Page Application (Aplicação de Página Única). É um tipo de aplicação web onde o conteúdo é carregado de maneira dinâmica em uma única página HTML, sem a necessidade de recarregar toda a página sempre que o usuário navega ou interage com a aplicação. Após o carregamento inicial, a navegação é mais rápida porque apenas os dados necessários são carregados, em vez de toda a página. Em resumo, uma SPA, é uma aplicação inteira projetada para funcionar como uma única página, onde toda a navegação e interação é gerenciada pelo JavaScript.

Diferença entre SPA e MPA (Multi-Page Application)
Aspecto SPA MPA
Carregamento Uma única página HTML. Múltiplas páginas HTML.
Atualização de página Dinâmica, sem recarregamento. Recarrega toda a página.
Performance inicial Pode ser mais lenta. Geralmente mais rápida.
SEO Mais difícil, precisa de ajustes. Melhor suporte nativo.

Nesse caso o React é responsavel por inserir o conteúdo nas paginas (por meio do javascript). Quando um componente é renderizado deve ser definido com a Primeira letra Maiuscula, pois, precisa ser diferenciado de tags HTML.

| Exemplo SPA

index.html 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <!-- Aqui o conteúdo é inserido por meio do react -->
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Pagina SPA.

main.jsx 
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

# Metodo responsavel pela inserção de conteúdo na SPA
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <!-- Componente renderizado -->
    <App />
  </React.StrictMode>,
)

Renderiza um conteúdo na página SPA.

app.jsx 
function App() {
  const message = "Olá Brasil";
  return (
    <div>
      <h1>{message}</h1>
      <h2>{message}</h2>
    </div>
  );
}

export default App;

Este é um arquivo javascript para construção de componentes. Em cada return só é possivel retornar um elemento externo (ex.: Não é possivel retornar duas divs).