React Navbar with react router dom

0
11
views

Create React Navbar using react router dom

In this tutorial we’ll create a simple React Navbar using react router dom.

To create this application you need to install Node JS on you Machine.

After installing Node js then you need to install one more thing it’s create-react-app. Create react app is a tool it’s built by facebook to help you build React Application.

How to install Create React App ?

After installing Node JS, open your Terminal / Command Prompt and run this command – npm install -g create-react-app. This command will install create-react-app tool Globally on your Machine.

Step – 1
After complete the installation now open your Terminal or command prompt and go to the folder or desktop, using cd path where you want to create your Very first React Application.

Now type on your terminal create-react-app navbar navbar. navbar is our app name or you can also give other name.


Step – 2
Now go inside the navbar folder using cd navbar and then run npm start command on your terminal for checking that your app is running correctly or not.

After that you need to install react router dom package. to install the react router dom package open terminal and select the navbar folder and run this command npm install --save react-router-dom.


Step – 3
Now we will ready to create our app. before we creating our app let’s take a look at our source(src) folder structure.

Structure of the src folder
structure of the source folder


Step – 4
Files creation

First you create components folder inside the src folder.

inside the components we’ll create four components About.js, Contact.js, Home.js and Navbar.js. So Let’s create those components –

About.js

//About.js
// this component for about page
import React, { Component } from 'react';
class About extends Component{
    render(){
        return(
            <div>
                <h1>Hello About Page</h1>
            </div>
        );
    }
}
export default About;

Contact.js

//Contact.js
// this component for contact page
import React, { Component } from 'react';
class Contact extends Component{
    render(){
        return(
            <div>
                <h1>Hello Contact Page</h1>
            </div>
        );
    }
}
export default Contact;

Home.js

//Home.js
// this component for home page
import React, { Component } from 'react';
class Home extends Component{
    render(){
        return(
            <div>
                <h1>Hello Home Page</h1>
            </div>
        );
    }
}
export default Home;

Navbar.js

//Navbar.js
import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';

class Navbar extends Component {
    render(){
        return(

            <nav className="navBar">
                <ul>
                    <li><NavLink exact to="/">Home</NavLink></li>
                    <li><NavLink to="/about/">About</NavLink></li>
                    <li><NavLink to="/contact/">Contact</NavLink></li>
                </ul>
            </nav>  
       
        );
    }
}

export default Navbar;

Step – 5
After creating the above components, now time to create our App.js, index.js components and index.css file.

App.js

//App.js
import React, { Component } from 'react';
import Navbar from './components/Navbar';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';


class App extends Component {
  render() {
    return (

      <BrowserRouter>
      <div className="App">
        <Navbar/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/about" component={About}/>
          <Route path="/contact" component={Contact}/>
        </Switch>
      </div>
      </BrowserRouter>
      
    );
  }
}

export default App;

index.js

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

index.css

//index.css
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.navBar ul{
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
  width: 100%;
  background-color: #333;
  border: 5px solid #333333;
  
}
.navBar ul a{
  text-decoration: none;
  color: #999;
  display: block;
  padding: 15px;
  margin: 0 5px;
  
}
.navBar ul .active, .navBar ul a:hover{
  background: #FFF;
  color: #222;
}

Completed. Now run your app by running npm-start command


Click here to learn more.

LEAVE A REPLY

Please enter your comment!
Please enter your name here