プログラミング逆引き辞典

～多言語対応のプログラミングレシピ～

React（基礎編）

■JavaScriptライブラリのReactの初歩部分を解説する
※今回はブラウザとして「Google Chrome」を選定

①エラーの状況がわかりやすいように「Google Chrome」の機能を拡張する
「react developer tools」をキーワードにググる

「Chrome に追加」を押下

「Google Chrome」の拡張機能の設定から「React Developer Tools」を選択し、「ファイルの URL へのアクセスを許可する」を有効にする

②開発環境の場合はHTMLファイル等に下記スクリプトを設定し、エラーの際の箇所をわかりやすくする


<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

※ちなみに本番環境は下記スクリプトとなる


<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
//babelは別途設定要

Reactの公式サイトはこちら→https://reactjs.org/

③Reactを記述


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>React</title>
  </head>
  <body>
    <!-- resultという名前のidを設定し、Reactで処理した結果を表示する -->
    <div id="result"></div>

    <!-- Reactを使う為のScript -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- babelで記述 -->
    <script type="text/babel">
      //アロー関数(即時関数含む)
      (() => {
        //ReactDOM.render()でReactを記述
        ReactDOM.render(
          //記述する内容
          <p>Hello</p>,
          //記述する箇所
          document.getElementById('result')
        );
      })();
    </script>
  </body>
</html>

ブラウザに「Hello」と表示される