Using Bootstrap with ReactJs (The right way)

REACT AND BOOTSTRAP

If you have been in the space of front end web development, you already know that Bootstrap as a CSS framework and React as a JavaScript framework is a big deal and well if you didn’t, now you know. (If you don’t know what CSS or JavaScript is you might want to leave this article and go do dishes instead). Learning and implementing React can be a challenge, but as you would find out, is definitely worth the initial stress. React focuses on building a website, component by component. This allows your website code to look very structured, for example:

This is a complete webpage I built, of course, underneath these components lies quite the amount of hand-written code.

Bootstrap Professor

THIS IS WHERE ‘BOOTSTRAP’ COMES IN.

For reference, the page looks like this:

Bootstrap is many things but in this case, we will treat it as a library that allows us to import and use different components to create a user interface in our React applications. This saves a significant amount of time since the developers do not need to write everything from scratch.

I’m too excited to bore you with explanations, let‘s get into it

PRE-REQUISITES

• Make sure that you have npm installed on your computer.
• Visual Studio Code, which you can download from here.
• Knowledge of creating and importing components in React
• Basic knowledge of bootstrap classes
• A little desire to get blown away
• Link to the repository HERE

WHAT YOU WILL LEARN

• Using Bootstrap Components in React (reduces the number of classes you have to add)
• Bonus: Using Font Awesome Icons in React

Step 1 — Getting started

Navigate to your desired folder and create a React project by typing the following command in a terminal or cmd.

npx create-react-app cartpage-app

Please note that this build process may take some time depending on your internet speed.

Once the installation is complete, open the folder in your code editor. Then, type npm start to launch the development server. You can view the default React application by navigating to http://localhost:3000/ in your browser.

Step 2 — Installing the Bootstrap

We must install the Material-UI to access its different functionalities or components. Open your terminal, and ensure that you are inside your application’s master folder.

Then in your terminal install Material by typing the following command

npm install react-bootstrap@next bootstrap@5.0.2

Step 2.i — Installing Font Awesome

To get started you’ll need to install the following packages into your project using npm. Here are examples that install everything you need and the solid style of icons using each respective package manager.

npm i — save @fortawesome/fontawesome-svg-core
npm install — save @fortawesome/free-solid-svg-icons
npm install — save @fortawesome/react-fontawesome

For the sake of this project, this will be sufficient, but there are other installations needed for brand icons or others.

We can confirm that the above dependencies have been installed by checking in the package.json. This is shown below:

The final step is to import bootstrap files in our App.js like this:

Let’s break into components and see what we can do:

1. Navbar Component
2. Cart Item Component

STEP 3-BUILDING

3i. THE NAVBAR

The first thing is to create the navbar component and import it into our App.js file. Something like this:

Notice that the Nav.js is in a components folder and that is useful in importing it as done on line 2.

And now for the code:

BOOTSTRAP UI COMPONENTS

A complete list of components can be found here. What you need to know is that to import Bootstrap components the name of the component is usually the main name of the element tag as seen in the case of Navbar above. On line 16 in the image of the package.json the react-bootstrap installed is what we use in trying to extract a component.

Importing

The component has to be called with the ubiquitous import keyword in react and from the location ‘react-bootstrap/Componentas seen on Line 2 below:

This is as basic as it can get when it comes to using Bootstrap with React.

Now that we have that down let’s take things up a bit.

3ii. CARTITEM COMPONENT

NOTE:

• Once the main component has been imported, subsets of it do not need importing as well. For instance: Bootstrap cards have subset classes of card-body and card-title, these all follow, once the card is imported.
• The Naming convention for Bootstrap classes as React component is to put a dot after the component name using PascalCase as seen in ‘Navbar.Brand’ and ‘Card.Body’
• In importing multiple components from react-bootstrap the method used on line 10 is commonly used. i.e

import { Button, Container, Card, Image } from ‘react-bootstrap’;

The same ideology is used when importing font awesome icons. There is however one drawback: ”It can increase the amount of code you end up sending to the client.”

FONT AWESOME ICON COMPONENTS

When it comes to font awesome, as usual, all you need to know is the class name of the icon and the rest is a walk in the park.

Firstly as seen on lines 8 and 9, Font awesome has two imports, the component itself

import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’

and then the icon

import { faPlusCircle, faMinusCircle, faTrash, faLongArrowAltLeft } from ‘@fortawesome/free-solid-svg-icons’

It can be noticed that the icon names are similar to the normal classes used to call icons using the <i> tag, but its naming convention is also PascalCase. Here’s an example using the minus icon:

<FontAwesomeIcon icon={faPlusCircle} style={{ paddingBottom: ‘9px’ }} size=’2x’ className=’text-secondary’ />

Font awesome icons here are of five sizes, sm, md, lg,1x and 2x.

Have fun experimenting with this knowledge. Confidence comes by building