【日記】Reactの勉強⑦

引き続きReactの勉強をやっていきます。
と言ってもまずはCSSフレームワークの調査から。

レスポンシブ対応のおすすめCSSフレームワーク5選【2020年版】 | CSS

CSSフレームワークのススメ - BULMAの導入と覚え書き - Qiita

CSSフレームワークのおすすめ10選と使い方を徹底比較！軽量で作業効率がアップするCSSフレームワークは？導入方法も紹介 | A-STAR（エースター）

沢山あるけど、やっぱり有名なのはBootstrapか。あとCSSだけのBULMAも使いやすそうな印象だった。

Bootstrap
Foundation
Semantic UI
Materialize
BULMA

今回はBootstrapについて、もう一歩踏み込んで調べていくことにします。

Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】デザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademyマガジン

Bootstrapのグリッドシステムについてまとめてみた - Qiita

Navbar

グリッドシステムのルールに則って、コンテンツを配置していく感じなんですね。このあたりは実際サンプル作って試してみたいところ。別途時間作ってやってみようと思います。

ここまではCSSフレームワークの調査でしたが、ここからGatsbyの勉強の本番。
Reactでbootstrapを使う方法としては、react-bootstrapを使うのがいいみたい。

Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」を紹介 | 会津ラボブログ | 会津ラボブログ

GatsbyにReact bootstrap導入とナビゲーションバー - Qiita

インストール

npm install --save react-bootstrap
npm install --save bootstrap

導入は、layout用のjsに以下を追加

import "bootstrap/dist/css/bootstrap.min.css"

実際にコンポーネントを使うのは次回にします。
今日は、Gatsbyの勉強というより、CSSフレームワークの勉強だった気がします。