estou com múltiplos problemas para usar o react

Baixei o seu código. Eu acredito que o problema com a imagem pode estar relacionado à configuração do projeto. Tente fazer da seguinte forma:

import bannerImage from '../assets/banner.png';

// Dentro do componente você pode usar da seguinte maneira:
<img src={bannerImage} alt="banner..." />

Dessa forma, deve resolver Gabriel. Quando você usa diretamente um caminho relativo no atributo src da tag <img>, o React e o Webpack não têm a oportunidade de processar esse caminho durante a construção. Pode ser necessário uma configuração adicional para que isso funcione.

Notei algumas coisas que você pode melhorar também:

• No arquivo App.js tem uma linha desnecessária de import:

// Remova esta linha:
import './componentes/Banner.js';

• A tag img pode ser auto-fechada, o que significa que não precisa de uma tag de abertura e fechamento. Pode ser feito assim:

<img />
<!-- Em vez de <img> </img>

Se precisar de mais alguma ajuda, fique à vontade para perguntar.

vlz mn funcionou aq mas pode me explicar pq no meu projeto em especifico indicar o caminho da imagem normalmente n funciona ? tem cm mudar isso ?

Isso ocorre devido ao Webpack, a ferramenta integrada ao Create React App que gerencia e processa módulos, incluindo imagens. Ela opera dessa maneira por padrão para otimizar o carregamento de recursos durante a construção do aplicativo.

Uma alternativa que você pode explorar é o uso de require diretamente dentro da declaração src da tag <img>. Dessa forma:

<img
  src={require('../assets/banner.png')}
  alt="..."
/>

Acho que assim deve funcionar também. São as duas abordagens que conheço para lidar com imagens usando o webpack. No que diz respeito à configuração, não tenho experiência configurando o webpack para mudar o comportamento padrão.

tendi mn vlw ai pela ajuda d vdd