ReactJSとスタイル付きコンポーネントに応答するNavbar🚀

ホラcomunidad!👋
HOY Les Squiero Eenseは、como hacer una barra de navegaciに適応します.エスペーレ.😁
🚨Cocket Y ReactJS : CockImItems
👨‍💻日付El Tiempoデley y analizarは、se seとして、y se entiende mejorを与えます.



🚀 Lo Primero que Haches es Instalarは、yロスpaquetes que necesitaremosに反応します.

npx create-react-app myblog;
npm install styled-components
npm install react-router-dom
npm install react-icons --save

🚀 ローSegundo queは、Elyar Nuestro Proyectoデ反応によって

cd myblog
npm start

Cuando ya Hayamos Hecho TodosロスPasos B . Scios e . Innotantes como Instalarはe iniciar el proyectoに反応するEpipeznomos en loo que nos import a navbar response🥳
🚀クレアモナスNuna Carpeta Llamada構成要素dentro de src、Te quedara la ruta asi:src/components/ , デトロイトデesta carpeta crearemos todas las rutaas o paginas que querremos en nuestro navbar

Claramente tu puedes colocar los nombres que quieras o como quieras

🚀iRemosApp.js EとしてのEatatataRemote Toolium Nuestras Rutas O Paginas y EL Enrutador

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'

🚀Despuのs definemosラスRutas詐欺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 C .ディゴーコンプリートApp.js 露としての詩

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デterminar la primer parte y tal vez la mas tantante,ahora vamos a los estilos lo cual ser lo lo que le de vida y funcionalidad nuestro navbar
👌Lo Primeroは、ヘイズをesにしますsrc/components/NavBar.js Eのインポートリモート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 👍🚀Despuはデestoクレアモスロスのリンクをリンクします.

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

🚀Hamburguesa Sea desplegable y funcionalにおけるNuestro Men . Thegle que Har - Ten queの機能エステは、SencilloエステCディルdigoです.レークエルダエストモスsrc/components/NavBar.js

const [active, setActive] = useState(true)

  const toggleBtn = () =>{
    setActive(!active)
  }

🚨🚨ムシャ・アテンチーとエヌ・パルテ🚨🚨
🚀 アディエイリア<BurgerBtn/> 理化学研究所

<BurgerBtn onClick={toggleBtn} />

<BurgerBtn/> エヴァMismaルタについてsrc/components/NavBar.js リーリームイビアン、es sencillo.
🚀ロサンゼルスNavLink 『タミラ』におけるタミビとアトリエactive 本当です.
として、デdeberiaデestar quedando nuestro cNavBar.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は、Terminado La Segunda ParondondeがラスRutas yを形づくる定義します.アホラプレスタMucha Atenciは、nを評価します.

Estos estilos son los mios, copialos, leelos y entiendelos. Ya después adaptalos a tus gustos 😁

エストステスロスexport default NavBar エヌラmismaルタ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;
  }
`

ヘートス・タータンド.エスペラントTe Guste、Te Funcione yヘイゼンentendido.テイトドhacerlo lo mas sencillo posibleCualquierドーダO不便なdejame国連comentario y te ayudare en lo que pueda.😁
ミュートグラシアスPor leer!
Jhossuan Foadカンポスd
フロントエンド開発者ジュニア
経験+ 9つのmesesデExperiencia y contando.
Sigueme en Tiktok :https://vm.tiktok.com/ZTdCCJmhs/