Elixir on PhoenixでReact.jsを動かしてみる

Elixir on Phoenixのインストール

まず、Elixirという言語があります。そのWeb FrameworkがPhoenixですが、とても使いやすいし、分かりやすいのでお勧めです。Ruby on Railsに似ていると公式では説明があります。

Elixirがインストールされていない場合は、そこからインストールします。

$ brew install elixir

$ mix local.hex

$ mix archive.install https://github.com/phoenixframework/phoenix/releases/download/v0.14.0/phoenix_new-0.14.0.ez

Hello Workd

使い方はいたって簡単です。mix phoenix.newコマンドで必要なものをインストールして、mix phoneix.serverでプレビューします。

$ mkdir phoenix

$ cd phoenix

$ mix phoenix.new ./hello_phoenix

$ cd hello_phoenix

$ mix phoenix.server
----------------------------
$ curl 127.0.0.1:4000

React.js

$ mix phoenix.new react_phonenix

$ cd react_phonenix

$ mix phoenix.server

$ npm install -g bower

$ bower init

bower.json

{
  "name": "react_phoenix",
  "version": "0.0.0",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
+  "dependencies": {
+    "jquery": "~2.1.4",
+    "react": "~0.13.3"
+   }
}

$ bower install

$ bower install react --save

$ tree
web
├── channels
├── controllers
│   └── page_controller.ex
├── models
├── router.ex
├── static
│   ├── css
│   │   └── app.scss
│   ├── js
│   │   └── app.js
│   └── vendor
│       └── phoenix.js
├── templates
│   ├── layout
│   │   └── application.html.eex
│   └── page
│       └── index.html.eex
├── views
│   ├── error_view.ex
│   ├── layout_view.ex
│   └── page_view.ex
└── web.ex

web/static/js/app.js

import {Socket} from "phoenix"

// let socket = new Socket("/ws")
// socket.connect()
// let chan = socket.chan("topic:subtopic", {})
// chan.join().receive("ok", chan => {
//   console.log("Success!")
// })

let App = {
}
var HelloWorld = React.createClass({  
  render() {
    return (<h1>Hello React</h1>)
  }
})

window.onload = () => {  
  var element = document.getElementById("app")
  React.render(<HelloWorld />, element)
}
export default App

web/templates/page/index.html.eex

<div id="app"></div>

$ mix phoenix.server
----------------------------
$ curl 127.0.0.1:4000