Aula 21 – Golang – Fiber – React – Navigation
Aula 21 – Golang – Fiber – React – Navigation
Voltar para página principal do site
Todas as aulas desse curso
Aula 20 Aula 22
Fiber
Pacote Programador Fullstack
Redes Sociais:
Link para a Digital Innovation
Quer aprender python3 de graça e com certificado? Acesse então:
workover
Meus link de afiliados:
Hostinger
Digital Ocean
One.com
Código da aula: Github
Melhore seu NETWORKING
Participe de comunidades de desenvolvedores:
Fiquem a vontade para me adicionar ao linkedin.
E também para me seguir no GITHUB.
Canais do Youtube
Toti
Lofi Music Zone Beats
Backing Track / Play-Along
Código Fluente
Putz!
Vocal Techniques and Exercises
PIX para doações
PIX Nubank
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.
Com isso, encerramos essa aula.
Na próxima aula, seguimos na construção do frontend.
Código da aula: Github
Voltar para página principal do blog
Todas as aulas desse curso
Aula 20 Aula 22
Redes Sociais:
