最小の React プログラム

実践的な React プログラムを開発する時には、様々な設定が必要になります。このため「React 版の Hello, world!」で行ったように create-react-app (CRA) 等のツールを使ってプログラムの雛形を作ります。

あるいは、CRA の他にも Next.js のようなサーバーサイドレンダリング (SSR) をサポートするテンプレートを利用することもできます。

React はコア部分が小さく、様々なオプションがあるのも特徴のひとつです。

実践的ではないのですが、次のように React の JavaScript を取り込み、 HTML ファイル一つで React を利用することもできます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Minimum React Page</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script>
        ReactDOM.render(
            React.createElement('h1', null, 'Hello, React!'),
            document.getElementById('root')
        );
    </script>
  </body>
</html>

当サイトでは特に断りがない限り、CRA 雛形を作りプログラムの開発をはじめます。