まえがき

アルケミスト(Elixir使いのこと)でかつPhoenix使ってる人！！
Reactに興味有る方達。

scaffoldingツール「Fushicho（不死鳥）」をご存知だろうか？もちろん知ってますよね？
え？知らないの？

知るはずもない、僕が勝手に作ったので。

Fushichoとは

名前の由来はPhoenixをローマ字の日本語にしただけ。

Reactのコードを生成
Phoenix用
Don't repeat yourself (DRY)

ReactのCRUDのコードを書くのは面倒くさいです。
Phoenix用のReactのJavaSciptのコードを勝手に生成します。
Reactに対応したコードをAPIを見てから勝手に生成。
「API見てからReact構築余裕でした。」

brunchに対応しています。
※他のはあまりしらないので対応されていません。

PostgreSQLインストール

Homebrewを使用してPostgreSQLインストール。
※SQLiteならこんな文章書かなくて済むのですが、なぜか僕の環境では--database sqliteオプションをプロジェクト生成時に指定したらエラーになるのでPostgreSQLにしてます。
※当方はWinows使ってないので保証できませんので手順は載せません。Mac OS X前提です。（このQiita記事の編集リクエストすれば載せます。）

brew install postgresql

初期化(文字コード:UTF-8)

initdb /usr/local/var/postgres -E utf8

起動しておく

postgres -D /usr/local/var/postgres

Phoenixのインストール

まだの方は以下のコマンドで入れます。当方はWinows使ってないので保証できませんので手順は載せません。Mac OS X前提です。
※このQiita記事の編集リクエストすれば載せます。

brew install elixir
mix local.hex
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

プロジェクトの作成

mix phoenix.new student

※brunchを使うことを推奨していますので--no-brunchオプションをつけない前提です。使いたい方は自分でお願いしたいです。

以下のように依存を効かれたらYを押下。

Fetch and install dependencies? [Yn] Y

studentのパスに入っておく

cd student

Fushichoのインストール

mix archive.install mix archive.install https://github.com/shinriyo/fushicho/releases/download/v0.1.0/fushicho-0.1.0.ez

Fushichoの使い方

1. まずはAPIを作ります。

生徒の試験(Exam)モデルに教科(subject)と内容(body)のものを生成します。

mix phoenix.gen.json Exam exams subject:string body:text

API用のDB初期化

mix ecto.create

僕はなぜかmix ecto.createのときに以下の

Compiling 4 files (.ex)

== Compilation error on file web/controllers/exam_controller.ex ==
** (CompileError) web/controllers/exam_controller.ex:18: undefined function exam_path/3
    (stdlib) lists.erl:1338: :lists.foreach/2
    (stdlib) erl_eval.erl:670: :erl_eval.do_apply/6
    (elixir) lib/kernel/parallel_compiler.ex:116: anonymous fn/4 in Kernel.ParallelCompiler.spawn_compilers/1

エラーが出るので、web/controllers/exam_controller.exの18行目をコメントアウトしました。※コメントよろしくお願いします。

web/controllers/exam_controller.ex

        #|> put_resp_header("location", exam_path(conn, :show, exam))

web/router.exのAPIに追加しておく。/apiの内容がコメントアウトサれているので外しておきます。

web/router.ex

  scope "/api", Student do
    pipe_through :api
    resources "/exams", ExamController, except: [:new, :edit]
  end

以下のコマンドでマイグレーションする

mix ecto.migrate

以下にアクセスして起動の確認ができたらOK.

2. React用の準備です。

まずcssを生成するためにFuchichoの初期化コマンド

mix fushicho --init

これをするとpackage.jsonファイルの生成とweb/static/assets/cssの中にファイルが生成されます。
※特にpackage.jsonは上書きされるのでバックアップしてくださいね。

Scaffolding...
initialize...

You should add them to your "web/templates/lauout/app.html.eex".
〜略〜

のメッセージがでますから、web/templates/lauout/app.html.eexの
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">が書いてる下に以下を追加。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" integrity="sha256-K3Njjl2oe0gjRteXwX01fQD5fkk9JFFBdUHy/h38ggY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha256-2YQRJMXD7pIAPHiXr0s+vlRWA7GYJEK0ARns7k2sbHY=" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="<%= static_path(@conn, "/css/cssloader.css") %>">

npmコマンドの実行

インストールしましょう

npm install

3. Reactのコード生成

これが本題だ。
以下のコマンドでReact用のコードが生成される。
mix fushichoに対して先ほど生成したAPIのモデルの単数名の小文字のexamを引数に与えます。

mix fushicho exam

結果メッセージは以下のとおりです。

Add "web/static/js/exam" to your brunch-config.js autoRequire's array.

And also add the div tag yo your *.eex file.

<div class="container" id="exam-content"></div>

このメッセージ通りに、brunch-config.jsに, "web/static/js/exam"を追加します。

brunch-config.js

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app", "web/static/js/exam"]
    }
  },

今回のReactコードを表示するために、以下のcontainerのdivタグを記載しておく。

web/templates/layout/app.html.eex

<div class="container" id="exam-content"></div>

以下はいらないので削除しても構いません。