react-paginateをBootstrap4で使う

## 概要
Reactでページネーションのコンポーネントを探していて、「react-paginate」というコンポーネントを発見したのですが、2019年5月時点でdemoコードがBootstrap4に対応していませんでした。ので、Bootstrap4に適応するように為のサンプルコードを記載します。

## 前提など
* Reactのバージョンは16.8.6を使用しています。また、Reduxを入れた状態で動作は確認しています。
* Bootstrapのバージョンは4.3.1を使用しています。また、Paginationの仕様については[Pagination · Bootstrap](https://getbootstrap.com/docs/4.0/components/pagination/)を参照ください。
* react-paginateは6.3.0を使用しています。react-paginateについては[react-paginate](https://www.npmjs.com/package/react-paginate)を参照ください。

## 表示イメージ
下記のようなイメージで検索結果のページネーションを表示させます。
<img width="551" alt="スクリーンショット 2019-05-10 2.28.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/88a10b9d-b01f-eccf-7e88-a53438dd9e74.png">


## コンポーネントの設定サンプル

```jsx:Component.js
import React from 'react';
import ReactPaginate from 'react-paginate';

const SearchApp = (props) =>
  (
    <div>
      <ReactPaginate
        pageCount={props.total_results / 20 | 0 + 1}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={props.handlePageClick}
        containerClassName='pagination'
        pageClassName='page-item'
        pageLinkClassName='page-link'
        activeClassName='active'
        previousLabel='previous'
        nextLabel='next'
        previousClassName='page-item'
        nextClassName='page-item'
        previousLinkClassName='page-link'
        nextLinkClassName='page-link'
        disabledClassName='disabled'
        breakLabel='...'
        breakClassName='page-item'
        breakLinkClassName='page-link'
      />
   </div>
)
```

## 設定の詳細
| 項目   　　　     |設定内容    | 補足           　                  |
|:-------------------|:----------|:----------------------------|
| pageCount        | 総ページ数                    | サンプルでは1ページ20件表示したいので、20で割って小数点以下を切り捨てて1を足してます。       　　|
| marginPagesDisplayed    | 終端に表示する件数     　　　　　　 | ー　　　　　　  　　　　       |
| pageRangeDisplayed           | 選択位置の前後で表示する件数　 　　　　　　 | ー　　 |
|onPageChange              |ページクリック時にハンドルするメソッド　　|こんな感じでページ数を受け取ります。indexは0から始まるので1足しています。<br/>  export const handlePageClick = (page) => {<br/>　　return {<br/>　　　type:'PAGE_CLICK'<br/>　　　select_page: page.selected + 1<br/>}};|
|containerClassName            | pageのulタグに設定するclass | Bootstrap4だとpagination      |
|pageClassName            | pageのliタグに設定するclass | Bootstrap4だとpage-item      |
|pageLinkClassName            | pageのaタグに設定するclass | Bootstrap4だとpage-link      |
|activeClassName            | 現在activeなpageに設定するclass | Bootstrap4だとactive      |
|previousLabel            | previousに設定するラベル名 | 任意      |
|nextLabel            | nextに設定するラベル名 | 任意      |
|previousClassName           | previousのliタグに設定するclass | Bootstrap4だとpage-item      |
|nextLinkClassName           | nextのliタグに設定するclass | Bootstrap4だとpage-item       |
|previousLinkClassName         | previousのaタグに設定するclass | Bootstrap4だとpage-link          |
|nextLinkClassName         | nextのaタグに設定するclass | Bootstrap4だとpage-link      |
|disabledClassName         | previous・nextが押せなくなった状態の表示 | Bootstrap4だとdisabled      |
|breakLabel         | pageの省略表示     | 任意        |
|breakClassName            | pageの省略表示のulタグに設定するclass | Bootstrap4だとpagination      |
|breakLinkClassName            | pageの省略表示のliタグに設定するclass | Bootstrap4だとpage-item      |