REACTJS - Aplicação de Página �nica - #3 Criando os Links

Na aula de hoje vamos dividir nossa estilização em media-queries, vamos importar um módulo externo e criar a nossa div nav.

Importando módulo externo

Como estamos trabalhando com uma app em página única, um efeito interessante é o efeito anchor scrollover. Um módulo interessante pra trabalhar com esse efeito é o módulo react-anchor-link-smooth-scroll

Para realizar a instalação basta abrir o terminal no seu sistema operacional e colocar o código:

npm install react-anchor-link-smooth-scroll

Posteriormente a instalação do módulo e dependências, vamos importá-lo no nosso projeto. Para tanto vamos abrir o arquivo Nav.js e vamos editá-lo assim:

import React from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';

export default class Nav extends React.Component {
    render(){
        return(
            <div className="nav">
                <AnchorLink href='#home'>Home</AnchorLink>
                <AnchorLink href='#photo'>Fotos</AnchorLink>
                <AnchorLink href='#information'>Informações</AnchorLink>
                <AnchorLink href='#contact'>Contato</AnchorLink>
            </div>
        );
    }
}

Vamos agora estilizar nossos links responsivamente utilizando media-queries. Lembrando que tudo que está fora das media-queries vale pra todas as resoluções:

/*General*/
*{margin: 0; padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; font-size: 18px; font-family: "Helvetica Neue", sans-serif;}

a{text-decoration: none; font-weight: bold;}

.nav{background: #000;}
    .nav a{text-align: center; padding: 10px 0; color:#fff;}
    .nav a:hover{background: #666;}

/*Small Smartphones*/
@media screen and (max-width: 480px) {
    .nav{display:none; flex-direction: column; }
        .nav a{width: 100%; }
}

/*Medium Smartphones*/
@media screen and (min-width: 481px) and (max-width: 768px) {
    .nav{display:none; flex-direction: column;}
        .nav a{width: 100%;}
}

/*Large Smartphones and small notebooks*/
@media screen and (min-width: 769px) and (max-width: 1199px) {
    .nav{display:flex;}
        .nav a{width: 25%;}
}

/*XLarges screens*/
@media screen and (min-width: 1200px) {
    .nav{display:flex;}
        .nav a{width: 25%;}
}