Seguindo com a segunda parte do projeto que construí na formação React da Rocketseat, um projeto de duas páginas/telas, onde uma tela contém o timer, e a outra tela contém o histórico dos ciclos realizados.
Nesta segunda parte do projeto vamos focar na criação das rotas e no layout das páginas.
Caso queira adquirir os cursos da Rocketseat com o meu cupom de desconto Acesse esse link
Links úteis:
Capítulos:
- Criando as rotas
- 1 - React Router DOM
- 2 - Criando as páginas
- 3 - Removendo o componente Button
- 4 - Criando o arquivo de rotas
- 5 - Context Providers
- Layout de rotas
- 1 - Criando o componente Header
- 2 - Criando o
DefaultLayout
- Estilizando o Header
- 1 - Instalando o Phosphor Icons
- 2 - Criando pasta para cada componente
Criando as rotas
Nesta primeira parte vamos focar na criação das rotas da aplicação.
Uma rota é um padrão de URL que corresponde a uma determinada página ou recurso.
Vamos supor que você tenha um blog com as seguintes URLs:
/ (página inicial)/sobre (página sobre)/contato (página de contato)
Você pode definir as seguintes rotas para essas URLs:
/ -> home() (função que renderiza a página inicial)/sobre -> about() (função que renderiza a página sobre)/contato -> contact() (função que renderiza a página de contato)
Quando um usuário acessar /sobre, o sistema de roteamento irá identificar a rota correspondente e executar a função about(), que irá gerar o HTML da página "Sobre" e enviá-lo ao navegador do usuário.
E, para criar as rotas, precisamos instalar a biblioteca que nos ajudará a fazer isso de uma forma mais fácil.
1 - React Router DOM
Vamos instalar a biblioteca de roteamento com o comando:
$ npm i react-router-dom
commit: chore: ➕ add route lib $ npm i react-router-dom
2 - Criando as páginas
Para testarmos as rotas, precisamos possuir as páginas, ou seja, os componentes que serão renderizados em tela quando uma URL for acessada.
Vamos criar o arquivo src/pages/History.tsx com o conteúdo:
export function History() {
return <h1>History</h1>;
}
E também o arquivo src/pages/Home.tsx com o conteúdo:
export function Home() {
return <h1>Home</h1>;
}
3 - Removendo o componente Button
Vamos apagar os arquivos src/components/Button.tsx e src/components/Button.styles.ts, já que eles eram apenas para mostrar como o Styled Components funcionava.
E no arquivo src/App.tsx vamos remover o componente Button:
4 - Criando o arquivo de rotas
Poderíamos colocar as rotas no arquivo src/App.tsx, mas para uma melhor organização, vamos criar o arquivo src/Router.tsx e colocar as rotas em um componente separado:
import { Route, Routes } from "react-router-dom";
import { History } from "./pages/History";
import { Home } from "./pages/Home";
export function Router() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/history" element={<History />} />
</Routes>
);
}
E no arquivo src/App.tsx adicionamos o <BrowserRouter>:
import { ThemeProvider } from "styled-components";
import { BrowserRouter } from "react-router-dom";
import { Router } from "./Router";
import { GlobalStyle } from "./styles/global";
import { defaultTheme } from "./styles/themes/default";
export function App() {
return (
<ThemeProvider theme={defaultTheme}>
<BrowserRouter>
<Router />
</BrowserRouter>
<GlobalStyle />
</ThemeProvider>
);
}
Executando a nossa aplicação com npm run dev no endereço http://localhost:3000 podemos ver a página Home:
E no endereço http://localhost:3000/history podemos ver a página History:
commit: feat: ✨ add Router
5 - Context Providers
Você pôde perceber no arquivo src/App.tsx, que tanto o <ThemeProvider> quanto o , que não produzem nada visualmente na tela, são componentes que precisam ficar por fora dos nossos componentes que produzem algo visual na tela. E, tanto o <ThemeProvider> como o , são chamados de Context Providers.
Os Context Providers não produzem nenhum visual em tela, mas produzem um contexto para os componentes que estão dentro deles, ou seja, passam informações para esses componentes que estão dentro, no intuito desses componentes interiores saberem do contexto de fora.
Layout de rotas
Nesta parte vamos entender o que é Layout de Rotas e como isso pode ajudar no desempenho da aplicação.
Olhando para as páginas, podemos observar que o Header se repete, independente da rota que acessarmos:
Se em cada componente de página, nós adicionarmos o código do Header dentro, cada acesso do usuário em cada página, o Header estará sendo recriado, construído em tela do absoluto zero.
Podemos então deixar o código do Header em um único lugar para ser criado do zero apenas uma vez, melhorando assim o desempenho da aplicação.
1 - Criando o componente Header
Vamos criar o arquivo src/components/Header.tsx com o conteúdo:
export function Header() {
return <h1>Header</h1>;
}
E poderíamos ter em cada página o Header:
Podemos ver que funciona:
Mas se o Header vai estar em todas as páginas, tem jeito melhor de fazer, mais performático!
2 - Criando o DefaultLayout
Vamos criar o Layout Padrão que também será um componente, criando por primeiro o arquivo src/layouts/DefaultLayout.tsx com o conteúdo:
import { Outlet } from "react-router-dom";
import { Header } from "../components/Header";
export function DefaultLayout() {
return (
<div>
<Header />
<Outlet />
</div>
);
}
O <Outlet /> é um espaço para inserir um conteúdo, um conteúdo que irá mudar dependendo da rota. Se a rota for / então o conteúdo de Outlet será do componente Home, se a rota for /history então o conteúdo de Outlet será do componente History. Ainda não irá funcionar, pois precisamos alterar as nossas rotas.
No arquivo src/Router.tsx:
import { Route, Routes } from "react-router-dom";
import { DefaultLayout } from "./layouts/DefaultLayout";
import { History } from "./pages/History";
import { Home } from "./pages/Home";
export function Router() {
return (
<Routes>
<Route path="/" element={<DefaultLayout />}>
<Route path="/" element={<Home />} />
<Route path="/history" element={<History />} />
</Route>
{/*
- Um Exemplo de um layout diferente:
- Para acessar a rota: "/admin/products"
<Route path="/admin" element={<AdminLayout />}>
<Route path="/" element={<Home />} />
<Route path="/products" element={<History />} />
</Route>
- Nesse caso todas as rotas que começarem com `path="/admin"` terão `<AdminLayout />` aplicado.
*/}
</Routes>
);
}
O <Route path="/" element={<DefaultLayout />}> envolve as rotas Home e History, e o path="/" foi colocado, pois queremos aplicar o DefaultLayout para todas as rotas.
Se ao invés de path="/" fosse path="/teste", o DefaultLayout seria aplicado para todas as rotas que começassem com /teste.
commit: feat: ✨ add DefaultLayout
Estilizando o Header
Nesta parte vamos estilizar o Header e a caixa por volta como na imagem abaixo:
1 - Instalando o Phosphor Icons
Vamos utilizar uma família de ícones chamada Phosphor Icons e instalar a bilioteca phosphor-react
$ npm i phosphor-react
Atualmente já existe uma versão mais nova dessa biblioteca renomeada de @phosphor-icons/react.
commit: build: ➕ add icon lib $ npm i phosphor-react
2 - Criando pasta para cada componente
Vamos adotar apartir de agora uma organização para cada componente, já que vamos ter um arquivo de estilização no formato ts do Styled Components para cada componente.
Vamos fazer a refatoração do arquivo src/layouts/DefaultLayout.tsx, renomeando ele para src/layouts/DefaultLayout/index.tsx. Na mesma pasta vamos criar o arquivo de estilização src/layouts/DefaultLayout/styles.ts:
Na mesma pasta do componente também podemos ter futuramente arquivos de teste e arquivos de tipagem, tudo relacionado ao componente por exemplo.
Também vamos refatorar o Header:
src/components/Header.tsx -> src/components/Header/index.tsx
E vamos criar o arquivo src/components/Header/styles.ts
Author Of article : Dev Maiqui 🇧🇷 Read full article
