[03] JSX文法で反応

JSX機能：
Aは、JSX成分が直接、書き込み直接HTMLコンポーネントを作成することができる
Bを、一つだけの親が存在する
Cが、クラスは、クラス名になったときに、クラス名を加えた
D、属性のラベルタグはhtmlForなり
、E式{}、書き込み変数
F、サイクルは} {直接内部書き込むことができ、JSは完全形で書かれています

jsxStudy.js

// 導入が反応 
輸入は、コンポーネント{から}「REACT」リアクト;
 //は、コンポーネントを作成
JsxStudyは、コンポーネント{拡張するクラス
    のコンストラクタ（...小道具）{ 
        スーパー（...小道具）
        このの.strを=「夢は不明歳となっています薄暗い世界を取る人。'
         この .nu​​mbers = [10,20,30 ] 
    } 
    // 唯一の親を有し、
    レンダリング（）{
         リターン（
             <DIV> 
                { / * クラス名を追加して、クラスとなるクラス名* / }
                 <クラス名P = "アクティブ">風の羽ばたき、遠い雪</ P-> 
                { / * 変数書き込む} {で* / }
                 <P-> {これの.str} </ P> 
                { / * 属性のラベルタグなるhtmlFor * / }
                 Iを選択することができる<htmlForラベル= "AAA">時点</ラベル> 
                の<input type = "チェックボックス" ID = " AAA「/> 
                { / * 周期は、{}内の直接書き込まJSの形で完全に記述することができる* / }
                 <UL> 
                    { 
                        この .nu​​mbers.map（（ヴァル）=> {
                             リターン <LI = {}ヴァルキー>ヴァル} {</ LI>
                         }）
                    }
                 </ UL> 
            </ div>        ）
    } 
} // エクスポートコンポーネント 
輸出

デフォルト JsxStudyを。

 

効果：