Learning React Bootstrap: Part 1: Installing and Configuring

Learning React Bootstrap

React Bootstrap is a redesign of the popular Bootstrap front-end framework for use in React projects.


Installing

For any existing React project, the React Bootstrap library (and Bootstrap itself) can be added through NPM:

npm install react-bootstrap bootstrap

Once installed, its components can be accessed through importing them in a group or, more ideally, individually from a specified path. For example, to import the Button component exclusively, it would look like the following:

import Button from 'react-bootstrap/Button';

Alternatively, multiple components can be imported as a group:

import {Container, Row, Col} from 'react-bootstrap';

Configuring

As a library designed for React, React-Bootstrap needs one more additional resource: Bootstrap itself. As a primarily CSS library, it must be imported as in either “src/index.js” or “App.js” to make sure all CSS definitions are part of the project.

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

Once installed and configured, Bootstrap classes can be used as defined React-Bootstrap components:

import React from 'react';
import {Container, Row, Col} from 'react-bootstrap';

function App() {
  return (
   <Container>
     <Row>
       <Col>Column 1</Col>
       <Col>Column 2</Col>
     </Row>
   </Container>
  );
}

export default App;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.