JSXの構文を使用して反応させます

内容：

1、JSXは、プロジェクトを反応させるの構文有効

2、JSXのライトJSコード

1、JSXは、プロジェクトを反応させるの構文有効

　　JSの演算子と構文仕様のxml：JSX文法

　　自然JSX構文：実行時に、React.createElementを実行する形式に変換

　　ステップ1：プラグインバベルをインストールします。

cnpm Iバベルコアバベル・ローダー・バベル・プラグイン・変換・ランタイム-D
cnpm Iバベルプリセット-ENVバベル・プリセット・ステージ0バベルプリセット反応し-D

　　ステップ2：webpack.config.js

VARのパス=必要（ 'パス' ）

// インポートが自動的にプラグインメモリのインデックスページを生成 
CONST = HtmlWebPackPlugin（「HTML-のWebPACK-プラグイン」が必要です）
CONST htmlPlugin = 新しいHtmlWebPackPlugin（{
    テンプレート：path.join（__ dirnameは、 './src/index.html' ）、
    ファイル名：「index.htmlを」// ホームメモリ名で生成
}）;

module.exportsは = {
    モード：「開発」、
    プラグイン：[
        htmlPlugin
    ]、
    モジュール：{
        ルール：[
            {試験： /\.js|jsx$/、使用：[ 'バベルローダ']、除外する：/ node_modules / }
        ]
    }
}

　　ステップ3：.babelrcプロファイルを追加します。

{
     "プリセット"：[ "ENV"、 "ステージ0"、 "反応する" ]、
     "プラグイン"：[ "変換-ランタイム" ]
}

　　ステップ4：index.js使用JSX構文

インポートは「反応」からリアクト
からの輸入ReactDOM「反応-DOM」を

// 仮想DOM要素作成
// パラメータ1：要素名、パラメータ2：プロパティ、パラメータ3-N：子ノード
// CONST = MYH1 React.createElement（ 'のH1'、{ID： 'MYH1'}、「ラベルのH1をテキスト'）
// constの= React.createElement myDiv（' DIV 'NULL、' divのテキスト」、MYH1）// divがのH1含ま
constのmyDiv = <DIV ID = "myDiv">テストJSX構文</ DIVを>
 // DOMレンダリングするための仮想ページ
// パラメータ1：仮想DOM要素を、パラメータ2：コンテナ 
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ '））

　　ステップ5：NPM実行DEV

　　5つのステップ上記の仕上げ、package.json：

{
   "名前"： "webpack4.xベース" 、
   "バージョン"： "1.0.0" 、
   "説明"： "" 、
   "主"： "index.js" 、
   "スクリプト" ：{
     "テスト"： "エコー\ "エラー：なしテストは\指定されていません" 1"番出口&& 、
     "DEV"： "のWebPACK-devのサーバー--open --port 3000 --hot --host 127.0.0.1"
  }、
  "キーワード" ：[]、
   "著者"： "" 、
   "ライセンス"： "ISC" 、
   "devDependencies" ：{
     "バベルコア"： "^ 6.26.3" 、
     "バベルローダ"：「^ 8.0。 6" 、
     "バベル・プラグイン・変換・ランタイム"： "^ 6.23.0" 、
     "バベル・プリセット-ENV"： "^ 1.7.0" 、
     "バベル・プリセット・反応"： "^ 6.24.1" 、
     "バベル・プリセット・ステージ0"： "^ 6.24.1" 、
     "HTML-のWebPACK・プラグイン"： "^ 3.2.0" 、
     "WebPACKの"： "^ 4.41.2" 、
     "WebPACKの-CLI "： "^ 3.3.10" 、
     "WebPACKの-devのサーバー"： "^ 3.9.0"
  }、
  "依存性" ：{
     "反応する"： "^ 16.12.0"は、
     "^ 16.12.0"： "-DOMを反応します"
  }
}

　　結果は与えられました：

　　ソリューション：

　　アンインストールバベルローダー@ 8

cnpm国連バベルローダー

　　インストールバベル-ローダー@ 7、（インストール"バベル-ローダー" ： "^ 7.1.5"）

cnpm Iバベル-ローダー@ 7 -D

2、JSXのライトJSコード

　　変数の使用

インポートは「反応」からリアクト
からの輸入ReactDOM「反応-DOM」を

MSG = CONST "こんにちは" ; 
CONST myDiv = <DIV ID = "myDiv"> {MSG}テストJSX構文</ div>
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ'））

　　表現

CONST A = 10 。
myDiv CONST = <DIV ID = "myDiv"> A + 2 {}構文試験JSX </ div>
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ'））

　　式のトリプレット

CONSTフラグ= 真。
myDiv CONST = <DIV ID = "myDiv"> {中のフラグ'真' :? '偽'}構文試験JSX </ div>
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ'））

　　プロパティの値をバインド

CONST ptitle = "プロンプト" 。
MYP CONST = <P ptitle表題= {}>テストJSX構文</ P>
ReactDOM.render（MYP、のdocument.getElementById（ 'アプリ'））

　　JSX要素をレンダリング

constのH1 = <H1> H1テキスト</ H1>
CONST mydiv = <DIV> {H1}構文試験JSX </ div>
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ'））

　　アレイのJSX要素をレンダリング

CONST ARR = [
     <H1> H1 </ H1>
    <H2> H2 </ H2>
]
myDiv CONST = <DIV> ARR {}構文試験JSX </ div>
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ'））

　　JSX通常の配列に文字列の配列とページをレンダリング

StrArrayと=定数[
     'zhangwuji' 、
     '周Zhiruo' 、
     '趙'
]
CONST nameArray = []
StrArrayと。forEachの（項目 => {
    CONST TEMP = <H2> {アイテム} </ H2>
     nameArray.push（TEMP）
}）
myDiv CONST = <DIV> nameArray {}構文試験JSX </ div>
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ'））

　　若しくは

StrArrayと=定数[
     'zhangwuji' 、
     '周Zhiruo' 、
     '趙'
]
VAR nameArray = StrArrayと。地図（項目=> {
     リターン <H3> {アイテム} </ H3>
 }）
myDiv CONST = <DIV> nameArray {}構文試験JSX </ div>
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ'））

　　若しくは

StrArrayと=定数[
     'zhangwuji' 、
     '周Zhiruo' 、
     '趙'
]
CONST mydiv = <DIV> {strArray.map（項目=> <H4> {アイテム} </ H4>）} </ div> 
ReactDOM.render（mydiv、のdocument.getElementById（ 'アプリ'））

JSXの構文を使用して反応させます

おすすめ