Member-only story
How to Create a Navigation Bar and Sidebar Using React
Hello everyone! Shmoji here! Today, I am going to teach you how to create a functioning navigation bar using React. The navbar I focus on will be a sidebar because I did not want to focus on a header this time. However, there will be a functioning header in the project just like you see in the picture below.
This tutorial follows my YouTube tutorial. If you just want the code, here is the GitHub repository and please follow if it helps.
First of all, you need to open the command line and make sure you have npm downloaded:
npm --versionYou can download npm here.
Now go into a folder where you would like to store your project. I keep mine in a ReactWorkspace folder:
cd ReactWorkspaceCreate your React app:
npm init react-app navbar-tutAfter that is done, you want to open your project in an IDE. I use Visual Studio Code (VSC) because it is amazing, but feel free to use whatever you like. If using VSC, open your project by typing:
cd navbar-tut
code .So, we have this basic React app template. To run your web application and see what your current website looks like, type this in your terminal:
npm startThe browser appears showing it worked, yay. Time to set up some basic stuff.
Go into package.json and paste these dependencies in there:
"bootstrap": "^4.3.1",
"react": "^16.10.2",
"react-bootstrap": "^1.0.0-beta.14",
"react-dom": "^16.10.2",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"styled-components": "^4.3.2"Now actually install these dependencies by opening a terminal and typing:
npm installCool. Paste this link in the <head> tag inside index.html. It is for Font Awesome icons:
<!-- Including Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
