Aula prática Desenvolvimento com react

Aula prática Desenvolvimento com react

ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: DESENVOLVIMENTO COM REACT
Unidade: U2 _ FUNDAMENTOS DO REACT: COMPONENTES E EVENTOS
Aula: A4_ RENDERIZAÇÃO
Tempo previsto de execução de aula prática: 2h
OBJETIVOS
Definição dos objetivos da aula prática:
Nesta atividade prática, você irá criar um formulário em React contendo o campo Email. Você
aprenderá a validar o Email usando JavaScript e bibliotecas populares.
INFRAESTRUTURA
Instalações – Materiais de consumo – Equipamentos:
Equipamentos:
• Desktop ou Notebook
~ 1 unid. 1 aluno
• Node.js instalado (é possível baixar e instalar em nodejs.org)
• Npm instalado (é possível baixar e instalar em www.npmjs.com/)
• Editor de texto (VSCode, Sublime Text, etc)
SOLUÇÃO DIGITAL
Infraestrutura mínima necessária para execução.
É necessário ter instalado o node.js que pode ser baixado direto do endereço: <nodejs.org>.
Acesse o link. Na página que surge, acesse a opção “Descarregar”, como mostra a figura a
seguir:
3
Em seguida, é preciso escolher a versão adequada para o seu computador, seja ele um desktop
ou notebook. No exemplo a seguir, está sendo selecionado a versão pré-compliada, ou seja, o
executável para instalação, considerando que o computador no qual será instalado está com
windows 7+ de 64 bits. Veja o exemplo na imagem a seguir:
Depois de descarregá-lo, basta realizar a instalação conforme orientações que aparecerão na
sua tela.
O mesmo deve ser feito com o gerenciador de pacotes npm. Para baixá-lo, basta acessar
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
Nesse endereço você encontrará orientações de instalação do npm e do node.js. Após ter
instalado o node.js, basta digitar no prompt de comando ‘npm install -g npm’, conforme imagem
a seguir:
Aula prática Desenvolvimento com react
EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI)
NSA
PROCEDIMENTOS PRÁTICOS
Procedimento/Atividade nº 1
Atividade proposta:
React é uma biblioteca JavaScript desenvolvida pelo Facebook para criar interfaces de usuário
interativas e eficientes. Utilizando uma abordagem baseada em componentes, React permite
que os desenvolvedores construam complexas UIs a partir de pequenas e isoladas peças de
código, chamadas de componentes. Sua principal característica é o uso do Virtual DOM, que
otimiza as atualizações de interface, garantindo alta performance. Com React, é possível
desenvolver aplicações web dinâmicas, responsivas e escaláveis. Além disso, a vasta
comunidade e o ecossistema de ferramentas e bibliotecas complementares tornam o React
uma escolha popular entre os desenvolvedores front-end. Diante disso, crie um projeto com
formulário onde conste o campo de entrada Email.
Será necessário fazer a validação de esquemas utilizando a biblioteca yup e formik para
gerenciar estados do formulário.
5
Procedimentos para a realização da atividade:
Passo-a-passo do procedimento para a execução da atividade/procedimento prático.
PROCEDIMENTO PARA INSTALAÇÃO:
1 – Inicializar um projeto React
• Pelo prompt, execute o comando npx create-react-app formulario-react
• Acesse a pasta criada com o comando anterior.
2 – Instalação de dependências
• Instale as dependências com o comando ‘npm install formik yup’
• Utilize o editor de texto de sua preferência. Nessa atividade será usado o VScode.
3 – Crie um arquivo ‘src/FormularioEmail.js’ substitua o código existente pelo código que você
criará para a validação dessa atividade.
4 – Importe as bibliotecas ‘useFormik’ de ‘formik’ para gerenciar o estado do formulário e ‘Yup’
para criar o esquema de validação.
5 – Altere o componente ‘src/App.js’ para importar o componente criado na etapa anterior.
6 – Teste o formulário digitando no terminal do editor de texto, ‘npm start’. Preencha o
formulário e teste a validação.
Resultado:
Checklist:
1 – Criar o Projeto React
2 – Criação do Componente FormularioEmail.js
3 – Instalação e importação correta de React, useFormik e Yup.
4 – Importação correta do componente FormularioEmail no componente App.js
5 – Funcionalidade e Validação
6 – Documentação e Comentários
Aula prática Desenvolvimento com react
7 – Execução do projeto
8 – Documentação e evidências
Resultado do experimento (Gabarito):
RESULTADOS
Resultados de Aprendizagem:
O QUE SE ESPERA QUE O ALUNO TENHA APRENDIDO AO FINAL DA AULA PRÁTICA
Com a tarefa de criar um formulário React com validação de e-mail, espera-se que o aprendizado
inclua:
Compreensão do uso de Formulários em React: Aprender como criar e gerenciar formulários
utilizando bibliotecas populares como formik.
Implementação de Validação de Dados: Compreender como usar esquemas de validação
(Yup) para garantir que os dados inseridos pelo usuário atendam aos critérios especificados.
Manuseio de Eventos e Estado: Praticar o uso de hooks do React, como useState e useEffect,
para gerenciar o estado do formulário e responder a eventos de usuário, como mudanças
(onChange) e foco (onBlur).
Feedback ao Usuário: Aprender a fornecer feedback visual aos usuários por meio de mensagens
de erro dinâmicas e indicadores de estado de campo.
Integração de Componentes: Integrar componentes React dentro de um aplicativo maior,
entendendo como eles se comunicam e se integram com outros elementos da aplicação.
Prática de Boas Práticas de Desenvolvimento: Adotar boas práticas de desenvolvimento de
software, como modularização de código, documentação adequada e uso eficiente de
dependências.
Experiência com Desenvolvimento Front-end: Ganhar experiência prática em
desenvolvimento front-end usando tecnologias modernas e populares, essenciais para construir
interfaces de usuário interativas e responsivas.
ESTUDANTE, VOCÊ DEVERÁ ENTREGAR
Descrição orientativa sobre a entregada da comprovação da aula prática:
Para a tarefa de criar um formulário React com validação de e-mail, os itens a serem entregues
podem incluir:
Código Fonte Completo: Todos os arquivos de código necessários para o formulário, incluindo
componentes React, arquivos de estilo (se houver) e quaisquer outras dependências.
Documentação de Funcionalidades: Descrição clara das funcionalidades implementadas,
como a validação de e-mail e quaisquer outras validações adicionais que foram implementadas.
7
Demonstração Funcional: Um vídeo curto ou captura de tela mostrando o formulário em ação,
incluindo a interação com o campo de e-mail (entradas válidas e inválidas) e a exibição de
mensagens de erro conforme necessário.
Comentários e Explicações: Comentários no código que explicam trechos complexos ou lógica
específica relacionada à validação de e-mail ou qualquer outra parte do formulário.
Opções de Melhoria (Opcional): Sugestões ou discussão sobre possíveis melhorias no
formulário, como adição de mais campos, melhoria na experiência do usuário, ou otimizações de
desempenho.
REFERÊNCIAS BIBLIOGRÁFICAS
Descrição (em abnt) das referências utilizadas
REACT. Criando um novo aplicativo React. [S.l.: s.n.], [s.d.]. Disponível em: https://ptbr.legacy.reactjs.org/docs/create-a-new-react-app.html. Acesso em: 26 jun. 2024.
FORMIK. Tutorial Formik. [S.l.: s.n.], [s.d.]. Disponível em: https://formik.org/docs/tutorial.
Acesso em: 26 jun. 2024.
HICKS, Brad. Yup: validações no React de uma forma muito simples. Medium, [s.d.].
Disponível em: https://bradhick.medium.com/yup-validações-no-react-deuma-forma-muito-simples-700c039114e3. Acesso em: 26 jun. 2024.
DESENVOLVIMENTO COM
REACT
Roteiro
Aula Prática
2
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: DESENVOLVIMENTO COM REACT
Unidade: U3 _HOOKS, CONTEXT API E REDUX
Aula: A4_ TESTES COM REACT
Tempo previsto de execução de aula prática: 2h
OBJETIVOS
Definição dos objetivos da aula prática:
Compreender como configurar e usar Jest e React Testing Library em um projeto React.
Aprender a escrever testes unitários para componentes React.
Verificar a renderização correta do componente e a resposta a eventos do usuário.
Entender a importância de testes automatizados no desenvolvimento de software.
INFRAESTRUTURA
Instalações – Materiais de consumo – Equipamentos:
NSA
SOLUÇÃO DIGITAL
Infraestrutura mínima necessária para execução.
É necessário ter instalado o node.js que pode ser baixado direto do endereço: <nodejs.org>.
Acesse o link. Na página que surge, acesse a opção “Descarregar”, como mostra a figura a
seguir:
3
Em seguida, é preciso escolher a versão adequada para o seu computador, seja ele um desktop
ou notebook. No exemplo a seguir, está sendo selecionado a versão pré-compliada, ou seja, o
executável para instalação, considerando que o computador no qual será instalado está com
windows 7+ de 64 bits. Veja o exemplo na imagem a seguir:
Depois de descarregá-lo, basta realizar a instalação conforme orientações que aparecerão na
sua tela.
O mesmo deve ser feito com o gerenciador de pacotes npm. Para baixá-lo, basta acessar
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
4
Nesse endereço você encontrará orientações de instalação do npm e do node.js. Após ter
instalado o node.js, basta digitar no prompt de comando ‘npm install -g npm’, conforme imagem
a seguir:
EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI)
NSA
PROCEDIMENTOS PRÁTICOS
Procedimento/Atividade nº 1
Atividade proposta:
Nesta atividade, você irá criar um componente React simples e escrever testes para ele usando
a biblioteca de testes Jest e React Testing Library. O objetivo é garantir que o componente
funcione corretamente e que o feedback visual aos usuários seja fornecido de forma adequada.
Procedimentos para a realização da atividade:
Passo-a-passo do procedimento para a execução da atividade/procedimento prático.
PROCEDIMENTO:
1 – Configuração do Projeto:
• Inicie um novo projeto React usando Create React App.
5
• Instale a React Testing Library.
2 – Criação do Componente
• Crie um componente chamado Counter.js que exibe um contador com botões para
incrementar e decrementar o valor.
3 – Escrita dos Testes
• Crie um arquivo de teste para o componente Counter.js.
4 – Execução dos Testes
• Execute os testes usando o comando:
5 – Documentação e Entrega
• Documente a criação do componente e os testes escritos.
• Explique o propósito de cada teste e o que ele verifica.
• Entregue o projeto em um repositório Git ou em um arquivo compactado, incluindo a
documentação.
Checklist:
1 – Configuração do Projeto
2 – Criação do Componente
3 – Escrita dos Testes
4 – Execução dos Testes
5 – Documentação e Entrega
6 – Pontos Importantes
• Configuração do ambiente de testes: Verificar se todas as dependências estão
instaladas e configuradas corretamente.
• Cobertura de testes: Assegurar que os testes cobrem todas as funcionalidades críticas
do componente.
• Feedback ao usuário: Confirmar que os testes verificam a exibição correta de
informações ao usuário.
• Boas práticas: Seguir boas práticas de desenvolvimento e organização de código.
Resultado do experimento (Gabarito):
RESULTADOS
6
Resultados de Aprendizagem:
Ao final desta atividade, o aluno deverá ser capaz de:
1. Configurar um ambiente de testes em um projeto React.
2. Escrever testes unitários para verificar a renderização e a funcionalidade de componentes
React.
3. Compreender a importância dos testes automatizados na garantia da qualidade do
software.
4. Utilizar ferramentas de teste, como Jest e React Testing Library, para melhorar o processo
de desenvolvimento.
Pontos Importantes a Serem Observados:
a) Configuração do Ambiente de Testes: Verificar se as dependências necessárias (Jest e
React Testing Library) estão instaladas corretamente.
b) Cobertura de Testes: Garantir que os testes cubram todas as funcionalidades do
componente.
c) Feedback ao Usuário: Confirmar que os testes verificam a exibição correta de informações
ao usuário.
d) Boas Práticas: Seguir boas práticas na escrita dos testes e na organização do código.
e) Execução e Resultados: A execução dos testes deve ser bem-sucedida, e os resultados
devem refletir o comportamento esperado do componente.
ESTUDANTE, VOCÊ DEVERÁ ENTREGAR
Descrição orientativa sobre a entregada da comprovação da aula prática:
Documente a criação do componente e os testes escritos.
Explique o propósito de cada teste e o que ele verifica.
REFERÊNCIAS BIBLIOGRÁFICAS
Descrição (em abnt) das referências utilizadas
FREECODECAMP. Como testar componentes do React: o guia completo. freeCodeCamp, [s.d.].
Disponível em: https://www.freecodecamp.org/portuguese/news/como-testar-componentes-doreact-o-guia-completo/. Acesso em: 25 jun. 2024.
DESENVOLVIMENTO COM
REACT
Roteiro
Aula Prática
2
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: DESENVOLVIMENTO COM REACT
Unidade: U3 _HOOKS, CONTEXT API E REDUX
Aula: A4_ TESTES COM REACT
Tempo previsto de execução de aula prática: 2h
OBJETIVOS
Definição dos objetivos da aula prática:
Compreender como configurar um projeto Next.js.
Aprender a criar páginas e componentes básicos em Next.js.
Implementar a manipulação de formulários e eventos em React/Next.js.
Processar dados do formulário e atualizar o estado do componente.
INFRAESTRUTURA
Instalações – Materiais de consumo – Equipamentos:
NSA
SOLUÇÃO DIGITAL
Infraestrutura mínima necessária para execução.
É necessário ter instalado o node.js que pode ser baixado direto do endereço: <nodejs.org>.
Acesse o link. Na página que surge, acesse a opção “Descarregar”, como mostra a figura a
seguir:
3
Em seguida, é preciso escolher a versão adequada para o seu computador, seja ele um desktop
ou notebook. No exemplo a seguir, está sendo selecionado a versão pré-compliada, ou seja, o
executável para instalação, considerando que o computador no qual será instalado está com
windows 7+ de 64 bits. Veja o exemplo na imagem a seguir:
Depois de descarregá-lo, basta realizar a instalação conforme orientações que aparecerão na
sua tela.
O mesmo deve ser feito com o gerenciador de pacotes npm. Para baixá-lo, basta acessar
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
4
Nesse endereço você encontrará orientações de instalação do npm e do node.js. Após ter
instalado o node.js, basta digitar no prompt de comando ‘npm install -g npm’, conforme imagem
a seguir:
EQUIPAMENTO DE PROTEÇÃO INDIVIDUAL (EPI)
NSA
PROCEDIMENTOS PRÁTICOS
Procedimento/Atividade nº 1
Atividade proposta:
Nesta atividade, você irá criar uma página web usando Next.js, onde o usuário poderá inserir
dois números em um formulário. Ao submeter o formulário, a página deve exibir a soma desses
dois números.
Procedimentos para a realização da atividade:
Passo-a-passo do procedimento para a execução da atividade/procedimento prático.
PROCEDIMENTO:
1 – Configuração do Projeto:
• Inicie um novo projeto Next.js.
5
• Instale o pacote create-next-app.
2 – Criação do Componente
• Crie um componente pages/index.js
• Renomeie o arquivo app/pages.tsx para app/pages.tsx_old
3 – Execução o projeto
• Inicie o servidor de desenvolvimento
5 – Documentação e Entrega
Checklist:
1. Configuração do Projeto
2. Criação da Página de Soma
3. Implementação do Componente
4. Execução do Projeto
5. Documentação e Entrega
Resultado do experimento (Gabarito):
RESULTADOS
Resultados de Aprendizagem:
Ao final desta atividade, o aluno deverá ser capaz de:
a) Configurar e iniciar um projeto Next.js.
b) Criar componentes e páginas em Next.js.
c) Manipular formulários e eventos em React/Next.js.
d) Processar e exibir dados do formulário na página.
ESTUDANTE, VOCÊ DEVERÁ ENTREGAR
Descrição orientativa sobre a entregada da comprovação da aula prática:
Documente a criação da página, explicando a lógica utilizada para a soma dos números.
REFERÊNCIAS BIBLIOGRÁFICAS
Descrição (em abnt) das referências utilizadas
6
FREECODECAMP. O manual do Next.js para iniciantes. freeCodeCamp, [s.d.]. Disponível em:
https://www.freecodecamp.org/portuguese/news/o-manual-do-next-js-para-iniciantes/. Acesso
em: 25 jun. 2024

Aula prática Desenvolvimento com react