Reactを使う 2 - JSXとprop -

前回に続いてReactをやって行こうと思います。

JSX

---

前回の構成ですが、

.
├── README.md
├── index.html
├── package.json
├── src
│   ├── container.js
│   └── hello.jsx
└── webpack.config.js

こんな感じでした。(なぜかREADME.mdが入っちゃってますが無視して下さい)

大まかな起動の流れとしては、

1. webpack.config.jsで指定したパスのモジュールをbabelで変換
2. この時hello.jsxがjsにコンパイルされる
3. コンパイルされ出力されたbundle.jsをindex.htmlでロード

このような流れになります。

ここで、JSXというのが出てきましたが、何かというと・・・
XML-likeにタグを書いてjsにコンパイルして使うものです。

詳しくはこちら

prop

---

次はただ表示させるだけのサンプルではなく、動くものを作ってみたいと思います。

と言う訳で画面に現在時刻を表示させてみたいと思います。
前回のhello.jsxを以下のように修正します。

import React from 'react';
import ReactDOM from 'react-dom'

class Hello extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
        <p>
          Now : {this.props.date.toTimeString()}
        </p>
      </div>
    );
  }
}

setInterval(function() {
  ReactDOM.render(
    <Hello date={new Date()} />,
    document.getElementById('container')
  );
}, 1000);

実行して↓のように現在時刻をリアルタイムに表示してくれてればOKです。

この時

ERROR in ./src/hello.jsx
Module build failed: SyntaxError:
/Users/XXX/src/hello.jsx:
Adjacent JSX elements must be wrapped in an enclosing tag (8:6)

このようなエラーが出る場合はタグがちゃんと囲まれてない場合があります。
※ どうもJSXでは一つのタグで囲まれたものしかreturnできないようです

ここで出てきたpropsですがこれは親コンポーネントなどから渡されたデータを
子コンポーネントのプロパティとして扱う事ができ、アクセスする際はpropsを使用します。

上のサンプルではsetIntervalで1秒おきに描画してますが、その際に
date={new Date()}でdateに現在時刻を設定し、子コンポーネントのHelloで
{this.props.date.toTimeString()}にてプロパティからdateにアクセスしています。