ReactでBootstrapを使う
開発環境は、Windows 10 Pro(64bit) + npm 6.4.1。
https://react-bootstrap.github.io/
npm install react-bootstrap bootstrap
htmlファイルのheadタグ部分に、
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
を追加する。CSSファイルを入れないと、デザインが反映されません。
自分独自のCSSファイルは、上記のCSSファイルの後に読み込むこと。
Reactのファイル内に
import Button from 'react-bootstrap/Button'; // renderのreturn内にて。 <ButtonToolbar> <Button variant="primary">Primary</Button> </ButtonToolbar>
を追加する。
※注意点
作っている途中に、react-bootstrapを導入したら、リセットCSSが原因で、それまで書いていたデザインが崩れてしまった。できれば、最初から、導入すること。