Webアプリ開発 React.js フロントエンド環境 Part(7) 開発用WebサイトにReactを追加

Contents

はじめに
React ‘次のStep’
React ‘プログラムをWEBサイトへ配置’
React ‘HTML に Reactコードを埋め込む’
React ‘Reactコンポーネントを作成する’
まとめ

はじめに

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

第1回から第6回で、チュートリアルに従い３つ並べゲームを完成させることができました。チュートリアルを通して、実際にプログラムをすることは面白いですが、Reactの世界に少し触れた程度だと思います。

React ‘次のStep’

次のStepに向けて、やるべきことを考えてみました。

簡単なReactプログラミングを自身のWEBサイトに配置し、実行できる環境を構築する。これには、公式サイトがはやり参考になると思います。
Reactのシンタックスを学ぶ。このための導入には、公式サイトの一段階ずつ学べるガイドに従いすすめたいと思います。
HTML,CSSの知識を補完する。これらの知識が圧倒的に不足していますが、１，２をやりながら、都度、補完しながらするめるスタイルでどこまで行けるかトライしてみたいと思います。

React ‘プログラムをWEBサイトへ配置’

次のStepとして、”1.簡単なReactプログラミングを自身のWEBサイトに配置し、実行できる環境を構築する。”　で進めたいと思います。

私が使っているレンタルサーバーの管理画面でテスト用サブドメインを作成しました。ただし、テスト用サブドメインは、WordPressではなく、HTMLで作成することにしました。いわゆる静的サイトを作成しました。

React ‘HTML に Reactコードを埋め込む’

“既存の HTML ページに React コンポーネントを導入する方法“に従い進めます。

手探りながらもHTMLとCSSを準備しました。

19行目に”<div id=”like_button_container”></div>”を挿入しています。div idは、”like_button_container”を指定しています。ここにReactのコンポーネントを貼り付けます。

26,27行目は、Reactのロード（インポート）になります。

30行目が、今回の”いいね”ボタンのコンポーネントのロードです。

<!DOCTYPE html>
<head lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Web Appl Test Site</title>
    <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <header>
            <div class="header-title">
                <h1>Web Appl test site<span class="subtitle"> ~React programming~ </span></h1>
            </div>
        </header>
        <section class="features">    
            <h1><span class="main-title">いいね！ボタン貼り付け</span></h1>            
                <section>
                    <div class="info-text">
                        <p>Reactのサンプルプログラムになります。</p>
                        <div id="like_button_container"></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>
        
        <!-- Load our React component. -->
        <script src="like_button.js"></script>
        
    </body>
    <footer>
      Copyright swim-lover
    </footer>
</html>

React ‘Reactコンポーネントを作成する’

React.Componentの派生クラスで、LikeButtonクラスを作成しています。

16-20行目は、ボタンを作成しています。クリックされた時には、変数 liked=’true’に書き換えています。

24-25行目は、like_button_containerを探し出し(querySelector)、いいね。ボタンを表示（ReactDOM.render）しています。

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

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