Bootstrap is a well-known framework for fast developing websites and applications with a good-looking appearance. It's widely supported in several platforms and flavors.
Earlier this week, I started the web development of an app based on React. I searched for a ready-to-use package that included all the CSS classes that Bootstrap provides. I came across the React-Bootstrap package. A rebuilt version of this popular front-end framework for React.
The first thing that was a pleasant surprise to me was that, in addition to the CSS classes, it also includes its popular components. Furthermore, there is no external dependency on either bootstrap.js or jQuery. With React and React-Bootstrap installed, I had everything I needed.
Since I already know in-depth what the guidelines of developing with Bootstrap are, I only needed to learn how to include and use the components. So, for example:
<div class="container-fluid">
<div class="row">
<div class="col">content</div>
</div>
</div>
becomes in React:
import {Container, Row, Col} from 'react-bootstrap';
<Container fluid>
<Row>
<Col>content</Col>
</Row>
</Container>
"Bootstrap in any of its flavors, is always a very good solution for an initial fast and attractive frontend development."
Classic Bootstrap classes become component attributes. Events and React hooks are, of course, also supported.
Therefore:
<button class="btn btn-primary" onclick="handleSaveEvent">Save changes</button>
becomes:
<Button variant="primary" onClick={handleSaveEvent}>Save changes</Button>
As you may understand, this makes working with Bootstrap a piece of cake!
Another advantage of this package is that it seems to be updated on a regular basis. With short periods between the releases of the base version and this port, to React. This gives confidence in the library and ensures long-term support.
In my opinion, Bootstrap in any of its flavors, is always a very good solution for an initial fast and attractive frontend development. So why not use it with your React developments? If you know the original Bootstrap library, you already have a good head start, and you can type almost blindly knowing beforehand what the output is going to look like.
This review was written by Javi our Lead analist & Framework developer
