[Bug] React- Desenvolvendo com Javascript

Olá, Angela!

Tudo bem?

No seu código, você importou a imagem corretamente usando import banner from './imagens/banner.png';, dessa forma ele mostra certinho a pasta, mas na hora de usar essa imagem no seu componente, você não está referenciando essa importação corretamente.

Ao invés de usar src="./", você pode usar src={banner}, que é a variável na qual você importou a imagem.

Seu código corrigido ficaria assim:

import React from 'react';
import banner from './imagens/banner.png';

function Banner() {
    return (
        <img src={banner} alt="Descrição da imagem" />
    )
}

Note que adicionei um alt na tag img, que é importante para acessibilidade e SEO.

No caso, mesmo que ele não mostre a prévia das pastas quando digitamos "./", a pasta está lá e a imagem vai aparecer isso direto na tag img, isso vem do costume do HTML e é normal isso, agora se fazer no começo do arquivo, igual você fez através do import, a previa mostra as pastas do caminho.

Espero ter ajudado e bons estudos!

Agora aparece este erro.

Compiled with problems: × ERROR in ./src/App.js 6:0-33 Module not found: Error: Can't resolve './componentes/Banner.js' in 'C:\Users\Ângela\Desktop\React 1\Alura com JavaScript\organo\src' ERROR [eslint] src\App.js Line 8:8: 'Banner' is not defined react/jsx-no-undef

Search for the keywords to learn more about each error.

Oi, Angela! Tudo bom?

Me parece que esse erro ocorre por causa da importação do componente Banner.js, ai pode ser em diversos locais, vamos testar onde está o problema?

1. Verifique o Caminho do Arquivo: Veja se o arquivo Banner.js existe no caminho especificado: ./componentes/Banner.js. Verifique a ortografia e maiúsculas e minúsculas do nome do arquivo e dos nomes das pastas para garantir que correspondam.

2. Verifique o import: No seu arquivo App.js (ou onde você estiver usando o componente Banner), verifique se você está importando o componente Banner corretamente. Deve ser algo assim:

import Banner from './componentes/Banner';

1. Verifique se o Banner.js está sendo exportado:

Dentro do seu arquivo Banner.js, verifique se você exportou o componente Banner com a palavra reservada export.

1. Verifique o Uso do Componente:

Examine onde você está usando o componente Banner em seu código, se está como .

Esses são possíveis problemas que podem acarretar nesse erro. Para entendermos melhor e trazermos uma solução mais assertiva, teria como dar mais informações? Por exemplo, o código completo do banner e do App.js?

Oi, Angela! Tudo bom?

Pelo que entendi é que você está tentando importar o componente Banner do ./componentes/Banner mas dentro do arquivo do componente você está construíndo ele como banner (com letra minúscula). Tem como testar se trocar no arquivo Banner.js o nome da função e o export default para Banner com letra maíuscula? Ficando assim:

import React from 'react';
import banner from './imagens/banner.png'

function Banner() {
        return (
            <img src={banner}/>
            )
}

export default Banner;

Fico no aguardo!

Segue erro depois da alteração

Vamos testar mais uma solução juntas? O erro continua dizendo que não encontrou o Banner que está sendo importado no App.js.

Se analisarmos o caminho do import dentro do arquivo App.js para importar o componente Banner é o seguinte:

import Banner from './componentes/Banner';

Só que o caminho está entrando dentro da pasta componentes, dentro da pasta Banner e para por ai. Vamos ter que entrar no arquivo também, acrescentando mais um /Banner.

import Banner from './componentes/Banner/Banner';

Pode fazer essa alteração no seu código pra ver se agora funciona?

Ao visualizar minha primeira resposta nesse tópico posso ver que me confundi no exemplo do caminho do arquivo feito no passo dois, peço desculpas pela confusão. Espero que agora sim eu tenha ajudado :)

O erro

Oi, Angela!

Como podemos ver no erro, você está tentanto importar a imagem "banner.png" que deveria estar dentro da pasta: src\componentes\Banner\imagens\banner.png.

Consegue conferir se o arquivo existe? Se ele não existe, é só você mover pra lá que vai funcionar. Detalhe que letras maiusculas e minusculas fazem diferença.

Nós usamos esse conceito de caminhos relativos e absolutos durante toda nossa jornada, então acho que esse artigo pode te ajudar a entender melhor

