reactstrap【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する

本日は、reactstrapのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。

reactstrap - React Bootstrap 4 components

実際に使ってみる

公式ドキュメント通りにcreate-react-appして、reactstrapとbootstrapを導入して使いました！
bootstrapおなじみのボタンが出力されました。（見にくくてすみません）

このドキュメントは、bootstrapをReactのコンポーネントとして扱えるようにするためのライブラリのようです。

こちらのページで、見慣れたbootstrapのアラートやボタンの一覧を見ることができました。
reactstrap.github.io

似た用途のライブラリでSemantic UIというものもあり、こっちの方が若干おしゃれな感じがしますが、
どっちも使ってみた感想としてはBootstrapの方が命名規則がわかりやすくCSSがごちゃごちゃしにくいと思いました。（私の使い方がイケてないだけかもです）

余談ですが、以下のエラーでちょっとハマりました。

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "reactstrap" under a package
npm ERR! also called "reactstrap". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/miyamizu/.npm/_logs/2020-02-05T00_05_23_337Z-debug.log

これは私がプロジェクト名をreactstrapにしていたからです...　ライブラリと同じプロジェクト名はつけちゃダメだそうです。
ちなみに、reactstrap-miyamizuでもダメだったので一部でもライブラリと同じ名前だとダメみたいです。次から気をつけます。

3行以内でまとめる

reactstrapを導入すると、

• bootstrapのCSSがReactでコンポーネントとして扱えるようになる。

以上です！