Anteriormente, eu estava com problemas para executar o cra, e tive que usar o Vite para conseguir criar a aplicação React. No entanto, após apagar os textos, imagens e logos que aparecem na aplicação padrão, conforme o instrutor demonstrou, estou enfrentando erros constantes, os quais afirmam que não é possível encontrar o aquivo App.jsx ou o Banner.jsx.
Repositório: https://github.com/vana-cyber/projeto-organo
Olá, Geonava. Como vai?
O problema é referente ao caminho da importação que esta sendo usado para o componente Banner, atualmente ele está assim:
import Banner from './componentes/Banner';
Esse caminho sugere que existe um arquivo index.jsx dentro da pasta Banner, o que não é o caso, já que o componente foi nomeado como Banner.jsx. Para corrigir isso, é necessário especificar o nome do arquivo no caminho de importação, ficando assim:
import Banner from './componentes/Banner/Banner';
Dessa forma, a importação referencia corretamente o arquivo Banner.jsx.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
Olá, Mike. Tudo bem?
Obrigada. Eu fiz essa alteração e outra para adicionar o componente CampoTexto. No entanto, não houve alteração alguma e a página está em branco. Agora não aparece mais a página com erro. A página não carrega nenhum conteúdo. Eu sincronizei as alterações que fiz no meu repositório do GitHub.
Oi, Geovana.
O que acontece é que agora você está fazendo uma exportação nomeada do componente Banner:
export const Banner = () => {
return (
<header className="banner">
<img src="/imagens/banner.png" alt="Banner principal da página Organo"></img>
</header>
);
}
Para importar esse componente, você precisa usar chaves ( { } ), pois ele foi exportado com um nome específico:
import { Banner } from './componentes/Banner/Banner';
Ou, caso queira fazer a importação pelo arquivo index.js, você só precisa fazer um ajuste no caminho de importação:
import Banner from './componentes/Banner';
Quando você aponta para uma pasta e não especifica o nome do arquivo, o JavaScript busca automaticamente pelo arquivo index dentro daquela pasta e isso permite simplificar o caminho de importação.