Não sei o que mais devo fazer, segue a tela mostrando as pastas.

Eu chamei a img como o professor explicou conforme tela abaixo. <img src="/imagem/banner.png" , mas não deu certo.

A Monica Hillman me pediu para fazer da seguinte forma.

import React from 'react';
import banner from './imagens/banner.png'

function Banner() {
return (
<img src={banner}/>
)
}

export default Banner;

Agora o erro é este

ERROR in ./src/componentes/Banner/Banner.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Ângela\Desktop\React 1\Alura com JavaScript\organo\src\componentes\Banner\Banner.js: Identifier 'Banner' has already been declared. (6:9)

  4 |
  5 |
> 6 | function Banner() {
    |          ^
  7 |     return (
  8 |         <img src={Banner}/>
  9 |         
  

Angela, consegue compartilhar o repositório do Github? Acho que assim fica mais fácil de entender o problema e assim resolver.

Os erros, em si, não estão diretamente ligados ao React.

Se você seguir a mesma abordagem do curso, o componente Banner pode ficar assim (apenas isso e nada mais, no Banner.js):

import './Banner.css'

export const Banner = () => {
    // JSX
    return (
        <header className="banner">
            <img src="/imagens/banner.png" alt="O banner principal da página do Organo"/>
        </header>
    )
}

Repara no caminho da imagem: /imagens/banner.png

Repara que é um caminho absoluto (se lembra daquele artigo que mandei)? E então, pra termos a imagem renderizada corretamente, o arquivo banner.png precisa estar na seguinte pasta do seu projeto: public/imagens/banner.png

Isso porque o Create React App disponibiliza todos os arquivos na pasta public de forma estática, assim podemos acessar diretamente.

Você pode dar uma olhada aqui no Github se precisar.

Se você mandar pra gente o repositório do projeto, podemos analisar outras partes dele que podem estar ocasionando esse problema!

Boa noite!!

Segue

https://github.com/Angelaeds/react/tree/3f8f98cce1fb83a7c6aad62965bb6c042fd660a7

Oi, Angela! Vamos lá:

import React from 'react';
import Banner from './imagens/banner.png'; // Aqui, você está importando a imagem que será utilizada no componente, tudo correto até o momento.

// Agora, aqui temos um conflito de nomes. A função do componente e a imagem importada estão ambos nomeados como "Banner". 
// Isso gera uma ambiguidade no código, porque o JavaScript não conseguirá discernir quando estamos nos referindo à imagem ou à função.
function Banner() { 
    return (
        // Aqui, por exemplo, ao tentarmos utilizar "Banner" como valor do atributo "src", o conflito de nomes impede que o JavaScript 
        // entenda que estamos nos referindo à imagem importada, e não à função do componente.
        <img src={Banner}/> 
    )
}

export default Banner // Aqui, o objetivo é exportar a função do componente, o que está correto, mas o problema dos nomes duplicados precisa ser resolvido primeiro.

Para resolver esse problema, uma boa prática é manter os nomes de variáveis, funções e componentes distintos e claros. Neste caso, poderíamos simplesmente alterar o nome da imagem importada para algo diferente do nome da função do componente. Vamos corrigir isso:

import React from 'react';
// Alteramos o nome da imagem importada para "banner" (em minúsculas) para diferenciá-la claramente da função do componente.
import banner from './imagens/banner.png'; 

// Agora, a função do componente mantém seu nome original, "Banner", o que está perfeitamente adequado.
function Banner() { 
    return (
        // Com a mudança do nome da imagem importada para "banner", fica claro agora que estamos nos referindo à imagem neste ponto.
        <img src={banner}/> 
    )
}

export default Banner // Continuamos exportando a função do componente normalmente, e agora, sem confusões de nomenclatura.

Repare como a simples mudança de "Banner" para "banner" na imagem importada esclarece o código. Agora, cada referência tem um propósito distinto e claro, facilitando a leitura e o entendimento do código. Isso é crucial em ambientes de desenvolvimento, onde a clareza e a manutenção do código são fundamentais.

Boa noite!!

Agora deu certo, o estranho é que a Mônica já tinha me passado está instrução, eu fiz e o erro persistiu. Mas agora deu certo.

Obrigada!!