My Phase 2 Project and Working with React Bootstrap

It looks like my phase 2 at Flatiron School is coming to a close. This phase was all about React, which I enjoyed quite a bit. There's always something exhilarating and, at the same time, a little exasperating about learning a "shortcut" after taking the time to learn something the hard way. One, of course, must learn the fundamentals before learning how to break them, so there's no misunderstanding there. But React, at the surface, certainly feels like a "shortcut" of sorts. A very welcome one at that.

But no shortcut is ever completely clean and React has its quirks and oddities to make it work smoothly. Thankfully, the ever-helpful community of programmers have come up with a variety of packages to help make even this "shortcut" easier and friendlier to use.

React Router is a great example, and one that I used extensively on this project. It gives functionality and illusion of paths in an SPA (single page application). Flatiron's curriculum taught React Router quite thoroughly, so I didn't have any issues implementing it.

This was not the case when I decided to try Bootstrap with my application, my old standby which I used in my phase 1 project. I've always liked the ease and styling of Bootstrap, so I thought it would be a nice challenge to apply it to my first Javascript framework.

I found during my research the perfect solution: React Bootstrap

React Bootstrap, as the name would suggest, was built from scratch specifically for React, doing away with dependencies like jQuery, but still retaining the classic Bootstrap styling and functionality.

Installing it was easy. After creating my app using create-react-app I just had to installing it, also utilizing NPM:

npm install react-bootstrap

The documentation suggest installing vanilla Bootstrap as well:

npm install bootstrap

Or you can combine both into a single line:

npm install react-bootstrap bootstrap

NPM will install both React Bootstrap and vanilla Bootstrap frameworks into your project as dependencies.

Once that is done, because React Bootstrap doesn't automatically ship with Bootstrap CSS, you must include this import line at the top of either or src/index.js or App.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

This will import all the styling you'll need to match React Bootstrap's blind spots.

Next, you'll need to start importing the components you'll be using in your app. These include things like buttons, cards, navbars and tables. There are two ways of doing this, and one is recommended over the other.

Firstly, and most simply, you can destructure out the component you need like this:

import { Button, Card, Navbar } from 'react-bootstrap';

However, the issue with this is it will instruct React to load the entire React Bootstrap library, potentially loading your app down and making it less efficient.

Best practice is to import each component individually on separate lines, thus avoiding importing the entire library unnecessarily. You can do so like this:

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Navbar from 'react-bootstrap/Navbar';

Not quite as pretty or succinct as destructuring, but certainly more ideal. The way I approached it, and the way it was recommended to me, was to use the destructuring method while I was developing my app, being able to quickly and easily slot in and out components as I needed them. But as I neared the end of production and the needed components were solidified, I rewrote my code to the individual import method.

Once these steps are done, you will be able to include these React Bootstrap components in the return of your own components just like any other JSX element.

For example:

import React from 'react';
import Button from 'react-bootstrap/Button';

function Example(){
return (
<h1>Hello!</h1>
<Button>Click Me!</Button>
)};

export default Example;

One of the issues I immediately ran across with React Bootstrap my app's usage of React Router. React Bootstrap has plenty of support for navbars, but React Router uses a specific <Link> or <NavLink> element that React Bootstrap has no reference to. A quick Google search and I found the community has plenty to provide yet again. In came the extremely specific and extremely useful React Router Bootstrap to solve this problem.

It's just as simple to install as all the others. One just needs to run this line if he or she is using the most current version of React Router:

npm install -S react-router-bootstrap

Although, because I was specifically using React Router v5, I instead ran this:

npm install -S react-router-bootstrap@rr-v4

React Router Bootstrap was in my project, and then to get that nice Bootstrap styling in my navbar, I just needed to wrap each of my <NavLink> elements in a React Router Bootstrap specific <LinkContainer> tag, importing it at the top of my component page just as I did any of my React Bootstrap components.

All this proves this community is constantly pushing and evolving to incorporate new technologies. Every issue I had, someone had already discovered a solution and presented it in a clean, understandable fashion. And when I ever felt confused, there were countless YouTube tutorials to fill in the gaps.

Phase 2 is finished. On to the next.