React.jsでLaravelから情報をもらってみよう

Posted: 2014-10-25 21:09 |  laravel javascript 
angular.js, backbone.jsやvue.jsとも違う一番癖があるかもしれないReact.jsを使って
Laravelで実装されたAPIから情報を取得してみましょう
といってもLaravelじゃなくてもなんでもいいので、
適当にAPIを作ります
今回はユーザー情報を返すだけのJSONです

namespace App\Controllers;

class HomeController extends BaseController
{

    /** @var array  */
    protected $users = [
        'user_id' => 1,
        'user_name' => 'user1',
        'address' => 'tokyo jp',
    ];

    /**
     * @return \Illuminate\Http\JsonResponse
     */
    public function getUser()
    {
        return \Response::json($this->users);
    }
}
phpの出番はここまでです
下記は/userでアクセスできる様にした例です
まずは忘れずにreact.jsとJSXTransformer.jsを
<div id="content"> </div>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/js/render.js" type="text/jsx"></script>
render.jsが今回react.jsを利用して実装します。
typeをjs じゃなくて忘れずにjsxにしてください
まずは、情報取得の部分です
 
React.renderComponent(
    <userlist source="/user">,
    document.getElementById('content')
);
あとは取得した情報を描画するだけです
var UserList = React.createClass({
    getInitialState: function() {
        return {
            username: '',
            id: '',
            address: ''
        };
    },

    componentDidMount: function() {
        $.get(this.props.source, function(result) {
            if (this.isMounted()) {
                this.setState({
                    username: result.user_name,
                    id: result.user_id,
                    address: result.address
                });
            }
        }.bind(this));
    },

    render: function() {
        return (
            <div>
                user:{this.state.username} / {this.state.address}<a href={this.state.id}>ユーザー情報</a>.
            </div>
        );
    }
});
// さっきの
React.renderComponent(
    <userlist source="/user">,
    document.getElementById('content')
);

イベントなどはこれにどんどん追加していくだけで、
簡単にシングルページアプリケーションが作れます
他のjsフレームワークと比べてもまだまだ認知度が低いのと、
やはり日本語情報が少ないのでなかなか「使ってるよ!」という方に合えなくて寂しいです
リファレンスにも色々ありますので、ぜひどうぞ!
http://facebook.github.io/react/docs/getting-started.html

about ytake

執筆に参加しています


Laravel お役立ち情報

share



このエントリーをはてなブックマークに追加

Categories

laravel 45

DTM 0

music 0

PHP全般 31

0

JAPAN 1

WORLD 1

javascript 4

RDBMS 1

NoSQL 1

NewSQL 1

Recent Posts

Ad

comments powered by Disqus

GitHub

Social Links

Author


クリエイティブ・コモンズ・ライセンス
Yuuki Takezawa 作『Ytake Blog』はクリエイティブ・コモンズ 表示 - 非営利 4.0 国際 ライセンス で提供されています。

© ytake/comnect All Rights Reserved. 2014