Olá! Seja bem-vindo a este curso de React. Meu nome é Vinícius Neves, o Dev careca barbudo da Alura que você mais gosta, e estou aqui para acompanhar a evolução dos seus estudos de React. Vamos aprender muitos conceitos novos, mas é essencial que já tenhamos domínio do JSX do React, ou seja, saibamos escrever os componentes e utilizar o useState, que é o nosso estado local. Esse é um pré-requisito importante para maximizar o aproveitamento ao longo das aulas.
Com isso em mente, podemos focar no que vamos aprender de interessante. Vamos trabalhar em uma aplicação que está parcialmente construída. Diferente do que fizemos anteriormente, não vamos criar tudo do zero. Estamos simulando o dia a dia de uma pessoa desenvolvedora, que nem sempre inicia projetos novos, mas frequentemente pega algo já em andamento para dar manutenção e evoluir. É isso que faremos com o checklist.
Vamos finalizar este checklist de estudo, abordando conceitos importantes para o desenvolvimento. Vamos trabalhar com uma modal, interagir com o local storage, aprender hooks do React e ver a aplicação em funcionamento.
Conseguimos concluir tarefas, deletá-las, desfazer a conclusão caso tenhamos concluído por engano, editar, trocar de useState para localStorage e salvar. Podemos adicionar novas tarefas, como estudar, e explorar a Context API.
Há muitas funcionalidades interessantes que podemos implementar na aplicação. Quando recarregamos, a lista de tarefas permanece intacta, exatamente como a deixamos. Podemos publicar isso e há muitos desafios legais ao longo do curso. Sempre deixamos um desafio no final para praticar e aplicar todo o conhecimento adquirido durante o desenvolvimento deste checklist de plano de estudo.
Estamos animados e esperamos que vocês também estejam, para começarmos a codificar nosso checklist. Vamos lá, estamos esperando por vocês!
Diferente do que fizemos no curso anterior, agora vamos trabalhar em um projeto que já está em andamento e adicionar novas funcionalidades. Neste caso específico, o projeto já existe e está codificado, mas apenas a parte estática. Vamos analisar esse projeto antes de começarmos a codificar. Existe uma mística no desenvolvimento de software, onde passamos muito tempo lendo o código em vez de escrever algo novo. Vamos colocar isso à prova.
Primeiramente, precisamos baixar o projeto base que está na seção de preparação do ambiente. Eu já fiz o download e, no meu caso, ele está na área de trabalho. O nome do projeto é checklist, e eu o clonei na pasta "checklist". Para colocá-lo em execução, não há mistério em relação ao que fizemos anteriormente. Vamos para o terminal. No terminal, já estou na pasta do projeto. Vou fechar tudo que está aberto e focar no checklist.
No terminal que estou usando, ele indica onde estou. Estou dentro de "Desktop", na pasta "Checklist". Existe um comando de terminal que nos permite ver onde estamos, que é o pwd.
pwd
No meu caso, o caminho é /users/Vinicius Deves/Desktop/checklist. Portanto, já estou no local correto.
Agora, vou abrir o VSCode nesta pasta usando o comando code ., e ele abrirá o VSCode para nós.
code .
A primeira coisa que pensamos é em colocar o projeto para rodar. Para isso, usamos o comando npm run dev.
npm run dev
No entanto, se fizermos isso imediatamente após clonar o projeto e abrir o terminal, ele dirá que não reconhece o comando que estamos tentando executar, que é o Vite. Vamos fazer o caminho inverso. Sabemos que no arquivo package.json, há uma seção chamada scripts, localizada na linha 6, onde executamos o script de desenvolvimento com npm run dev, que chama o processo do Vite.
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
}
Por que ele não encontrou isso? Porque, ao clonar ou baixar um projeto, seja por zip ou git clone, precisamos instalar as dependências.
A pasta NodeModules nunca deve ser incluída no git, pois ela varia de acordo com o sistema operacional. Por exemplo, ao usar o macOS, ela será configurada para funcionar nesse sistema. Se estivermos utilizando Linux ou Windows, o processo será ajustado conforme o sistema operacional correspondente.
Antes de executar o comando npm run start, devemos realizar um npm install.
npm install
Esse comando pode ser abreviado para npm i, que é um atalho útil para quem prefere digitar menos.
npm i
Após pressionar "Enter", o npm install baixará todas as dependências do projeto. Quando esse processo for concluído, podemos executar o npm run dev.
npm run dev
Nesse ponto, o Vite, que anteriormente não estava disponível, agora está presente na pasta NodeModules e pronto para ser utilizado.
O projeto estará disponível no localhost na porta 5173. Ao abrir o Chrome e recarregar a página, veremos que a camada visual está pronta. No entanto, ainda há funcionalidades a serem implementadas. Por exemplo, ao clicar em adicionar, nada acontece, e ao alternar o valor entre concluído ou não, ele não muda de lugar. Portanto, há bastante trabalho a ser feito.
No Figma, temos uma pequena modal que precisaremos abrir quando clicarmos no ícone de adicionar uma nova tarefa. Vamos começar pela modal, mas nosso projeto base já está funcionando corretamente.
Para garantir a compatibilidade entre o que está acontecendo em nossa máquina e na de outras pessoas, recomendamos o uso da mesma versão do Node que estamos utilizando, que é a 22.12.0. Podemos verificar a versão do Node instalada com o seguinte comando:
node -v
Alterações na versão secundária, como 12.0, geralmente não causam problemas, mas para uma experiência idêntica, a versão 22 do Node é a mais indicada.
Com o ambiente pronto, podemos começar a desenvolver a nossa modal ou dialog, criando esse componente para adicionar itens à lista de estudo. Vamos continuar esse processo no próximo vídeo.
No nosso último encontro, discutimos a criação de um componente dialog para uma interface modal, que obscurece o fundo. No Figma, já temos a modal escura, mas precisamos implementá-la no estilo React.
Para isso, podemos abrir o VS Code, que já está com o projeto aberto. Vamos fechar tudo que está aberto e, dentro da pasta "components", criar uma nova pasta chamada "dialog". Dentro dela, criaremos o arquivo index.jsx.
Vamos criar uma função e exportá-la: export function Dialog, que será nosso componente. Lembrando que componentes em React são funções que começam com letra maiúscula, por isso usamos "Dialog" com letra maiúscula.
export function Dialog() {
}
Podemos então adicionar o nosso return e, ao invés de chaves, usaremos parênteses para retornar o código JSX, ou seja, nossa marcação.
export function Dialog() {
return (
)
}
Existe uma tag semântica no HTML, que já vem com várias funcionalidades por padrão, chamada dialog, que é ideal para modais. Vamos pesquisar no Google por "HTML tag dialog" e acessar a documentação da Mozilla. A versão em português não contém todos os exemplos, então usaremos a versão em inglês.
Na documentação, encontramos um exemplo que utiliza Javascript para manipular o elemento dialog. Ele busca o elemento, assim como os botões de mostrar e fechar, e realiza ações com eles. Quando clicamos em "show the dialog", ele exibe a modal com um fundo colorido, e ao clicar em "close", ele fecha. Esse exemplo é um bom ponto de partida para nosso projeto.
Vamos copiar o HTML do exemplo, que inclui a dialog, um botão de fechar e um botão de mostrar, e colá-lo no return dentro dos parênteses no VS Code.
export function Dialog() {
return (
<dialog>
<button autofocus>Close</button>
<p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button>Show the dialog</button>
)
}
Ao formatar o código, o VS Code nos alerta que expressões JSX devem retornar um único elemento pai. Isso significa que não podemos retornar uma dialog ao lado de um button sem um elemento pai.
Para resolver isso, podemos envolver tudo em uma div, mas uma solução mais elegante é usar um fragmento do React. Basta abrir e fechar com os sinais de maior e menor, sem nenhum elemento, e o React saberá lidar com isso. Isso é equivalente a usar React.Fragment.
export function Dialog() {
return (
<>
<dialog>
<button autofocus>Close</button>
<p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button>Show the dialog</button>
</>
)
}
No React, podemos utilizar React.Fragment ou deixar o JSX vazio. Se deixarmos vazio, o JSX consegue resolver, e se importarmos dessa forma, o React também sabe lidar. Vamos deixar explícito, pois é melhor do que implícito.
import React from "react";
export function Dialog() {
return (
<React.Fragment>
<dialog>
<button autofocus>Close</button>
<p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button>Show the dialog</button>
</React.Fragment>
)
}
Agora, temos o dialog com os botões relacionados. Vamos salvar e colocar isso no app.jsx.
Vamos colapsar a estrutura de todo, que seria um afazer, e completed, que seria o completo, e posicioná-los no final do container. Vou colocá-los no início para facilitar a visualização, logo abaixo do header, chamando nosso dialog. O VSCode já identificou e importou esse componente na linha 3: import { Dialog } from './components/Dialog';.
import { Dialog } from "./components/Dialog";
Vamos verificar se isso já está aparecendo na tela. No Chrome, no localhost na porta 5173, ao recarregar a página, ele não conseguiu carregar. Precisamos executar npm run dev no terminal, pois o processo foi interrompido para discutirmos a versão do Node e não foi reiniciado.
npm run dev
Voltando ao navegador, agora sim, o show dialog aparece, mas ao clicar, nada acontece. Precisamos implementar os mecanismos que a Mozilla disponibiliza para interagir com esses botões.
Vamos copiar o que está na documentação, que utiliza document.querySelector para buscar uma tag dialog ou um botão dentro dela. Vamos colar isso no JSX e pedir ao VSCode para formatar o documento, colapsando a estrutura de pastas.
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
dialog.close();
});
Estamos buscando os elementos dialog, showbutton e closebutton. Quando alguém clica no showbutton, mostramos o modal com dialog.showModal(), e ao clicar em close, usamos dialog.close(). Esses são eventos nativos do elemento dialog, por isso é importante utilizá-los em vez de uma div com muitos estilos.
Vamos criar um novo arquivo dentro da pasta "dialog", chamado dialog.style.css. Vamos importar esse arquivo no index.jsx com import './dialog.style.css';.
import './dialog.style.css';
Podemos agora aplicar os estilos disponíveis no exemplo, como o .backdrop, no dialog.style.css.
::backdrop {
background-image: linear-gradient(
45deg,
magenta,
rebeccapurple,
dodgerblue,
green
);
opacity: 0.75;
}
Ao testar a aplicação, encontramos um erro não tratado: não conseguimos ler propriedades de nulo no index.jsx nas linhas 11 e 16. Isso significa que o showbutton é nulo, pois o React não o encontrou. Estamos usando a documentação da Mozilla como base, mas ao trabalhar com React, precisamos seguir a abordagem correta.
No curso anterior, discutimos programação declarativa e imperativa. A programação imperativa é quando especificamos exatamente o que o navegador deve fazer, como interagir com a API document. No entanto, o React não espera que escrevamos esse tipo de comportamento dessa forma. O erro ocorreu porque, quando o código foi executado, o dialog não existia no HTML, impossibilitando a execução do addEventListener.
Estamos no caminho certo ao utilizar o dialog, que é o elemento adequado para essa funcionalidade. No entanto, precisamos traduzir essa abordagem. Não podemos usar a API do document dessa maneira em situações como essa dentro do React. No próximo vídeo, veremos como corrigir esse problema. Até lá!
O curso React: utilizando hooks para gerenciar estados possui 194 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:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.