React Navigation Bar!
Tags: react, navigation
Published: 2019-02-08 17:53:26

---
title: React Navigation Bar!
published: true
description: A mostly straight-forward guide on how to make a navigation bar in React.
tags: #React #Navigation
---

<div class="tutorial"><p>I started learning react about a week ago, taking a Code Academy course, so please be patient with my potentially very ugly code below. I recently finished working on <a href="https://andersjr1984.github.io/portfolio/" rel="noopener noreferrer" target="_blank">my portfolio</a> and one of the most exciting elements that I created is the navigation system. I developed the navigation method with little to no guide, just the knowledge that I gained from my Code Academy courses. I wanted to make an easy to follow guide so that people new to React can make their own navigation bar, just like me! The code may look ugly to the React pro out there, but I also want to hear critiques of my code, so please feel free to comment!</p><br><ol><li>The first thing I did was create a static navigation bar with “Home”, “About Me”, and “Hobbies” in the main navigation list, then created a sub navigation list under “About Me” and “Hobbies”. This was simple HTML and CSS and there are about a million examples, so I will not be showing you my specific code. A good source on how to build a nav bar can be found at the <a href="https://www.w3schools.com/css/css_navbar.asp" rel="noopener noreferrer" target="_blank">w3schools.com website.</a></li><li>In the initiating ul tag I placed an event handler for an “onClick” event that sent you to the internal function this.handleClick.</li><li>I gave each clickable element a specific id that will later be evaluated to determine the page to show.<br><img src="https://andersjr1984.github.io/portfolio/static/media/EventHandler.b22a8030.png" alt="Event Handler"></li><li>I wrote the handle click function to send that specific id as a property to the parent element, but only if the associated element had an id. I had to use e.target.id to pull this information. I think I should have used a value instead of id, but for some reason I couldn’t get this to work.<br><img src="https://andersjr1984.github.io/portfolio/static/media/HandleClickFunction.11505f0b.png" alt="Handle Click Function"></li><li>I created the constructor and binded the handleClick function. Still not sure why these steps are required, I’ll need to continue doing research.</li><li>I rendered the NavBar in the header of App.js, then assigned the function this.changePage on a click event.<br><img src="https://andersjr1984.github.io/portfolio/static/media/NavBarOnClick.a3578335.png" alt="Calling function on a click in the NavBar"></li><li>I wrote the changePage function to take in a newPage element, then reset the page if the new page requested was different then the current page. I’ll show the code along with the constructor below.</li><li>I built the constructor and set the initial state to be the Home page, as well as binded the changePage function.<br><img src="https://andersjr1984.github.io/portfolio/static/media/AppConstAndChangePgFunct.eb9042ce.png" alt="App Const and Change Pg Funct"></li><li>Below the header, I created a new element to hold the contents of my page. Inside of this element, I called a function that will display my page.<br><img src="https://andersjr1984.github.io/portfolio/static/media/CallPageDisplay.ddf52991.png" alt="Calling Page Display"></li><li>I built the PageDisplay function on several if-else statements. One for each page, but I will only show you a couple because it is a lot of the same code (again, I can probably clean this up with more than a week’s worth of experience).<br><img src="https://andersjr1984.github.io/portfolio/static/media/PageDisplayReturns.b1835c50.png" alt="PageDisplay function"></li><li>I’d like to show you the whole code, but it is mostly straight forward, except what I did in the App component. Here is the App component for your viewing pleasure. Please let me know what you think!</li><br><img src="https://andersjr1984.github.io/portfolio/static/media/FullApp.e54ca31f.png" alt="The Full App Component"></div></ol>