React.jsのはじめ方

最近メジャーなJavascriptのライブラリはReact.jsやvue.jsなどになるかと思います。

簡単に説明するとvue.jsは軽めのフレームワークで、少し動きをつけたい場合はこちらで十分ですが、アプリケーションを作りたいなどの場合はReact.jsの方がいいかと思います。

FaceBookが提供しているものになるので、今後も廃れにくいと思います。

以下を参考にしました。

既存のウェブサイトに React を追加する – React

ユーザインターフェース構築のための JavaScript ライブラリ

HTMLを用意する
script タグを追加し、Reactを読みこむ
React コンポーネントを作成する
サンプル

HTMLを用意する

まずは以下のようなhtmlファイルを準備します。

divタグを作成し、そのの中にpタグを追加しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--DOMコンテナを追加-->
    <div id="display" class="container">
        <p>React読み込み中。。。</p>
    </div>
</body>
</html>

script タグを追加し、Reactを読みこむ

以下のscriptタグを追加し、Reactを読み込みます。

また、現在は開発の環境なので”development.js”のまま使用しますが、デプロイする際は”production.min.js”に変更します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--DOMコンテナを追加-->
    <div id="display" class="container">
        <p>React読み込み中。。。</p>
    </div>
  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <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>

  <!-- Load our React component. -->
  <script src="display.js">
    <!-- ここに処理を記載します -->
  </script>
</body>
</html>

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

以下のような「display.js」というファイルを作成し、先ほど作成したhtmlファイルと同じ階層に配置します。

このコードではLikeButtonという Reactの部品を表示していきます。

'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('#display');
ReactDOM.render(e(LikeButton), domContainer);

ではコードの解説をしていきます。

このコードは、dispalyという<div>要素を見つけてきて、そこに React の「いいね」ボタンを表示します。

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

以上です。簡単ですね。

サンプル

もう一つくらいサンプルを説明していきます。

こちらはhtmlに直接書いていますが、先ほどとやっていることはほとんど変わりません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--DOMコンテナを追加-->
    <div id="display" class="container">
        <p>React読み込み中。。。</p>
    </div>
  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <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>

  <!-- Load our React component. -->
  <script >
  let dom = document.getElementById('display');
  let elm = React.createElement(
      'p', {}, 'React読み込み完了！！'
  )
  ReactDOM.render(elm, dom);
  </script>
</body>
</html>

以下の部分を見て下さい。

まず一行目で、”display”というIdを使ってタグ情報を取得してdomという変数に代入します。
二行目〜四行目でelmという変数にpタグを作成します。
ReactDOM（DOMは大文字！！）のライブラリのrenderメソッドを使用して、elmをdomに書き出していきます。

  let dom = document.getElementById('display');
  let elm = React.createElement(
      'p', {}, 'React読み込み完了！！'
  )
  ReactDOM.render(elm, dom);