Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

対象読者

  • 主に自分

今日のゴール

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

Boilerplate

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

よくしらないけど、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日目に学んだこと

freee
スモールビジネスのバックオフィス業務をテクノロジーで自動化し、日本のスモールビジネスを元気にする
http://www.freee.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした