ページ

2016年9月10日土曜日

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です。
gif
この時
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にアクセスしています。

0 件のコメント:

コメントを投稿