【Nutanix UUIDエクスプローラーを作ってみよう】React で JavaScript へ挑戦 - CDN導入編

Flask の render template 機能で、Webページ表示というところまで作ってみました
次は、Webページの中身を JavaScript を使って表示というのにチャレンジです
ちな JavaScript は全くの初心者です

JavaScript の2大フレームワークとして、React と Vue というのある模様です
それぞれがどんな特徴か。。。というのはググればなんぼでもでてきますので、そちらにおまかせします
今回のUUIDエクスプローラープロジェクトでは、React で進めていきます
なんでかというと、信頼するエンジニアの方に「React の方がよいんじゃない？」と言っていただのがきっかけ、特になんの下調べもせずに飛び込んでみました

ja.reactjs.org

【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ - React挑戦
・Flask表示までのまとめ
・React で JavaScript へ挑戦 - CDN導入編　←イマココ
・React で JavaScript へ挑戦 - state編
・React で JavaScript へ挑戦 - fetch編
・React で JavaScript へ挑戦 - fetch編
・React で JavaScript へ挑戦 - filter編

Reactどころか JavaScriptと初心者なので、チュートリアルを参考にしつつ、Getting Started をみながら実装を進めていきます
（日本語ページ助かる〜）

公式チュートリアルReact チュートリアル
チュートリアル：React の導入 – React

React Getting Started
Getting Started – React

環境の準備

今回の最終形態はコチラ(Github)で公開しています
＜フォルダ構造＞

今回のメインで扱うのは、js配下の test.js になります
（今回 Elasticは使いません）

React を CDN で導入する

とりあえずCDNで、React を使えるようにしてみます
Getting Started のこのあたりを参考にして、リンクをflaskで呼び出している index.html へ追加していきます
script タグを追加する
 React で JSX を使う
JSXを使うことで、JavaScript独特な書き方をhtmlタグでわかりやすく書けるぽい

CDNリンク

こんな感じの CDN のリンクを追記します
/templates/index.html

    <!-- Reactをロード -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- JSXを使えるように -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- ReactのJavaScriptファイルの場所を指定 -->
    <script src="/static/js/test.js" type="text/babel"></script>  
    <!-- Reactをここまで -->

jsファイル作成

呼び出される側の JavaScript ファイルをシンプルにお試しで書いてみます
/static/js/test.js

const user = 'konchangakita';
const element = <h2>Hello, {user}</h2>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

divタグで id指定

document.getElementById('root') で指定いる id を index.html で呼び出すだけです

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

index.htmlへの反映

CDNのリンクと合わせるこんな感じになります
./templates/index.html

      <h2>この下にReactする</h2>
      <div id="root"></div>

      <!-- Reactをロード -->
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
      <!-- JSXを使えるように -->
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <!-- ReactのJavaScriptファイルの場所を指定 -->
      <script src="/static/js/test.js" type="text/babel"></script>  
      <!-- Reactをここまで -->