Simple Responsive Menu in React JS in 2020

Simple Responsive Menu in React JS in 2020


So, to create a simple responsive menu using React JS. we will use the package called React Router Dom and we can easily install it or add it to our React app using npm, yarn, etc.

And we can do it here is the video please check it first.







And here is the source code on How to create a simple responsive menu using React JS.

Step 1: First, we will create an Index.js page

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import Navbar from './Navbar'
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </>,
  document.getElementById("root")
);


Step 2: Create a App.jsx component

import React from "react";
import Home from "./Home";
import Contact from "./Contact";
import About from "./About";
import { SwitchRoute } from "react-router-dom";
import Navbar from "./Navbar";

const App = () => {
  return (
    <>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </>
  );
};

export default App;





  Step 3: Create a Home.jsx component

import React from "react";

const Home = () => {
  return (
    <>
      <div className="setStyle">
        <h1> Home Page </h1>
        <p> Welcome to my world </p>
      </div>
    </>
  );
};

export default Home;



  Step 4: Create a Contact.jsx component

import React from "react";

const Contact = () => {
  return (
    <>
      <div className="setStyle2">
        <h1> Contact Page </h1>
        <p> Welcome to my world </p>
      </div>
    </>
  );
};

export default Contact;

Step 5: Create an About.jsx component

import React from "react";

const About = () => {
  return (
    <>
      <div className="setStyle3">
        <h1> About Page </h1>
        <p> Welcome to my world </p>
      </div>
    </>
  );
};

export default About;



Step 6: Create an inde.css page


@import url("https://fonts.googleapis.com/css2?family=Cuprum&display=swap");
* {
  margin0;
  padding0;
  box-sizingborder-box;
  font-family"Cuprum"sans-serif;
}

.setStyle {
  background-color#99b898;
  color#feceab;
  height90vh;
  font-size8rem;
  text-aligncenter;
  displayflex;
  flex-directioncolumn;
  justify-contentcenter;
  align-itemscenter;
  text-shadow1px 2px 3px firebrick;
}

.setStyle2 {
  height90vh;
  font-size8rem;
  text-aligncenter;
  displayflex;
  flex-directioncolumn;
  justify-contentcenter;
  align-itemscenter;
  text-shadow1px 2px 3px #01a9b4;
  background-color#01a9b4;
  color#086972;
}

.setStyle3 {
  height90vh;
  font-size8rem;
  text-aligncenter;
  displayflex;
  flex-directioncolumn;
  justify-contentcenter;
  align-itemscenter;
  text-shadow1px 2px 3px #e5cfe5;
  background-color#3b6978;
  color#a6dcef;
}

.mainMenu {
  width100%;
  line-height10vh;
  displayflex;
  justify-contentspace-around;
  align-itemscenter;
  background-color#e84a5f;
  color#ff847c;
}

.mainMenu a {
  color#092532;
  font-size3rem;
}
a.menu_link {
  color#feceab;
  font-size3rem;
}

@media (max-width768px) {
  .setStyle,
  .setStyle2,
  .setStyle3 {
    height80vh;
  }

  .setStyle h1,
  .setStyle2 h1,
  .setStyle3 h1 {
    font-size5rem;
  }

  .setStyle p,
  .setStyle2 p,
  .setStyle3 p {
    font-size3rem;
  }

  .mainMenu {
    displayblock;
    line-height: rem;
  }
  .mainMenu a {
    displayblock;
    text-aligncenter;
  }

  .mainMenu a {
    font-size2rem;
    border-bottom2px solid black;
  }
}



Hurray, We are done. Here is the output




I really hope you all like it. Please check my Channel Thapa Technical for daily such Awesome videos. 

Thank You and Have a good day :) 

Subscribe - Thapa Technical