【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!が表示されます。