1 <！DOCTYPE HTML> 2 <HTMLのlang = " EN " > 3 <ヘッド> 4 <メタのcharset = " UTF-8 " > 5 <メタ名= " ビューポート"コンテンツ= " 幅=デバイス幅、初期スケール= 1.0 " > 6 <タイトル>ドキュメント</タイトル> 7 <スクリプトSRC = " ../js/react.development.js " > </ SCRIPT> 8 <スクリプトSRC = " ../js/react-dom。開発。JS " > </ SCRIPT> 9 <SCRIPT SRC = " ../js/babel.min.js " > </ SCRIPT> 10 </ HEAD> 11 <BODY> 12である <DIV ID = " TEST1 " > </ div> 13である <DIV ID = " TEST2 " > </ div> 14 </ BODY> 15 </ HTML> 16 <スクリプトタイプ= " テキスト/バベル" > 17 // 1、定義コンポーネント 18 // 1、コンポーネントファクトリ関数（単純な成分） 。19 機能MyComponent1 （）{ 20は リターン <のH1> 定義コンポーネント方法</ H1の> 21です } 22は、 ある23 // 実施例2、ES6クラス構成要素（複合アセンブリ） 24 クラスはReact.Component {延びMyComponent2 25 （レンダリング）{ 26である にconsole.log（この ;）// MyComponent2オブジェクトインスタンス 27 リターン <のH1>アセンブリ二つの方法を定義します</ H1の> 28 } 29 } 30 // 2、アセンブリラベルをレンダリングする 31ことである ReactDOM.render（<MyComponent1 />のdocument.getElementById（" TEST1 " ））; 32 ReactDOM.render（<MyComponent2 />のdocument.getElementById（" TEST2 " ））、 33は 34のIS </ SCRIPT>
