宣言型のReact、命令型のJavaScriptのコードを見比べる

Reactハンズオンラーニングの備忘録です。

宣言型のReact
命令型のJavaScript

の対比をしているところを以下で取り上げます。

宣言型、命令型とは？
命令型のJavaScriptコード
宣言型のReactコード

宣言型、命令型とは？

命令型プログラミング

　→結果を得るための手順（how）

宣言型プログラミング

　→何をするのか（what）

命令型のJavaScriptコード

const target = document.getElementById("target");
const wrapper = document.createElement("div");
const headline = document.createElement("h1");

wrapper.id = "welcome";
headline.innerText = "hello world";

wrapper.appendChild(headline);
target.appendChild(wrapper);

DOMの要素生成
要素に値をセット
ドキュメントに要素を追加

→コードが多くなると可読性が悪くなる。

宣言型のReactコード

const { render } = ReactDOM;

const Welcome = () => {
  <div id="welcome">
    <h1>hello world</h1>
  </div>
};

render(<Welcome />, document.getElementById("target"));