trilha.tech trilhas de estudo em tecnologia

Frontend

Frontend moderno com SPA

Trilha para aprender JavaScript na prática, manipulação do DOM, consumo de APIs e construção de uma SPA com framework moderno.

Intermediário 5 passos sugeridos

Sequência sugerida de estudos

Cada módulo é um passo no seu aprendizado. Siga de cima para baixo, adaptando o ritmo à sua realidade.

  1. Etapa 1

    Fundamentos de JavaScript para o navegador

    Consolidar os conceitos principais de JavaScript usados no frontend moderno.

    Tópicos

    • Tipos, variáveis (let, const) e escopo
    • Funções e arrow functions
    • Arrays e objetos no dia a dia
    • Métodos de array: map, filter, reduce (visão prática)
    • Boas práticas de organização de código JS

    Recursos sugeridos

  2. Etapa 2

    DOM e eventos

    Aprender a manipular a interface respondendo a ações do usuário.

    Tópicos

    • Selecionar elementos com querySelector
    • Alterar texto, HTML e classes dinamicamente
    • Eventos de clique, input e submit
    • Delegação de eventos
    • Boas práticas para evitar código "espaguete"

    Recursos sugeridos

  3. Etapa 3

    JavaScript assíncrono e consumo de APIs

    Trabalhar com chamadas HTTP, Promises e async/await.

    Tópicos

    • Conceito de Promise
    • Async/await na prática
    • Usando fetch para requisições GET e POST
    • Tratamento de erros e timeouts simples
    • Exibir estados de loading e erro na interface

    Recursos sugeridos

  4. Etapa 4

    Introdução a SPA com React (ou similar)

    Primeiro contato com um framework SPA moderno, como React, Vue ou outro equivalente.

    Tópicos

    • Conceitos de componentes e props
    • Estado local e reatividade
    • Renderização condicional e listas
    • Organização do projeto em componentes
    • Rotas básicas (lista, detalhes) com React Router ou equivalente

    Recursos sugeridos

  5. Etapa 5

    Ferramentas modernas e projeto SPA

    Usar bundlers modernos e consolidar o aprendizado em um projeto de catálogo.

    Tópicos

    • Criar projeto com Vite ou ferramenta equivalente
    • Ambiente de desenvolvimento com hot reload
    • Separar ambientes de desenvolvimento e produção
    • Consumir uma API real na SPA (catálogo, lista, busca)
    • Publicar a SPA em um serviço de hosting estático

    Recursos sugeridos

Como usar esta trilha

Esta página não é um curso completo. Ela só organiza, em ordem, temas que fazem sentido estudar se você quer se aprofundar nesse assunto.