Using React Bootstrap for Stylish Apps

I have recently been working on a small SPA app that allows users to add and save their favorite recipes. This app uses react and redux for the front end and a simple rails API for the back end. In order to style some elements in this app easily and quickly I used React-Bootstrap npm library to quickly generate styled elements. Like any other npm library React-Bootstrap can be installed by using the command bellow in the terminal at the project directory:

npm install react-bootstrap bootstrap@lastest-version-number

Once the library is installed developers can simply import the desired components where they are needed in the react app provided they have some CSS exiting for the app. These components include Card, Button, Nav and many others. There are two ways to import components:

import Component from ‘react-bootstrap/Component’;

or

import { Component } from ‘react-bootstrap’;

By importing only the necessary components rather than the whole library, apps will be less weighed down with code and run more quickly and smoothly. This also allows the developer to easily access the styling they want directly in the component that renders it. In my app I used the card component to render a series of cards for each recipe created by the user. At the top of my Recipe component I imported the card like so:

import { Card } from ‘react-bootstrap’

And then rendered the card in my react component as bellow:

<Card style={{ width: ‘200px’}}>
<Card.Img variant=’top’ src={props.photo} alt=”Image not Found”/>
<Card.Body>
<Card.Title>{props.title}</Card.Title>
</Card.Body>
</Card>

Here the card component is rendered as a container and the several attributes are used within the component to render a card with an image at the top and a title beneath in the body.

Lastly if more extensive CSS is wanted, the developer can import a simple stylesheet like so:

import ‘bootstrap/dist/css/bootstrap.min.css’;

Or use react-bootstrap in conjunction with vanilla-bootstrap or other styling, to make the app look however the developer desires.