import ReactDOM from 'react-dom'; とは何か

Question

次のコードは"import ReactDOM from 'react-dom';"がなくても動作すると思うのですが、なぜ置くのでしょうか

import React from 'react';
import ReactDOM from 'react-dom';

/* コンポーネント */
class MyComponent extends React.Component {
    render(){
        return (
            <div>
                <h1>Hello! World.</h1>
                <p>このページはテストページです。</p>
            </div>
        )
    }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('main') /* Reactが生成したコードを#mainに書き出す */
);

Comments

[hoshi-takanori]

ReactDOM.render を呼び出すのに使ってるので、import しないと動かないはず…。
(そのコードをどうやって動かすかにもよりますが。)

Answer 1

こちらで使っているからだと思います。

ReactDOM.render(
  <MyComponent />,
  document.getElementById('main') /* Reactが生成したコードを#mainに書き出す */
);

ちなみにここでやっているのは document.getElementById('main') という実態のあるタグの中に <MyComponent /> という React で出力された DOM を描画するぞ！ ということをやっています。