Build a Website Series Part 1: Set up React with Routes and Navbar

Hey all, I am going to rebuild one of my bootcamp projects from the ground up now that I have better fullstack development skills. I am documenting the steps for making a fully functional and deployed site.

If you want to follow along, here is what you need to know:

Before starting:

• The tech stack is React and Node.js, so make sure you install these on your computer. I use VS Code and work on a Mac (though these steps should still work on a PC).

Install React
Install Node.js

• This tutorial also requires you be familiar with using your command line/terminal. If you are unsure about this, try searching for tutorials on how to use this. I have Zsh installed for my terminal, so keep that in mind when viewing some of this tutorial's screenshots.

• Here is my repo for this project

What Part 1 covers:

1. Create a new React project that includes packages for this specific project
2. Link the new project to a Github repo
3. Create simple pages as React components
4. Add routes(links) to these pages
5. Add a styled and functional Navbar to site

Step 1 -Create project and add packages-

A. Open the terminal inside of VS Code and make sure you are in the correct folder where you want to create the project (Type in ls to help see which folder you're in)

B. Create the React project. The last part shown below is the title of the project, so you don't have to type in "bird-banders" but it may make it easier to follow along in later steps if you follow my file names. In the terminal type:

npx create-react-app bird_banders

C. cd into the new react project

D. At this point, at any time you can run the site on your local host by typing npm start or yarn start in the terminal

Summary of commands:

npx create-react-app bird_banders
cd bird_banders
npm start

E. This React project needs some additional packages for the features in this tutorial.

React-Router-Dom is needed to create navigable pages (and will later allow us to have protected pages that can only be viewed by logging in).

Bootstrap is needed to give us some default styling to the website that would otherwise take hours and higher level skills.

Sass Styling makes styling so much easier and cleaner. Sass also allows us to easily import Bootstrap's styling into the project.

In your terminal in the project type:

npm install --save react-router-dom

npm install react-bootstrap bootstrap

npm install node-sass --save

Example of what it should look like:

F. Inside of src folder, rename App.css to App.scss and in this file add at the top:

@import 'node_modules/bootstrap/scss/bootstrap'; // existing bootstrap import

You may need to type npm run build in order for React to put all this together.

Step 2 -Set up Github repo-

A. It is important to set up a remote repo for backup and tracking your code changes and implementations. It is very simple, if you already have an account just go to: https://github.com/new
Otherwise, make an account first then go to the above link.

B. React automatically creates a local repo, so to add it to GitHub, just follow these steps (but with your own link) in your VS Code terminal:

On a side note, its been a while since I linked my github account with my terminal, so if you've never set that up before, you may have to do some additional steps on your terminal

C. Go to the GitHub project page to make sure your local project successfully saved to Github

D. To begin coding, in your VS Code terminal open the react project folder. Since I have Zsh installed, I just type code . in the terminal

Now the sidebar in VS Code should look like this:

Step 3 -Create simple pages as React components-

A. You may have noticed that if you start the server, there is a default React page with a rotating icon. I like to start with a clean slate, so open the App.js file and we'll remove the unnecessary lines, so it should look like this:

import React from 'react';

function App() {
  return (
    <div>

    </div>
  );
}

export default App;

B. When I build a somewhat complex site I organize a design document and sketch in a notebook. I have a list of core functionalities the site needs and like to start off with a basic navigable site. After that I fill in each page and functionality. I’ve decided to implement the navbar and routes first.

Note- the design doc is not complete. I just add as I go but it helps me get a sense for what all needs to be done and it can give you an idea of what tutorials will happen in the future.

C. For the first pages let’s start with:

Home
UserProfile
Organization
Organizations

Right click src and add new folder called pages

D. Inside of the pages folder, create new js files with the names of your pages (listed above). When you're done the sidebar should have this:

E. Fill in the base code for each component, since they’re all pages they’ll be pretty similar. I am using hooks for this project, so we will not be using classes, but rather functional components. Below is what each page component contains, just make sure to name the function and export correctly.

import React from 'react'

function Home() {
    return(
        <div>
            <p>Home page</p>
        </div>
    )
}

export default Home

Step 4 -Add routes(links) to pages-

A. Now that the pages exist, we want to be able to actually see these pages in the browser and ideally with the correct url. An easy way to do this is by adding Routes via the React-Router-Dom package. To do this, open App.js and starting on line 2 add:

import {BrowserRouter as Router, Route} from 'react-router-dom'

import Home from './pages/Home';
import Organization from './pages/Organization';
import Organizations from './pages/Organizations';
import UserProfile from './pages/UserProfile';

B. Now we've essentially 'activated' the router functionality and imported each page into the app. Now we want to be able to render the pages. Inside of return (which is where things get rendered), add the Router component like so:

<Router><Router/>

C. Inside of the Router component, add each page route. The general pattern is:

<Route path='pathname'>
    <Name of page component/>
<Route />

And make sure to only ever have ONE Router component. You can have many routes, but only one Router.

The end result for App.js should look like this:

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom'

import Home from './pages/Home';
import Organization from './pages/Organization';
import Organizations from './pages/Organizations';
import UserProfile from './pages/UserProfile';

function App() {
  return (
    <Router>
      <Route exact path='/'>
        <Home/>
      </Route>
      <Route path='/organization'>
        <Organization/>
      </Route>
      <Route path='/organizations'>
        <Organizations/>
      </Route>
      <Route path='/UserProfile'>
        <UserProfile/>
      </Route>
    </Router>
  );
}

export default App;

Now, as long as you type in the /pagename on your browser, you should see the correct component.

However, that’s obviously not an ideal way to navigate through a site, hence the navbar is needed.

Step 5 -Navbar-

A. We are on the home stretch for this tutorial! Adding the navbar is pretty easy. Within src, create a new folder called ui-components, and inside that create a js file called Header.

Here is what the sidebar should look like now:

B. This Bootstrap navbar page can help you learn more about how they work. I am only including Home and Organizations in the navbar. This is what the Header component contains:

import React from 'react'
import { Nav, Navbar } from "react-bootstrap";
import { Link } from 'react-router-dom'

function Header() {
    return(
        <Navbar className="w-auto p-3 fixed-top" collapseOnSelect expand="lg" bg="dark" variant="dark">
            <Navbar.Brand as={Link} to="/">BirdBanders</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="mr-auto">

                </Nav>
                <Nav>
                <Nav.Link as={Link} to="/">Home</Nav.Link>
                <Nav.Link as={Link} to="Organizations">Organizations</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default Header

C. Put the header in the app. To do this, inside of App.js near the top add: import Header from './ui-components/Header';

D. Inside of App.js in the Router component, put <Header/> at the top. Since it should be on every page, it does not go inside of a Route component.

<Router>
      <Header/>
      <Route exact path='/'>
        <Home/>
      </Route>
etc...
<Router />

E. The very last thing is to fix how the navbar is covering the top of each page, and thus covering the page titles in the browser. In App.js, surround the <Header /> component with a div. Add a className of navbar to it.

<div className='navbar'>
  <Header/>
</div>

F. In App.scss and add:

.navbar {
  padding-bottom: 69px;
}

Awesome... now everything should be in working order! You now have a React website with pages and a working navbar. Consider this a massive playground now for you to experiment with.

Let me know how this tutorial was or any questions/comments you have. Next up will be setting up the backend.

Next tutorial >>