patriciapossarii / a032-props

Props

Caso não lembre como funciona o processo de entrega, clique aqui

O que você precisa saber e praticar desta aula?

1. Enviar props para componentes filhos;
2. Receber props do componente pai;
3. Acessar props

Como eu vou executar os exercícios?

Vamos utilizar o LabeTube, da aula anterior. Nesse exercício vamos tornar nosso projeto mais dinâmico, alterando os vídeos para que deixem de ser o mesmo vídeo, e seus valores sejam criados e passados por props.

Para executar este exercício, você pode criar uma nova aplicação React, como foi visto na aula passada, ou utilizar o link abaixo para ir ao template no CodeSandbox. Este template para exatamente onde o exercício da última aula acaba.

Template do CodeSandbox

Caso queira usar uma aplicação React, rode npm install neste projeto, para baixar as dependências e poder executá-lo.

Exercício 1

No App.js, crie um objeto com as informações do seu vídeo que são mostradas na tela (imagem e título). Passe essas informações por props para o seu componente CardVideo, criado na aula passada.

Exercício 2

Agora, no componente pai de InfosUsuario, componente também criado na aula passada. Passe as informações do usuário por props.

Informações úteis sobre o assunto

Props | Documentação do React Componentes e Props | Labenu