React: Baralho de signos utilizando props
Aprenda neste projeto a reaproveitar componentes no React através de props.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
Introdução
Neste projeto vamos construir o exemplo visto na Figura 1.
![Aplicação Signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula1/fig1.png)
Neste exemplo temos uma aplicação que reutiliza o mesmo componente doze vezes, exibindo um conteúdo diferente a cada nova reutilização.
Conhecendo o exemplo
Conheça o exemplo no flow seguinte:
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/56.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/57.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/58.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/59.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/60.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/61.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/62.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/63.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/64.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/65.png)
Criando o código do exemplo - Parte 1
Agora vamos começar a codificação do nosso exemplo.
No flow abaixo veja em detalhes o código do nosso exemplo:
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/66.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/67.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/68.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/69.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/70.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/71.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/72.png)
Criando o código do exemplo - Parte 2
No flow a seguir vamos continuar com a criação do código do exemplo:
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/73.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/74.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/75.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/76.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/77.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/78.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/79.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/80.png)
![Criando um exemplo de baralho de signos Criando um exemplo de baralho de signos](http://www.devmedia.com.br/arquivos/cursos/react_props/new/aula3/81.png)
Veja abaixo o exemplo em execução: