React の最初の一歩（CDN版）

初心者が「できたらかっこいい」と思うことの 1 つに React は入っているんじゃないでしょうか。

やっぱり私も「React できたらかっこいい！」と思ってしまいます。

Reactの基本

まずは、基本の基本から始めます。

React を使ってページ上に「Hello React」と表示させます。

まず、HTMLのheadに以下のコードを入れます。

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

HTMLのbodyの「Hello React」を入れる場所に以下を設置します。

<div id="root">wait...</div>

#root を読み込みます。

let dom = document.querySelector('#root');

React.createElement で表示する内容を設定する。

→React.createElement(タグ名,属性,中に組み込まれるもの)

let element = React.createElement('p', {}, 'Hello React');

ReactDOM.render で表示させる。

→ReactDOM.render(エレメント,DOM)

ReactDOM.render(element, dom);