ES6.today Articles

React & Bootstrap Grid

December 08, 2018

Twitter Bootstrap Grid

The codepen shown above is an example of using Twitter Bootstrap in the context of React. If you wish to see the responsive nature of the columns, you can either use your browser’s developer tools and click Mobile/Responsive view icon in the upper left corner or by using the key combination of command+shift+m (ie. “mobile view”). This will allow you to easily change the width of the screen - see this screen shot…

The HTML

This part is really boring…

Yep, that’s it - this is a react app, so most of it is JSX, not HTML. If you’re not familiar with JSX, it’s an XML-like javascript code that closely resembles HTML. This isn’t really the topic for this blog entry, so you’ll have to go to the React docs to read up on it if you want more information. The above HTML is simply the root element that React shoves all of it’s stuff into. So not really a lot to see here. Note that I did put an inline style on the main App div to keep the whole app from squishing down below 300 pixels width.

The React JavaScript

There we go. The above javascript has several distinct parts that are a lot easier to visualize when the code is in a collapsed state…

In the above code you’ll see three components

  • App
  • GridComponent
  • PageOverview

You’ll also notice two variables with a bunch of text

  • const infoText
  • const hipsumText

infoText

The first const variable is the text of the first column that explains what is going on in the grid layout.

hipsumText

The second variable “hispumText” is some Hiptser-ipsum with a shot of latin from hipsum.co, my favorite provider of random lorem ipsum filler text.

The only other piece of the javascript code that I haven’t mentioned yet is the call to the ReactDOM.render method that takes the React App component and puts it into the DOM. This is referred to as “bootstrapping the application” — not to be confused with the Bootstrap CSS library that we’re using for the styling.

The Components

App component

This is the main component that wraps the whole app. This is the “uber parent” that contains all of the other components in this example.

GridComponent

The GridComponent is a wrapper around the Bootstrap grid markup that renders the columns (or stacked boxes if your width is under 576px - this is what you’ll see on a mobile device). The component itself does not handle this part of the rendering - it’s a combination of the JSX markup with the CSS styling which contains breakpoint definitions to change specific styles at specific pixel widths. Here’s the CSS code that does this…

The comments in the CSS file are pretty self-explanatory. Specifically look for the @media directives and their corresponding min-width and max-width properties.

to be continued…


All things JavaScript and Front-end Development :: Editor - Matt Howey