Beginner React Nav Bar Tutorial

Step-by-step

Recently I learned React and used it to completely rebuild my personal site. You can see the results here, if you’re curious about what a designer/artist/writer does when learning react: jamesbuckhouse.com

Learning React is, well, hard… so I developed a new method of self-guided learning for code: Coding Backwards. It’s a great way to learn about learning as you teach yourself a language by actively coding in it. It uses AI to help you take action, but also educational theory to ensure you learn as you do it. As a part of that project, I ended up coding a nice little nav bar component and thought I’d open source it.

I’ve added all the code to GitHub.

GitHub - Buckhouse/React-Nav-Bar-Tutorial: A tutorial for adding a nav bar component to your site…

Here is a step-by-step that walks you through how to recreate it.

Step-by-Step

Follow these steps to get a responsive React navigation bar running on your machine using React, TypeScript, and Vite.

1. Clone the Repository

First, clone the provided repository to your local machine. A repo is what Github calls a collection of files. If you are totally new to Github, ask AI to explain it to you. In short, it’s a way to save versions of your code as you work on it. Later, when you work in teams, you can also use it to mix everyone’s code together. If that sounds like it might cause trouble, you’re right, but Github exists to help you wade through the trouble with as little trouble as possible. Cloning is just what Github calls making an official copy.

In your terminal…

git clone https://github.com/Buckhouse/React-Nav-Bar-Tutorial
cd react-navbar-tutorial

2. Set Up Your Development Environment

Check to see if you have Node.js installed on your computer. You can verify the installation by running:

node -v
npm -v

If Node.js isn’t installed, download it from nodejs.org.
Install all required dependencies by running:

npm install react react-dom react-router-dom
npm install -D vite @vitejs/plugin-react typescript @types/react @types/react-dom @types/react-router-dom

3. Project Structure

Now you need to make sure you have the following files in place. You should have gotten these when you cloned the repo. But just in case… verify your project structure matches this exactly:

react-navbar-tutorial/
├── index.html
├── src/
│ ├── main.tsx
│ ├── App.tsx
│ ├── components/Navbar.tsx
│ └── styles/Navbar.css
├── vite.config.ts
├── package.json
└── package-lock.json

4. Customize the Files

Open the project in your favorite code editor. VSCode is standard, so if you don’t have an opinion, try it. If you want to go more new generation… try Cursor or Warp.

The main files in the component are the navbar.tsx and Navbar.css. You can think of the tsx as the content + functionality and the css as the expression of that content in a specific style.

Navbar.tsx:
Customize the menu links by editing the <Link> components. Change the names and the destination.

Navbar.css:
Adjust the CSS variables at the top to change colors, spacing, or fonts. I’m using root variables in the css, so you set it at the top

:root {
  --navbar-height: 64px;
  --text-color: #333;
  --hover-color: #666;
  --primary-color: #000;
  --primary-hover-color: #444;
  --bg-white: #fff;
  --spacing-xl: 24px;
  --container-width: 1200px;
  --transition-fast: 0.2s ease;
  --menu-font-family: 'Inter', sans-serif;
}

And then you can use these throughout your css. This means you can make changes in a single place, and it will get sent through the rest of your css. Example: you might have a bunch of parts that use the var — text-color and so to change the color of your text, you just change it in the root section. Pretty cool!

Notice the — transition-fast: 0.2s ease variable. Make this 0.5 for a slow and gentle animation. Make it 0.1 for a faster move.

App.tsx:
This is the main content and action of the component. You can change the number of menu items, their names, and their destinations. Here, I’ve assigned a page color for each of the destinations, so you can tell it’s working, even though it’s a nav bar for a blank site.

5. Test Your Navbar Locally

Start your development server:

npm run dev

Visit http://localhost:5173/ in your browser to test your responsive navigation bar.

6. Suggested Next Steps

Integrate the navbar into a larger existing React project by adding more components to your project, or bringing the navbar to one you already have. You might want to move the root variables into a styles/Global.css file that all of your components can use.

Hope this was fun. LMK if you add it or a version to your site.