⚛️⏱️ Parte 2: Criando um Timer com Histórico em React

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:

• Meu repositório do projeto

• Repositório oficial do Rocketseat

• Figma do projeto feito pela Rocketseat

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
  • 3 - Estilizando o DefaultLayout
  • 4 - Código do Header/styles.ts

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.

Vamos fazer outra refatoração parecida, agora com o Header:

src/components/Header.tsx -> src/components/Header/index.tsx

E vamos criar o arquivo src/components/Header/styles.ts

3 - Estilizando o DefaultLayout

Vamos criar um componente estilizado chamado LayoutContainer no arquivo src/layouts/DefaultLayout/styles.ts:

import styled from "styled-components";

export const LayoutContainer = styled.div`
  max-width: 74rem;
  height: calc(100vh - 10rem);
  margin: 5rem auto;
  padding: 2.5rem;
  background: ${(props) => props.theme["gray-800"]};
  border-radius: 8px;
  display: flex;
  flex-direction: column;
`;

E no arquivo src/layouts/DefaultLayout/index.tsx:

import { Outlet } from "react-router-dom";
import { Header } from "../../components/Header";
import { LayoutContainer } from "./styles";

export function DefaultLayout() {
  return (
    <LayoutContainer>
      <Header />
      <Outlet />
    </LayoutContainer>
  );
}

Explicação do CSS:

1 - styled.div: A tag div foi escolhida pois se encaixa melhor nesse cenário, já que estamos criando a caixa onde ficará todo o conteúdo da página. A tag main NÃO foi escolhida nesse caso pois haverá o header e o footer dentro dessa tag, e a main seria mais apropriada para conter a funcionalidade principal da página.

2 - max-width: 74rem;: 70rem (1120px) é a largura da caixa, e somando mais o padding 2rem (32px) para cada lado, temos os 74rem de largura.

Podemos ver o tamanho da caixa no Figma conforme a imagem abaixo:

E conforme a gente dominui o tamanho no navegador, os 2rem de padding se mantém:

Para essa margem de 2rem funcionar tive que adiconar margin: 2rem no arquivo src/styles/global.ts:

margin-inline: 2rem; é a mesma coisa que margin: 0 2rem;.

OBS: Essa alteração não estatá junto do commit desta parte do artigo, pois apenas verifiquei isso no momento que eu estava escrevendo essa parte do artigo, já que não foi explicado nas aulas da Rocketseat.

3 - height: calc(100vh - 10rem);: 100vh é para que a caixa ocupe a altura inteira da página menos os 10rem da margem (5rem de margem no topo e 5rem de margem no bottom).

4 - margin: 5rem auto;: A margem possui 5rem (80px) de top e 5rem (80px) de bottom, como mostrado na imagem do Figma abaixo:

OBS: Para essas linhas laranjas com os valores das margens aparecerem no Figma, é preciso clicar na caixa e depois segurar a tecla option no Mac ou alt no Windows/Linux, e mover o mouse para a área desejada.

Já o valor auto para as laterais faz com que automaticamente seja calculado um valor de forma igual para cada margem lateral, assim o conteúdo acaba ficando centralizado.

4 - Código do Header/styles.ts

Vamos adicionar o CSS no arquivo src/components/Header/styles.ts:

import styled from "styled-components";

export const HeaderContainer = styled.header`
  display: flex;
  align-items: center;
  justify-content: space-between;
  nav {
    display: flex;
    gap: 0.5rem;
    a {
      width: 3rem;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: ${(props) => props.theme["gray-100"]};
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      &:hover {
        border-bottom: 3px solid ${(props) => props.theme["green-500"]};
      }
      &.active {
        color: ${(props) => props.theme["green-500"]};
      }
    }
  }
`;