React勉強中（現在進行形）に躓いたこと

Reactを目下勉強中なのですが、
初歩的な部分でチョイチョイと躓いているので、
同じ轍に突っ込んだ人の役に立てばと思いまとめています。

Reacterの皆様、間違えやツッコミがあればどしどしとコメントして頂ければ、
嬉しくてDQBをテンションに任せて購入しちゃうかもしれません。

---

1. import, export構文はJSのES6構文である

import React from 'react';

のような呪文をJSファイルの最初に羅列するサンプルが多いですが、
このimportがどの要素に由来しているのか理解せずに使っていました。
ES6のModuleに用意されている構文だということがワカリマシタ。

参考URL
import - JavaScript | MDN
export - JavaScript | MDN

---

2. Componentのrenderは単一要素しか返すことができない

2つの要素（コンポーネント）を描画したかった…。

NG

class ParentComponent extends React.Component {
  render() {
    return (
      <ChildComponent1 />
      <ChildComponent2 />
    );
  }
}

コンポーネントは単一の要素なので、
複数の要素を指定することは不可能。

OK

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent1 />
        <ChildComponent2 />
      </div>
    );
  }
}

結果、単一の要素となるように親要素で括ってあげれば可能。

---

3. ReactDomのrenderも単一要素しか受け取らない

同じく2つの要素（コンポーネント）を描画したかった…。

ReactDom.render(
  <ChildComponent1 />,
  <ChildComponent2 />,
  document.getElementById("components")
);

まあ無理ですよね。
ReacDomのrenderはDOMを個別にレンダリングするものではなく、
全てのDOMを一括で書き換えるものなので、
最上位の親要素を指定するしかないという結論に至っています。

ReactDom.render(
  <ParentComponent />,
  document.getElementById("components")
);

こんな感じ。