React com Typescript: desenvolvendo uma área administrativa

Construindo componentes - Apresentação

Boas-vindas a mais esse curso de React com TypeScript aqui na plataforma Alura. Me chamo Mônica Hillman e serei a sua instrutora ao longo desse curso.

Mônica Hillman é uma mulher branca. Tem cabelos longos e castanhos, com mechas rosas e franja. Está usando um óculos de lentes transparentes com uma armação redonda. Veste uma camiseta preta escrito "Alura" e atrás há uma estante do lado esquerdo e uma planta do lado direito.

Projeto Voll

Durante esse projeto, seremos uma equipe de pessoas desenvolvedoras que atua na plataforma da Voll. Esta é uma plataforma de gestão de consultas de profissionais em uma clínica médica. Mais especificamente, da área administrativa.

Endereço do projeto: localhost:3000

Na tela do projeto, temos um cabeçalho com o logo da Voll no canto superior esquerdo, e do lado superior direito temos um ícone da nossa foto de perfil e um botão "Sair". Abaixo, temos uma seção "Área Administrativa" que possui um botão "Cadastrar especialista" logo abaixo. A seguir, temos uma tabela intitulada "Consultas do dia", com as seguintes colunas: data, horário, profissional, especialidade, paciente e modalidade. Abaixo da tabela, temos um gráfico intitulado "Consultas mensais por especialistas". Esse gráfico realiza uma comparação de quantas consultas por especialistas tivemos ao longo do mês. Por fim, temos uma seção de avaliação dos especialistas.

Para fazermos tudo isso, usamos o React com TypeScript para facilitar a construção de um código mais legível e com menos possibilidade de refatoração. O TypeScript está sempre teimando para codarmos de uma forma que evite erros posteriores.

Pré-requisitos

Para você conseguir rodar esse projeto com mais facilidade, é importante já ter conhecimentos prévios de:

• HTML;
• CSS;
• JavaScript;
• TypeScript;
• React.

Caso tenha se interessado em aprender um pouco sobre todos esses assuntos, não deixe de se matricular neste curso! Te espero nas próximas aulas.

Construindo componentes - Cabeçalho

Podemos começar a codar o nosso projeto. Visualizando o Figma do projeto, percebemos que o primeiro componente que precisamos construir é o cabeçalho. Este, é composto por duas imagens.

Vamos abrir o VS Code, do lado esquerdo selecionamos a pasta src e clicamos com o botão direito do mouse e depois na opção "Nova pasta". Esta pasta será chamada de components. Dentro desta pasta, criamos uma nova pasta nomeada de Cabecalho, onde dentro geramos mais um novo arquivo chamado de index.tsx e uma pasta chamada de assets.

Assim, ficamos com a seguinte estrutura de arquivos dentro de components:

• components
  • Cabecalho
    • assets
    • index.tsx

Dentro da pasta public, também temos uma pasta assets onde estão localizadas todas as imagens que vamos usar no projeto. Segurando a tecla "Ctrl", selecionamos os arquivos logo.png e perfil.png e arrastamos para a pasta assets dentro de components.

Ficamos com a seguinte estrutura de arquivos dentro de assets da pasta components:

• components
  • Cabecalho
    • assets
      • logo.png
      • perfil.png
    • index.tsx

Dentro do index.tsx, vamos começar a codar o projeto. Na primeira linha escrevemos function Cabecalho() {}; e dentro das chaves inserimos um return().

Na sequência, colocamos um elemento do header onde dentro teremos uma img src (image source). Não vai funcionar se inserirmos o link da imagem, vamos importá-la. No topo do arquivo, escrevemos: import logo from './assets/logo.png';; e também vamos importar a imagem de perfil.

index.tsx

import logo from './assets/logo.png';
import perfil from './assets/perfil.png';

function Cabecalho() {
    return (
        <header>
            <img src= />
        </header>
    )
}

Agora, voltamos ao source da imagem para colocar entre chaves a imagem do logo. O texto alternativo que irá acompanhar essa imagem será "logo da empresa Voll", para isso, usamos o alt. Logo após, fechamos a tag img usando />.

