React: explorando frameworks e bibliotecas para criação de interfaces e validação de formulários

Bibliotecas de componentes - Apresentação

Apresentando o instrutor e sua experiência

Olá! Meu nome é Antony.

Audiodescrição: Antony é um homem de pele parda, usa óculos, tem cabelo preto e olhos castanhos. Ele veste uma camisa preta.

Atualmente, atuo como especialista em desenvolvimento front-end na Luisa Labs, que faz parte do Grupo Magalu. Além disso, divido minha vida profissional com a parte acadêmica. Sou mestrando na Universidade do meu estado na área de engenharia de software e também estou fazendo uma especialização, formando um conjunto completo de conhecimentos.

Introduzindo o curso de Bibliotecas no Ecossistema React

Seja muito bem-vindo ao curso de Bibliotecas no Ecossistema React. Nesta formação, vamos explorar algumas das principais bibliotecas dentro do ecossistema React, para que possamos evoluir nosso desenvolvimento e alcançar novos horizontes em nosso código e aplicações. Vamos nos afastar um pouco do básico, do núcleo do próprio React e seus fundamentos, para avançar no conhecimento de bibliotecas.

Como utilizamos estilização dentro do React? Será que é apenas com CSS ou temos outras possibilidades? E quanto a fazer requisições, é somente com fetch ou axios, ou existem outras abordagens? Quando lidamos com grandes formulários, será que já foi inventada alguma forma de lidar com isso? A resposta é sim, e vamos explorar tudo isso aqui.

Destacando a importância do conhecimento de bibliotecas

Esses conhecimentos vão nos ajudar a ter uma compreensão maior das aplicações que estão em desenvolvimento atualmente. O mercado utiliza essas bibliotecas, sistemas e processos, e é fundamental que compreendamos como eles funcionam e quem eles são, para aprimorar nossa experiência, vida profissional, projetos pessoais e rotina enquanto pessoas desenvolvedoras.

Requisitos para participar do curso

O que é necessário para participar deste curso? Precisamos ter iniciado a formação inicial, já entender os conceitos básicos do React, ter desenvolvido nossa primeira aplicação React utilizando estado e alguns hooks, compreender o funcionamento, e ter uma base sólida em linguagem de programação. Dessa forma, não ficaremos perdidos e todos estarão nivelados na mesma base.

Dito isso, nos vemos no curso.

Bibliotecas de componentes - Panorama de biblioteca de componentes

Introduzindo bibliotecas de componentes

Olá. Hoje vamos discutir sobre Component Libraries, ou em português, Biblioteca de Componentes. Para começar de forma direcionada, estamos no site da Alura, alura.com.br. Podemos observar que toda a construção do site possui uma grande harmonia de elementos.

Por exemplo, os padrões de botões apresentam as mesmas cores, fontes e características de borda que se repetem, mesmo em botões diferentes. Essa consistência permite perceber o direcionamento dos botões, como um botão com borda lateralizada apenas de um lado, direcionado para a direita, ou um botão centralizado como o "veja os planos".

Explicando a importância da padronização

Além disso, há padrões nos cards que mostram as áreas disponíveis na Alura, mantendo a mesma consistência em textos, seções e informações. Essa padronização é importante para que, como usuários, possamos criar um vínculo e entender a estrutura da página. Isso se funde com a identidade visual de cada site, ferramenta ou proposta.

Por trás dessa padronização, geralmente, há uma biblioteca de componentes associada. Pode ser uma biblioteca própria da empresa ou algo herdado do mundo open source. Vamos imaginar um cenário: você, como pessoa desenvolvedora da Alura, precisa criar um novo produto dentro do ecossistema da Alura, seguindo a mesma identidade visual. Imagine recriar cada elemento do zero em seu repositório, mesmo que seja necessário copiar de outro arquivo ou pasta de outro repositório. Isso seria um trabalho complicado e maçante, reduzindo nosso ritmo de desenvolvimento.

Apresentando bibliotecas de componentes

A boa notícia é que não precisamos reinventar a roda. Existem bibliotecas de componentes para nos auxiliar nesse processo de construção e desenvolvimento de aplicativos. Essas bibliotecas são definidas por pacotes com componentes reutilizáveis para a construção de sites, além de muitas vezes oferecerem ferramentas associadas.

Nesta aula, apresentaremos algumas das principais bibliotecas de componentes disponíveis no mercado, que podem ser utilizadas em seus projetos. Quando ingressar ou já estiver no mercado de trabalho, provavelmente encontrará alguma delas.

Explorando o Chakra UI

