Reactの「Hello World」（CDN ver.）

Webサイトを作る時、最近はNode.jsやReact.jsが使えないといけないですよね。

私はHTML、CSSが少しわかる程度です。

HTMLとCSSだけでWebサイトを作るのは大変で、ユーザーは不便で、そして楽しくありません。

ということで、Reactを勉強したいと思います。

Reactを使う準備

まず、CDNを読み込みます。

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

この部分は以下のReactサイトから最新版を取ってください。

ja.reactjs.org

そして、DOMを読み込むところにid（root）を入れます。

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

上のid（root）に入れる内容「Hello World」を設定します。

let dom = document.querySelector('#root');
let element = React.createElement('p', {}, 'Hello React');
ReactDOM.render(element, dom);

「Hello World」と表示されました。

Reactの「Hello World」

コード全体

コードは少なめです。

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Hello React</title>
       <script
            crossorigin
            src="https://unpkg.com/react@18/umd/react.development.js"
        ></script>
       <script
            crossorigin
            src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
        ></script>
   </head>
    <body>
        <h1>React</h1>
        <div id="root">wait...</div>
        <script>
           let dom = document.querySelector('#root');
           let element = React.createElement('p', {}, 'Hello React');
           ReactDOM.render(element, dom);
       </script>
    </body>
</html>