In this tutorial, we’ll create a simple React Navigation bar 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.
Follow the below steps to create this React Navigation bar app
Step – 1
After complete the installation now open your Terminal or command prompt and go to the folder or desktop, using cd path
Now type on your terminal – create-react-app navbar navbar. navbar is our app name or you can also give another 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. But before we creating our app let’s take a look at our source(src) folder structure.
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
// 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
// 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
// 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
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
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
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
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 about React router.
Read also:
