Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como importar no App.js?

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Montando os times e atividade Desafio: componente do rodapé

por Bruna Bechlin
| 41.2k xp | 8 posts

Fiz os arquivos dos componentes de diversas maneiras, mas o rodapé não aparece na página. Acho que não estou conseguindo colocar no App.js. Como fazer isso?

meu index.js (Rodapé) import './Rodape.css'

const Rodape = () => {
    return (
        <section className='section-rodape'>
            <div>
                <ul className='lista-icones'>
                    <li>
                        <a href="https://www.facebook.com/desiree.rossi7/" target='__blank'>
                            <img src="../imagens/fb.png" alt="" className='icone' />
                        </a>
                    </li>
                    <li>
                        <a href="https://www.instagram.com/desireerossivieira/" target='__blank'>
                            <img src="../imagens/ig.png" alt="" className='icone' />
                        </a>
                    </li>
                </ul>
            </div>
            <div  className='logo'>
                <img src="../imagens/logo.png" alt="Logo organo" className='icone-organo' />
            </div>
            <div className='desenvolvimento'>
                <p>Desenvolvido por Desirée</p>
            </div>
        </section>
    )
}

export default Rodape 
`

o CSS:

.section-rodape {
    background-color: #6278F7;
    list-style: none;
    display: flex;
    justify-content: space-between;
    color: white;
}

.icone {
    width: 30px;
}

.icone-organo {
    width: 90px;
}

.lista-icones {
    list-style: none;
    display: flex;
}

.icone:last-child {
    margin-left: 10px; 
}

.logo {
    margin-top: 1em;
}

.desenvolvimento {
    margin-right: 2.5em;
    margin-top: .5em;
}
3 respostas
solução!
por Renan Lima
| 3824.3k xp | 8104 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Bruna, tudo bem? Pelo que entendi, você está tendo dificuldades em importar o componente Rodape no seu App.js, correto? Para isso, você precisa importar o componente no App.js e adicioná-lo dentro do return do App.js.

Por exemplo, se o seu arquivo Rodape.js está na mesma pasta do App.js, você pode importá-lo da seguinte forma:

import Rodape from './Rodape';

E então, dentro do return do App.js, adicionar o componente Rodape:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Seu conteúdo aqui
        </p>
      </header>
      <Rodape />
    </div>
  );
}

Lembre-se de verificar se o caminho do arquivo está correto e se o nome do componente está escrito corretamente, se ele estiver dentro de alguma pasta precisa colocar no caminho. Espero ter ajudado e bons estudos!

por Bruna Bechlin
| 41.2k xp | 8 posts

Para retornar o Banner não foi necessário fazer isso... Qual a diferença?

Acabei de ver que o banner está ali ... --' Obrigada!

por Renan Lima
| 3824.3k xp | 8104 posts
Alura Scuba Team Apoio Educacional - Alura

Eu que agradeço Bruna. Fico feliz em ajudar.