React-Bootstrap

React-Bootstrap is a library of reusable front-end components. You'll get the look-and-feel of Twitter Bootstrap, but with much cleaner code, via Facebook's React.js framework.

Let's say you want a small button that says "Something", to trigger the function someCallback. If you were writing a native application, you might write something like:

button(size=SMALL, color=GREEN, text="Something", onClick=someCallback)

With the most popular web front-end framework, Twitter Bootstrap, you'd write this in your HTML:

<button id="something-btn" type="button" class="btn btn-success btn-sm">
  Something
</button>

And something like$('#something-btn').click(someCallback);in your Javascript.

By web standards this is quite nice, but it's still quite nasty. React-Bootstrap lets you write this:

<Button bsStyle="success" bsSize="small" onClick={someCallback}>
  Something
</Button>

The HTML/CSS implementation details are abstracted away, leaving you with an interface that more closely resembles what you would expect to write in other programming languages.

A better Bootstrap API using React.js

The Bootstrap code is so repetitive because HTML and CSS do not support the abstractions necessary for a nice library of components. That's why we have to write btnthree times, within an element called button.

The React.js solution is to write directly in Javascript. React takes over the page-rendering entirely. You just give it a tree of Javascript objects, and tell it how state is transmitted between them.

For instance, we might tell React to render a page displaying a single button, styled using the handy Bootstrap CSS:

var button = React.DOM.button({
  className: "btn btn-lg btn-success",
  children: "Register"
});

React.render(button, mountNode);

But now that we're in Javascript, we can wrap the HTML/CSS, and provide a much better API:

var button = ReactBootstrap.Button({
  bsStyle: "success",
  bsSize: "large",
  children: "Register"
});

React.render(button, mountNode);

React-Bootstrap is a library of such components, which you can also easily extend and enhance with your own functionality.

JSX Syntax

While each React component is really just a Javascript object, writing tree-structures that way gets tedious. React encourages the use of a syntactic-sugar called JSX, which lets you write the tree in an HTML-like syntax:

var buttonGroupInstance = (
  <ButtonGroup>
    <DropdownButton id="dropdown-btn-menu" bsStyle="success" title="Dropdown">
      <MenuItem key="1">Dropdown link</MenuItem>
      <MenuItem key="2">Dropdown link</MenuItem>
    </DropdownButton>
    <Button bsStyle="info">Middle</Button>
    <Button bsStyle="info">Right</Button>
  </ButtonGroup>
);

React.render(buttonGroupInstance, mountNode);

Some people's first impression of React.js is that it seems messy to mix Javascript and HTML in this way. However, compare the code required to add a dropdown button in the example above to the Bootstrap Javascript and Components documentation for creating a dropdown button. The documentation is split in two because you have to implement the component in two places in your code: first you must add the HTML/CSS elements, and then you must call some Javascript setup code to wire the component together.

The React-Bootstrap component library tries to follow the React.js philosophy that a single piece of functionality should be defined in a single place. View the current React-Bootstrap library on the components page.

Introduction

A better Bootstrap API using React.js

JSX Syntax