Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Desafio: Aplicativo Mundo da Astronomia | React Hooks and Context
course content

Conteúdo do Curso

Mastering React

1. Introdução aos Fundamentos do React

O que é React?SPAs vs. MPAs no Desenvolvimento WebComo o React Funciona com o DOM VirtualApresentando JSX no ReactCriando Elementos JSX ComplexosRenderizando Elementos no ReactDesafio: Renderizar ElementoComponente ReactPropriedades no ReactDesafio: Componentes FuncionaisRenderização CondicionalDesafio: Renderizar Conteúdo CondicionalmenteChallenge: Conditional Rendering - Bank AlertRealizar uma Coleta de DadosDesafio: Executar uma Coleta de DadosIntrodução ao Resumo da Seção React

2. Estilização em Aplicações React

Introdução ao Estilo no ReactEstilos InlineEstilos Inline na PráticaDesafio: Estilos InlineEstilização com o Arquivo CSSEstilizando com o Arquivo CSS na PráticaDesafio: Estilização com o Arquivo CSSEstilizando com os Módulos CSSOrganização da Estrutura de Pastas de ArquivosDesafio: Módulos CSSEstilização na Seção de Resumo do React

3. Hooks do React e Contexto

Introdução: React Hooks e ContextoHook useStateDesafio: Alternar VisibilidadeHook useRefDesafio: Criar um Componente de FormulárioHook useEffectDesafio: Buscar e Exibir DadosHook useMemoDesafio: Filtragem de Lista de CarrosContextoContexto na PráticaDesafio: Aplicativo Mundo da AstronomiaResumo da Seção de Hooks e Contexto do React

4. React no Mundo Real

Configurando AmbienteEditor de CódigoConfigurando a Pasta do ProjetoTerminalIniciar o ProjetoReagir no Mundo Real: Resumo da Seção

Mastering React

Desafio: Aplicativo Mundo da AstronomiaDesafio: Aplicativo Mundo da Astronomia

Tarefa

Nesta tarefa, você continuará trabalhando no mesmo aplicativo, adicionando um recurso de filtragem que permite aos usuários filtrar planetas pelo nome.

Para criar o componente de filtragem, precisamos criar um formulário que mantenha o estado do valor de entrada. Além disso, precisamos de uma função que responderá às mudanças no valor de entrada.

Instruções

No App.jsx:

  1. Inicialize o estado para o valor de entrada usando o hook useState. Defina o valor inicial como uma string vazia ("").
  2. No hook useEffect, verifique a lógica que filtrará os dados quando o usuário alterar o campo de entrada. Decida o que deve ser incluído no array de dependências do useEffect para garantir que ele seja executado quando necessário.
  3. Preencha a variável appData com os dados corretos. A variável appData representa o objeto context, e você precisa incluir inputValue e handleInputChange para o componente Filter.

No Filter.jsx:

  1. Obtenha acesso às funções inputValue e handleInputChange usando o hook useContext.
Hint
1. To initialize the state use useState hook.
2. For the useEffect hook, include inputValue in the dependency array since the filtration depends on the user's input.
3. To set the data for appData, include planets, inputValue, and handleInputChange.
4. To access inputValue and handleInputChange, use the Context provided as the value for the useContext hook.
  1. To initialize the state use useState hook.
  2. For the useEffect hook, include inputValue in the dependency array since the filtration depends on the user's input.
  3. To set the data for appData, include planets, inputValue, and handleInputChange.
  4. To access inputValue and handleInputChange, use the Context provided as the value for the useContext hook.

Tudo estava claro?

Seção 3. Capítulo 12
course content

Conteúdo do Curso

Mastering React

1. Introdução aos Fundamentos do React

O que é React?SPAs vs. MPAs no Desenvolvimento WebComo o React Funciona com o DOM VirtualApresentando JSX no ReactCriando Elementos JSX ComplexosRenderizando Elementos no ReactDesafio: Renderizar ElementoComponente ReactPropriedades no ReactDesafio: Componentes FuncionaisRenderização CondicionalDesafio: Renderizar Conteúdo CondicionalmenteChallenge: Conditional Rendering - Bank AlertRealizar uma Coleta de DadosDesafio: Executar uma Coleta de DadosIntrodução ao Resumo da Seção React

2. Estilização em Aplicações React

Introdução ao Estilo no ReactEstilos InlineEstilos Inline na PráticaDesafio: Estilos InlineEstilização com o Arquivo CSSEstilizando com o Arquivo CSS na PráticaDesafio: Estilização com o Arquivo CSSEstilizando com os Módulos CSSOrganização da Estrutura de Pastas de ArquivosDesafio: Módulos CSSEstilização na Seção de Resumo do React

3. Hooks do React e Contexto

Introdução: React Hooks e ContextoHook useStateDesafio: Alternar VisibilidadeHook useRefDesafio: Criar um Componente de FormulárioHook useEffectDesafio: Buscar e Exibir DadosHook useMemoDesafio: Filtragem de Lista de CarrosContextoContexto na PráticaDesafio: Aplicativo Mundo da AstronomiaResumo da Seção de Hooks e Contexto do React

4. React no Mundo Real

Configurando AmbienteEditor de CódigoConfigurando a Pasta do ProjetoTerminalIniciar o ProjetoReagir no Mundo Real: Resumo da Seção

Mastering React

Desafio: Aplicativo Mundo da AstronomiaDesafio: Aplicativo Mundo da Astronomia

Tarefa

Nesta tarefa, você continuará trabalhando no mesmo aplicativo, adicionando um recurso de filtragem que permite aos usuários filtrar planetas pelo nome.

Para criar o componente de filtragem, precisamos criar um formulário que mantenha o estado do valor de entrada. Além disso, precisamos de uma função que responderá às mudanças no valor de entrada.

Instruções

No App.jsx:

  1. Inicialize o estado para o valor de entrada usando o hook useState. Defina o valor inicial como uma string vazia ("").
  2. No hook useEffect, verifique a lógica que filtrará os dados quando o usuário alterar o campo de entrada. Decida o que deve ser incluído no array de dependências do useEffect para garantir que ele seja executado quando necessário.
  3. Preencha a variável appData com os dados corretos. A variável appData representa o objeto context, e você precisa incluir inputValue e handleInputChange para o componente Filter.

No Filter.jsx:

  1. Obtenha acesso às funções inputValue e handleInputChange usando o hook useContext.
Hint
1. To initialize the state use useState hook.
2. For the useEffect hook, include inputValue in the dependency array since the filtration depends on the user's input.
3. To set the data for appData, include planets, inputValue, and handleInputChange.
4. To access inputValue and handleInputChange, use the Context provided as the value for the useContext hook.
  1. To initialize the state use useState hook.
  2. For the useEffect hook, include inputValue in the dependency array since the filtration depends on the user's input.
  3. To set the data for appData, include planets, inputValue, and handleInputChange.
  4. To access inputValue and handleInputChange, use the Context provided as the value for the useContext hook.

Tudo estava claro?

Seção 3. Capítulo 12
some-alt