Introduction to React-Bootstrap

Introduction

Bootstrap has stolen the heart of many developers over the years. This is understandable because it helps developers write shorter and cleaner codes, it saves time and is sophisticated enough to handle a lot of developers concerns especially when it comes to those who do not like writing CSS.

We also have React which has become one of the most popular frontend framework. It has a very large community by it.

Well, there is more good news.

To ensure even easier and faster development with React, Bootstrap has gone ahead to develop a new code base called React-Bootstrap.

React-Bootstrap is still Bootstrap but it has been designed to fit in properly to React. This ensures that there is little or no bug while building your application.

Why Use React-Bootstrap instead of Bootstrap

1. React-Bootstrap has been built and tailored to React applications. This means that it is more compatible and less buggy.

2. React-Bootstrap codes are generally shorter than Bootstrap codes. For example, if you want to create a 3-grid column in one row, you will do it the following ways

• Bootstrap

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      two of three columns
    </div>
    <div class="col-sm">
      three of three columns
    </div>
  </div>
</div>

• React-Bootstrap

<Container>
  <Row>
    <Col>One of three columns</Col>
    <Col>two of three columns</Col>
    <Col>three of three columns</Col>
  </Row>
</Container>

How to Use React-Bootstrap

I want to walk you through the steps to create a simple form in React using React-Bootstrap.

Let's get to it!

Setting Up Our Project

• Create a React project and name it react-auth. There will be a continuation of this article as React Authentication

npx create-react-app react-auth

• Open the project in a terminal and navigate into the project folder. I will be using VS Code

cd react-auth

• Install React-Bootstrap

npm install react-bootstrap bootstrap

• Import bootstrap CSS file in the index.js file

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

Creating a form

• Create a new file in the src folder. Name it: Register.js

• In the file, start with the following code
  

import React from 'react'

export default function Register() {
    return (
        <>

        </>
    )
}

• Enter the following code in the return statement

      <h2>Register</h2>
      <Form>
        {/* email */}
        <Form.Group controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Enter email" />
        </Form.Group>

        {/* password */}
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>

        {/* submit button */}
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>

• Now, we have to inform bootstrap that we want to use the Form and Button components. So we import them at the top like so:

import { Form, Button } from "react-bootstrap";

You can also choose to do it individually like so:

import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

• Now let's show our Register component on our page. First, replace the code in the App.js file with the following code

import { Container, Col, Row } from "react-bootstrap";
import "./App.css";

function App() {
  return (
    <Container>
      <Row>

      </Row>
    </Container>
  );
}

export default App;

• In the Row component, enter the following

    <Col xs={12} sm={12} md={6} lg={6}></Col>
    <Col xs={12} sm={12} md={6} lg={6}></Col>

This will ensure that there are two columns in large and medium devices while there will be one column on each row on small and extra small devices

• In the first column, Add the Register Component we created and import it at the top of the file. Our App.js file will look like this:

import { Container, Col, Row } from "react-bootstrap";
import Register from "./Register";

function App() {
  return (
    <Container>
      <Row>
        <Col xs={12} sm={12} md={6} lg={6}>
          <Register />
        </Col>

        <Col xs={12} sm={12} md={6} lg={6}></Col>
      </Row>
    </Container>
  );
}

export default App;

• Run npm start in the terminal and see the output on the browser. This is mine

You will notice that only one column is taken. Now your job is to create a LOGIN component with the same code as in the REGISTER component. The add it in the second column. Checkout my output below:

Checkout the codes here

Walah!!! You can now create React applications faster leveraging on React-Bootstrap.

Conclusion

We have so far seen the usefulness of React-Bootstrap over Bootstrap. We have also seen how to use it.

I urge you to take time and look into the documentation. There is a lot of hidden gems there. Only practice can help you dig out the awesome gems in React-Bootstrap.

We will be diving into an Authentication series for react soon. It will be a continuation of this article. Stick around.

Thank you for reading...