reactstrap

Stateless React Components for Bootstrap 4.

Getting Started

Follow the create-react-app instructions up to the Adding Bootstrap section and instead follow the reactstrap version of adding bootstrap.

$3

``
npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start
`

Then open http://localhost:3000/ to see your app. The initial structure of your app is setup. Next, let's add reactstrap and bootstrap.

$3

Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:

`
npm install --save bootstrap@4.1.1
npm install --save reactstrap react@^16.3.2 react-dom@^16.3.2
`

Import Bootstrap CSS in the `src/index.js` file:

`js
import 'bootstrap/dist/css/bootstrap.css';
`

Import required reactstrap components within `src/App.js` file or your custom component files:

`js
import { Button } from 'reactstrap';
`

Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render
method. Here is an example App.js redone
using reactstrap.

$3

##### Required Peer Dependencies

These libraries are not bundled with Reactstrap and required at runtime:

* react
* react-dom

##### Optional Dependencies

These libraries are not included in the main distribution file reactstrap.min.js and need to be manually
included when using components that require transitions or popover effects (e.g. Tooltip, Modal, etc).

* react-transition-group
* react-popper

$3

If you prefer to include Reactstrap globally by marking reactstrap as external in your application, the
reactstrap library provides various single-file distributions, which are hosted on the following CDNs:

* cdnjs
`html





`

* unpkg
`html





`

> Note: To load a specific version of Reactstrap replace 6.0.1 with the version number.

#### Versions

Reactstrap has two primary distribution versions:

1) reactstrap.min.js

This file excludes the optional dependencies – react-popper and react-transition-group.
This is the recommended approach (similar approach in Bootstrap's JavaScript components) for including
Reactstrap as it reduces the filesize and gives more flexibility in configuring needed dependencies.

Recommended use cases:

* Small, medium, or large applications
* Applications that do not use any transitions or popper components
* Applications that directly use react-popper or react-transition-group – Reactstrap and your application
will use the single global version included

2) reactstrap.full.min.js

This file includes the optional dependencies – react-popper and react-transition-group

Recommended use cases:

* Small applications


#### Example

`html