Vamos começar com o Chakra UI, que se define como um component system para construir produtos com velocidade. Ele é uma biblioteca de componentes que oferece um overview dos componentes disponíveis, como slider, pin input, tabs e menus. A documentação é fundamental, com guias de instalação para frameworks como Next.js e Vite, que utilizaremos na aula.

Para começar a usar o Chakra UI, precisamos instalá-lo em nosso projeto. Podemos fazer isso com o seguinte comando:

npm i @chakra-ui/react

Após a instalação, podemos definir tokens personalizados para cores, fontes e animações, o que nos permite manter a consistência visual em nossos componentes. Veja como podemos definir esses tokens:

import { defineTokens } from "@chakra-ui/react"

export const tokens = defineTokens({
    colors: {
        primary: { value: "#FFEEB3" },
        secondary: { value: "#AEEDFB" },
    },
    fonts: {
        body: { value: "system-ui, sans-serif" },
    },
    animations: {
        "slide-in-right": { value: "slide-in-right 0.6s ease-in-out" },
    },
})

Criando receitas de componentes com Chakra UI

Além dos tokens, podemos criar receitas de componentes, que são configurações reutilizáveis para nossos componentes. Por exemplo, podemos definir uma receita para um card:

import { defineRecipe } from "@chakra-ui/react"

export const cardRecipe = defineRecipe({
    base: {
        display: "flex",
        flexDirection: "column",
    },
    variants: {
        variant: {
            primary: {
                bg: "teal.600",
                color: "white",
            },
        },
    },
});

Explorando o Radix UI

Outra biblioteca é o Radix UI, baseada no Tailwind CSS, uma ferramenta poderosa para estilização em aplicações, especialmente com React. O Radix UI oferece uma apresentação interativa de componentes, temas, primitives (componentes principais), ícones e orientação para construção de paletas de cores. A documentação inclui instalação via npm, cdn, modos de uso, custom palettes, entre outros.

Para começar a usar o Radix UI, podemos instalar suas cores com o seguinte comando:

# with npm
npm install @radix-ui/colors
# with yarn
yarn add @radix-ui/colors
# with pnpm
pnpm add @radix-ui/colors

Depois de instalar, podemos importar apenas as escalas de cores que precisamos e utilizá-las como variáveis CSS:

/* Import only the scales you need */
@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/gray-dark.css";
@import "@radix-ui/colors/blue.css";
@import "@radix-ui/colors/blue-dark.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/red.css";
@import "@radix-ui/colors/red-dark.css";

/* Use the colors as CSS variables */
button {
  background-color: var(--blue-9);
  border: 1px solid var(--blue-11);
  color: var(--blue-12);
}

button:hover {
  background-color: var(--blue-10);
}

Introduzindo o Tailwind CSS

Por fim, mencionamos o Tailwind CSS, que é uma ferramenta amplamente utilizada e muito bacana.

Ele é baseado não apenas no tailwind.css, mas também utiliza o Radix, que acabamos de mostrar, para a construção desses componentes. Eles se denominam como a fundação para o seu design system (sistema de design), o que é bastante interessante. Ele possui um conjunto de componentes já desenhados para otimizar e estender o desenvolvimento. É open source (código aberto) e open code (código aberto), ou seja, temos acesso ao código desses componentes. É altamente customizável. Temos vários exemplos na construção de dashboards (painéis de controle) e tarefas. Há um playground (ambiente de teste) no site, além de uma parte dedicada à autenticação. Nos componentes, encontramos uma variedade interessante que podemos explorar.

Destacando a colaboração no desenvolvimento open source

Uma característica notável do Chakra UI é a colaboração no desenvolvimento open source (código aberto). Um dos componentes é o input.otp, que é o one-time password (senha de uso único), um campo de texto para inserir um código de confirmação, comum em logins com autenticação de dois fatores. Inserimos a senha, ele solicita um código, digitamos e ele valida na sequência. Esse componente é resultado de uma colaboração com outro projeto de Guilherme Rodes, um desenvolvedor brasileiro. Isso demonstra a contribuição de desenvolvedores do nosso país para diversas ferramentas, o que é inspirador.

Explorando o Ant Design

Outra biblioteca de componentes que temos é o Ant Design, amplamente utilizado no desenvolvimento administrativo. Ele oferece personalização de temas e componentes, com uma grande variedade. Um grande usuário é o Alibaba. Dentro do Ant Design, encontramos guias e instruções detalhadas sobre os componentes. Na parte de desenvolvimento, temos o Getting Started (Introdução), mostrando a configuração inicial e como usá-lo com outros frameworks (estruturas de trabalho). A parte de componentes é extensa. Uma curiosidade é que, ao procurar por Ant Design no Google, encontramos o título "The World's Second Most Popular React UI Library" (A Segunda Biblioteca de Interface de Usuário React Mais Popular do Mundo). A primeira é o Material UI, que utilizaremos neste curso.

