Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 18, 2022 12:50 am GMT

Navbar responsive with reactjs and styled components

Hola comunidad!
Hoy les quiero ensear a como hacer una barra de navegacin adaptable para todos los dispositivos usando reactJs y styled components. Espero les guste.

CONOCIMIENTOS REQUERIDOS BASICOS: Css y ReactJs
Date el tiempo de leer y analizar, as se aprende y se entiende mejor.

Image description
Image description
Image description

Lo primero que haremos es instalar react y los paquetes que necesitaremos.

npx create-react-app myblog;npm install styled-componentsnpm install react-router-domnpm install react-icons --save

Lo segundo que haremos es iniciar nuestro proyecto de react

cd myblognpm start

Cuando ya hayamos hecho todos los pasos bsicos e importantes como instalar react e iniciar el proyecto. Empezaremos a enfocarnos en lo que nos importa el navbar responsivo

Crearemos una carpeta llamada components dentro de src, te quedara la ruta asi: src/components/, dentro de esta carpeta crearemos todas las rutas o paginas que querremos en nuestro navbar.

Claramente tu puedes colocar los nombres que quieras o como quieras
Image description

Iremos a App.js e importaremos todos nuestras rutas o paginas y el enrutador as:

import { BrowserRouter, Route, Routes } from 'react-router-dom';import './App.css';import About from './components/About';import NavBar from './components/NavBar';import Home from './components/Home';import Aprende from './components/Aprende';import Portfolio from './components/Portfolio'import Donaciones from './components/Donaciones'

Despus definiremos las rutas con react-router asi:

function App() {  return (    <>    <BrowserRouter>      <NavBar/>        <Routes>          <Route path='/' element={            <div className="App">              <Home/>            </div>          } />          <Route path='/about' element={<About/>} />          <Route path='/aprende' element={<Aprende/>}/>          <Route path='/portfolio' element={<Portfolio/>}/>          <Route path='/donaciones' element={<Donaciones/>} />        </Routes>      </BrowserRouter>    </>  );}export default App;

Nuestro cdigo completo de App.js debera verse as:

import { BrowserRouter, Route, Routes } from 'react-router-dom';import './App.css';import About from './components/About';import NavBar from './components/NavBar';import Home from './components/Home';import Aprende from './components/Aprende';import Portfolio from './components/Portfolio'import Donaciones from './components/Donaciones'function App() {  return (    <>    <BrowserRouter>      <NavBar/>        <Routes>          <Route path='/' element={            <div className="App">              <Home/>            </div>          } />          <Route path='/about' element={<About/>} />          <Route path='/aprende' element={<Aprende/>}/>          <Route path='/portfolio' element={<Portfolio/>}/>          <Route path='/donaciones' element={<Donaciones/>} />        </Routes>      </BrowserRouter>    </>  );}export default App;

Felicidades, acabas de terminar la primer parte y tal vez la mas importante, ahora vamos a los estilos lo cual ser lo que le de vida y funcionalidad a nuestro navbar.

Lo primero que haremos es dirigirnos a src/components/NavBar.js e importaremos todo lo que necesitaremos.

import React, { useState } from 'react'import { NavLink as Link } from 'react-router-dom'import styled from 'styled-components'import { FaBars, FaLaptopCode } from 'react-icons/fa'

Nota: FaBars y FaLaptopCode son ICONOS que quise usar para mi logo

Despus de esto crearemos los links que nos dejaran navegar por toda nuestra pagina y aadiremos los nombres de los estilos con styled components.

const NavBar = () => {  return (    <>    <Navegacion>      <BurgerBtn/>      <Logo><span>Jhossua</span><FaLaptopCode className='laptop'/></Logo>      <Panel>        <Menu>          <NavLink to='/'>Home</NavLink>          <NavLink to='/about'>About</NavLink>          <NavLink to='/aprende'>Aprende</NavLink>          <NavLink to='/portfolio'>Portafolio</NavLink>          <NavLink to='/donaciones'>Donaciones</NavLink>        </Menu>      </Panel>    </Navegacion>    </>  )}export default NavBar

Despus crearemos la funcin de toggle que har que nuestro men hamburguesa sea desplegable y funcional. Es muy sencillo este cdigo. Recuerda que estamos en src/components/NavBar.js

const [active, setActive] = useState(true)  const toggleBtn = () =>{    setActive(!active)  }

MUCHA ATENCIN EN ESTA PARTE
aadiremos a <BurgerBtn/> la siguiente funcin asi:

