Создайте адаптивную панель навигации с помощью ReactJS

Опубликовано: 4 Января, 2022

В этой статье мы создадим работающую панель навигации с помощью Reactjs.

Формулировка проблемы: создайте панель навигации с помощью reactJS и styled-component.

Необходимые модули:

  1. npm
  2. создать-реагировать-приложение
  3. стилизованные компоненты
  4. реагировать-маршрутизатор-дом

Базовая настройка: для создания приложения для реагирования на вашем компьютере установлен узел, вы можете проверить его, набрав в своем терминале:

узел -v

Если вы этого не сделаете, установите последнюю версию.

Все готово! Вы начнете новый проект, используя приложение create-response-app, поэтому откройте свой терминал и введите:

 npx создать-реагировать-приложение панель навигации

Теперь перейдите в папку на панели навигации, набрав указанную команду в терминале:

 панель навигации компакт-диска

Установите зависимости, необходимые в этом проекте, набрав указанную команду в терминале:

 npm установить реактивный маршрутизатор-дом
npm install --save styled-components

Теперь создайте папку компонентов в src, затем перейдите в папку компонентов и создайте новую папку с именем Navbar. В папке Navbar создайте два файла index, js и NavbarElements.js.

Создайте еще одну папку на страницах src name и на страницах создайте файлы с именем about.js, Annual.js, blogs.js, events.js, index.js, signup.js, team.js

Структура проекта: файловая структура в проекте будет выглядеть следующим образом:

Путь к файлу: создайте файл index.js в src / components / Navbar.

Javascript

import React from "react";
import {
  Nav,
  NavLink,
  Bars,
  NavMenu,
  NavBtn,
  NavBtnLink,
} from "./NavbarElements";
  
const Navbar = () => {
  return (
    <>
      <Nav>
        <Bars />
  
        <NavMenu>
          <NavLink to="/about" activeStyle>
            About
          </NavLink>
          <NavLink to="/events" activeStyle>
            Events
          </NavLink>
          <NavLink to="/annual" activeStyle>
            Annual Report
          </NavLink>
          <NavLink to="/team" activeStyle>
            Teams
          </NavLink>
          <NavLink to="/blogs" activeStyle>
            Blogs
          </NavLink>
          <NavLink to="/sign-up" activeStyle>
            Sign Up
          </NavLink>
          {/* Second Nav */}
          {/* <NavBtnLink to="/sign-in">Sign In</NavBtnLink> */}
        </NavMenu>
        <NavBtn>
          <NavBtnLink to="/signin">Sign In</NavBtnLink>
        </NavBtn>
      </Nav>
    </>
  );
};
  
export default Navbar;

Путь к файлу: создайте файл NavbarElements.js в src / components / Navbar.

Javascript

import { FaBars } from 'react-icons/fa' ;
import { NavLink as Link } from 'react-router-dom' ;
import styled from 'styled-components' ;
export const Nav = styled.nav`
background: #63D471;
height: 85px;
display: flex;
justify-content: space-between;
padding: 0.2rem calc((100vw - 1000px) / 2);
z-index: 12;
/* Third Nav */
/* justify-content: flex-start; */
`;
export const NavLink = styled(Link)`
color: #808080;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&.active {
color: #000000;
}
`;
export const Bars = styled(FaBars)`
display: none;
color: #808080;
@media screen and (max-width: 768px) {
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate(-100%, 75%);
font-size: 1.8rem;
cursor: pointer;
}
`;
export const NavMenu = styled.div`
display: flex;
align-items: center;
margin-right: -24px;
/* Second Nav */
/* margin-right: 24px; */
/* Third Nav */
/* width: 100vw;
white-space: nowrap; */
@media screen and (max-width: 768px) {
display: none;
}
`;
export const NavBtn = styled.nav`
display: flex;
align-items: center;
margin-right: 24px;
/* Third Nav */
/* justify-content: flex-end;
width: 100vw; */
@media screen and (max-width: 768px) {
display: none;
}
`;
export const NavBtnLink = styled(Link)`
border-radius: 4px;
background: #808080;
padding: 10px 22px;
color: #000000;
outline: none;
border: none;
cursor: pointer;
transition: all 0.2s ease- in -out;
text-decoration: none;
/* Second Nav */
margin-left: 24px;
&:hover {
transition: all 0.2s ease- in -out;
background: #fff;
color: #808080;
}
`;