index.tsx

import logo from './assets/logo.png';
import perfil from './assets/perfil.png';

function Cabecalho() {
    return (
        <header>
            <img src={logo} alt="logo da empresa Voll" />
        </header>
    )
}

Dentro do header, abrimos e fechamos uma <div>. Dentro da div, teremos outra tag img onde colocamos entre chaves a imagem de perfil, com o texto alternativo: "imagem de perfil do usuário".

Na linha seguinte, escrevemos < a href= ""> </a>. Dentro das aspas duplas, digitamos um hashtag e como texto desse link colocamos "Sair". Por fim, após o fechamento da última chaves do arquivo, colocamos export default Cabecalho.

index.tsx

import logo from './assets/logo.png';
import perfil from './assets/perfil.png';

function Cabecalho() {
    return (
        <header>
            <img src={logo} alt="logo da empresa Voll" />
                    <div>
                            <img src={perfil} alt="imagem de perfil do usuário" />
                            <a href="#">Sair</a>
                    </div>
        </header>
    )
}

export default Cabecalho;

Antes de tudo, vamos entender esse componente: dentro dele, temos um header que é um elemento semântico para simbolizarem que é um cabeçalho. Dentro dele, colocamos a imagem do logo da empresa Voll e uma div, representando um bloco; e dentro dela temos a imagem do perfil da pessoa usuária e o texto de sair.

Agora, vamos estilizar esses elementos. Para isso, entre os imports das imagens e a função do componente criamos uma constante chamada de CabecalhoEstilizado; e igualamos isso ao styled.header, e abrimos e fechamos crases.

index.tsx

import logo from './assets/logo.png';
import perfil from './assets/perfil.png';

const CabecalhoEstilizado = styled.header`

`

function Cabecalho() {
    return (
        <header>
            <img src={logo} alt="logo da empresa Voll" />
                    <div>
                            <img src={perfil} alt="imagem de perfil do usuário" />
                            <a href="#">Sair</a>
                    </div>
        </header>
    )
}

export default Cabecalho;

Entre as crases, vamos inserir alguns estilos, como o display, o align-items, o justify-content e o padding. Preenchemos da seguinte forma:

index.tsx

const CabecalhoEstilizado = styled.header`
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 2em 4em
`

Estamos estilizando com o display sendo flex para colocar uma coisa do lado da outra; o align-items para eles se alinharem pelo centro; o justify-content para aplicar um espaçamento igual entre cada objeto e o padding, sendo um espaçamento interno entre os elementos para eles não ficar colados na nossa janela.

Observe que temos um sublinhado na cor vermelha abaixo de styled. Passando o cursor do mouse sobre ela, temos a mensagem "Não é possível encontrar o nome 'styled'". Ou seja, ele não está encontrando o nome styled, pois não é nativo do TypeScript.

Para resolver isso, clicamos no final da palavra styled e teclamos "Ctrl + Espaço". Será exibido um menu flutuante, onde selecionamos a primeira opção styled de styled-components. Após isso, perceba que ele realizou o import da biblioteca styled-components através do texto styled.

Com isso, ele identifica sobre o que se trata essa palavra, dado que ela não é nativa do que estamos codando no nosso projeto.

index.tsx

**import styled from 'styled-components';**
import logo from './assets/logo.png';
import perfil from './assets/perfil.png';

const CabecalhoEstilizado = styled.header`
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 2em 4em
`

function Cabecalho() {
    return (
        <header>
            <img src={logo} alt="logo da empresa Voll" />
                    <div>
                            <img src={perfil} alt="imagem de perfil do usuário" />
                            <a href="#">Sair</a>
                    </div>
        </header>
    )
}

export default Cabecalho;

Observe que o erro desapareceu. Logo, podemos seguir adicionando os outros componentes estilizados. Abaixo de CabecalhoEstilizado, criamos uma constante chamada de Container e a igualamos ao styled.div; e depois abrimos e fechamos crases.

