Skip to content

contatos.md

Latest commit

 

History

History
90 lines (73 loc) · 4.17 KB

contatos.md

File metadata and controls

90 lines (73 loc) · 4.17 KB

⇦ Página Inicial - React

Workshop ReactJS - Lista de contatos

Entregável 1 - Lista de Contatos simples

Supondo que você receba um JSON com um Array de contatos, o objetivo é conseguir renderizar esta lista, com nome e telefone, na sua aplicação.

[
	{ nome: 'Codus Tecnologia', telefone: '(11) 3262-4797' }
]

Conceitos envolvidos

Dicas

  • Pense em composição: Uma representação de Lista e uma representação individual do contato.
  • Tente manter a aplicação mais atômica possível.
  • Não se preocupe com a origem do Array, você pode usá-lo diretamente na sua interface.

Desafios

Usando Estado e Ciclo de Vida

Para complementar, guarde o Array de contatos no estado do componente. Como sugestão, você pode fazer isso usando o construtor do seu componente.

Conceitos envolvidos

Entregável 2 - Criação e Edição de Contatos

Agora, você quer adicionar e editar contatos da sua lista, pra não ter que ficar commitando no código toda vez que for adicionar um novo contato.

Conceitos envolvidos

Dicas

  • Tente manter sua Aplicação organizada. Tenha em mente que um componente pode ficar gigante em pouco tempo. Evite que isso aconteça.
  • Lembre dos eventos que você já usa com HTML/Javascript: onClick, focusIn, focusOut. O que você vai fazer é criar eventos para as suas Tags.
  • Domine o Estado dos componentes. Usando da maneira correta, fica mais fácil para gerenciar as mudanças na Aplicação.

Entregável 3 - Detalhes do Contato

Depois de adicionar muitos contatos, você percebe que seria legal poder ver as informações resumidas e ver mais detalhes de um único contato em outro lugar.

[
	{
		nome: 'Codus Tecnologia',
		telefone: '(11) 3262-4797',
		endereco: 'Av. Paulista, 1274 - 19º Andar',
		email: 'contato@codus.com.br'
	},
	{
		nome: 'Fulano da Silva',
		telefone: '(11) 2785-1850',
		endereco: 'Rua Gonçalo Moreira, 556',
		email: 'fulano-82@gmail.com'
	},
	{
		nome: 'Beltrano da Cunha',
		telefone: '(11) 3685-6947',
		endereco: 'Rua dos Clerigos, 24',
		email: 'beltranocunha@hotmail.com'
	}
]

Conceitos envolvidos

Dicas

  • Continue usando os conceitos dos entregáveis anteriores. A noção de Componentes, Props e Eventos precisa estar bem sólida.

Melhorando sua Aplicação

Agora você já sabe o que o React pode te oferecer. Se você quer melhorar sua aplicação. Temos desafios para solidificar seus conhecimentos. Fique à vontade para tentar e aprender mais sobre a plataforma.

Para seguir em frente, é recomendado refatorar sua aplicação seguindo a mentalidade de React. Depois tente fazer alguns desafios.

  • Usar Redux para gerenciar o Estado
  • Salvar contatos no LocalStorage
  • Usar React Router e páginas diferentes para navegação na Aplicação
  • Criar os próprios inputs no contato. Armazenar por exemplo, como [{name: "Nome", value: "Codus"}, {name: "Telefone", value: "(11) 3262-4797"}]
  • Integrar com a API do Facebook para exibir dados do perfil a partir do Nome/Email
  • Usar componentes prontos do npm para mascarar os inputs
  • Colocar um Template/Framework CSS para incrementar o Design
  • Sincronizar os contatos com chamadas para um servidor (Mock ou não)
  • Upload de Fotos do contato e processamento
  • Exportar como TXT, CSV, VCard, XML, JSON