A Guide: A Django-REST-React-Redux Blueprint (Part 6)

React, react-bootstrap, Bootstrap 4

Photo by pepe nero on Unsplash

This article is a follow up on the 5 parts about my Full-Stack Blueprint. Part 5 ended with the deployment to AWS ECS, so basically the stack is ready to roll for a development cycle. However, one thing bothered me because it does not look good.

When building the Login-Form I included the Bootstrap 3 CSS sheet within frontendapp/templates/frontend/index.html

And used some classNames like <div className="col-md-offset-5 col-md-3"> in order to make the Login-Form look (a very litttle bit) nicer. However, this does add a dependency to the page. Since we use webpack to bundle our frontend and one of the initial reasons to use webpack is to decrease dependencies, this looks very wrong to me.

So let’s cut this flaw!

First thing to do (which I should have done), is to take a look at the documentation of Bootstrap 4. To include the CSS Sheet we will have to install bootstrap via npm

$npm install bootstrap

and add this import

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

into our entry point, which is frontendapp/src/index.jsx . And be aware, that we now need style-loader and css-loader to include css in our bundle. Therefore,

$npm install --save-dev style-loader css-loader

and add a new rule to our webpack.config.js regarding css :

Ok good, now delete the <link> tag inside index.html template to get rid of the dependency.

For the next step I want to introduce react-bootstrap. Working with react-bootstrap has 2 major advantages inside a React project:

1. “React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery”
2. You will get rid of a lot classNames and div’s, which will make your code more readable (will see this in the new login.jsx).

Hint: There are two different react-bootstrap branches, one targeting Bootstrap 3 the other Bootstrap 4. This can be a little bit misleading, therefore I’m gonna write the differences down here:

• react-bootstrap for Bootstrap 3:

Documentation : https://react-bootstrap.github.io/getting-started/introduction

Installation:$ npm install react-bootstrap

• react-boostrap for Bootstrap 4:

Documentation: https://react-bootstrap.netlify.com/getting-started/introduction

Installation: $ npm install react-bootstrap@next

Since we use Bootstrap 4, use the latter.

Now we can rewrite the Login component with the components delivered by react-bootstrap. For a basic layout I used Container/Row/Col and Form/Button for the form. Resulting in the polished up version (with zero div’s):