使用 ReactJS 创建响应式导航栏

在本文中，我们将使用 Reactjs 创建一个功能强大的导航栏。

问题陈述：使用 reactJS & styled-component 创建导航栏

所需模块：

1. 新产品经理
2. 创建反应应用程序
3. 样式组件
4. 反应路由器dom

基本设置：为了创建一个 React 应用程序，你的计算机上安装了一个节点，你可以通过在终端中输入来检查它：

node -v

如果没有，请安装最新版本。

一切就绪！您将使用 create-react-app 启动一个新项目，因此打开您的终端并输入：

npx create-react-app navigation-bar

现在通过在终端中输入给定的命令转到您的导航栏文件夹：

cd navigation-bar

通过在终端中键入给定的命令来安装此项目中所需的依赖项：

npm install react-router-dom
npm install --save styled-components

现在在 src 中创建 components 文件夹，然后转到 components 文件夹并创建一个名为 Navbar 的新文件夹。在 Navbar 文件夹中创建两个文件 index、js 和 NavbarElements.js。

在 src 名称页面中再创建一个文件夹，并在页面中创建文件名称 about.js、annual.js、blogs.js、events.js、index.js、signup.js、team.js

项目结构：项目中的文件结构如下所示：

文件路径：在 src/components/Navbar 中创建 index.js 文件。

Javascript

import React from 'react';
import {
  Nav,
  NavLink,
  Bars,
  NavMenu,
  NavBtn,
  NavBtnLink,
} from './NavbarElements';
  
const Navbar = () => {
  return (
    <>
      

        
  
        
          
            About
          
          
            Events
          
          
            Annual Report
          
          
            Teams
          
          
            Blogs
          
          
            Sign Up
          
          {/* Second Nav */}
          {/* Sign In */}
        
        
          Sign In
        
      
    
  );
};
  
export default Navbar;

文件路径：在 src/components/Navbar 中创建 NavbarElements.js 文件。

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 (
      
  
        
  GeeksforGeeks is a Computer Science portal for geeks.
      
    );
  };
    
  export default About;
  

• 文件名每年.js：

  Javascript

  import React from 'react';
    
  const AnnualReport = () => {
    return (
      
  
        
  Annual Report
      
    );
  };
    
  export default AnnualReport;
  

• 文件名 blogs.js：

  Javascript

  import React from 'react';
    
  const Blogs = () => {
    return (
      
  
        
  Welcome to GeeksforGeeks Blogs
      
    );
  };
    
  export default Blogs;
  

• 文件名 events.js：

  Javascript

  import React from 'react';
    
  const Events = () => {
    return (
      
  
        
  Welcome to GeeksforGeeks Events
      
    );
  };
    
  export default Events;
  

• 文件名 index.js：

  Javascript

  import React from 'react';
    
  const Home = () => {
    return (
      
  
        
  Welcome to GeeksforGeeks
      
    );
  };
    
  export default Home;
  

• 文件名 signup.js：

  Javascript

  import React from 'react';
    
  const SignUp = () => {
    return (
      
  
        
  Sign Up
      
    );
  };
    
  export default SignUp;
  

• 文件名 team.js：

  Javascript

  import React from 'react';
    
  const Teams = () => {
    return (
      
  
        
  Welcome to GeeksforGeeks Team
      
    );
  };
    
  export default Teams;
  

文件名 src/index.js： src 中的文件。

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
  
ReactDOM.render(
  
    
  ,
  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 (
    
      
      
        
        
        
        
        
        
        
      
    
  );
}
  
export default App;

使用命令保存所有文件并启动服务器。

npm start

输出：