Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Desafio: Componentes Funcionais | Introduction to React Fundamentals
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: Componentes FuncionaisDesafio: Componentes Funcionais

Tarefa: Criando uma Fonte de Enciclopédia

Nesta tarefa, você criará uma fonte de enciclopédia composta por duas cartas. Cada carta exibirá uma imagem e uma descrição. O objetivo é praticar a criação de componentes funcionais e a passagem de dados para componentes filhos usando props.

Instruções:

  1. Crie um componente Card como um modelo de cartão reutilizável.
  2. No componente Card, aceite as seguintes propriedades:
    • link: A URL da imagem para o cartão.
    • alt: O texto alternativo para a imagem.
    • description: O texto de descrição para o cartão.
  3. Use o componente Card duas vezes no componente App para criar dois cartões com o conteúdo seguinte:
  • Cartão 1 (Sobre o Sol):
    • URL da imagem: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
    • Texto alternativo: Forneça uma descrição apropriada.
    • Descrição: "O sol brilhava intensamente, espalhando um brilho quente por toda a tranquila praia."
  • Cartão 2 (Sobre a Montanha):
    • URL da imagem: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
    • Texto alternativo: Forneça uma descrição apropriada.
    • Descrição: "O caminhante contemplou em admiração a majestosa montanha que se erguia diante de si."

Assegure-se de que os componentes Card e App sejam apropriadamente modificados para exibir os cartões corretamente.

Hint
1. You can use the same Card component for both cards and control their content using props.
2. To pass the URL as a prop, create a prop called link and provide the URL as its value. Enclose the value in double quotes since it's a string.
3. Similarly, create props for alt and description and provide the appropriate values.
4. To use these props within the child component Card, access them using dot notation since props is an object.
  1. You can use the same Card component for both cards and control their content using props.
  2. To pass the URL as a prop, create a prop called link and provide the URL as its value. Enclose the value in double quotes since it's a string.
  3. Similarly, create props for alt and description and provide the appropriate values.
  4. To use these props within the child component Card, access them using dot notation since props is an object.

Tudo estava claro?

Seção 1. Capítulo 10
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: Componentes FuncionaisDesafio: Componentes Funcionais

Tarefa: Criando uma Fonte de Enciclopédia

Nesta tarefa, você criará uma fonte de enciclopédia composta por duas cartas. Cada carta exibirá uma imagem e uma descrição. O objetivo é praticar a criação de componentes funcionais e a passagem de dados para componentes filhos usando props.

Instruções:

  1. Crie um componente Card como um modelo de cartão reutilizável.
  2. No componente Card, aceite as seguintes propriedades:
    • link: A URL da imagem para o cartão.
    • alt: O texto alternativo para a imagem.
    • description: O texto de descrição para o cartão.
  3. Use o componente Card duas vezes no componente App para criar dois cartões com o conteúdo seguinte:
  • Cartão 1 (Sobre o Sol):
    • URL da imagem: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
    • Texto alternativo: Forneça uma descrição apropriada.
    • Descrição: "O sol brilhava intensamente, espalhando um brilho quente por toda a tranquila praia."
  • Cartão 2 (Sobre a Montanha):
    • URL da imagem: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
    • Texto alternativo: Forneça uma descrição apropriada.
    • Descrição: "O caminhante contemplou em admiração a majestosa montanha que se erguia diante de si."

Assegure-se de que os componentes Card e App sejam apropriadamente modificados para exibir os cartões corretamente.

Hint
1. You can use the same Card component for both cards and control their content using props.
2. To pass the URL as a prop, create a prop called link and provide the URL as its value. Enclose the value in double quotes since it's a string.
3. Similarly, create props for alt and description and provide the appropriate values.
4. To use these props within the child component Card, access them using dot notation since props is an object.
  1. You can use the same Card component for both cards and control their content using props.
  2. To pass the URL as a prop, create a prop called link and provide the URL as its value. Enclose the value in double quotes since it's a string.
  3. Similarly, create props for alt and description and provide the appropriate values.
  4. To use these props within the child component Card, access them using dot notation since props is an object.

Tudo estava claro?

Seção 1. Capítulo 10
some-alt