React é uma biblioteca Javascript para desenvolvimento de aplicações SPA(Single Page Application) Front-end que utiliza uma arquitetura baseada em componentes.
Neste repositório serão armazenados os códigos desenvolvidos no curso de React JS do Zero a Maestria do instrutor Matheus Battisti do Hora de Codar, na plataforma Udemy.
Tópicos que serão apresentados ao longo do curso: Introdução ao React; Fundamentos do React; JSX; Componentização; CSS com React (CSS modules, CSS global); Formulários com React (validações, Hooks, API); Gerenciamento de estado; Tratamento de dados com servidor; Projeto Secret Word, Requisições HTTP com React (useState, useEffect, useRef, useReducer); React Router; Context API; Projeto Mini Blog em React; Node.js; Express; MongoDB; Mongoose; Redux; Firebase (solução do Google para autenticação de usuário, serviços de API e Banco de Dados); Proejto ReactGram; Javascript Moderno; Typescript com React.
O Node.js é uma runtime de Javascript, ou seja, uma biblioteca utilizada por um compilador durante a execução do programa. Construida na V8 engine (escrita em C++ com alta performance) do Google e possibilita criar softwares em JS no lado do servidor.
O npm é um gerenciador de pacotes do Node, que permite baixar bibliotecas de terceiros e executar scripts desenvolvidos na aplicação.
📚 Conteúdo
- Introducao
- Fundamentos do React
- Avancando no React
- CSS no React
- Formularios no React
- Secret Word Game
- Requisicoes HTTP no React
- React Router
- Context
- Mini Blog em React
- Plus Testes com Jest e Cypress
Gerar uma nova aplicação via npx: "npx create-react-app nome-desejado"
Instalação com o Vite: "npm create vite@latest"
Nome do projeto: nome-desejado
Escolher: React e Javascript
Executar a nova aplicação:
cd nome-desejado
npm install
npm run dev- Links:
- [React] (https://react.dev/)
- Entre no arquivo App.js e adicione mais algum elemento HTML da sua escolha;
- Crie uma regra de estilos em App.css que altere a cor do seu elemento;
- Vá até o arquivo index.html e altere o título da aplicação na meta tag;
JSX é o HTML do React. Onde declaramos as tags HTML que serão exibidas no navegador e ficam no return do componente. Algumas propriedades mudam no JSX como o class no HTML, no JSX deve ser utilizado className.
Para fazer comentário no JSX:
{ /* Comentários */ }Template expressions é o recurso que permite executar Javascript no JSX e também interpolar variáveis.
Exemplo:
{ algumCódigoJS }- Crie um componente chamado Challenge;
- Importe-o em App.js;
- No componente criado faça a criação de dois valores numéricos;
- Imprima este valores no componente;
- Crie também um evento de click que soma estes dois valores e exibe no console;
Podemos utilizar os eventos como onClick para acessar uma função. As funções geralmente tem o padrão de nomenclatura handleAlgumaCoisa.
- Crie um projeto para a nova seção;
- Limpe o arquivo do componente principal;
- Coloque o título de seção 3;
Hooks são funções do React que permitem por exemplo guardar e alterar o estado de algum dado, o ciclo de vida, entre outros recursos, nos componentes funcionais. Todos os hooks começam com "use", por exemplo useState, e com o hook é possível re-renderizar o componente.
Sintaxe do hook:
const [elemento, setElemento] = useState(valorInicial)Evitar o Warning: "Each child in a list should have a unique 'key' prop." Para isso, utilize sempre um identificador único (índice único) como chave de cada elemento da lista. Geralmente o id único vem do BD. Para uma melhor performance utilize o método map() do primeiro exemplo.
const jokes = [
{id: 151, joke: "abc asd", rating: 4},
{id: 158, joke: "hrd asd", rating: 1},
{id: 155, joke: "lun asd", rating: 5},
{id: 156, joke: "lok asd", rating: 4},
];
return (
<ul>
{
jokes.map((joke) => (
<li key={joke.id}>
{joke.joke} - {joke.rating}.
</li>
))
}
</ul>
);const myList = ['item1', 'item2', 'item3'];
const myComponentList = myList.map((item, index) => (
<li key={index}>{item}</li>
));
return (
<ul>
{myComponentList}
</ul>
);const myList = ['item1', 'item2', 'item3'];
const myComponentList = [];
myList.forEach((item, index) => {
myComponentList.push(<li key={index}>{item}</li>);
});
return (
<ul>
{myComponentList}
</ul>
);Exemplo implementando um contador que aumenta com base no estado anterior:
const [count, setCount] = useState(0);
function handleIncrement() {
setCount(prevCount => prevCount + 1);
}
return (
<div>
<button onClick={handleIncrement}>Count: {count}</button>
</div>
);As props são propriedades que permitem passar dados do componente pai para um componente filho (unidirecional). Exemplo:
App.jsx
function App() {
const avatar = "https://i.imgur.com/1bX5QH6.jpg";
const alt = "Test image";
const user = "Lin";
return (
<div>
<h1>Trabalhando com props:</h1>
<Profile avatarUrl={avatar} avatarAltText={alt} avatarUser={user} />
</div>
);
};
export default AppProfile.jsx
const Avatar = (props) => {
const {imageU, altT} = props;
return (
<div>
<img src={imageU}
alt={altT}
className="avatar"
width={100}
height={100}
/>
</div>
);
};
const Profile = (props) => {
const {avatarUrl, avatarAltText, avatarUser} = props;
return(
<div className="profile">
<Avatar imageU={avatarUrl} altT={avatarAltText} />
<p>Username: {avatarUser}</p>
</div>
)
}
export default Profile;A desestruturação permite desorganizar valores e propriedades de objetos em variáveis distintas. Ou seja, permite extrair do objeto apenas as dados que preciso. Observe no exemplo abaixo que não precisamos mais passar o props e recuperar props.brand, props.km, etc.
const CarDetails = ({brand, km, color}) => {
return (
<div>
<h2>Detalhes do carro</h2>
<ul>
{/* O uso de destructuring facilita a escrita do código e mantemos o mesmo nome da propriedade, utilizando apenas as props necessárias para personalizar e renderizar os componentes */}
<li>Marca: {brand}</li>
<li>KM: {km}</li>
<li>Cor: {color}</li>
</ul>
<p>Meu carro é um {brand} {color}.</p>
</div>
)
}Possui a sintaxe de uma tag vazia <> </>. React fragment é utilizado quando desejamos envolver um conteúdo HTML no JSX, mas, sem precisar adicionar mais uma div ou envolver o conteúdo em um elemento (nó) extra no DOM. Ele irá ganhar o elemento pai que estiver mais externo, resultando numa estrutura mais limpa e eficiente.
Exemplo:
function Post() {
return (
<>
<PostTitle />
<PostBody />
</>
);
}É um recurso utilizado quando um componente precisa ter JSX dentro dele. Porém, este JSX vem do componente pai. Então, o componente age como um container, abraçando estes elementos. Children é considerada uma prop do componente. Exemplo:
App.jsx
<Container>
<p>E este é o conteúdo do container!</p>
</Container>Container.jsx
const Container = ({ children }) => { {/* Lembrar de desestruturar children */ }
return (
<div>
<h2>Este é o título do container</h2>
{children} {/* Aqui será renderizado o conteúdo */}
</div>
)
}As funções podem ser passadas para as props normalmente. Basta criar a função no componente pai e enviar como prop para o componente filho. No filho ela pode ser ativada por evento por exemplo. Exemplo:
App.jsx
function showMessage(){
console.log('Evento do componente pai!');
}
return(
<h1>Função como prop:</h1>
<ExecuteFunction myPropFunction={showMessage} />
)ExecuteFunction.jsx
const ExecuteFunction = ({ myPropFunction }) => {
return (
<div>
<button onClick={myPropFunction}>Clique aqui para executar a função</button>
</div>
)
}O state lift ou elevação do state, é quando um estado é movido para o componente pai, para que o estado seja manipulado ou compartilhado com todos os componentes filhos que desejam acessá-lo. Ou seja, quando os componentes filhos precisam compartilhar do mesmo estado, centralizado e propagado na aplicação.
Além dos hooks vistos no curso React do Zero a Maestria, esta seção 3 apresenta a prática de outros hooks no React JS.
-
useState(): -
useEffect(): faz com que determinada ação seja executada apenas uma vez. Isso é interessante pois os componentes estão sempre se re-renderizando, então precisamos ter ações únicas as vezes. O useEffect ainda possui um array de dependências, que deve conter os dados que ativem a execução da função de forma automática. O useEffect estará presente nas requisições assíncronas, como em chamada a API. -
useReducer(): -
useRef(): utilizado para persistir valores entre renderizações, ele pode ser usado para armazenar o valor de uma variável mutável que não provoca uma re-renderização. E também, para acessar um elemento HTML no DOM diretamente. -
useImperativeHandle(): feito uma janela modal na seção 03 com o uso do hook useImperativeHandle que é utilizado para expor os dados desejados do componente filho no componente pai. Ou seja, customizando a referência que o componente pai poderá acessar dentro do componente filho.
Screenshot - Modal in React
- Crie um array de objetos compostos de pessoas, com as propriedades de nome, idade e profissão (array com pelo menos 3 itens);
- Os dados devem ser exibidos em um componente UserDetails, que você deve criar, todas as informações devem ser exibidas;
- Faça uma renderização condicional que exibe se o usuário pode tirar carteira de habilitação ou não, imprima isso também no componente UserDetails;
- A informação pode ser exibida num parágrafo (checar se idade >= 18);
O CSS de componente é utilizado para um componente em específico. Geralmente, é criado um arquivo com o mesmo nome do componente e importado no componente. Note que o CSS vaza para outros componentes se houver uma regra em colisão. O React já cria um exemplo com o App.jsx e App.css
O inline style do React é igual o do CSS. Por meio do atributo style, conseguimos aplicar regras diferentes em um elemento. Devemos optar por outras maneiras de CSS, o inline pode dificultar a manutenção ou deixar o código imprevisível em algumas situações.
O CSS inline dinâmico aplica estilo baseado em uma condicional. Vamos inserir no atributo um if ternário. Dependendo da condição podemos mudar que regras de estilo um elemento recebe.
Podemos aplicar uma lógica para alterar a classe CSS de um elemento. Também através do if ternário. Esta abordagem é mais interessante do que o CSS inline, pois as classes estarão isoladas no arquivo CSS, resolvendo o problema de organização de código.
É um recurso de CSS scoped, ou seja, é exclusivo do componente. Usamos a sintaxe Componente.module.css e precisamos importá-lo no componente.
- Crie um novo projeto chamado challengeCSS;
- No CSS global zere a margin, padding e coloque uma fonte que vc goste;
- Crie um componente que exibe detalhes de carros, este componente deve ser estilizado com scoped;
- Exiba pelo menos 3 carros;
- Coloque um título em App.jsx para o seu projeto, estilize o título com o App.css;
Utilizamos a tag form para trabalhar com formularios no React. As labels dos inputs contém o atributo htmlFor, que deve ter o valor do name do input. Não utilizamos action, pois o processamento será feito de forma assíncrona.
Em React um padrão comum é a tag label envolvendo o input. Isso faz com que o atributo se torne opcional. Simplificando nossa estrutura de HTML, sem perder a semântica.
Para manipular os valores dos inputs vamos utilizar o hook useState, ou seja, podemos armazenar na variável e utilizar o set para alterar o valor. Vamos criar uma função para alterar o valor no evento onChange. Deixando nosso código fácil de trabalhar nas próximas etapas: como envio dos dados para o BD e validação.
Quando temos vários inputs podemos realizar a manipulação de forma mais simples. Basicamente criamos uma função inline no onChange. Ela vai alterar o valor do state com o método set, da mesma forma que a função isolada.
Para enviar um form vamos utilizar o evento onSubmit. Ele chamará uma função, e nesta devemos lembrar de parar a submissão com o preventDefault. Nesta etapa podemos realizar validações, envio de form para o servidor, reset de form e outras ações.
Controlled inputs é um recurso que nos permite mais flexibilidade nos forms de React. Precisamos apenas igualar o valor (atributo value) ao state. Um uso muito comum: formulários de edição, que os dados vem do back-end, conseguiremos preencher o input mais facilmente.
Com o controller inputs limpar o form será fácil. Basta atribuir um valor de uma string vazia aos states e pronto! Isso será feito após o envio, em formulários que o usuário precisa preencher novamente.
O textarea pode ser considerado um input de texto normal. Utilizaremos o value para alterar o state inicial e o evento onChange para modificar o valor do state.
O select também será muito semelhante aos outros inputs. Quando temos a alteração de um valor o evento onChange pode captar isso. O value também pode atribuir qual option estará selecionada.
Nesta seção criamos o projeto "Secret Word Game" que é um jogo de adivinhação de palavras em React JS (parecido com o da TV ) para treinar components, hooks, functions, props, destructuring, CSS, etc. No jogo utilizamos os hooks useCallback, useEffect, useRef, useState.
Neste jogo, o jogador clica em iniciar jogo, insere uma letra e verifica se a mesma corresponde a palavra randômica escolhida. Caso o jogador tenha digitado uma letra incorreta, ele terá até 3 tentativas.
1. Acesse o projeto https://github.com/cidaluna/react-js-master
2. Baixe o zip do projeto Clique no botão verde chamado Code e escolha a opção Download ZIP
2.1. Clone o projeto React Ao invés de fazer o download, outra opção é instalar o git na sua máquina e fazer o Git Clone do projeto e seguir do passo 5 em diante.
3. Instale o Node.JS Caso não tenha o Node.JS instalado na sua máquina, será necessário a instalação da versão 18+
4. Extraia o projeto React Extraia o arquivo baixado no local de sua preferência e copie o endereço do local onde você extraiu
5. Acesse a subpasta secretword Pelo prompt de comando em modo administrador, cole o local do projeto e navegue nas subpastas até entrar na pasta secretword
6. Instale as dependências Digite npm install e aguarde a instalação das dependências
7. Execute a aplicação Em seguida, digite npm run dev
8. Navegue pelo projeto Aguarde o prompt informar o link de acesso para navegar no Jogo Secret Word.
Imagem da tela atual do Secret Word Game (Jogo de adivinhar a palavra)
O JSON Server é um pacote npm, ele simula uma API e isso nos possibilita fazer requisições HTTP. Vamos aprender a integrar este recursi com o React. Podemos entender isso como uma etapa de preparação para APIs reais, ou seja, atingir o mesmo resultado mas sem precisar de uma estrutura no back-end.
Para adicionar um item vamos precisar resgatar os dados do form com o useState. Reunir eles em uma função após o submit e enviar um request POST para a nossa API. O processe é bem parecido com o resgate de dados, mas agora estamos enviando dados.
Se a requisição foi feita com sucesso, podemos adicionar o item a lista após o request. Isso torna a aplicação mais performática. Utilizamos o set do useState para isso.
É normal dividir funções que podem ser reaproveitadas em hooks. Esta técnica é chamada de custom hook e vamos construir um para o resgate de dados. Os hooks geralmente ficam numa pasta hooks, devemos utilizar o padrão useName. Basicamente criamos uma função e exportamos ela.
Podemos utilizar o mesmo hook para incluir uma etapa de POST. Vamos criar um novo useEffect que mapeia uma outra mudança de estado. Após ela ocorrer executamos a adição do produto. Obs: nem sempre reutilizar um hook é a melhor estratégia.
Quando fizermos requisições para APIs é normal que haja um intervalo de loading entre a requisição e o recebimento da resposta. Podemos fazer isso no nosso hook também. Identificar quando começa e termina este estado.
Podemos bloquear ações indevidas em outras requests, como no POST. Uma ação interessante é remover a ação de adicionar outro item enquanto o request ainda não finalizou.
Podemos tratar os erros das requisições por meio de um try catch. Além de pegar os dados do erro, também podemos alterar um state para imprimir um elemento se algo der errado. Desta maneira, conseguimos prever vários cenários (dados resgatados, carregamento e erro).
- Crie um botão nos produtos;
- Este botão deve disparar uma função de remoção de produto;
- A URL deve ser a mesma da API + o id do produto: products/1
- Você vai precisar identificar requisição de DELETE, para mudar o verbo http das ..
- Utilize a ideia do método de POST para derivar para o DELETE, pode ser com if/else.
O React Router é um dos pacotes mais utilizados para criar uma estrutura de rotas em aplicações React. Ou seja, ele permite que nossas SPAs tenham múltiplas páginas. Precisamos instalar essa dependência no nosso projeto, a configuração e utilização é simples. Também temos outras funções como Redirect, Nested Routes, Not Found Routes e outros.
- Crie um novo projeto para esta unidade
- Instale o módulo do React Router neste projeto, que é o react-router-dom
- Instale também o json server 'npm install [email protected]'
- Coloque pelo menos três produtos da seção anterior no seu arquivo db.json
- Crie um script para inicializar o json-server
Comando de instalação npm i react-router-dom
Para configurar o React Router vamos ter que importar três elementos de react-router-dom:
BrowserRouter - define onde a área do nosso app que vai trocar as páginas;
Routes - define as rotas;
Route - um elemento deste para cada rota, configurar com path e componente da rota.
Para criar links para as páginas vamos precisar utilizar o Link do React Router. No link configuramos o parâmetro to, que recebe a URL/path que será redirecionado quando clicar no link.
Para criar uma rota dinâmica vamos precisar definir uma nova Route em App.jsx.
Deve ter o padrão de: /products/:id
Onde :id é o dado dinâmico, ou seja, podemos ter qualquer valor.
Na página podemos utilizar o hook useParams para resgatar esta informação.
As nested routes indicam URLs mais complexas, como: /products/:id/something
Neste caso, vamos precisar criar um componente que corresponda com o padrão indicado e também a URL em App.jsx. Na nested route teremos o acesso ao parâmetro da URL também.
Podemos criar uma página não encontrada (404) facilmente com o React Router. Basta criarmos o componente da página e no arquivo App.jsx definir um path como *.
Desta maneira, qualquer rota que nao exista cairá neste componente.
Para ter fácil acesso a uma modificação para os links ativos na barra de navegação, vamos trocar o Link pelo NavLink. Neste elemento temos acesso a um valor chamado isActive, ou seja, podemos ativar uma classe se a rota atual for a que está no atributo to.
É um recurso que permite obter o que vem na URL em forma de parâmetro. Exemplo: products?q=camisa.
Utilizamos o hook useSearchParams para obtê-los. Com este recurso fica simples fazer uma funcionalidade de busca no sistema.
Podemos precisar de um redirecionamento de páginas eventualmente. Exemplo: uma página antiga do sistema responde agora a uma nova URL.
Para isso vamos utilizar a rota com Route normalmente, mas em element vamos utilizar o componente Navigate com um to que vai para a rota correta.
- Crie um novo projeto para trabalharmos com context
- Este projeto deve ser instalado o react router
- Crie três páginas
- Faça uma navbar e coloque o link para as três.
Um recurso que facilita o compartilhamento de um estado entre componentes, ou seja, quando precisamos de dados "globais", provavelmente precisamos utilizar o Context.
O Context precisa encapsular os componentes que receberão seus valores, geralmente colocamos no App.jsx. Os contextos costumam ficar na pasta context.
Criamos o arquivo context sempre com a primeira letra maiúscula, exemplo: SomethingContext.jsx, a convenção é deixar na pasta context em src. E onde utilizarmos o valor do contexto, o arquivo precisa ser importado.
O provider vai delimitar onde o contexto é utilizado. Vamos criar uma espécie de componente com a prop children. E, este provider deve encapsular os demais componentes em que precisamos consultar ou alterar o valor. Geralmente, ele fica em App.jsx ou em index. Agora, podemos compartilhar o valor do contexto em todos os componentes.
Para alterar o valor do contexto precisamos criar um componente que utilize a função da mudança de contexto. Esta mudança ocorrerá no Context e poderá ser consumida por todos os componentes que recebem o contexto. E assim, finalizamos o ciclo de Context API.
Podemos criar um hook para utilizar o contexto, isso nos dá algumas vantagens. Não precisamos importar o useContext em todos os lugares que vamos usar o contexto, só o hook.
Temos um espaço para fazer uma validação do contexto.
Contextos mais complexos podem ter variações no comportamento. Para isso, vamos utilizar um hook chamado useReducer. Que é como um useState, mas para controle de dados complexos (dois ou mais).
No reducer teremos diferentes ações com um switch. E, na aplicação, vamos consumir o estado atual do dado que está no reducer.
Para alterar o contexto vamos utilizar uma função chamada dispatch. Ela estará mo reducer também. E, deve conter todas as informações necessárias para alteração do valor do contexto. Ou seja, o switch entra em ação e retorna um novo contexto.
Um dos principais projetos deste curso, é o Mini Blog. Desenvolvido com React, Autenticação Firebase / Firestore e JavaScript.
Utilizado o Gmail para configurar o ambiente Console Firebase ao projeto chamado miniblog.
Acesse a opção Web e clique em Registrar app. Clique em Usar tag script e em Continuar no console.
Vamos em autenticação, métodos de login, vamos ativar e salvar apenas a opção de autenticação por email e senha.
Crie com o vite npm create vite@latest um novo projeto para esta unidade chamado miniblog, com React e JS.
Entre no projeto e instale o firebase npm i firebase.
Após a autenticação do usuário via Firebase, o usuário poderá inserir posts com imagens, descrição e tags, ao mesmo tempo, poderá aplicar as operações de CRUD, ou seja, criar, ler, atualizar e excluir posts.
Imagem da tela Home do projeto Mini Blog em React.JS, onde são carregados todos os posts de diferentes usuários.
Imagem da tela Dashboard do projeto Mini Blog em React.JS, onde é apresentado uma listagem com os títulos de cada post e as ações de ver, editar ou excluir o post.
Imagem da tela Post do projeto Mini Blog em React.JS, onde é carregado o post escolhido para ver todas as informações disponíveis.
Imagem da tela Editar do projeto Mini Blog em React.JS, onde é carregado os dados do post escolhido para ser editado em um ou mais campos.
Imagem da tela atual do Console Firebase
Jest e Cypress são ferramentas usadas para diferentes tipos de testes no ecossistema JavaScript/React. Acompanhe alguns testes desenvolvidos com Cypress nas seções 03 e 05 deste projeto React.
| Ação | Comando NPM | Comando Yarn |
|---|---|---|
| Instalar | npm install --save-dev jest |
yarn add --dev jest |
| Executar Testes | npm test |
yarn test |
| Executar Testes Específicos | npx jest path/to/test/file.test.js |
npx jest path/to/test/file.test.js |
| Executar com Cobertura de Código | npx jest --coverage |
npx jest --coverage |
| Executar em Modo de Observação | npx jest --watch |
npx jest --watch |
Uso Principal: Testes unitários e de integração.
Execução: Rápida e isolada; não requer um navegador real.
Ambiente de Teste: Simulado e controlado; ótimo para testar lógica interna.
Depuração: Menos interativo; os resultados são exibidos no terminal.
Ideal Para: Testar lógica de componentes e funções.
Extensão padrão: Exemplos MyComponent.test.js, MyComponent.spec.js
Estrutura de diretórios do Jest: my-project/src/tests/MyComponent.test.js
Sobre a Sintaxe do Jest
1.Importações: Importa funções do React Testing Library (como render, screen, fireEvent) para interagir com componentes necessários para os testes.
2.Descrição do Teste: Usa describe para agrupar testes relacionados e it (ou test) para definir casos de teste individuais.
3.Expectativas: Usa expect para definir as expectativas e asserções.
| Ação | Comando NPM | Comando Yarn |
|---|---|---|
| Instalar | npm install --save-dev cypress |
yarn add --dev cypress |
| Executar Testes | npx cypress run |
yarn run cypress run |
| Abrir Interface Gráfica | npx cypress open |
yarn run cypress open |
| Executar Testes Específicos | Configurar via arquivos ou tags na interface do Cypress | Configurar via arquivos ou tags na interface do Cypress |
Uso Principal: Testes end-to-end. (Esse conhecimento pode ser um requisito adicional em vagas onde a empresa enfatiza a automação de testes para fluxos de usuário UI).
Execução: No navegador real, o que é mais lento, mas mais próximo do comportamento real do usuário.
Ambiente de Teste: Real; ideal para testar a interação do usuário e integração com o backend.
Depuração: Oferece uma interface gráfica rica e interativa para depuração.
Ideal Para: Testar fluxos de usuário e garantir que a aplicação funcione como esperado em um ambiente real.
Extensão padrão: Exemplos MyComponent.spec.js, MyComponent.spec.ts, MyComponent.cy.js
Estrutura de diretórios do Cypress: my-project/cypress/integration/myComponent.spec.js ou my-project/cypress/e2e/myComponent.spec.js
Sobre a Sintaxe do Cypress
1.Descrição do teste: Usa describe para agrupar testes e it para definir casos de teste.
2.Comandos de Interação: Usa comandos específicos do Cypress como cy.visit, cy.contains, e cy.click para interagir com a aplicação e verificar o estado.
3.Asserções: Usa comandos de asserção específicos do Cypress como should para verificar o estado dos elementos no navegador.
Imagem da tela de teste end to end com Cypress e2e (Componente List Wrapper)
