AGFA

関心が赴くままに

Reactの勉強2日目（DOMの作成）

React

f:id:kanekok13:20170815200150p:plain

本日の課題

以下のDOMをReactで作成

<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>
ReactDOM.render(
  React.DOM.div(
    {
      className: "test"
    },
    React.DOM.span(
      {
        className: "first"
      },
      "テスト1"
    ),
    React.DOM.span(null, "テスト2"),
    React.DOM.span(
      {
        className: "last"
      },
      "テスト3"
    ),
  ),
  document.getElementById("app")
);
</script>
</body>

注意点

class属性を指定する際、
React.DOM. * のパラメーターには気をつけないといけない。

ReactDOM.render(
  React.DOM.div(
    {
      class: "test"
    },
    React.DOM.span(
      {
        class: "first"
      },
      "テスト1"
    ),
    React.DOM.span(null, "テスト2"),
    React.DOM.span(
      {
        class: "last"
      },
      "テスト3"
    ),
  ),
  document.getElementById("app")
);

class: "test"としてしまうと。。。

f:id:kanekok13:20170815220846p:plain

コンソールエラーが出てしまう。

正しくは、className: "test"

勉強になりました。

次回予定

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

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