Plataformas de Aplicações Web

Lista de Exercícios – Aula 03

Bibliotecas de componentes UI - parte 2

Atividade única:
Utilizando o Materialize CSS crie uma página que representa uma tela de adição de
produtos em uma lista de compras em um sistema de uma loja com as seguintes
características:

● Deve conter:
○ Topo da página com título "Registrar nova compra"
○ Uma lista de produtos com:
■ Nome
■ Quantidade no estoque
■ Botão de "adicionar" na lista de itens
○ Lista de itens adicionados com:
■ Nome do produto
■ Ícone do Materialize (use o "remove_circle") na cor vermelha
representando a ação de remover da lista
○ Botão na parte inferior com o texto "Continuar compra"
● Use pelo menos as classes: collection, collection-item, btn e badge do Materialize
● O visual da página deve ficar similar ao da imagem abaixo:
 Desenvolvimento para Dispositivos Móveis
Lista de Exercícios – Aula 02
Fundamentos React (Parte 2)

Utilizando o material didático da aula 02 e o conhecimento adquirido, codifique o

que se pede:

Exercício 1
Implemente uma aplicação React que seja um contador. Toda vez que o botão contar
for clicado, atualize o texto que mostra a quantidade de cliques feitos. Obs: Use
Component Class e o estado do componente para fazer a implementação.

Exercício 2
Implemente uma aplicação React que mostre a sequência de Fibonacci, inicialmente
com os 4 primeiros valores. Na sua aplicação deve existir um botão que, se clicado,
acrescenta mais um elemento na sequência de Fibonacci. Obs: Utilize Listas,
Component Class e o estado do componente para fazer a implementação.
 Desenvolvimento para Dispositivos Móveis
Lista de Exercícios – Aula 03
Formulário com React

Utilizando o material didático da aula 03 e o conhecimento adquirido sobre estado e

listas, codifique o que se pede:

Exercício 1
Implemente uma aplicação React que seja uma Class Component: App lista de
tarefas. A aplicação deve conter um campo de entrada de texto para receber o título
da tarefa, um botão para adicionar a tarefa, e uma lista que liste as tarefas
cadastradas. Toda vez que o botão Adicionar for clicado, verifique se o campo de
texto tem algum conteúdo e, então, adicione o conteúdo do campo texto como uma
nova tarefa que vai aparecer, de maneira automática, na lista de tarefas. Por exemplo,
o resultado esperado: