Reactに挑戦してみる 4

概要

React参考書籍を読んでみる。

参考書籍

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

JSXを使ってみる。

JSFiddleの言語を、Babelに変更して、以下のようなコードを書いてみる。

ReactDOM.render(
    <h2>Hello, React World!</h2>,
  document.getElementById('content')
 );

これだけで、OK！めっちゃシンプル！

JSXとHTMLの違い

JSXは、HTMLみたいな記述ができるけど、XMLなので、書き方が微妙に違う。

• 属性名＝'属性値'のように書く。styleは、{{}}で囲んで。

ReactDOM.render(
    <h2
    style={{
        fontStyle: 'oblique',
      fontFamily: 'Arial',
      color: 'green'
    }}>
    Hello, React World!</h2>,
  document.getElementById('content')
 );

• class, forは全然違う名前になる

class-> JSXでは、className='myClass' というように、classNameで指定する。 for -> htmlFor

JSXの中で使うJavaScript

var HelloWorld = React.createClass({
    render: function() {
    return (
    <h2>Hello, {this.props.name} World!</h2>
    );
  }
});

ReactDOM.render(
    <HelloWorld name='React'/>,
  document.getElementById('content')
);

なんと、カスタムコンポーネントをタグのようにして、書くのか！

JSXでステート付きのコンポーネントを作成する

var Evaluator = React.createClass({
    getInitialState: function() {
    return {
        expression: ''
    };
  },
  reCalcValue: function(e){
    if (e.key === 'Enter')
        this.setState({
        expression: e.target.value
      });
  },
  render: function() {
    return (
    <div>
      <input
        type='text'
        onKeyPress={this.reCalcValue}
      />
      <h2>{eval(this.state.expression)}</h2>
      </div>
    );
  }
});

ReactDOM.render(
    <Evaluator />,
  document.getElementById('content')
);

確かに直感的にわかりやすい感じがするな〜！