Dentro das crases, vamos inserir alguns dos mesmos estilos que incluímos anteriormente, como o display, o align-items e o justify-content mas desta vez recebendo o space-around. Como novo estilo, adicionamos o flex-grow: .1.

const Container = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-grow: .1;
`

Estamos aplicando o espaçamento da div (que contém a imagem e o texto de sair) entre ela e o logo. E como precisamos que os itens dentro dela fiquem um do lado do outro, repetimos os estilos; o flex-grow é para termos esse bloco (div) ocupe um espaço maior dentro do cabeçalho estilizado.

Agora, vamos estilizar o link. Na sequência então criamos uma constante chamada de LinkEstilizado e a igualamos a styled.a, e abrimos e fechamos crases. Dentro das crases, colocamos o color: var(--azul-escuro); e o font-weight: 700;.

const LinkEstilizado = styled.a`
 color: var(--azul-escuro);
 font-weight: 700;
`

Nesse trecho, trocamos a cor da escrita para um azul mais escuro e colocamos um peso de 700 nesse link para ele ficar com uma escrita mais grossa.

Mas, como visualizamos esses estilos que aplicamos no código? Aplicamos algumas substituições, onde escrevemos header colocamos CabecalhoEstilizado; onde usamos div trocamos por Container e onde temos o link a alteramos para LinkEstilizado.

index.tsx

import styled from 'styled-components';
import logo from './assets/logo.png';
import perfil from './assets/perfil.png';

const CabecalhoEstilizado = styled.header`
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 2em 4em
`

const Container = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-grow: .1;
`

const LinkEstilizado = styled.a`
 color: var(--azul-escuro);
 font-weight: 700;
`

function Cabecalho() {
    return (
        <CabecalhoEstilizado>
            <img src={logo} alt="logo da empresa Voll" />
            <Container>
                <img src={perfil} alt="imagem de perfil do usuário" />
                <LinkEstilizado href="#">Sair</LinkEstilizado>
            </Container>
        </CabecalhoEstilizado>
    )
}

export default Cabecalho;

É como se estivéssemos criando outros elementos, por isso que traduzindo styled components seria algo como componentes estilizados.

Para visualizarmos isso no servidor local, precisamos colocar esse componente em alguma página que estamos construindo. No caso, a página que temos é o arquivo App.tsx dentro de src, onde vamos remover da linha 5 até a linha 19.

Trecho de código para ser removido do arquivo App.tsx

<div className = "App">
    <header className= "App-header">
        <p>
            Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
        >
            Learn React
        </a>
    </div>

Assim, ficamos com o seguinte arquivo:

App.tsx

import './App.css';

function App() {
    return (

    );
}

export default App;

Dentro do return, colocamos o componente < Cabecalho />. Observe que no topo do código ele já realizou o import para mim, mas caso não tenha ocorrido com você, basta fazer como fizemos no styled: com o cursor sobre o final da palavra, teclamos "Ctrl + Espaço".

App.tsx

import './App.css';
import Cabecalho from './components/Cabecalho';

function App() {
    return (
        <Cabecalho />
    );
}

export default App;

Agora, vamos visualizar o resultado no servidor local. No navegador, atualizamos a página com a URL localhost:3000.

Na página, temos o logo da empresa Voll no canto superior esquerdo, do lado direito temos o ícone com a foto de perfil da pessoa usuária, e na sequência, o botão "Sair".

Nesta aula, tivemos um primeiro contato com o styled components e, com isso, vamos conseguir avançar no projeto e criar outros componentes.

Até o próximo vídeo!

Construindo componentes - Container

Já finalizamos o cabeçalho. Mas se visualizarmos no Figma, o próximo componente que precisamos criar (entre o cabeçalho e o rodapé) é como se fosse um bloco ou container onde terão as informações do gráfico e da tabela.

No VS Code, criamos dentro da pasta components uma nova pasta chamada de Container. E dentro desta pasta, geramos um novo arquivo nomeado deindex.tsx. Assim, ficamos com a seguinte estrutura de arquivos:

• components
  • Container
    • index.tsx

Dentro da pasta index.tsx, criamos uma constante chamada de Container que será igual a styled.section, e na sequência, abrimos e fechamos crases. Entre as crases, colocamos o background-color: var(--cinza-claro);, margin: 4em;, border-radius: 16px;, padding: 2em; e, por fim, o height: 100%.

index.tsx

const Container = styled.section`
background-color: var(--cinza-claro);
margin: 4em;
border-radius: 16px;
padding: 2em;
height: 100%
`

Colocamos uma cor cinza claro no fundo do nosso componente, um espaço por fora usando o margin e um espaço dentro com o padding, o border-radius é para deixarmos as bordas arredondadas e uma altura de 100%.

Observe que a palavra "styled" está sublinhada na cor vermelha. Para ajustarmos isso, clicamos no final da palavra sublinhada e teclamos "Ctrl + Espaço" e escolhemos a primeiro opção "styled" de styled-components. Assim, o styled será importado no topo do arquivo.

index.tsx

import styled from "styled-components";

const Container = styled.section`
background-color: var(--cinza-claro);
margin: 4em;
border-radius: 16px;
padding: 2em;
height: 100%
`

Por fim, exportamos esse componente usando export default Container;.

index.tsx

import styled from "styled-components";

const Container = styled.section`
background-color: var(--cinza-claro);
margin: 4em;
border-radius: 16px;
padding: 2em;
height: 100%
`

export default Container;

Podemos ir no arquivo App.tsx e usar o componente que acabamos de criar. Após o Cabecalho, inserimos o nosso Container.

App.tsx

import './App.css';
import Cabecalho from './components/Cabecalho';

function App() {
    return (
        <Cabecalho />
                <Container></Container>
    );
}

export default App;

Observe que gerou um erro. Vamos analisar: anteriormente montamos um componente usando uma function e depois exportamos ele, algo bem diferente desse que estamos montando agora, onde criamos uma constante e a exportamos.

Isso porque a biblioteca styled components cria o componente através dessa constante e também aplica a estilização. Logo, não precisamos montar toda a função que contém o retorno com o nosso elemento.

Agora, vamos analisar esse erro que apareceu quando incluímos o componente. Dentro do arquivo App.tsx temos tanto o componente Cabecalho quanto o Container sublinhado, logo ambos estão com erro. Passando o mouse por cima do Container, temos a mensagem "As expressões JSX devem ter um elemento pai".

Porém, ambos os componentes estão soltos e precisamos ter algo para agrupá-los. Para ajustarmos isso, logo após o return colocamos um sinal de menor e sinal de maior: <>. Este símbolo representa uma abertura de tag, e para fechá-la colocamos </> após o componente Container.

App.tsx

import './App.css';
import Cabecalho from './components/Cabecalho';

function App() {
    return (
            <>
        <Cabecalho />
                <Container></Container>
            </>
    );
}

export default App;

Agora, ambos estão encaixados entre um elemento chamado de fragment. Na verdade, não chega a ser um elemento, mas representa como se fosse uma div e não possui valor semântico. Observe que ainda consta o sublinhado no componente Container, afinal, não importamos ainda. Podemos, então, seguir o mesmo processo que usamos para importar o Cabecalho.

App.tsx

import './App.css';
import Cabecalho from './components/Cabecalho';
import Container from './components/Container';

function App() {
    return (
            <>
        <Cabecalho />
                <Container></Container>
            </>
    );
}

export default App;

Pronto! Podemos dar sequência na criação do primeiro título do Container, mas faremos isso somente no próximo vídeo. Te espero lá!

Sobre o curso React com Typescript: desenvolvendo uma área administrativa

O curso React com Typescript: desenvolvendo uma área administrativa possui 106 minutos de vídeos, em um total de 47 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Construindo componentes
• Consumindo APIs
• Construindo tabelas
• Construindo gráficos
• Avaliando profissionais