AGFA

関心が赴くままに

Reactの勉強1日目（Hello, Reactの出力）

React

f:id:kanekok13:20170815200150p:plain

React初心者の僕が、
Reactを使いこなせるようになるまで
地道に頑張ります。
このブログはメモ的に使っていきますので、
よろしくお願いします。

※毎日更新ではありません。 1日1個とも限りません

Reactとは

ここでは語りません。
なぜなら自分自身、わからないので、、、
これから学んでいきます！！（汗）

本日の課題

おなじみの「Hello React!」の表示（h1タグで）

解答

<body>

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

<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script>
ReactDOM.render(
  React.DOM.h1(null, "Hello React!"),
  document.getElementById("app")
);
</script>
</body>

f:id:kanekok13:20170815181405p:plain

DOMのアクセスは、とてもわかりやすい！ document.getElementById("app")

React.DOM. * のパラメーターについて

DOMの属性など、コンポーネントに渡したいプロパティ

<body>

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

<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script>
ReactDOM.render(
  React.DOM.h1(
    {
      id: "test"
    },
    "Hello React!"
  ),
  document.getElementById("app")
);
</script>
</body>

f:id:kanekok13:20170815181405p:plain f:id:kanekok13:20170815194731j:plain

なるほど、、、勉強になりました。

次回予定

以下のDOMをReactで作成

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