Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Meu banner não aparece

Fiz exatamente o passo-a-passo do prof e mesmo assim o meu banner não aparece no topo da página.

Poderiam me auxiliar?

Na imagem que tem o código do meu componente "banner" está "<img scr=> mas eu corrigi para src e mesmo assim não funcionou

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

function Banner () {

<img src="/imagens/banner.png" alt="o banner principal da página do Organo" />

}

document.createElement('img')

export default Banner

// codigo principal

import logo from './logo.svg'; import './App.css'; import Banner from './compontentes/Banner/Banner';

function App() { return (

logo

Bem-vindo ao react!

Learn React
); }

export default App;

3 respostas
solução!

Oi, Michele!

Me parece que o seu Banner.js falta o return da função:

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

Repara que faltou a palavinha return.

Se você quiser mergulhar um pouco mais fundo pra entender sobre como as funções funcionam (não foi um trocadilho, eu juro =]), dá uma olhada nessa aula aqui.

Você pode também remover a linha:

document.createElement('img')

Foi só um comparativo sobre como seria criar o elemento sem utilizar o React :)

Olá Michele, eu acho que seu import está errado, ele esta : import Banner from './componentes/Banner/Banner';

não seria só : import Banner from './componentes/Banner';

Se não resolver avisa que a gente tenta resolver de outra forma ...

Oiii pessoal!

Excluí o arquivo e recriei umas 3x mais depois que pedi a ajuda de vocês aqui, porque não estava dando certo.

Minhas considerações:

Vinicios, realmente eu tava esquecendo de colocar o return, veja só :p Coloquei e continuava dando erro, até que eu reparei dps de já ter colocado o return que o erro estava acontecendo por um detalhe bem importante. Eu estava errando aqui:

<div className="App">
  <Banner /> 
    <img src={logo} className="App-logo" alt="logo" />

Ao invés de manter o <header> e adicionar o <Banner /> acima dele:

 <div className="App">
     <Banner />
  <header className="App-header">**
    <img src={logo} className="App-logo" alt="logo" />


      Então colegas, quando vcs terem algum tipo de erro e ele permanecer mesmo dps de pedir ajuda, se certifiquem que não estão apagando nada mais e que o código fora apenas corrigido no ponto que vcs pediram a ajuda.

E Victor, eu pensei sobre o seu ponto e ali onde está './componentes/Banner/Banner' foi porque eu criei uma pasta com o nome "Banner" dentro da pasta "componentes" e criei um arquivo "Banner.js" dentro da pasta Banner.

Ainda não vi o restante do curso, mas meu palpite é que tenha sido orientado a gente dessa forma para que as configurações de cada componente fique separada e mais organizada.

Muito obrigada aos dois.