Webアプリ開発 React.js フロントエンド環境 Part(8)

Javascript
2022.03.01

はじめに

こんにちは、swim-loverです。 初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。今の目標は、出席簿アプリを作ることです。

第7回では、公式サイトに従い、テスト用サブドメインを作成し、いいね。ボタンを貼り付けてみました。(sample1-5)

今回も引き続き、テスト用サブドメインで、Reactのプログラミングを行います。

React ’今更ながらのHello World ~ getElementById()’

公式サイトには、以下のHello Worldの例が載っています。CodePenの環境で実行するサンプルですが、実際のWEB環境で動かすことにしました。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

上記の例は、jsファイルになりますが、jsの他にHTMLが必要になりす。

前回のいいねボタンのHTMLコードの下に、Hello WorldのHTMLコードを埋め込みます。6行目<div id=“hello_world_1”>としています。

13行目 Hello Worldのjsファイル名を記載します。hello_world_1.jsとしています。

        <section class="features">    
            <h1><span class="main-title">今更ながらのHello World(1)</span></h1>            
                <section>
                    <div class="info-text">
                        <p>getElementById()を利用</p>
                        <div id="hello_world_1"></div>
                    </div>
                </section>
        </section>

        <!-- Load our React component. -->
        <script src="like_button.js"></script>
        <script src="hello_world_1.js"></script>

jsのコードも追加します。document.getElementByIdの引数を’root’から’hello_world_1’に変更しました。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('hello-world-1')
);

しかし、結果を確認してみると、Hello Worldは表示されていません。

原因を開発者モードで確認します。(Cmd+Option+i @ mac,Ctl+shit+i@win)

Javscriptコードの'<‘を認識できていないようです。

さっと調べると、ReactのようにJava scritファイルの中にHTMLを埋め込む形式をJSXと呼ぶとのこと。Hello Worldもまさにそのようなコードです。

さらに、JSXを使えるようにするには、Babelをインストールし、通常の？JavaScriptに変換する必要があるとのこと。

Babelに関しては、以下のサイトを参考にさせてもらいました。

Babelの手ほどき | 前編 Babelとは
BabelはブラウザにまだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにするNode.js製のトランスパイラです。Babelがどのような働きをするか解説します。
www.codegrid.net
Reactで「Hello world」 – React入門
「React入門」の前回は「Reactとはどういったライブラリか？」「Virtual DOMとはどういったものか？」について解説を行いました。今回は実際にReactはどのように書くかについて、「Hello world」を
www.to-r.net

また、別の変換方法として、ブワウザ側でJSXを変換する,’browser.min.js’をスクリプトとして読み込む方法があるようです。お試しのレベルであれば、この方法が簡単なので試してみます。

Hello Worldといえどもなかなか奥が深いです。HTMLの追加箇所は以下の点です。

  • 5行目 browser.min.jsを読み込む
  • 10行目 type=”text/babel”を指定する。
        <!-- Load React. -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <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>
        <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>        
        
        <!-- Load our React component. -->
        <script src="like_button.js"></script>
        <script type="text/babel" src="hello_world_1.js"></script>

これで再度実行してみます。

ようやく、公式サイトのHello Worldと同様のことがテスト用サブドメインで実行できました。

公式サイトのCode Pedのプロジェクトを眺めるよりも多くのことが得られました。

React ’今更ながらのHello World ~ querySelector()’

いいね！ボタンの例では、querySelector()を使って、コンテナの貼り付け場所をサーチしています。

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Hello Worldの例では、getElementById()を使っています。querySelector()でも動作する確認してみました。

  • 8-15行目を追加
  • 26行目を追加
      <h1><span class="main-title">今更ながらのHello World(1)</span></h1>            
            <section>
                <div class="info-text">
                    <p>getElementById()を利用</p>
                    <div id="hello_world_1"></div>
                </div>
            </section>
        <h1><span class="main-title">今更ながらのHello World(2)</span></h1>            
            <section>
                <div class="info-text">
                    <p>querySelector()を利用</p>
                    <div id="hello_world_2"></div>
                </div>
            </section>
    </section>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <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>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>        

    <!-- Load our React component. -->
    <script src="like_button.js"></script>
    <script type="text/babel" src="hello_world_1.js"></script>
    <script type="text/babel" src="hello_world_2.js"></script>

hello_world_2.jsを追加しました。querySelector()でidをサーチする場合は、#をつけるようです。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.querySelector('#hello_world_2');
);

querySelector()を使った場合でも、Hello Worldが表示されました。

まとめ

今回、公式サイトに従い、テスト用サブドメインを作成し、Hello Worldを表示してみました。(sample1-5)

BabelでのJSX変換についても登場し収穫がありました。

引き続き、Reactの勉強を進めていきたいと思います。

コメント

タイトルとURLをコピーしました