Reactに挑戦してみる 2

概要

React開発入門を読んでみる。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

やってみたこと

• 文字列を受け取って表示するコンポーネント

外部から文字列を受け取って表示するコンポーネント

var HelloWorld = React.createClass({
    render: function(){
    return React.DOM.h2(null, 'Hello, ' + this.props.name + 'World!');
  }
});

ReactDOM.render(
    React.createElement(
    HelloWorld,
    {
        name: 'React'
    }
   ),
        document.getElementById('content')
 );

• 文字列の受け渡しにpropsを使っている。
• ReactDOM.renderの箇所で、２つ目の引数で、nameプロパティに文字列を代入する？このnameがreactのプロパティ！

文字列を計算して表示させるコンポーネント

 var Evaluator = React.createClass({
    render: function(){
    return React.DOM.h2(null, eval(this.props.text));
  }
});

ReactDOM.render(
    React.createElement(
    Evaluator,
    {
        text: '5 / 4'
    }
   ),
        document.getElementById('eval')
 );

• javascriptのeval関数を使って文字列を計算して、html要素で返すコンポーネント

ユーザーからの入力を受け付けるコンポーネント

reactの仕様で、renderメソッドは１つの要素しか返すことができない。そのため、htmlのdivなどの要素を使って複数の要素を１つにまとめる。

 var HelloWorlds = React.createClass({
    render: function(){
    return (
        React.DOM.h2(null, 'Hello, ' + this.props.name + '1stWorld!'),
        React.DOM.h2(null, 'Hello, ' + this.props.name + '2ndWorld!'),
        React.DOM.h2(null, 'Hello, ' + this.props.name + '3rdWorld!')
    );
  }
});

これだと、最後の行しか表示されないので、`React.DOM.div'メソッドを使って全て表示させてみる。

 var HelloWorlds = React.createClass({
    render: function(){
    return React.DOM.div(null,
        React.DOM.h2(null, 'Hello, ' + this.props.name + '1stWorld!'),
        React.DOM.h2(null, 'Hello, ' + this.props.name + '2ndWorld!'),
        React.DOM.h2(null, 'Hello, ' + this.props.name + '3rdWorld!')
    );
  }
});

ReactDOM.render(
    React.createElement(
    HelloWorlds,
    {
        name: 'React'
    }
   ),
        document.getElementById('contents')
 );

文字列を入力するinput要素を配置

var Evaluator = React.createClass({
    render: function() {
    return React.DOM.div(
        null,
      React.DOM.input({
        type: 'text'
      }),
      React.DOM.h2(null, 'result')
     );
  }
});

ReactDOM.render(
    React.createElement(Evaluator),
    document.getElementById('eval')
 );

• React.DOM.inputメソッドで、inputboxを表示させられる。
• typeで、input要素のtypeを設定できる。

このままでは、inputはできても何も起きないので、inputしたものをresultの箇所に表示させるようにしてみる。 そのためには、ステートという仕組みを使う。ステートは、オブジェクト指向のクラス内の変数みたいなものらしい。

inputした文字列を表示させる。

書籍より引用

• ステートを初期化するメソッド
• ユーザーからの入力があると、内容をステートとして記録するメソッド
• input要素の中で入力があると、その記録用のメソッドを呼ぶための属性
• h2要素としてステートを利用して結果を表示

var Evaluator = React.createClass({
# Stateの初期化、getInitialStateメソッドを使う
# ここではexpressionというstateに空欄を代入している
    getInitialState: function(){
    return {
        expression: ''
    };
  },
# reCalcValueメソッドは既定ではなくカスタムメソッド
# Enterkeyが押された時だけ、this.setStateメソッドで、expressionにvalueを渡す
  reCalcValue: function(e) {
    if (e.key == 'Enter')
        this.setState({
        expression: e.target.value
      });
  },

# renderメソッドで、html要素を返す。
# onKeyPress で、keyが押された時に、reCalcValueが呼び出されるようになっている。
# 引き続き、React.DOM.divメソッドで、divに返すようにしている。
    render: function() {
    return React.DOM.div(
        null,
      React.DOM.input({
        type: 'text',
        onKeyPress: this.reCalcValue
      }),
      React.DOM.h2(null, eval(this.state.expression))
     );
  }
});