Aula 21 - Golang - Fiber - React - Navigation

Tutorial de Fiber - Parte 2: Frontend - React - Navigation

Nessa aula vamos implementar a navegação entre as páginas de Login, Register e Home. Crie a pasta components dentro da pasta mãe src e dentro da components crie o arquivo Nav.tsx e insira o conteúdo abaixo.

react-auth/src/components/Nav.tsx


import React, { useState } from 'react';
import { Link } from "react-router-dom";

const Nav = () => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(true);
  const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">Home</Link>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded={!isNavCollapsed} aria-label="Toggle navigation" onClick={handleNavCollapse}>
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item">
              <Link className="nav-link" to="/login">Login</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link" to="/register">Register</Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};
export default Nav;

Vamos decompor o componente de navegação (Nav) para explicar a formatação do Bootstrap 5 usada.

useState Hook

const [isNavCollapsed, setIsNavCollapsed] = useState(true); Aqui, o hook useState é utilizado para criar um estado chamado isNavCollapsed que controla se a barra de navegação está colapsada ou não (útil para telas menores). Por padrão, está definido como true, o que significa que o menu está inicialmente colapsado.

handleNavCollapse Function

const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed); Esta função é chamada quando o botão do menu hambúrguer é clicado. Ele alterna o estado de isNavCollapsed, o que afeta se o menu de navegação é mostrado ou escondido.

Navbar Container

<nav className="navbar navbar-expand-lg navbar-dark bg-dark"> Esta é a tag nav que define a barra de navegação. As classes aplicadas são:

navbar: Classe base do Bootstrap para barras de navegação.
navbar-expand-lg: Define o ponto de quebra da barra de navegação. Neste caso, a barra de navegação se tornará colapsável em telas menores que "large".
navbar-dark: Define a cor dos elementos de navegação para melhor contraste em um fundo escuro.
bg-dark: Define a cor de fundo da barra de navegação para escuro.

Brand Link

<Link className="navbar-brand" to="/">Home</Link> Este é um link que atua como a "marca" da barra de navegação, muitas vezes levando à página inicial.O navbar-brand é uma classe Bootstrap para estilizar este elemento.

Navbar Toggler Button

<button 
  className="navbar-toggler" 
  type="button" 
  data-bs-toggle="collapse" 
  data-bs-target="#navbarNav" 
  aria-controls="navbarNav" 
  aria-expanded={!isNavCollapsed} 
  aria-label="Toggle navigation" 
  onClick={handleNavCollapse}> 
  <span className="navbar-toggler-icon"></span> 
</button>

Este é o botão que mostra e esconde o menu de navegação em telas pequenas. Ele usa:

navbar-toggler: Classe para estilizar o botão.
data-bs-toggle="collapse" e data-bs-target="#navbarNav": Atributos de dados que indicam ao Bootstrap que este botão controlará o colapso de um elemento com o ID navbarNav.
aria-expanded: Atributo de acessibilidade que informa se a região associada está expandida (visível) ou não.
handleNavCollapse: Chamada no evento onClick que altera o estado de isNavCollapsed.

Collapsible Content <div className={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarNav"> Esta div contém o conteúdo da barra de navegação que será colapsado ou expandido dependendo do estado isNavCollapsed. O id corresponde ao data-bs-target do botão toggler, vinculando-os juntos.

Navigation List

<ul className="navbar-nav ms-auto"> A lista de navegação (ul) usa navbar-nav para estilizar os itens da lista como elementos de navegação. O ms-auto é uma classe de utilitário do Bootstrap 5 que automaticamente margina à esquerda, no sentido do início do conteúdo, empurrando os elementos para a direita na barra de navegação.

Navigation Items

<li className="nav-item"> 
  <Link className="nav-link" to="/login">
    Login
  </Link>
</li>

Cada li é um item da navegação e contém um Link do react-router-dom, que permite a navegação entre as páginas sem recarregar a página. A classe nav-link estiliza o link de acordo com os padrões do Bootstrap. Este componente de navegação Nav utiliza o sistema de grid responsivo do Bootstrap 5, classes de utilitários e componentes de navegação para criar uma barra de navegação que se adapta a diferentes tamanhos de tela e fornece uma experiência de usuário consistente em dispositivos móveis e desktops. No App.tsx, importe o Nav criado no arquivo acima e insira acima da tag <Router>.

react-auth/src/App.tsx


import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './pages/Login';
import Home from './pages/Home';
import Register from './pages/Register';
import Nav from './components/Nav';
function App() {
  return (
    <div className="App">
      <Router>
        <Nav />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Vamos fazer também um ajuste de formatação no index.css. Definindo um elemento com position: absolute;, você está ajustando o posicionamento do elemento de forma que ele seja colocado de maneira precisa e independente do fluxo normal dos outros elementos da página. Nesse caso específico desse layout, apareceu um espaço indesejado nas laterais do Nav. Ao utilizar position: absolute;, o elemento é removido do fluxo normal e pode ser posicionado exatamente onde é necessário, sem afetar ou ser afetado pela posição de outros elementos.

react-auth/src/index.css


.App, #root {
  width: 100%;
  height: 100%;
  position: absolute;
}

E assim, chegamos ao final da nossa aula sobre a implementação de navegação em um projeto frontend feito em React/Nextjs e com backend em Golang/Fiber. Lembrem-se, o aprendizado não para aqui. Na próxima aula, focaremos na página de Register, ampliando nossas habilidades e conhecimentos. Agradeço a dedicação de todos e estou animado para ver como aplicarão esses conhecimentos na prática.

Aula 21 - Golang - Fiber - React - Navigation