Um momento
Aula 33
Cursos / React: Componentes Controlados
Curso React: Componentes Controlados

Summary

# Resumo da Transcrição

O conteúdo aborda a aprendizagem de componentes em um ambiente de desenvolvimento, focando em `Text`, `HTML` e `Name`. Aqui estão os principais pontos discutidos:

1. **Conceito de Name**:
   - O `Name` é utilizado para identificar o componente que está sendo controlado.

2. **Teste de Componentes**:
   - O teste inicial envolve garantir que o componente renderiza corretamente o `Label` e o `input`.
   - Um `console log` foi utilizado para ajudar na depuração, mas foi posteriormente removido.

3. **Organização dos Componentes**:
   - O `Label` deve ser posicionado antes do `input` para que os testes passem.
   - A remoção do `Label` resulta em falhas nos testes.

4. **Novo Teste com Espaços**:
   - Um novo teste deve ser criado para verificar se existe um `input` após o `Label`.
   - A função `at` pode ser utilizada para acessar elementos filhos (children) de um componente, onde `at(0)` refere-se ao primeiro elemento, `at(1)` ao segundo, e assim por diante.

5. **Como Acessar os Componentes**:
   - Para encontrar uma `div` pai e seus filhos, é necessário usar `children`.
   - O código deve ser ajustado para que os testes verifiquem a presença de um `input` no terceiro índice, usando `at(2)`.

6. **Conclusão**:
   - O método de busca envolve localizar o componente pai, acessar as children, e utilizar `at` para acessar filhos específicos.
   - Os usuários são encorajados a se conectar no Twitter e GitHub para mais informações e acesso ao código fonte.

Agradecimentos pela atenção e convite à conexão em redes sociais.

Video Transcript

Então, a gente aprendeu o Text, aprendeu HTML, e agora vamos aprender o que? Prendeu o Name. O que é o Name? Dá o nome da cara que a gente control. Vamos testar? O console log aqui, por favor, ignore as outras coisas, foca aqui. O cenote que retornou o input. E é isso que a gente quer. Então aqui, vou deletar esse console log e a gente espera que o componente adeve o primeiro filho, espera que o nome, Name, seja Label. Vamos lá? Seja Label recebemos input. Não está correto. Então, move esse cara para cima, antes do input. Certo? Salva. Agora, os testes passaram. Se eu remover o Label, dá eu, que esperou que seja um, não encontrou nenhum, nenhum Label. Esse primeiro test falhou. Certo? Agora, se você quiser testar, se tiver um input depois do Label, como é que vai ser? Eu quero que você volte aqui, deve ter um input. Por exemplo, eu creio um novo test. Vamos criar um novo test. Vou ter um input depois do Label. E o white space, e um espaço. Só para dizer que tem esse cara aqui. O espaço. Então como é que vai ser? Eu quero que você faça aí. Tente. Vamos usar as mesmas funções. Children. Mas em vez de first, como é que acessa os outros? Ah, você pode usar at, tá bom? At zero é a mesma coisa que o first. U at one vai ser o segundo, tá bom? U at two, o terceiro e assim por diante. Agora que você já sabe isso, tente fazer. Vou criar o teste aí. E aí, vamos lá, expect. Ok, component. Vamos encontrar o input. Mas o input? Não, a gente tem que olhar no pai. Porque a gente vai olhar qual é o pai do input, é o dev. Então vamos mudar para dev. Dev com as filhas. Children, filhas e filhas. Mas qual é? O segundo ou o terceiro? Esse aqui é o segundo, mas esse é o terceiro. Então vai ser at, começa do zero. Zero, um, dois, dois. Zero, at two, cont, name. Esperamos que o nome seja o quê? Input. Input. Vai lá. Passou. Vamos falar. Vamos colocar um negócio aqui, uma dev entre os caras. Ah, esperamos que seja input, achamos uma dev. Pai, é rápido. Esse cara tem que ser depois do lego, depois do espaço. Certo? E é isso, recapitulando mais uma vez. Você acha o componente pai? Veia as children, as crianças. E qual delas? Usa o at. Começa do zero, conta zero, um, dois, três. E por diante, se for o primeiro, pode usar first. Isso que se é o nome do componente name. Pode também ver o texto que está entre as tags. Ou pode usar HTML, que é o componente renderizado em HTML. Certo? Mais um nome. Que é input e assim, por diante. Então obrigado por assistir. Por favor, vamos nos conectar no Twitter. Meu usuário é MkHop. Estou também de GitHub. Você pode encontrar o código fonte para esse projeto também lá. Valeu.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: