React HTML で react を使用する 2 つの方法

基本的な使い方

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>こんにちは</title>
</head>

<本文>
  <div id="アプリ">

  </div>
  <スクリプトのクロスオリジン src="https://unpkg.com/react@16/umd/react.production.min.js"></スクリプト>
  <スクリプトのクロスオリジン src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></スクリプト>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    // 仮想DOM
    const str = 'hello react'
    定数 vDom = <h1>{str}</h1>
    // const vDom = <pppp>こんにちは、反応します</pppp>
    //仮想DOMを実際のDOMに変換する
    ReactDOM.render(vDom、document.getElementById("app")) の
  </スクリプト>
</本文>

</html>

仮想DOMを作成する2つの方法

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>こんにちは</title>
</head>

<本文>
  <div id="アプリ">

  </div>
  <スクリプトのクロスオリジン src="https://unpkg.com/react@16/umd/react.production.min.js"></スクリプト>
  <スクリプトのクロスオリジン src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></スクリプト>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <スクリプト>
    // 最初の純粋な js 作成 (通常は使用されません)
    // 仮想DOM
    const str = 'hello react'
    const vDom = React.createElement('h1', {
      id: 'myId'
    }, 文字列)
    // const vDom = <pppp>こんにちは、反応します</pppp>
    //仮想DOMを実際のDOMに変換する
    ReactDOM.render(vDom、document.getElementById("app")) の
    // 
  </スクリプト>
</本文>

</html>

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>こんにちは</title>
</head>

<本文>
  <div id="アプリ">

  </div>
  <スクリプトのクロスオリジン src="https://unpkg.com/react@16/umd/react.production.min.js"></スクリプト>
  <スクリプトのクロスオリジン src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></スクリプト>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    // 最初の純粋な js 作成 (通常は使用されません)
    // [] ul li forEach を使用して実装します var names = ['Zhang Fei', 'Guan Yu', 'Zhao Yun']
    定数ul = <ul>
      {
        名前 && 名前.map((名前,インデックス)=>
          <li キー = {インデックス}>
            {名前}
          </li>
        ）
      }
    </ul>
    ReactDOM.render(ul,document.getElementById("app"))
    // 
  </スクリプト>
</本文>

</html>

知識ポイントの拡張:

React PWA 構成

プラグインをwebpack設定ファイルに追加する

const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
プラグイン: [
    新しい MiniCssExtractPlugin({
      ファイル名: '[名前].css'
    }）、
    新しい WorkboxWebpackPlugin.GenerateSW({
      クライアントの主張:true、
      スキップ待機:true
    })
  ]、

React html で react を使用する 2 つの方法についての記事はこれで終わりです。React html で react を使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: