焼け石に肉

新米プログラマの学習記録日記です。Scalaに興味があるので、ScalaとPlay Frameworkの勉強メモを残していこうと思います。

【Play Framework】Play FrameworkとReactで何か作ってみる Part1【React】

久しぶりの更新になります。

Reactを勉強したいと思い立ったので、Play FrameworkとReactを合わせて何か作ってみようかと思います。
とりあえず、この記事ではHello World表示するまでやってみます。

環境

開発環境としては、以下の通りです。

作るもの

何も決まってないですが、とりあえず掲示板を作ってみます。
投稿、編集、削除がまで一通り実装してみます。
現時点でReactについては、名前しか知らない状態なので作る過程で少し変わってくるかもです。

準備

build.sbtやらapplication.confやらは置いておいてviewについて以下の通りにやっています

main.scala.html
@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
        <script src="http://fb.me/react-0.13.3.js"></script>
        <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
    </head>
    <body>

        @content

      <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
    </body>
</html>
index.scala.html
@()

@main("Home") {
<div id="application"></div>
<script type="text/jsx">
  var HelloWorld = React.createClass({
    render: function() {
      return (
        <p>Hello!World!</p>
      );
    }
  });

  var m = React.render(<HelloWorld />, document.getElementById('application'));
</script>
}

実行

http://localhost:9000/にアクセスすると、Hello!World!が表示されます。