react.js触ってみた感想

Djangoの学習のついでにフロントエンドをreact.jsにして、いまさらながらいろいろ触ってみました。その備忘録。

Reactの基本的な考え方

•  Component間での親子の関係を意識して、親がStateを持っていて子にPropとして渡す というのが基本
• Stateはブラウザを閉じたり、リロードするまでは保持される
• renderで返すComponentは単一の親でなければならない

createClass({})

とにもかくにも、reactの開発ではまず、React.createClass({})でコンポーネントを作成する。

var Parent = React.createClass({
             getInitialState:  function(){
                        return {
                              //初期値を定義
                        }
             }
})

下記のように初期値、返すマークアップを定義する。このとき、子をタグとして定義できる。 

var Parent = React.createClass({
     //State(状態は親が管理)
     getInitialState: function() {
          return  {
                textval: "",
                children:   []
          };
     },
     // State(textVal)を変更
     setStateTextVal:   function(textVal)  {
          this.setState({  textVal:  textVal  });
     },

     //<Parent />の表示
     render: function() {
         return (
              <div>
                  <p>入力してEnterを押す</p>
                  <ChildInput onChange={this.setStateTextVal}  onSave={this.setStateChildren}  />
                  <Child textVal={this.state.textVal}  children={this.state.children}  />
              </div>
          );
     }
});

 子側では、関数を持ったマークアップとアクション毎に実行される関数を定義する。

予め定義された配列を読み込む

例えば、入力された英単語（apple）について、用法を表示するアプリだと、下記のように子側のreturnに返したい用法をベタ書きするのは好ましくない。

return (
 <div>
    <ul>
       <li>this is a baked apple.(これは焼きリンゴだ)</li>
       <li>An apple is round in shape.(りんごの形は丸い。)</li>
       <li>The apple fell from the tree.(りんごが木から落ちた。)</li>
    </ul>
 </div> 
);

上記の用法を予め配列として定義しておけば、変数として読むことで子側で使用できる。

<script type="text/jsx">

 const numbers = [this is a baked apple.(これは焼きリンゴだ), 
　　　　　　　　　An apple is round in shape.(りんごの形は丸い。),
　　　　　　　　The apple fell from the tree.(りんごが木から落ちた。)];
 const listItems = numbers.map((number) =>
       <li>{number}</li>
 );
   
  // 親：<Parent />の定義
  var Parent = React.createClass({
　　　　　　　　　　　//以下略 return (
  
  //子側のreturn処理
  return(
      <div>
          <ul>{listItems}</ul>
      </div> 
  );
);

  

フックのポイント

例えば、componentDidMountはコンポーネントがレンダリングされた後に実行される。

componentDidMount : function() {    
　　　　this.loadCommentsFromServer();  
},

ここでは、loadCommentsFromServerを呼び出している。 チュートリアルではここにAjaxの処理を書いてるので、それにならって、pythonからの結果を取得する処理を書く予定。処理はできるだけ小分けにする。

まとめ

いろいろ書いたあとに気づいたのですが、私が書いてたのってES５でした。しかし、もちろん本家は、

Our eventual goal is for ES6 classes to replace React.createClass completely,

 とおっしゃっておりますので、今後はES6で書いていきたいと思います。