React


JSX


カスタムコンポーネントの定義

  var Divider = React.createClass({
    render: function() {
      return (
        <div className="divider">
          問題<hr/>
        </div>
      );
    }
  });

  React.render(
    <Divider />,
    document.getElementById('ins01')
  );

動的な値

** 変数呼び出し **

  /* 変数呼び出し */
  var Divider = React.createClass({
    render: function() {
      var text = "質問";
      return (
        <div>{text}<hr/></div>
      );
    }
  });
  React.render(
    <Divider />,
    document.getElementById('ins02')
  );

** 関数呼び出し **

  /* 関数呼び出し */
  var Divider = React.createClass({
    render: function() {
      return (
        <div>{dateToString(new Date())}<hr/></div>
      );
    }
  });
  React.render(
    <Divider />,
    document.getElementById('ins03')
  );
  function dateToString(d){
    return [
      d.getFullYear(),
      d.getMonth() + 1,
      d.getDate()
    ].join('-');
  };

** 配列を表示 **

  // 配列を表示
  var Divider4 = React.createClass({
    render: function() {
      var text = ["hello","world"];
      return (
        <div>{text}<hr/></div>
      );
    }
  });
  React.render(
    <Divider4 />,
    document.getElementById('ins04')
  );

子ノード

子ノード

  // this.props.children
  var Divider5 = React.createClass({
    render: function() {
      return (
        <div>{this.props.children}<hr/></div>
      );
    }
  });
  // htmlで指定
  <Divider5>子ノード</Divider5>