ReactでGithubのリポジトリブラウザを作ってみる (4)
前回の続き。
お題
今回のお題は、react-bootstrapを導入して見た目をそれなりにしてみます。
ビフォー・アフター
react-bootstrapの導入前後でどう変わったか。先に結論を。
導入前
導入後
だいぶ良くなりましたね。
react-bootstrapの導入手順
以下のコマンドで、react-bootstrapをインストールします。
$ npm install react-bootstrap --save
CSSは別途読み込んであげる必要がありますので、app/views/layouts/application.html.erbにstylesheet_link_tagを追加します。
<!DOCTYPE html>
<html>
<head>
<title>Github Repository Browser</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<!-- (*)↓を追加 -->
<%= stylesheet_link_tag 'https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
あとは、リファレンスを見ながらひたすら書き換えていく作業。
