反応：コンポーネント指向プログラミングを
--->指向コンポーネントのためのオブジェクト指向--->モジュール
結果を実現：
<MyComponentの>
<H2>組立工場機能（シンプル成分）</ H2>
</ MyComponentの>
<MyComponent2>
<H2> ES6クラスコンポーネントの</ H2>（複合アセンブリ）
</ MyComponent2>
コード：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル> WORK3 </ TITLE>
<SCRIPT SRC = "../ JS / react.development.js" > </ SCRIPT>
<SCRIPT SRC = "../ JS / dom.development.js-REACT "> </ SCRIPT>
<SCRIPT SRC =" ../ JS / babel.min.js"> </ SCRIPT>
<タイプ=スクリプト「テキスト/バベル」> // 組立工場機能を実施の形態（単純なコンポーネント：コンポーネントなしの状態）：// 1.アセンブリ定義関数 MyComonent（）{ // 直接「レンダリング」メソッドの戻り <H2>組立工場機能</ H2>（簡単な組立）
}
// 2.コンポーネントタグをレンダリング
React.render（</>,document.getElementById("example1 MyComonent「）） // 第二の方法：ES6クラスコンポーネント（複雑なコンポーネント）//
1.定義コンポーネント：
クラスが延びるReact.Component {MyComponent2 //は、コンポーネントクラスのタイプを定義し、作成するインスタンスは、
（レンダリング）{ // このクラスは、（レンダリング）renderメソッドを有する
リターン複合ES6クラスコンポーネントの<H2>を（成分）</ H2>
}
}
// 2.コンポーネントタグをレンダリング：
ReactDOM.render（<MyComonent2 />,document.getElementById("example2 "））
</ SCRIPT>
</ head>
<body>
<DIV ID ="例1 "> </ div>
<divのID ="例2「> </ div>
</ BODY>
</ HTML>
コンポーネントクラスでこれを印刷：
MyComponent2延びReact.Component {クラス レンダリング（）{ にconsole.log（本） リターン <H2> ES6クラスコンポーネント</ H2>（複雑なアセンブリ）用 } }
3つの重要な属性の方法があります。
小道具：コレクションオブジェクトの複数の属性
レフリー：スキップ
状態：状態
プロパティの3つの主要コンポーネント：
プロパティ：状態
理解します：
1.stateは、（複数のデータを含むことができる）オブジェクトの最も重要なコンポーネントオブジェクト属性の値であります
2.アセンブリが更新されたコンポーネントの状態によって（成分再レンダリング）に対応するページの表示を更新するために、「状態マシン」と呼ばれます。
操作をコードします：
1.初期設定の状態：
コンストラクタ（小道具）{ スーパー（小道具） この .STATE = { // このオブジェクトが代表的アセンブリである状態を初期値にthis.state stateProp1：VALUE1、 stateProp2：値2 } }
2.リードステータス値:(属性の内部状態の値を読みます）
この .state.statePropertyName
3.ステータスを更新--->アップデート・インターフェース・コンポーネント（のみ更新ステータスDOM操作に反応しません）
この.setState（{//の更新状態法 ：VALUE1、stateProp1 stateProp2：値2 }）
サンプルコード：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> WORK4 </ TITLE>
<スクリプトSRC = "../ JS / react.development.js" > </ SCRIPT>
<スクリプトSRC = "../ JS /反応-dom.development.js "> </ SCRIPT>
<スクリプトSRC =" ../ JS / babel.min.js"> </ SCRIPT>
<スクリプトタイプ= "テキスト/バベル"> // 1定义组件 クラス等がReact.Component {延び
コンストラクタ（小道具）{ // 调用父类的构造函数
スーパー（小道具） //を小道具传递これを。 = {状態// 初期化状態
isLikeMe：falseに// 変化するコンテンツH2、ブール識別子がなければならない2つの状態は、二つのテキストを表します
}
//は、オブジェクトの構成要素を結合するこの新しい方法を強制する、バインド方法は、以下の新たな機能が得られる
。この .handleClick = この .handleClick.bind（本）
}
レンダリング（）{
// リードステータス
// Aの書き込みを：
// CONST = isLikeMe this.state.isLikeMe;
//が書いII：分割代入する
のconst} = {isLikeMe この.STATEの
リターン <H2 = {のonClick この .handleClick}> isLikeMe { 'ドゥ・スギョン- '： 'DO'？ } </ H2>
// バインドイベント
}
//注;上記のコンストラクタ、メソッド書き換えレンダリングは、アセンブリの方法であるが、以下では、新しい方法であり、内部デフォルトhandleClickの新しい方法は、このコンポーネントは、オブジェクトではなく、未定義
handleClick（）{ // 更新状態を
// 元を得ること状態と否定
！CONST isLikeMe = この.state.isLikeMe
// 新しい状態に設定
この.setState：（{isLikeMe isLikeMe}）
// ES6新しい構文については、と略記することができる。this.setState（isLikeMeを{}）
}
}
/ / 2.コンポーネントタグレンダリング
ReactDOM.render（</>、のdocument.getElementById（ "例のように"））
</ SCRIPT>
</ head>
<body>
<DIV ID ="例"> </ div>
</ BODY >
</ HTML>
注意：
ReactDOM.render（<同様/>,document.getElementById("example「））
// 何もサブラベルがない場合は、ここでタグは書き込み：<のような/>、書き込みサブタグがある場合
ReactDOM.renderを（<> </などのようなが>、のdocument.getElementById（ "例えば"） ）
注：ASが長い部品組立工場機能の状態が存在するように使用することができません
二つの属性：小道具
理解します：
1.各コンポーネントオブジェクト属性は、小道具を持っています
2.すべてのプロパティ要素タグは小道具に格納されています
役割：
1.データ転送は、外側ラベル属性からコンポーネントを介してコンポーネントに変更されます
2.注：小道具の内部コンポーネントを変更しないでください
操作をコードします：
1.内部には、プロパティの値を読み取ります
この .props.propertyName
2小道具のプロパティ値は、制限のタイプを制限することが必要であろうと
//老方法：
Person.propTypes = { 名：React.PropTypes.string.isRequired、 年齢：React.PropTypes.number.isRequired }
//新方法：
//プロパタイプ库
= {Person.propTypesの
名前：PropTypes.string.isRequired、//文字列型とアイテムの強調表示されなければならない
年齢：PropTypes.numberは//のみデジタルタイプを強調
}
3.拡張属性：小道具を通過するすべてのオブジェクトの属性
<人... {...}人/>
4.デフォルトのプロパティ値
Person.defaultProps = { 名： "メアリー" }
コンポーネントクラスのコンストラクタ
コンストラクタ（小道具）{ スーパー（小道具） にconsole.log（小道具） // すべての属性値をチェック }
部品実装の複数のタグ：効果を達成するために
コード：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> work5 </ TITLE>
<スクリプトSRC = "../ JS / react.development.js" > </ SCRIPT>
<スクリプトSRC = "../ JS /反応-dom.development.js "> </ SCRIPT>
<スクリプトSRC =" ../ JS / babel.min.js"> </ SCRIPT>
<スクリプトSRC = "../ JS /プロパtypes.js "> </ SCRIPT>
ます。<script type =" text /バベル"> // 1.定义组件// 第一种定义方法/ * 関数者（小道具） {
リターン
（<UL>
<LI>姓名：{props.name} </ LI>
<LI>性別：props.age {} </ LI>
<LI>年齢：props.sex {} </ LI>
）
</ UL>
} * /
// 第二の方法が定義されている：
クラス{React.Component人延び
レンダリング（）{
リターン（
<UL>
<LI>名：{ この .props.name} </ LI>
<LI>性別：{ これを } .props.age </ LI>
<LI>年齢：{ この .props.sex} </ LI>
</ UL> ）
}
} // 指定された属性のデフォルト値
Person.defaultProps = {
性別： 'M' 、
年齢：18
}
// 指定されたタイプの属性値と必要
Person.propTypes = {
名：PropTypes.string.isRequired、 // 強調表示された項目の文字列型と必須
年齢：PropTypes.number // のみ強調デジタルタイプ
}
// 2。コンポーネントタグレンダリング
CONST = P1 {
名：「トム、
年齢： 100 、
性別： 'F'
}
// ReactDOM.render（<p1.name者名= {} = {p1.age年齢性別= {P1を}。 }セックス/>、のdocument.getElementById（ "例1"））
// 速記方法。
ReactDOM.render（<人{...} P1 />、のdocument.getElementById（ "例1"））
CONST P2 = {
名： 'ジャック'
}
ReactDOM.render（ <個人名= {p2.name} /> document.getElementById（ "例
2"））</ SCRIPT>
</ head>
<body>
<DIV ID = "例1"> </ div>
<DIV ID = "例2"> </ div>
</ body>
</ HTML>
注ES6 ...役割：
1.包装
// メソッドの定義とき 関数（AS ...）{} // コール FN（1,2,3,4,5,6）
2.開梱
ARR1 CONST = [1,2,3 ]。
ARR2のconst = [1、... arr1,4,5,6]
3つの属性：レフリー
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> work6 </ TITLE>
<スクリプトSRC = "../ JS / react.development.js" > </ SCRIPT>
<スクリプトSRC = "../ JS /反応-dom.development.js "> </ SCRIPT>
<スクリプトSRC =" ../ JS / babel.min.js"> </ SCRIPT>
<スクリプトタイプ= "テキスト/バベル"> // 1定义组件 クラスMyComponentのはReact.Component {延び
コンストラクタ（小道具）{
スーパー（小道具）この .showInput = この .showInput.bind（本）
、これを。handleBlur = この .handleBlur.bind（この）
}
レンダリング（）{
リターン（
の<div>
< -最初の方法:!推奨しない- >
< - -の<input type = "text" REF = "コンテンツ" />！>
<！ -第二の方法：REFが初めてレンダリングを行いますコールバック関数となっており、この機能は、コンポーネントオブジェクトに現在のDOM要素を保存することである- >
<タイプのINPUT =「テキスト」REF = {INPUT => この .input入力} = />
<ボタンのonClick = { この .showInput}>プロンプト</ボタン>
の<input type = "text"のプレースホルダ= "プロンプトコンテンツ失うフォーカス" = {onBlurイベントこの .handleBlur} />
</ DIV> ）
} // カスタムメソッド
showInput（）{
/ *
最初の方法：
CONST INPUT = this.refs.content;
にconsole.log（input.value）
* /
// 第二の方法
はconsole.log（この.input.value）
}
handleBlur（イベント）{
にconsole.log（event.target.value）
}
}
// 2.レンダリングコンポーネントタグ
ReactDOM.render（</>、のdocument.getElementById（ "例MyComponentの"））
</ SCRIPT>
</ HEAD>
<BODY >
<DIV ID = "例"> </ div>
</ BODY>
</ HTML>