📚 Pré-requisitos Teóricos: este projeto aplica conceitos ensinados em Módulo 05: JavaScript Fundamentos e DOM. Recomendado revisar antes de começar.

🟨 Single Page Application (SPA) com Roteamento por Histórico em JS Puro

v1.0 — Engenharia de Software & Práticas Profissionais

Trilha de Especialização Pedagógica

• Tecnologias: JavaScript Moderno ES6+, History API, State Management, View Templates, Client-Side Routing
• Arquivo Principal: src/router.js

—`

🎯 Objetivo & Escopo do Projeto

Arquitetura de SPA desenvolvida do zero em JavaScript Vanilla sem nenhum framework externo, utilizando a History API (pushState, popstate), gerenciamento de estado reativo simples e carregamento dinâmico de views.

—`

🛠️ Código de Exemplo da Implementação

// Roteador Client-Side em JavaScript Puro
class Router {
  constructor(routes, viewElementId) {
    this.routes = routes;
    this.view = document.getElementById(viewElementId);
    window.addEventListener('popstate', () => this.handleRoute());
  }

  navigateTo(url) {
    history.pushState(null, null, url);
    this.handleRoute();
  }

  async handleRoute() {
    const path = window.location.pathname;
    const match = this.routes[path] || this.routes['/404'] || (() => '<h1>404 - Pagina Nao Encontrada</h1>');
    this.view.innerHTML = await match();
  }
}

const routes = {
  '/': () => '<h1>🏠 Home: Bem-vindo a SPA Vanilla JS</h1><p>Sem frameworks, 100% nativa.</p>',
  '/sobre': () => '<h1>ℹ️ Sobre: Arquitetura Orientada a Componentes</h1>',
};

—`

🚀 Como Executar no Laboratório

1. Abra o terminal na pasta deste projeto

No seu editor/IDE, abra a pasta deste projeto (File > Open Folder) ou navegue via terminal:

cd js_03_spa_vanilla_router

2. Execute a aplicação ou testes

npm install
npm run dev
# ou abrir index.html no navegador

[!TIP] Dica para execução a partir da raiz do repositório: Se você abriu o repositório completo no VS Code, basta navegar até a pasta antes de executar: cd proj_aplicacoes_full_stack/projetos/js_03_spa_vanilla_router