Introduzindo o Material UI

O Material UI teve seu primeiro deploy (lançamento) em 2014. Vamos verificar no GitHub as releases (lançamentos). A primeira foi em 5 de novembro de 2014. Ele é baseado no Material Design, o sistema de design da Google, abrangendo tokens, componentes e estilização. Desde 2014, tem sido amplamente utilizado por empresas como Spotify, Amazon, NASA, Netflix, Unity e Shutterstock. Oferece design kits, templates e bibliotecas de teste, como o Moai X, com componentes avançados. Utilizaremos a versão gratuita, que já atende nossas necessidades.

Explorando a documentação do Material UI

Na documentação, encontramos diversas possibilidades. O Material UI, por exemplo, oferece componentes de fundação e o Moai Base, com componentes não estilizados e hooks (ganchos) associados. O Material UI é completo, com guias detalhados e integração com o Figma. Na parte de componentes, há uma vasta gama, desde botões até Avatar, Badge e Chips. A documentação do Material UI é abrangente, com combinações e modos de uso. Podemos editar o código em um Code Sandbox (ambiente de teste de código) para testes. Além disso, há APIs para cada componente e APIs de estilização, como a Styled, semelhante ao Styled Components.

Concluindo com o uso do Material UI no curso

No curso, utilizaremos o Material UI como base, dado que é a mais utilizada no ecossistema React, tanto para novas aplicações quanto para legadas. Vamos explorar as documentações e, na próxima aula, começaremos a prática.

Bibliotecas de componentes - Componentes básicos

Introdução aos componentes do Material UI

Nesta aula, vamos explorar os componentes básicos do Material UI, que nos permitem criar páginas de forma mais eficiente. Na aula anterior, discutimos o que são essas bibliotecas de componentes e vimos algumas tecnologias utilizadas, incluindo o pacote Material UI, focado no React. Observamos que essa biblioteca é amplamente utilizada por grandes empresas e oferece uma vasta gama de componentes.

Para entender melhor a aplicação de uma biblioteca de componentes, vamos analisar o site da Alura. Nele, podemos ver vários itens com a mesma estilização, como links de navegação e botões de ação primária, que possuem animações, tamanhos, cores e fontes uniformes. Também há cards das escolas de programação, todos com interfaces semelhantes. Imagine se, a cada projeto, fosse necessário desenvolver cada componente do zero, utilizando HTML, CSS e JavaScript. Isso seria trabalhoso e, mesmo que feito manualmente, desejaríamos reutilizar esses componentes.

Biblioteca de componentes

A reutilização é um dos princípios fundamentais da programação. Ao agrupar componentes em uma biblioteca, podemos reutilizá-los em futuros desenvolvimentos. Durante o curso, vamos desenvolver o site Tech Board, que possui um design bonito e conciso, onde a biblioteca de componentes será essencial. Teremos duas funções principais: criar eventos e listar eventos por tema. Vamos começar com a criação de eventos, pois sem ela não há listagem.

Configuração do projeto

Vamos criar um componente básico no Material UI. Primeiro, minimizamos o navegador, abrimos o terminal e executamos o comando:

pnpm create vite

Nomeamos o projeto como 4874-tecboard-react-vite, correspondente ao curso Tecboard React, utilizando o framework React e a linguagem JavaScript. Em seguida, acessamos a pasta do projeto:

cd 4874-tecboard-react-vite

E a abrimos no VS Code:

code .

Com o terminal aberto, executamos:

pnpm install

para instalar as bibliotecas necessárias. Após a instalação, verificamos o package.json para identificar o comando que executa a aplicação. Encontramos o script dev, que roda o comando vite. Executamos:

pnpm dev

e verificamos a aplicação no navegador, acessando o localhost.

Desenvolvimento do componente

Com o VS Code e o navegador lado a lado, começamos a construir o componente. No formulário, identificamos uma caixa externa, um texto, três campos de texto e um botão. Vamos ao site do Material UI, na seção de documentação, e instalamos a biblioteca com:

pnpm add @mui/material @emotion/react @emotion/styled

A documentação do Material UI organiza os componentes por tipo, como input, visualização de dados e layout. Para nosso formulário, utilizaremos componentes como Button, TextField e Typography. Na parte de layout, usaremos Box, Container, Grid, Stack e ImageList.

Começamos com o elemento que envolve os outros, essencial para nossa estrutura. O Material UI oferece duas opções para isso, que exploraremos a seguir.

No nosso layout, temos um componente chamado Stack. Esse Stack gerencia o layout a partir dos eixos vertical e horizontal, ou seja, sua função é alinhar os itens em um desses eixos. Vamos traduzir isso para o português para que possamos ver de maneira mais prática. O componente Stack gerencia o layout de seus elementos imediatos ao longo dos eixos vertical e horizontal, com espaçamento de visores opcionais. No entanto, não queremos apenas alinhar; temos outras necessidades, como cor, borda e efeitos que podem ser aplicados. Vamos voltar ao Figma para visualizar um elemento mais completo e complexo.

Entre esses elementos, existe outro chamado Box, ou, na tradução literal, caixa. Ele é um contêiner genérico e sensível a temas. Além disso, podemos utilizar o CSS do sistema do Material UI. Podemos estilizar os eixos e passar propriedades de tema para esse elemento, tornando-o mais completo e genérico. Vamos utilizá-lo.

Primeiro, importamos o componente Box:

import Box from '@mui/material/Box';

No código, vamos abrir o terminal novamente, mas não precisamos instalá-lo, pois já está instalado. No arquivo app.jsx, no final, após a linha 4, vamos colar a importação do Box. Dentro do app, temos um fragmento na linha 11 que se fecha na linha 32, contendo vários elementos. Vamos remover esses elementos e inserir o componente Box no fragmento:

return (
    <Box>
    </Box>
)

Para facilitar a visualização de algumas transformações, dentro do Box, vamos definir a cor de fundo utilizando a propriedade sx, que conheceremos em breve:

<Box sx={{backgroundColor: '#FFF'}}>
</Box>

Pensando no formulário, temos o Box, texto, TextField e Button. Para o próximo import, copiaremos o import do Box e trocaremos o nome para Typography, o único componente do Material UI para lidar diretamente com textos:

import Typography from '@mui/material/Typography'

Dentro do componente, colocaremos o nome "formulário":

<Box sx={{backgroundColor: '#FFF', display: 'flex', flexDirection: 'column'}}>
    <Typography>Formulário</Typography>
</Box>

Após salvar, já teremos uma caixa simples no centro da tela. No Typography, há propriedades como color. Vamos definir a cor como #222, um preto mais opaco, para visualizar o formulário na caixa de itens tomando forma:

<Typography color="#222">Formulário</Typography>

Além do texto, precisamos de outros componentes, como o Button e o campo de texto. Vamos consultar a documentação sobre input. Na parte de entradas, encontramos o campo de texto, o TextField. Vamos pegar a importação:

import TextField from '@mui/material/TextField'

Vamos criar esses componentes, chamando o TextField e colando-o três vezes:

<TextField />
<TextField />
<TextField />

Ao voltar para o app, já teremos o formulário com os três TextFields planejados, alinhados horizontalmente. O Box permite modificar várias características. Dentro do sx, após a cor de fundo, definiremos a propriedade display como flex, alinhando horizontalmente, e o flexDirection como column. Assim, os três campos e o texto estarão encadeados.

Por último, precisamos de um botão. Vamos importar o botão:

import Button from '@mui/material/Button'

No final, chamaremos o botão e colocaremos um texto sugestivo, "botão":

<Button>Botão</Button>

Ao voltar, o botão estará no final. Precisamos prestar atenção aos componentes do Material UI. Cada um possui uma documentação robusta, com muitos casos e propriedades. No botão, por exemplo, há uma propriedade importante chamada variant. Se definirmos a variante como contained, o botão receberá uma cor primária e ficará completamente preenchido:

<Button variant="contained">Botão</Button>

Com isso, entendemos que uma biblioteca de componentes oferece não apenas os componentes, mas também recursos de propriedades e APIs internas para manipular a apresentação dos componentes e adequá-los à identidade visual desejada. Nosso layout pode ser completamente diferente do que vemos agora, mas temos flexibilidade para ajustar e transformar o Material UI conforme nossa identidade visual. Vamos trabalhar nisso ao longo do curso. Nos vemos na próxima aula.

Sobre o curso React: explorando frameworks e bibliotecas para criação de interfaces e validação de formulários

O curso React: explorando frameworks e bibliotecas para criação de interfaces e validação de formulários possui 351 minutos de vídeos, em um total de 51 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:

• Bibliotecas de componentes
• Validações de dados
• Formulários
• Gerenciando o estado do servidor
• Frameworks React