reduxを試してみた(3日目) - redux-boilerplateを使ってひな形を生成する #JavaScript

React.jsと組み合わせるfluxのライブラリreduxを試してみた。 このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。

対象読者

主に自分

今日のゴール

reduxのBoilerplateを試してみる
redux-devtoolsを試してみる

Boilerplate

Boilerplate(ボイラープレート)とは、package.jsonに予め必要なライブラリが定義されていたり、srcやdocs等、基本的なディレクトリ構成が定義済みだったりする、別名テンプレートプロジェクトのこと。

よくしらないけど、YaomenはBoilerplateを生成するツールじゃなかったっけ？と思って、YaomenのGeneratorにreduxのものがないか検索してみたらやっぱり見つかった。

こういうgenerator系のツールは、中身がよくわかってない初心者泣かせな気がする。まぁ、とりあえず試してみて、問題があればプロジェクト構成を変えていけばいいよね。

READMEに沿ってインストール作業を進める

$ npm install -g yo # Yaomenは導入済み
$ npm install -g generator-redux
$ mkdir learning-redux
$ cd !$
$ yo redux

Yaomenはプロジェクト生成時にカレントディレクトリの名前からプロジェクト名を取ってくるので、生成したいディレクトリの中に移動してから実行する。

プロジェクト名や紹介文、起動ポート等を設定すれば、プロジェクトが生成される。

サーバーの起動は、

$ npm start

で起動する。http://localhost:3000にChromeで接続すると、本体UIだけでなくdevtoolも含んだ状態で起動する。終了はCtrl+Cでプロセスを終了する。

Chromeで接続すると画面が表示されるのにSafariだと表示されない。どうもredux-devtoolsがSafariでは動かない。残念。package.jsonを開くと、scriptsのところのstartに環境変数DEBUGを追加しているのが見て取れるので、それをなくしてみるとSafariでも動いた。Hot Reloadingも快適だ。

package.json

{
  // ...
  "scripts": {
    "debug": "DEBUG=true node server.js",
    "start": "node server.js",
    "build": "webpack -p"
  }
  // ...
}

Bootstrapを当ててみる

react-bootstrapというモジュールがあるので、インストールする。

$ npm install --save react-bootstrap

このモジュールにはbootstrap本体は含まれていないので、それはそれでインストールする。

$ bower install bootstrap

react-bootstrapで追加されるコンポーネント群は、Componentページにまとまっている。

定義されているComponentが結構多いので探すのが大変。

例えばPageHeaderを使いたい場合は下記のようにする。

import {PageHeader} from 'react-bootstrap';

class Home extends Component {
  render() {
    ...
    return (
      <main>
         <PageHeader>Welcome {title}!</PageHeader>
         <button onClick={e => actions.changeTitle(prompt())}>
           Update Title
         </button>
      </main>
    );
  }
}

<main>で囲んでいるのは、JSXでコンパイルする時に2つ以上のコンポーネントを返せないため。仮に囲まないと、Adjacent JSX elements must be wrapped in an enclosing tagという例外が出る。囲むタグは<div>でも良いが、このHomeコンポーネントはアプリケーションのルートを表すタグなので、<main>としている。

試しにメニューを作成する

と思ったけどCSSが当たらない。次回はWebpackの使い方を学ぶ。

3日目に学んだこと

ReduxのBoilerplateを生成して動かすまでは簡単
Webpackがわからん。むずい。死ぬ。→Webpackについて学びました。
リンクをクリックした時のComponentの切り替えとかはどうやるの？→4日目はこちら - redux-react-routerを試す