React and Bootstrap 4 —Setup & Navigation

Published in: December 2017. Last update: August 2018

I’ve only started learning React couple of weeks ago and I would love your feedback - please use the form at the end of this article.

React and Bootstrap are 2 web frameworks often used together. However, their integration is not that straight-forward — whilst the CSS part is easy to add, the JS part of Bootstrap contradicts with the core React principle of “unidirectional” data flow.

The React-Bootstrap library is an attempt to solve this issue, but it’s based on an old version of Bootstrap (version 3).

However, adding Bootstrap and creating our own ‘components’ is pretty straightforward and good exercise ;)

Table of contents

I. Setup

1.1 Creating a new React app
1.2 Adding the Bootstrap framework
1.3 Integrating the Bootstrap CSS
1.4 Adding a Bootstrap container
1.5 Starting the development server
1.6 Cleaning up

II. Implementing the Bootstrap navigation

2.1 Navigation React Component
2.2 Bootstrap navbar
2.3 Abstracting the NavItem
2.4 Active NavItem
2.5 Disabled NavItem
2.6 Using the NavItem
2.7 Adding a NavDropdown
2.8 Adding state to NavDropdown

I. Setup

1.1 Creating a new React app

The simplest way to create a React app is by using the official Create React App (I’ve named my app blog):

$ create-react-app blog
...
$ cd blog

1.2 Adding the Bootstrap framework

We’re now going to add the Bootstrap framework via npm:

$ npm install --save bootstrap
...
+ bootstrap@4.1.3
added 1 package in 7.617s

NB: As version 4 is out of beta, a version doesn’t need to be included for bootstrap.

1.3 Integrating the Bootstrap CSS

Part of the libraries install under node_modules, we have bootstrap, containing a distribution folder with the CSS we’ll need:

We’ll link this file inside our index.js:

1.4 Adding a Bootstrap container

As we’re now using Bootstrap, we’ll add a container as the main div for our app:

1.5 Starting the development server

Let’s see how things work together now; run npm start in the project folder:

$ npm start

1.6 Cleaning up

Before we proceed to the next step, let’s tidy things up a bit:

• in App.js, remove the reference to the logo — i.e. the line:

import logo from ‘./logo.svg’;

• remove the logo source file: src/logo.svg
• remove the existing css from App.css

II. Implementing the Bootstrap navigation

Let’s add the Bootstrap navbar component to our app.

2.1 Navigation React Component

Create a components folders inside src and a new Navigation.js file. We’ll create a simple React Component which we’ll reference from our App:

And the result:

2.2 Bootstrap navbar

From here onwards, we’re going to be working exclusively inside the Navigation.js file. To start with, let’s replace the current output with a navbar as found on the Bootstrap documentation page:

As we’re working with JSX, there are couple of things to change:

• the input tag on line 36 needs to be closed:

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />

• class attributes should be renamed to className (use find & replace)
• links should not point to # so replace that with /

The end result is in the gist below:

And the result in the browser:

2.3 Abstracting the NavItem

We’re going to abstract the entries in the navbar into a component. The current HTML looks like this:

In Navigation.js, above the Navigation component we’ll create a functional component named NavItem that needs 2 props: name & path.

2.4 Active NavItem

The link for the current page differs from the others:

• the li element gets an extra active class

We’ll compare [line 3] the current path [line 2] to the props.path and compose a liClassName constant that we’ll use as the className for the list element in the returned JSX:

• the link ‘content’ has a current marker

We’ll add extra content if current path is equal to props path (line 8 below):

NB: The span tag is inside brackets and not quotes so it gets treated as JSX code.

2.5 Disabled NavItem

The disabled element has an extra class “disabled” in the a element of the list item. We’ll pass the disabled status as a prop and use it to compose a new aClassName constant [line 4] to use as className for the link [line 7]:

2.6 Using the NavItem

We can now replace almost all li elements with NavItems (we’ll deal with the dropdown later on). Here is the Navigation.js file after replacement (notice lines 31–33):

2.7 Adding a NavDropdown

Let’s now deal with the dropdown — notice that the dropdown content doesn’t show at the moment since we didn’t include any of the Bootstrap JS.

As the dropdown has state (open or closed) we can’t use a functional component. For props, we’ll need a name — we’ll also use any child element included. Belong the newly added NavItem but before the Navigation class, add:

We can now use the component inside the Navigation:

2.8 Adding state to NavDropdown

The dropdown is shown is a show class is added to the div with the dropdown-menu class. We’ll use the component constructor to set the initial state and add an extra show class:

You can set the initial value of isToggleOn to true to see the menu expanded.

We’ll next add an action to NavDropdown:

and use it for when the dropdown link is clicked. Here is the complete NavDropdown component:

That’s all Folks!

Now we have the dropdown working and the full navbar operational.

The code for the full project is available on Github: https://github.com/pardel/react-bootstrap4-part1