GWだからReact.jsを勉強する

React.jsが熱い

先日のQCONで伊藤さんの講演を聞いて以来、気になっていたReact.jsですが、書籍を読みながら戯れようかと思っています。今年のGWはReactで遊ぶぞーと思ってます。

React.js

Webコンポーネント的な位置づけとしてのReact.js

表示とイベントを固めて維持できる。使い方次第は関数的にも利用できるというところがまずは気に入ったので、そこから。

JSX

DeNAさんのJSXと異なるJSXです。ややっこしいｗ　render関数が楽になるのでそのまま使うことに。gulpを使ったほうがいいかなと思いつつ、Reactにはまる前に環境にはまりそうだったのでブラウザで解釈させることに。やや時間かかるので、実際はプリコンパイルします。

JSXをブラウザ使う方法

JSXをブラウザで使うには、以下のような宣言をします。Reactも使うので一緒に。

index.html

    <script src="http://fb.me/react-0.12.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.1.js"></script>

JSXを使っているスクリプトファイルは、type=text/jsxとすることで変換をしてくれます。

コンポーネントファイルとアプリケーションファイルに分割

これが流儀に反しているかわかりませんが、コンポーネント定義ファイルとHTMLとのマッピングを分けました。（React.renderを別ファイルにしたということです）

index.html

    <script type="text/jsx" src="js/component.js"></script>
    <script type="text/jsx" src="js/app.js" ></script>

コンポーネントファイル

トグルボタンでも作ってみようと思い、ボタンとスイッチの状態を表す領域をひとつのコンポーネントとしてみました。

component.js

var ButtonComponent = React.createClass({

    getInitialState: function () {
        return {
            value: "スイッチオフ",
            toggle: false
        };
    },

    render: function () {
        return <div><input type='button' onClick={this.handleClick} value='押してください' />
            <span> {this.state.value}</span></div>;
    },

    handleClick: function () {
        console.log(this.state.toggle);
        if(this.state.toggle){
            this.setState({value: "スイッチオフ",toggle:false});
        }else{
             this.setState({value: "スイッチオン",toggle:true});
        }

    }

});

コンポーネントはReact.createClassで作成します。

アプリケーションファイル（勝手にそう命名）

app.js

React.render(<ButtonComponent/>, document.body);

作成したButtonComponentを

タグにマッピングしました。

これで表示されることになります。

Formの取り扱い

書籍としてはFormの取り扱いを読みましたがテストプログラムがまだなので、それは明日に。