React Academy · Aula

Inspeção de árvores de componentes e props

Explore hierarquias de componentes e leia valores atuais de props e estado.

Inspeção de árvores de componentes e props é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você aprenderá a explorar hierarquias de componentes aninhadas no React DevTools e a ler valores complexos de propriedades e estado na barra lateral do painel Componentes.

A árvore de componentes é um espelho

Cada componente exibido no DevTools reproduz o aninhamento do seu JSX. A raiz geralmente é o componente App. Os filhos aparecem recuados abaixo de seus pais, exatamente como no código-fonte.

Selecionando um componente

Clique em qualquer nome de componente na árvore. O painel à direita mostra imediatamente suas **propriedades**, **ganchos** (estado, efeitos, referências) e o **arquivo de origem** e o número da linha em que ele foi definido.

Lendo propriedades de texto e número

As propriedades de texto aparecem entre aspas: `"hello"`. Os números aparecem sem aspas: `42`. Os valores booleanos aparecem como `true` ou `false`. Você pode passar o cursor sobre um valor para ver seu conteúdo completo caso ele esteja truncado.

Expandindo propriedades de objeto e matriz

Quando o valor de uma propriedade é um objeto ou uma matriz, o DevTools mostra uma árvore recolhível. Clique na seta ao lado de `{…}` ou `[…]` para expandi-la e ver cada chave e valor aninhado.

Inspecionando propriedades de função

As propriedades de função (como manipuladores `onClick`) aparecem como `f onClick()`. Você pode clicar no pequeno ícone de seta ao lado delas para acessar a definição da função no painel Fontes.

Filtrando a árvore

Use a caixa de pesquisa na parte superior do painel Componentes para filtrar por nome. Digite `Button` para mostrar apenas os componentes cujo nome contenha *Botão*. Isso é útil em aplicativos com centenas de componentes.

Passando do DOM ao React

Na guia **Elementos**, clique com o botão direito do mouse em um nó do DOM e escolha **Inspecionar componente React** (disponível quando o DevTools está instalado). O DevTools muda para a guia Componentes e seleciona o componente React que renderizou esse nó.

Editando propriedades no DevTools

Clique duas vezes em um valor de propriedade no DevTools para editá-lo em tempo real. O componente é renderizado novamente instantaneamente com o novo valor. Isso é útil para testar casos extremos sem alterar o código-fonte.

Copiando propriedades como JSON

Clique com o botão direito do mouse em qualquer valor de propriedade ou estado no DevTools e escolha **Copiar valor**. Isso copia o valor como JSON para a área de transferência, o que é útil para colá-lo em testes ou documentação.

Verificação rápida

Como você expande uma propriedade de objeto ou matriz no painel Componentes do React DevTools?

Revisão

Agora você pode navegar por árvores de componentes, ler textos, números, objetos e funções, filtrar por nome, passar de elementos do DOM a componentes React e editar propriedades em tempo real no DevTools.

A seguir

Próxima lição: **Usando a guia Perfilador** — você registrará renderizações, lerá gráficos de chamas e identificará os componentes responsáveis por interações lentas.

Perguntas Frequentes

A aula “Inspeção de árvores de componentes e props” é grátis?

Sim — o texto completo de “Inspeção de árvores de componentes e props” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Inspeção de árvores de componentes e props”?

Explore hierarquias de componentes e leia valores atuais de props e estado. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Inspeção de árvores de componentes e props”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Instalação e abertura do React DevTools
Inspeção de árvores de componentes e props
Uso da aba Profiler
Depuração de erros comuns do React

← Voltar para React Academy