React: desenvolva aplicações tipadas e escaláveis com Typescript

Typescript no React - Apresentação

Se você já desenvolveu aplicações em JavaScript, provavelmente só percebeu um erro ao executá-las no navegador e visualizar a mensagem de erro no console, precisando então corrigir o problema manualmente. Com TypeScript, esse cenário muda. A linguagem adiciona tipagem estática, permitindo que erros que normalmente só apareceriam em tempo de execução sejam identificados já durante o desenvolvimento.

Neste curso, vamos construir uma aplicação do zero utilizando React e TypeScript, explorando os benefícios dessa abordagem desde o início.

Olá! Meu nome é Neilton, sou instrutor na Alura.

Audiodescrição: Neilton é um homem de pele negra com olhos e cabelos pretos. Usa um óculos de grau com armação retangular e uma camiseta amarela. Ao fundo, uma parede lisa e com iluminação degradê do rosa ao azul.

Boas-vindas a este curso! Aqui, vamos desenvolver juntos uma aplicação de cinema chamada Luz e cena, construída totalmente do zero com React e TypeScript. Durante o processo, vamos aprofundar nosso conhecimento sobre componentização no React, mas o grande foco será no TypeScript.

Vamos explorar como o TypeScript adiciona tipagem estática às nossas aplicações, garantindo mais qualidade, escalabilidade e uma melhor experiência de desenvolvimento. Por isso, ele é um grande aliado na construção de aplicações robustas e seguras.

Ao longo do curso, veremos conceitos fundamentais, como tipos básicos, criação de tipos com type e interfaces, tipagem de hooks do React, uso de generics, manipulação de eventos sintéticos e tipagem de eventos e componentes.

Nesta seção "Em cartaz", trabalharemos com filmes obtidos de uma API e entenderemos como o TypeScript nos ajuda a trazer previsibilidade aos dados, garantindo que o retorno dessa API esteja fortemente tipado em nossa aplicação.

Pré-requisitos

Se você está se perguntando o que precisa saber para acompanhar, não se preocupe. Mesmo que ainda não tenha experiência com TypeScript, se já possui uma base em React, este curso é para você! Vamos começar do básico e evoluir juntos na prática.

Estamos muito animados para embarcar nessa jornada com vocês. Sem mais delongas, nos encontramos no próximo vídeo!

Typescript no React - Iniciando o projeto

Vamos criar nosso projeto do zero. Você já deve ter desenvolvido aplicações com JavaScript e Vite, mas faremos o passo a passo para reforçar o processo. Já, se for seu primeiro contato com a criação de uma aplicação React com TypeScript, este guia será essencial para entender cada etapa com clareza.

Iniciando o projeto com React e Vite

Começamos abrindo o terminal. Pode ser que abra o Windows PowerShell, mas podemos usar o prompt de comando (CMD) ou o Git Bash, conforme nossa preferência.

Agora, vamos instalar o React com o Vite. Para isso, digitamos o comando npm create vite@latest. Com esse trecho, estamos apenas instruindo a criação de uma aplicação com o Vite, utilizando a última versão disponível, indicada pelo @latest. Após isso, damos o nome da pasta do projeto, que será lez-e-cena, e adicionamos algumas opções para ignorar ou pular perguntas que o Vite faria. Escrevemos -- --template e especificamos o template desejado, que neste caso é react-ts. O comando completo fica da seguinte forma:

npm create vite@latest luz-e-cena -- --template react-ts

Após pressionar "Enter", o Vite baixará e instalará o projeto, criando toda a arquitetura necessária. Em sequência, rodamos o seguinte comando para acessar a pasta do projeto:

cd luz-e-cena

Em seguida, instalamos as dependências.

npm install

Assim, o Vite instalará tudo que é necessário na pasta node_modules para o funcionamento da aplicação. Esse processo pode demorar um pouco, mas geralmente é rápido.

Com a instalação concluída, acessamos a pasta no Visual Studio Code usando o comando:

code .

Entendendo a estrutura do TypeScript

Assim, visualizamos no VS Code toda a estrutura do projeto Luz e cena, criada pelo Vite. É semelhante a uma aplicação React com JavaScript, mas com algumas diferenças devido ao uso do TypeScript. O Vite cria arquivos como tsconfig.node.json, tsconfig.json e tsconfig.app.json, sendo este último especialmente importante.

Isso, pois os navegadores não entendem o código TypeScript, que é o que utilizaremos para criar nossa aplicação. Geralmente, entendem apenas JavaScript, então precisamos fazer uma transpilação do código para JavaScript. O arquivo tsconfig.app.json fornece diretrizes de configuração para essa transpilação. Nele, encontramos algumas opções de compiler options, como a escolha do módulo ES que utilizaremos, e opções sobre a pasta de destino do código transpilado.

Quando fazemos o bundler do projeto, há opções para o moduleResolution, o tipo de jsx. Também há opções de lint, da linha 19 até o final, que monitoram o código enquanto o escrevemos, informando se esquecemos de utilizar alguma variável ou parâmetro, entre outras coisas. O arquivo tsconfig.app.json é essencial ao criar uma aplicação React com TypeScript.

Agora, vamos rodar nossa aplicação. Abrimos um novo terminal com o atalho "Ctrl + J" e digitamos:

npm run dev

No entanto, no PowerShell, isso pode não funcionar adequadamente, por isso preferimos usar o CMD ou o Git Bash. No CMD, digitamos npm run dev, pressionamos "Enter", e a aplicação já está rodando no navegador.

No navegador, a aplicação React com TypeScript está funcionando como uma aplicação React com JavaScript. Vamos voltar ao VS Code e observar a pasta src. Nela, encontramos app.tsx e main.tsx, indicando que agora utilizamos .tsx ao invés de .jsx. É como o .jsx, mas com um superset do TypeScript.

Dentro do app.tsx, no return, da linha 10 até a linha 31, substituímos o conteúdo por um <h1>Olá, mundo</h1>. Excluímos o useState e, da linha 1 até a linha 3, removemos os imports.

import "./App.css";

function App() {
    return <h1>Olá mundo</h1>;
}

export default App;

Limpando arquivos desnecessários

Após salvar, verificamos no navegador que a aplicação continua funcionando. Agora, vamos remover mais alguns arquivos desnecessários para deixar o projeto mais limpo. Excluímos o arquivo app.css e removemos sua importação na linha 1 do app.tsx. Também apagamos a pasta "assets", já que não precisaremos de nenhum arquivo dela. Em seguida, na pasta "Public", excluímos o vite.svg.

Estamos preparando a aplicação para começar do zero, organizando o diretório de trabalho conforme nossas necessidades.

Após salvar novamente, verificamos que a aplicação continua funcionando, embora alguns estilos estejam desalinhados. Esses ajustes serão feitos em um próximo vídeo. Até lá!

Typescript no React - Arquivos e estilos globais

Dando continuidade à criação do nosso projeto, já realizamos a instalação e fizemos uma limpeza em alguns arquivos que não serão necessários. O próximo passo é continuar a configuração trazendo os assets do projeto que vamos desenvolver.

Primeiramente, vamos voltar ao nosso navegador. Nossa aplicação está rodando, mas queremos trazer o Figma do nosso projeto. A partir dele, criaremos nossa aplicação que possui um design com alguns banners, cabeçalho, um menu onde podemos buscar nossos filmes, além de uma seção de newsletter para inscrição.

Baixando e organizando os assets

No Figma, encontramos alguns componentes e, um pouco acima, o guia de estilos da aplicação. Nele, temos as cores, o logotipo que utilizaremos, incluindo o Favicon, o logo do cabeçalho e do footer, além da tipografia do projeto. Esses elementos são chamados de tokens de design, ou seja, configurações que transferiremos para o código CSS, facilitando o desenvolvimento.

O primeiro passo é fazer o download dos assets. Precisamos baixar os ícones, imagens, logotipo e Favicon. Como já fizemos isso, temos esses arquivos disponíveis em uma pasta. Agora, basta movê-los para a pasta public do projeto, garantindo acesso às imagens necessárias, como as capas dos filmes, banners e logos.

