WebPACKの--->プロジェクトで使用するように反応します

説明：

2つのステップに分け：

1. まず、インポートreactおよびreact-dom仮想DOMの作成と使用を確保するために：
2. 用途babel转码器：ので、あまりにも多くのDOM構造を、それぞれ使用はしてHTMLを書くのに使用して、多くの圧力をもたらす仮想DOM開発を作成React.createElement babel文法トランスコーダを反応させるために変換するには、大幅に開発効率を向上させることができます

• プロジェクトのソースコード

---

使用するプロジェクトに反応します

1. 実行cnpm i react react-dom -Sインストールパッケージを

• 反応：このパッケージ内のコンポーネントのライフサイクルながら、仮想コンポーネントやDOMを作成するように設計
• DOM-反応：最も重要なアプリケーション・シナリオ、特にDOM操作、ReactDOM.render（）[PS] :. DOMパッケージに、メモリ作成することによって反応され、反応する-DOM-メモリを取得する必要があるDOM
• -S：開発からのオンラインパッケージにプロジェクトを代表して使用する必要があります
• -D：使用する場合の開発ツール

2. index.htmlのページでは、コンテナを作成します。

<!-- 容器,将来使用 React 创建的虚拟DOM元素,都会被渲染到这个指定的容器中 -->
<div id="app"></div>

3. インポートパッケージ：

import React from 'react'
import ReactDOM from 'react-dom'

4. 仮想DOM要素を作成します。

const myh1 = React.createElement('h1', { title:'啊,栗子', id: 'myh1'}, '糖炒栗子')

5. レンダリング：

ReactDOM.render(myh1, document.getElementById('app'));

---

テンプレート文字列を使用します

1. 複雑なUI構造について、React.createElementの使用は、仮想DOM文言が非常に複雑になる作成します。
2. HTMLは、最高のマークアップ言語です。
3. 仮想DOMを作成するために、手書きのラベルの形で、考えてみてください。
   書き込みの次の形式の直接の使用は、エラーを取得する場合：
   [書き込み]：const mydiv = <div id="mydiv" title="div aaa">这是一个div元素</div>
   [エラー]：You may need an appropriate loader to handle this file type
   [理由]：JSファイルでは、デフォルトでは書き込むことはできませんHTMLに似たタグ、それ以外の場合は失敗パック
   [ソリューション]：あなたはJSにこれらのラベルを変換するために、パッケージのさまざまなを使用することができます。

---

JAX構文：

• JS、HTMLに似た構文XMLの仕様に合わせて、書かれた混合用でJS
• 文法のJSXの性質上、または実行時に、実行するためにReact.createElementフォームトランスコーダに変換される
  [インタビュー]を：JSXは、ページに直接レンダリングされるまあ、いや、それはトランスコーダを通じてReact.createElementに変換されますか？実行形式

---

JSXを使用するには、バベルは、ブラウザで実行することができますDOMに変換しました

1. JSX文法を有効にする方法？

• インストールしbabelたプラグインを
  • ラン cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  • ラン cnpm i babel-preset-env babel-preset-stage-0 -D
• インストールパッケージは、JSX文法を識別することができます babel-preset-react
  • ラン cnpm i babel-preset-react -D
• ではwebpack.config.jsアドオンルールに一致します。
  • WebPACKのでは、デフォルトのパッケージのみを扱うことができる.jsファイルの拡張子タイプを
  • 以下のような.png、.vueイニシアチブプロセスを取りません
  • だから、サードパーティ製のローダーを設定します

// webpack.config.js
module:{
  rules:[
    { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
  ]
}

• 追加.babelrcのプロファイルを

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}