reactstrap-React-Bootstrap-4-components

Simple React Bootstrap 4 components https://reactstrap.github.io

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.

tl;dr

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

or, if npx (Node >= 6 and npm >= 5.2 ) not available

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.

Adding Bootstrap

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

npm install --save bootstrap
npm install --save reactstrap react react-dom

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

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

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

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.

Dependencies

Required Peer Dependencies

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

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

CDN

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:

<!-- Main version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js"></script>

<!-- All optional dependencies version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
<!-- Main version -->
<script src="https://unpkg.com/reactstrap@6.0.1/dist/reactstrap.min.js"></script>

<!-- All optional dependencies version -->
<script src="https://unpkg.com/reactstrap@6.0.1/dist/reactstrap.full.min.js"></script>

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.jsThis 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.jsThis file includes the optional dependencies – react-popper and react-transition-groupRecommended use cases:
    • Small applications

Example

&lt;!doctype html&gt;
  
    <!-- Required dependencies -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
    <!-- Optional dependencies -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.2.1/react-transition-group.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-popper/0.10.4/umd/react-popper.min.js"></script>
    <!-- Reactstrap -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js"></script>
    <!-- Lastly, include your app's bundle -->
    <script type="text/javascript" src="/assets/bundle.js"></script>

  

  

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

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

shares