おーいイソノ〜 React.jsしようぜー

Posted: 2014-07-15 23:11 |  javascript 
Laravelなど最新鋭のフレームワークを追いかけているみなさん、
javascriptはいかがでしょうか?
ここ数年であちこちで云われている様に、片手間レベルではjavascriptやってるぜ!と言えなくなってきました。
angular.js, backbone.js, knockout,js, ember.js, vue.js etc....
PHPなどのサーバサイド同様にjavascriptもフレームワークが・・
とありきたりなのもつまらないので、
折角なので少し前に、facebookが、「よろしい、ならばfluxパターンだ」(詳細は省略)
Facebook の決断:MVCはスケールしない。ならば Flux だ。
を目にした方も多いと思われます、React.jsを取り入れてみよう、というものです。
Laravel + React.jsとかきっと先進的すぎるか、ある方面では共に話題の組み合わせかもしれません

MVCパターンとは少し異なり、ちょっと独特な感じですので、
すでにangularやbackboneバリバリの方は乗り換えるほどでは無いかもしれません。
PHPerならHHVM弄って開発している方も多いと思いますので、
折角なので使いましょう!

React

ではsample通り
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.renderComponent(
  <CommentBox />,
  document.getElementById('example')
);
html等にはこのようにします
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container">
    <div id="example"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/JSXTransformer.js"></script>
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/jsx" src="/js/sample.js"></script>
</body>
</html>
まず、react.jsはJSX、またはjavascriptの二種のうち、好きな方で記述できます。
いまのところ、JSXでいいかなと思って、JSXで記述する様にしています。
id="example"を
Hello, world! I am a CommentBox.

に書き換えているだけです。

複数組み合わせると下記の様になります。
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

React.renderComponent(
    <CommentBox />,
    document.getElementById('example')
);
レンダーするためにそれぞれ書いて、最後にまとめてどーん 的な内容です。
プロパティなどを利用して、さらに操作してみましょう
/** @jsx React.DOM */
var CommentList = React.createClass({
    render: function() {
        return (
            <div className="commentList">
                <Comment author="Pete Hunt">This is one comment</Comment>
                <Comment author="Jordan Walke">This is *another* comment</Comment>
            </div>
        );
    }
});

var CommentForm = React.createClass({
    render: function() {
        return (
            <div className="commentForm">
            Hello, world! I am a CommentForm.
            </div>
        );
    }
});

var Comment = React.createClass({
    render: function() {
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                {this.props.children}
            </div>
        );
    }
});

var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
            <h1>Comments</h1>
            <CommentList />
            <CommentForm />
            </div>
        );
    }
});

React.renderComponent(
    <CommentBox />,
    document.getElementById('example')
);

ぱっとみるとちょっとイマイチ感が感じられるかもしれませんし、
実際に使っていても、facebookくらいの大きい規模でなければ恩恵が無いかもしれませんが、
記述している内容さえわかる様になると、かなりシンプルなものです。
たぶん次はLaravelを使って実際にデータのやり取りをしてみます


 

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