Introduction to React-Bootstrap
Tags: react, bootstrap, beginners, tutorial
Published: 2020-11-23 12:05:54

## Introduction

[Bootstrap](https://getbootstrap.com/) 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](https://reactjs.org/) 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](https://react-bootstrap.netlify.app/). 

[React-Bootstrap](https://react-bootstrap.netlify.app/) 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 
```javascript

<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

```javascript

<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``*

```javascript

npx create-react-app react-auth

```

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

```javascript

cd react-auth

```

* Install React-Bootstrap

```javascript

npm install react-bootstrap bootstrap

```

* Import bootstrap CSS file in the ``index.js`` file

```javascript

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

```javascript

import React from 'react'

export default function Register() {
    return (
        <>
            
        </>
    )
}

```

* Enter the following code in the ``return`` statement

```javascript

      <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:

```javascript

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

```

*You can also choose to do it individually like so:*

```javascript

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

```javascript

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
```javascript

    <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:

```javascript

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


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lml6u4qdyq936ld3w72j.JPG)

*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:*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pic57grbm1tjcz6fcrre.JPG)

Checkout the codes [here](https://github.com/EBEREGIT/react-auth/tree/React-Bootstrap-tutorial)

**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...