Criando um Navbar em React – SitePoint

Este artigo mostrará como você pode criar uma barra de navegação (“Navbar”) no React, enquanto cobre tudo, desde considerações de design até as melhores práticas de implementação e acessibilidade.

Uma das partes essenciais de qualquer aplicativo da Web é a barra de navegação, pois permite que os usuários naveguem por diferentes páginas e seções do site.

Portanto, é importante que você construa uma barra de navegação que tenha os links necessários, juntamente com as medidas de acessibilidade certas para garantir que seus usuários possam encontrar o caminho em seu aplicativo.

Takeaways -chave

• Uma barra naval é um elemento crucial de qualquer site, pois fornece aos usuários um meio de navegar por diferentes páginas e seções.
• O React permite a criação de componentes reutilizáveis ​​e modulares, tornando -o uma excelente opção para a construção de UIs complexas como as barras navais.
• A acessibilidade deve ser uma prioridade ao criar uma barra de navegação, garantindo que todos os usuários, incluindo aqueles com deficiência, possam navegar efetivamente no seu site.

O que é uma barra de navegação?

Uma barra de navegação é um elemento de interface do usuário que normalmente aparece na parte superior ou no lado de uma página da web.

Serve como auxílio à navegação, fornecendo links ou botões que permitem aos usuários acessar seções ou páginas diferentes no site.

É essencial para criar uma experiência de usuário perfeita e intuitiva, pois ajuda os usuários a entender a estrutura e a hierarquia do site e permite que eles se movam sem esforço entre diferentes partes do aplicativo.

Aqui estão alguns exemplos de barbas navais bem projetadas:

Airbnb. O NavBar do Airbnb apresenta um design limpo e minimalista, com links claros para várias seções do site, como “lugares para ficar”, “experiências” e “experiências on -line”.

Dropbox. O Dropbox Navbar é simples, mas eficaz, com um proeminente menu suspenso de “produtos” que permite aos usuários explorar diferentes ofertas.

Construindo uma barra de navegação em React

Agora que entendemos a importância das barras navais, vamos mergulhar no processo de construção de um usando o React.

Para este exemplo, criaremos um bar de navas para um site de comércio eletrônico chamado “ShopNow”.

Etapa 1: Projetando o Navbar

Antes de começarmos a codificar, é essencial ter um design claro em mente para o nosso Navbar.

Para o site da ShopNow, procuraremos um design simples, porém moderno, com os seguintes elementos:

• um logotipo no lado esquerdo
• Links para diferentes seções do site (como “Produtos”, “Sobre nós” e “Contato”)
• Um ícone do carrinho de compras com um crachá exibindo o número de itens no carrinho
• Um ícone do usuário para ações relacionadas à conta (como “entrar” e “minha conta”)

Aqui está uma maquete de como nosso Navbar pode parecer.

Etapa 2: Configurando o projeto React

Antes de começarmos a construir nosso Navbar, precisaremos configurar um novo projeto React. Você pode criar um novo projeto de reação usando Criar aplicativo React Ao executar o seguinte comando em seu terminal:

npx create-react-app shopnow

Depois que o projeto for configurado, navegue até o diretório do projeto e inicie o servidor de desenvolvimento:

cd shopnow
npm start

Etapa 3: Criando o componente Navbar

Com Spa Estruturas como React, é importante que você projete e pense em componentes reutilizáveis ​​e independentes. Portanto, é crucial criar componentes que você possa reutilizar durante todo o seu aplicativo.

Uma aplicação de um componente reutilizável é uma barra de navegação. Você pode criar um componente de navbar reutilizável que você pode reutilizar dentro do seu aplicativo.

Vamos criar um novo arquivo chamado Navbar.js no src diretório e adicione o seguinte código:

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (

<nav className="navbar">
  {}
nav>
);
};

export default Navbar;

Criamos um componente funcional chamado Navbar que retorna a