<BurgerBtn onClick={toggleBtn} />

<BurgerBtn/> lo puedes encontrar en esta misma ruta src/components/NavBar.js PORFAVOR lee muy bien, es sencillo.

A los NavLink tambin les aadiremos una funcin sencilla, donde seteara active a true.

AS DEBERIA DE ESTAR QUEDANDO NUESTRO CDIGO DE NavBar.js

import React, { useState } from 'react'import { NavLink as Link } from 'react-router-dom'import styled from 'styled-components'import { FaBars, FaLaptopCode } from 'react-icons/fa'const NavBar = () => {  const [active, setActive] = useState(true)  const toggleBtn = () =>{    setActive(!active)  }  return (    <>    <Navegacion>      <BurgerBtn onClick={toggleBtn}/>      <Logo><span>Jhossua</span><FaLaptopCode className='laptop'/></Logo>      <Panel className={active ? '' : 'active'}>        <Menu>          <NavLink onClick={()=>setActive(true)} to='/'>Home</NavLink>          <NavLink onClick={()=>setActive(true)} to='/about'>About</NavLink>          <NavLink onClick={()=>setActive(true)} to='/aprende'>Aprende</NavLink>          <NavLink onClick={()=>setActive(true)} to='/portfolio'>Portafolio</NavLink>          <NavLink onClick={()=>setActive(true)} to='/donaciones'>Donaciones</NavLink>        </Menu>      </Panel>    </Navegacion>    </>  )}export default NavBar

Felicidades, has terminado la segunda parte donde defines las rutas y aades funcionalidades para una mejor experiencia de usuario. Ahora presta MUCHA ATENCIN A LOS ESTILOS aqu le dars vida a tu navbar.

Estos estilos son los mios, copialos, leelos y entiendelos. Ya despus adaptalos a tus gustos

Estos estilos, hazlos abajo de export default NavBar en la misma ruta src/components/NavBar

const Navegacion = styled.nav`  background:#0D0D0D;  height:4rem;  display:flex;  justify-content:space-between;  align-items:center;  @media screen and (min-width: 768px){    justify-content:space-around;  }`const Panel = styled.nav`  background: rgba( 0, 0, 0, 0.9 );  color:#F2F2F2;  position: fixed;  backdrop-filter: blur( 2px );  top: 0;  bottom: 0;  left: 0;  right: 0;  transition: transform 0.3s ease;  transform: translate(-100%, 0);    &.active{      transform: translate(0, 0);    };    @media screen and (min-width: 768px){      transform: translate(0, 0);      background:none;      position:relative;    }`const Menu = styled.div`  width: 100%;  display: flex;  flex-direction: column;  text-align: center;  @media screen and (min-width: 768px){    flex-direction:row;    width:20rem;    align-items:normal;    width:inherit  }`const NavLink = styled(Link)`  padding: 3.5rem;  width: inherit;  font-size: 1.4rem;  text-decoration: none;  transition: 0.2s;  color: white;  &.active{    background:rgba( 113, 65, 217, 0.85 );    color:#fff;    font-weight:700;  }  @media screen and (min-width: 768px){    padding:1rem;    &.active{      background:transparent;      color:#A772F2;    }  }`const Logo = styled.div`  display:flex;  align-items:center;  margin-right:20px;    span{      font-size:25px;      font-weight:700;      letter-spacing:2px;      color:#A772F2;    }    .laptop{      font-size:25px;      margin-right:10px;      color:#A772F2;    }    @media screen and (min-width: 768px){      margin-right:0;    }`const BurgerBtn = styled(FaBars)`  display: flex;  z-index: 999;  cursor: pointer;  position: relative;  transition: 0.5s;  font-size:40px;  left:10px;  color:#A772F2;  @media screen and (min-width: 768px){    display:none;  }`

Listo, aqu hemos terminado. Espero te guste, te funcione y hayas entendido. Trate de hacerlo lo mas sencillo posible. Cualquier duda o inconveniente dejame un comentario y te ayudare en lo que pueda.

Muchas gracias por leer!

Jhossuan Foad Campos Daz
Frontend Developer Junior - Autodidacta
+9 Meses de experiencia y contando.

Sigueme en TikTok: https://vm.tiktok.com/ZTdCCJmhs/


Original Link: https://dev.to/jhossuan/navbar-responsive-with-reactjs-and-styled-components-19b4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To