Configurando as fontes no projeto

Outro ponto essencial é a tipografia. No site do Google Fonts, acessamos a fonte "Della Gothic One", que será usada nos títulos, e clicamos em "Get Font". Em seguida, copiamos o código de incorporação para inseri-lo no arquivo index.html. É preciso que isso seja feito também para a fonte "Poppins".

Após concluir, voltamos ao VS Code e acessamos o index.html. Nesse arquivo, próximo à linha 7, colamos os links de importação. Aproveitando, dentro da tag de title, próximo à linha 13, colocamos o nome da aplicação Luz e cena.

Inserindo o favicon e ajustando o HTML

Próximo à linha 5, onde está vite.svg substituímos pelo Favicon da aplicação, localizado na pasta "public" com o nome favicon.svg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link 
        href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Poppins:ital,wght@0"
        rel="stylesheet"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Luz e cena</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
</body>
</html>

Salvamos o arquivo HTML e voltamos para a aplicação no navegador. Nisso, já visualizamos o favicon e o título "Luz e Cena". O próximo passo é configurar os tokens de design no Figma.

Lembrando que esse curso é focado em desenvolver com React e TypeScript. Não escreveremos códigos CSS longos, mas os mais simples faremos juntos.

Copiamos o código CSS e, no arquivo index.css dentro da pasta "src", substituímos todo o conteúdo pelo novo código CSS. Este código inclui a configuração de variáveis de cores, estilos de borda, sombra, fontes de texto, variáveis de gap, padding, tamanhos de fonte (médio, grande, pequeno, super pequeno) e margens. Também há configurações para o corpo <body> e a tag <main> da aplicação.

:root {
  --preto: #1e1e1e;
  --cinza-escuro: #252530;
  --cinza-medio: #a6a6a6;
  --cinza-claro: #efefef;
  --branco: #ffffff;
  --verde: #c3ff95;
  --azul: #6f99ff;
  --azul-claro: #ccdbff;
  --amarelo: #f5d010;
  --coral: #ed7562;
  --vermelho: #f45866;

  --border-color: #a6a6a6;
  --box-shadow-card: 0px 4px 24px 0px #7b7b7b26;

  --fonte-texto: "Poppins", sans-serif;
  --fonte-titulo: "Dela Gothic One", sans-serif;

  --gap-xs: 0.5rem;
  --gap-s: 1rem;
  --gap-m: 1.5rem;
  --gap-l: 2rem;
  --gap-xl: 3.5rem;

  --padding-xs: 0.5rem;
  --padding-s: 1rem;
  --padding-m: 1.5rem;
  --padding-l: 2rem;
  --padding-xl: 3.5rem;
  --padding-xxl: 5rem;

  --font-size-xs: 0.75rem;
  --font-size-s: 1rem;
  --font-size-m: 1.25rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 3rem;
  --font-size-xxl: 4.75rem;

  --max-width-block: 75rem;

  --margin-xs: 0.5rem;
  --margin-s: 1rem;
  --margin-m: 1.5rem;
  --margin-l: 2rem;
  --margin-xl: 3rem;
  --margin-xxl: 6rem;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  font-family: var(--fonte-texto);
  font-size: var(--font-size-s);
  font-weight: 400;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Após salvar o arquivo index.css, verificamos no navegador se tudo está funcionando corretamente. O fundo escuro da aplicação desaparece e o título aplica a fonte Poppins, utilizada no corpo da aplicação.

Próximos passos

Até aqui, configuramos o projeto, importamos fontes, cores e os design tokens. O próximo passo é criar os componentes da aplicação, como o cabeçalho e o banner. Continuaremos o desenvolvimento da página na sequência. Nos encontramos em breve!

Sobre o curso React: desenvolva aplicações tipadas e escaláveis com Typescript

O curso React: desenvolva aplicações tipadas e escaláveis com Typescript possui 182 minutos de vídeos, em um total de 59 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:

• Typescript no React
• Composição de componentes
• Renderizando listas
• Tipando dados de API’s
• Finalizando a aplicação