Создайте адаптивную панель навигации с помощью ReactJS
В этой статье мы создадим работающую панель навигации с помощью Reactjs.
Формулировка проблемы: создайте панель навигации с помощью reactJS и styled-component.
Необходимые модули:
- npm
- создать-реагировать-приложение
- стилизованные компоненты
- реагировать-маршрутизатор-дом
Базовая настройка: для создания приложения для реагирования на вашем компьютере установлен узел, вы можете проверить его, набрав в своем терминале:
узел -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
Выход: