AGFA

関心が赴くままに

Reactの勉強3日目(コンポーネントを組み立てる)

React

f:id:kanekok13:20170815200150p:plain

本日の課題

以下のDOM構成を自分でコンポーネントを組み立てて表示する

<div id="app">
  <div class="test">
    <span class="first">テスト1</span>
    <span>テスト2</span>
    <span class="last">テスト3</span>
  </div>
</div>

解答

<body>

<div id="app"></div>

<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script>
var Component = React.createClass({
  render: function() {
    return React.DOM.div(
      {
        className: "test"
      },
      React.DOM.span(
        {
          className: "first"
        },
        "テスト1"
      ),
      React.DOM.span(null, "テスト2"),
      React.DOM.span(
        {
          className: "last"
        },
        "テスト3"
      ),
    )
  }
});

ReactDOM.render(
  React.createElement(Component),
  document.getElementById("app")
);
</script>
</body>

これ、あっているのかな、、、^ ^;

注意点

var Component = React.createClass({
  render: function() {
 }
});

render()は必須のメソッド
その他、任意指定のメソッドとプロパティ

プロパティ

<script>
var Component = React.createClass({
  render: function() {
    return React.DOM.span(
      {
        className: "test"
      },
      "これは" + this.props.name + "です"
    )
  }
});

ReactDOM.render(
  React.createElement(Component, {
    name: "テスト"
  }),
  document.getElementById("app")
);
</script>

f:id:kanekok13:20170819210040p:plain

プロパティへのアクセスはthis.propsを経由

propTypes

プロパティの名前、型の宣言！


コンポーネント

var Component = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,
  },
  render: function() {
    return React.DOM.span(
      {
        className: "test"
      },
      "これは" + this.props.name + "です"
    )
  }
});

name: React.PropTypes.string.isRequiredこの指定によって
nameは必ず文字列で指定してあげなければなりません。

値を省略すると

ReactDOM.render(
  React.createElement(Component, {
    // name: "テスト"
  }),
  document.getElementById("app")
);

f:id:kanekok13:20170819210506p:plainf:id:kanekok13:20170819210514p:plain

できる限り宣言することで、
長いソースコードを追いかけやすくする、
チェックしやすくすることを意識しましょう！


勉強になりました。

次回予定

テキストエリアに対して、即座に文字数をカウントして出力