how to make a navbar using react js| web developer joy

July 29, 2021 2 comments
Share:
how to make a navbar using react js



react js navbar



1.first file (index.html )


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
   
  </body>
</html>




2. 2nd file (App.js)




import './App.css';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import About from './About';
import Navbar from './Navbar';
import Contact from './Contact';
import Gallery from './Gallery';
import Service from './Service';
import Blog from './Blog';
import Protfolio from './Protfolio';
import Home from './Home';

import {BrowserRouter, Route } from "react-router-dom";


function App() {
  return (
  <>
 <BrowserRouter>
 <Navbar/>


 <Route exext path="/Home">
   <Home/>
</Route>



<Route exext path="/About">
   <About/>
</Route>

<Route exext path="/Contact">
   <Contact/>
</Route>

<Route exext path="/Service">
   <Service/>
</Route>

<Route exext path="/Blog">
   <Blog/>
</Route>

<Route exext path="/Gallery">
   <Gallery/>
</Route>

<Route exext path="/Protfolio">
   <Protfolio/>
</Route>


</BrowserRouter>
  </>
  );
}

export default App;




3.3rd file(Navbar.js)






import React from "react";
import pic from "./ok.jpg";
import { NavLink } from "react-router-dom";


class Navbar extends React.Component{
    
    render() {
        return (
            <div className="conatiner-fulied bg-dark">
                <nav className="navbar navbar-dark bg-dark text-white ">
                    <div className="nav-logo" >
                        <NavLink to="/Home" exact  
style={{textDecoration:"none",color:"white"}}>
                        <img src={pic} alt="" width="50px" />Web Developer</NavLink>
</div>
                   
                   
                    <ul className="list-unstyled nav ">
                     <li className="list-group p-2" >
                         <NavLink to="/Home" exact className="navlinkHover"> HOME
</NavLink>
                    </li>

                     <li className="list-group p-2" >
                         <NavLink to="/About" exact className="navlinkHover">ABOUT
</NavLink>
                    </li>

                
                     <li className="list-group p-2" >
                         <NavLink to="/Service"  exact className="navlinkHover">
SERVICE</NavLink>
                    </li>

                     <li className="list-group p-2" >
                         <NavLink to="/Protfolio" className="navlinkHover">PROTFOLIO
</NavLink>
                    </li>

                     <li className="list-group p-2" >
                         <NavLink to="/Blog" exact className="navlinkHover">BLOG
</NavLink>
                    </li>

                     <li className="list-group p-2" >
                         <NavLink to="/Gallery" exact className="navlinkHover">
GALLERY</NavLink>
                    </li>

                     <li className="list-group p-2" >
                         <NavLink to="/Contact" exact className="navlinkHover">
CONTACT</NavLink>
                    </li>
                    </ul>
                </nav>

            </div>


        );
    }
}

export default Navbar;



4.4th file (App.css)



.ml{
margin-left: 800px;
}

.navlinkHover{
    color: white;
    text-decoration: none;
}

.navlinkHover:hover{
    color: aqua;
}




5.5th file(Home.js)





import * as React from 'react';
class Home extends React.Component {
    render() {
        return (
            <div>
                <h2>Home page</h2>
            </div>
        );
    }
}

export default Home;





6.6th file(Service.js)








import * as React from 'react';



class Service extends React.Component {
    render() {
        return (
            <div>
                <h2>Protfolio page</h2>
            </div>
        );
    }
}

export default Service;




7.7th file(Service.js)





import * as React from 'react';



class Service extends React.Component {
    render() {
        return (
            <div>
                <h2>service page</h2>
            </div>
        );
    }
}

export default Service;




8.8th file(Gallery.js)





import * as React from 'react';

class Gallery extends React.Component {
    render() {
        return (
            <div>
                <h2>Gallery page</h2>
            </div>
        );
    }
}

export default Gallery;



9.9th file(Contact.js)





import * as React from 'react';



class Contact extends React.Component {
    render() {
        return (
            <div>
                <h2>Contact page</h2>
            </div>
        );
    }
}

export default Contact;




10.10 file(About.js)



import * as React from 'react';



class About extends React.Component {
    render() {
        return (
            <div>
                <h2>about page</h2>
            </div>
        );
    }
}

export default About;




11.11th file(Blog.js)



import * as React from 'react';



class Blog extends React.Component {
    render() {
        return (
            <div>
                <h2>Blog  page</h2>
            </div>
        );
    }
}

export default Blog;











Labels:
Share:

Post a Comment

2 comments:

Subscribe to: Post Comments ( Atom )