Atividade de Fixação: Rotas e Componentes em React

👉 Objetivo:

Aprender a configurar rotas usando o React Router, criar componentes de página, trabalhar com componentes de layout e melhorar a performance do aplicativo. Além disso, deve-se tratar rotas inválidas e utilizar parâmetros de URL.

📝 Descrição da Atividade:

Crie um projeto React que simula um simples website com múltiplas páginas. O projeto deve incluir as seguintes funcionalidades:

---

1. Configuração do React Router:

• Instale o React Router no seu projeto.
• Configure o Router na aplicação principal (App.js ou index.js).

2. Criando Componentes de Página:

• Crie componentes para pelo menos três páginas diferentes (por exemplo, Home, About e Contact).
• Cada página deve ter um conteúdo básico e um link para as outras páginas.

3. Utilizando o Componente de Rotas:

• Defina as rotas para cada componente de página utilizando o componente Route do React Router.
• Configure links de navegação entre essas páginas usando o componente Link.

4. Trabalhando com Rotas e Componentes:

• Adicione um componente de layout comum (por exemplo, Header e Footer) que será exibido em todas as páginas.
• Assegure que o conteúdo principal de cada página seja renderizado dentro do layout.

5. Componentes de Layout e Melhoria de Performance com Rotas:

• Utilize o componente React.Suspense para lazy loading das páginas.
• Crie componentes de layout (por exemplo, Sidebar, Header, Footer) que sejam compartilhados entre diferentes páginas para melhorar a organização e performance.

6. Tratamento de Rotas Inválidas e Parâmetros de URL:

• Implemente uma página 404 para tratar rotas inválidas.
• Adicione uma rota que utilize parâmetros de URL e exiba conteúdo dinâmico com base nesses parâmetros (por exemplo, um perfil de usuário com /user/:id).

7. Criando o Header:

• Crie um componente Header que será exibido em todas as páginas.
• Adicione links de navegação no Header para permitir a navegação entre as páginas Home, About, e Contact.

---

📄 Licença

Este projeto é desenvolvido exclusivamente para fins educacionais como parte do curso de formação em Desenvolvedor Web Full Stack da Geração Tech do Instituto Euvaldo Lodi (IEL) e o Governo do Estado do Ceará por meio da Agência de Desenvolvimento do Estado do Ceará (ADECE) para capacitação de jovens na área da tecnologia.

---

👨‍💻 Autor

Desenvolvido por: Isaias Oliveira
Curso: Desenvolvedor Web Full Stack
Créditos: Projeto Geração Tech – Instituto Euvaldo Lodi (IEL)