Ficha 02 · React avançado · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Exercício 1 · Relógio com useEffect

Cria um componente <Relogio /> que mostra a hora actual e actualiza a cada segundo. Usa useEffect com cleanup.

Resposta:

Exercício 2 · Fetch de utilizadores GitHub

Cria um componente <Users /> que faz fetch a https://api.github.com/users?per_page=10 no mount e mostra uma lista com avatar e login de cada user. Inclui estado de loading e error.

Resposta:

Exercício 3 · Busca dinâmica

Adiciona ao exercício anterior um input de pesquisa. À medida que o user escreve, filtra a lista de utilizadores mostrados (case insensitive).

Resposta:

); }

</div>

### Exercício 4 · Persistência com localStorage

Modifica a TodoApp do exercício 6 da Ficha 01 para que as tarefas sejam guardadas no `localStorage` e carregadas no arranque.

<div class="resposta">

Resposta:

</div>


  );
}

Usa useState(() => ...) para inicialização lazy (só corre uma vez).

Exercício 5 · React Router básico

Instala o React Router e cria 3 páginas: Home (/), Sobre (/sobre) e Contacto (/contacto). Adiciona uma <nav> com links para todas elas. Mostra-as conforme o URL.

Resposta:

Exercício 6 · Rotas dinâmicas

Cria uma rota /user/:id que faz fetch a https://api.github.com/users/{login} (usa o id como login) e mostra avatar, nome, bio e número de seguidores. Adiciona links da lista de users (exercício 2) para esta rota.

Resposta:

); }

// No componente Users — fazer o login um Link:

{u.login}

// Em App, adicionar a rota: } />

Importante: o array de dependências `[id]` faz o efeito correr sempre que o parâmetro muda.

</div>

### Exercício 7 · Dark mode com Context

Implementa um sistema de dark/light mode usando Context API que possa ser consumido por qualquer componente sem prop drilling.

<div class="resposta">

Resposta:

</div>


    </ThemeProvider>
  );
}

Exercício 8 · Deploy no Vercel

Faz o build do projecto e deploy público no Vercel. Em meia página descreve o processo (comandos usados, configuração) e partilha o URL final.

Resposta: