Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN

Objetivo da Aula

Implementar uma estrutura de layout fixo contendo:

• Barra lateral (sidebar) permanente
• Barra superior (header) fixa
• Área dinâmica para conteúdo das rotas

1. Limpeza do Projeto

Preparação do ambiente removendo arquivos não essenciais:

1// Arquivos removidos: src/setupTests.ts
2src/reportWebVitals.ts
3src/App.test.tsx

Manutenção da estrutura básica:

1// Arquivos mantidos: src/App.tsx
2src/index.tsx

2. Configuração do React Router Dom

Instalação da biblioteca:

1npm install react-router-dom

Criação do arquivo de rotas (appRoutes.tsx):

1import { BrowserRouter, Routes, Route } from "react-router-dom"; 
2function AppRoutes() { 
3  return ( 
4    <BrowserRouter> 
5      <Routes> 
6        <Route path="/" element={<h1>Hello from Home</h1>} /> 
7        <Route path="/details" element={<h1>Hello from Details</h1>} /> 
8      </Routes> 
9    </BrowserRouter> 
10  ); 
11} 
12export default AppRoutes; 

3. Integração das Rotas

Modificação do App.tsx para usar as rotas:

1import AppRoutes from "./routes/appRoutes";
2function App() { return <AppRoutes />; }
3export default App;

4. Estilização Global

Criação do arquivo globalStyles.css:

1/* Reset básico e definições globais */ 
2* { 
3  margin: 0; 
4  padding: 0; 
5  box-sizing: border-box; 
6  outline: 0; 
7  font-family: "Roboto", sans-serif; 
8} 

Importação da fonte Roboto:

1@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");

5. Testes e Verificações

Resultados esperados:

• Acesso a / exibe mensagem "Hello from Home"
• Acesso a /details exibe mensagem "Hello from Details"
• Estilos globais aplicados (sem margens/paddings padrão)

Conceitos-Chave

Próximos Passos

1. Adicionar componentes de layout (sidebar/header)
2. Implementar navegação via componente Link
3. Criar rotas aninhadas para estruturas complexas
4. Adicionar tratamento de erros (404 page)

Esta implementação inicial estabelece as bases para:

• Sistemas de roteamento mais complexos
• Layouts compartilhados entre páginas
• Boas práticas de estruturação de projetos React