[Dúvida] Muito confuso

Oi Efraim!

Agradecemos seu feedback. Ele foi compartilhado com a equipe responsável para que possamos melhorar esses pontos em futuros cursos.

Para que você consiga acompanhar o curso sem problemas, vou tentar te ajudar a entender melhor essa parte.

A ideia principal da componentização é tornar o código mais organizado e reutilizável. Em vez de repetir o mesmo código várias vezes, criamos um componente que pode ser reutilizado em diferentes partes do nosso projeto. No seu caso, o exemplo é o logotipo, que foi transformado em um componente chamado Logo.

Trouxe um resumo do que você precisa fazer nesse vídeo:

1. Criar o componente: Dentro da pasta src, crie uma pasta chamada componentes. Dentro dela, crie outra pasta chamada Logo e, dentro desta, crie dois arquivos: index.js e estilo.css.

2. Definir o componente: No arquivo index.js, você define o componente Logo como uma função JavaScript que retorna o código HTML do logotipo. Não esqueça de importar a imagem do logo no início do arquivo.

3. Exportar o componente: No final do arquivo index.js, use export default Logo para que ele possa ser importado em outros arquivos.

4. Importar e usar o componente: No arquivo App.js, importe o componente Logo e use-o dentro do header como uma tag HTML: <Logo />.

5. Estilo separado: Mova o estilo relacionado ao logotipo do arquivo App.css para estilo.css e importe este arquivo no index.js do componente Logo.

Espero que essa explicação tenha sido mais clara e que te ajude a seguir com o projeto.

Também recomendo alguns conteúdos de outros instrutores sobre o tema que podem te auxiliar a aprender com outras perspectivas:

• React: como os componentes funcionam
• React: estratégias para componentes escaláveis

Espero ter ajudado. Conte com o apoio do fórum e bons estudos!