Implementing Bootstrap and a simple NavBar in a React application.

My final project at Flatiron called for me to build a SPA(Single Page Application) written in JavaScript ES6 as much as possible. I chose to build an investment tracker app where users can record/track how much they have invested across different investment accounts. The requirements called for some minimal styling to be added either with CSS or with Bootstrap. Once my app was at MVP I decided I would add a Navbar for ease of use. This gave me an opportunity to incorporate Bootstrap.

First things first, you will need to have and open your React app. To start off you have to add react-bootstrap to your package.json file by running:

Run command in terminal.

Make sure to check it has installed in your package.json file.

Check Bootstrap has installed correctly.

Once Bootstrap has installed make sure to import it at the top of your index.js file.

Import at the top of index.js.

Then you need to import the stylesheet to your index.html file. My suggestion would be to import it just above the <title> tag.

Supplied by React-Bootstrap docs.

Now by navigating the React-Bootstrap documentation by going to Components and scrolling down to NavBar, the code necessary is supplied for you.

In React-Bootstrap docs.

If you copy paste this code in to your App.js file inside the render function inside the <div> tag then you’re almost there!

This will throw an error which has a fairly simple but slightly time consuming fix. To start off there is one more thing you need to import at the top of your App.js file.

Import this at the top of the App.js file.

The last step is that you need to add “ReactBootStrap.” in front of every instance of “Navbar” or “Nav.” There may be a few things in the Navbar that you wish to comment out until you have implemented that function.

Example of Navbar with certain functionality commented out for the time-being.

You’re able to put links in your Navbar to navigate to certain components. Like shown above! The very top line of code allows you to manipulate the Navbar’s responsiveness through the “expand=” property, as well as customise the colour through playing with the “variant=” and “bg=” properties.

Almost finished training as a full-stack web engineer. Working with JavaScript and Ruby on Rails.