Отредактируйте различные страницы для панели навигации в проекте в src / pages:

  • Имя файла about.js:

    Javascript

    import React from 'react' ;
    const About = () => {
    return (
    <div
    style={{
    display: 'flex' ,
    justifyContent: 'Right' ,
    alignItems: 'Right' ,
    height: '100vh'
    }}
    >
    <h1>GeeksforGeeks is a Computer Science portal for geeks.</h1>
    </div>
    );
    };
    export default About;
  • Имя файла Annual.js:

    Javascript

    import React from 'react' ;
    const AnnualReport = () => {
    return (
    <div
    style={{
    display: 'flex' ,
    justifyContent: 'Right' ,
    alignItems: 'Right' ,
    height: '100vh'
    }}
    >
    <h1>Annual Report</h1>
    </div>
    );
    };
    export default AnnualReport;
  • Имя файла blogs.js:

    Javascript

    import React from 'react' ;
    const Blogs = () => {
    return (
    <div
    style={{
    display: 'flex' ,
    justifyContent: 'Right' ,
    alignItems: 'Right' ,
    height: '100vh'
    }}
    >
    <h1>Welcome to GeeksforGeeks Blogs</h1>
    </div>
    );
    };
    export Blogs; default
  • Имя файла events.js:

    Javascript

    import React from 'react' ;
    const Events = () => {
    return (
    <div
    style={{
    display: 'flex' ,
    justifyContent: 'Right' ,
    alignItems: 'Right' ,
    height: '100vh'
    }}
    >
    <h1>Welcome to GeeksforGeeks Events</h1>
    </div>
    );
    };
    export Events; default
  • Имя файла index.js:

    Javascript

    import React from 'react' ;
    const Home = () => {
    return (
    <div
    style={{
    display: 'flex' ,
    justifyContent: 'Right' ,
    alignItems: 'Right' ,
    height: '100vh'
    }}
    >
    <h1>Welcome to GeeksforGeeks</h1>
    </div>
    );
    };
    export Home; default
  • Имя файла signup.js:

    Javascript

    import React from 'react' ;
    const SignUp = () => {
    return (
    <div
    style={{
    display: 'flex' ,
    justifyContent: 'Right' ,
    alignItems: 'Right' ,
    height: '100vh'
    }}
    >
    <h1>Sign Up</h1>
    </div>
    );
    };
    export SignUp; default
  • Имя файла team.js:

    Javascript

    import React from 'react' ;
    const Teams = () => {
    return (
    <div
    style={{
    display: 'flex' ,
    justifyContent: 'Right' ,
    alignItems: 'Right' ,
    height: '100vh'
    }}
    >
    <h1>Welcome to GeeksforGeeks Team</h1>
    </div>
    );
    };
    export Teams; default

Имя файла src / index.js: файл в src.

Javascript

import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById( 'root' )
);

Имя файла App.js: файл в папке src.

Javascript

import React from 'react' ;
import './App.css' ;
import Navbar from './components/Navbar' ;
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' ;
import Home from './pages' ;
import About from './pages/about' ;
import Events from './pages/events' ;
import AnnualReport from './pages/annual' ;
import Teams from './pages/team' ;
import Blogs from './pages/blogs' ;
import SignUp from './pages/signup' ;
function App() {
return (
<Router>
<Navbar />
<Switch>
<Route path= '/' exact component={Home} />
<Route path= '/about' component={About} />
<Route path= '/events' component={Events} />
<Route path= '/annual' component={AnnualReport} />
<Route path= '/team' component={Teams} />
<Route path= '/blogs' component={Blogs} />
<Route path= '/sign-up' component={SignUp} />
</Switch>
</Router>
);
}
export App; default

Сохраните все файлы и запустите сервер с помощью команды.

 npm start

Выход: