/front-react-rotas-com-react-router-dom-exercicios

Primary LanguageJavaScript

Rotas no frontend

Exercícios de classe 🏫

  1. Exercício 1 -

    Criar duas páginas e fazer a navegação entre elas usando o react-router-dom - SignIn - Main

    Regras:

    • As páginas precisam conter uma navegação, ou seja, quando estiver na de SignIn um link deve me proporcionar ser redirecionado para a página Main e vice-versa.

  1. Exercício 2 -

    Criar duas páginas e fazer a navegação entre elas usando o react-router-dom - SignIn - Main

    Regras:

    • As páginas precisam conter uma navegação, ou seja, quando estiver na de SignIn um link deve me proporcionar ser redirecionado para a página Main e vice-versa.
    • A página Main deve ser uma rota protegida, por isso é necessário criar a estrutura de rotas protegidas, sendo que quando um usuário não estiver autenticado, ele não poderá acessar a página Main.

    Dica: Utilize a lógica de criar uma constante isAuthenticated = true/false.

  1. Exercício 3 - Esse exercício é um mini desafio, nele você irá praticar tudo o que aprendeu nessa aula e no curso.

    Regras:

    • Pensar bem na componentização do projeto
    • Seguir o layout do figma
    • Criar 3 paǵinas:

      • Sign In (Página de login, ao clicar no botão login deve redirecionar o usuáro para página Main)

      • Main (Página onde serão exidas as lista de professores, ao clicar em um card de professor, redirecionar o usuário para a página TeacherDetail)

      • TeacherDetail (Página onde será detalhado cada professor, para essa página ser exibida, é preciso clicar em um professor na página de Main)

Obs.: No exercício 3 você poderá usar o figma para te orientar quanto ao layout, dentro desse repositório nós temos um arquivo chamado figma.fig, para importá-lo é muito simples, veja nas imagens abaixo:

  • Abra o figma e clique em import file, escolha o arquivo e clique em OK.

  • Pronto, quando terminar de importar o projeto aparecerá na sua tela principal do figma.

Obs.: Em caso de dúvidas, lembre-se de assistir os vídeos de orientação.

Dicas

Não sabe por onde começar? Que tal começar olhando o que já existe dentro do projeto, após isso pense no projeto final e defina pequenas tarefas para chegar a esse resultado.

Nos exercícios será necessário:

  • Importar itens do Json
  • Importar imagem
  • Utilizar evento de clique
  • Buscar itens
  • Listar itens
  • Criar e Manipular estado
  • Baixar a biblioteca de rotas
  • Enviar o usuário pra outra página
  • Configurar arquivo de rota
  • Importar Component na rota
  • Definir o caminho de cada rota e seu respectivo component
  • Utilizar BrowserRouter no index
  • Importar o component de rota no index
  • Criar Component de proteção de rota
  • Informar parametros de rota (id)
  • Definir as rotas livres e as rotas protegidas

Preencha a checklist para fazer os exercícios:

  • Fazer o fork do repositório para sua conta
  • Executar git clone do seu fork no terminal para clonar o repositório, ou clonar de outra maneira
  • Após fazer e commitar todos os exercícios fazer o git push para seu fork
  • Copiar a url do seu fork e enviar na plataforma
tags: módulo 3 front-end React