PhoenixとbrunchでReact.jsを使う

Introduction

PhoenixとReact.jsを一緒に使ってみたいので、Phoenix＋Reactをインストールしました。今回はwebpackではなく、PhoenixのデフォルトのBrunchを使います。

Phoenix: v1.1.3

React: v0.14.6

ReactDOM: v0.14.6

Phoenixをインストール

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

新しいプロジェクトを作る

$ mix phoenix.new phoenix_react
$ cd phoenix_react

Reactをインストール

$ npm install --save react react-dom
$ npm install --save-dev babel-preset-react

brunch-config.javascriptを開いて、

plugins: {
  babel: {
    // Do not use ES6 compiler in vendor code
    ignore: [/web\/static\/vendor/]
  }
},

を以下のように修正

plugins: {
  babel: {
    presets: ["es2015", "react"],
    // Do not use ES6 compiler in vendor code
    ignore: [/web\/static\/vendor/]
  }
},

web/templates/page/index.html.eexを開いて、以下のコードを追加

<div id="hello-world"></div>

web/static/javascript/app.javascriptに以下のコードを追加

import React from "react"
import ReactDOM from "react-dom"

ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementById("hello-world")
)