まず第一に反応する特定の基盤を持っている、と（プロジェクトファイルの使用と役割を含む）いくつかの説明なし内部
### 1.反応するプラグインをインストール
NPM一度だけインストールする必要が-g作成反応するアプリをインストール
### 2.反応する足場をダウンロード
作成反応するアプリのプロジェクト名（TODO）
### 3.プロジェクトを開始したり、時間を実行しますTODO入力してください
NPM NPM糸--saveをインストール------------>糸の開始を開始したり、ダウンロードすることができますも開始することができます
App.jsにフォルダを作成するには、アプリ### 4.内側とApp.css入れています
App.jsにおける導入路は、###ビットindex.js修飾しました
「./App/App」からインポートするアプリケーション。
### 6.新しいto.jsファイルRCC詐欺のどのショートカット（へ）フォルダを作成します。
7. ### App.jaに組み込まれました
「../todo/to」からインポートします。
<へ> </へ>
to.jsで### 8.書きます
、コンポーネント{から}は「REACT」インポートを反応させる、
ためのクラスコンポーネント{延び
コンストラクタ（小道具）{
スーパー（小道具）;
this.state = {//初期化状態の
タイトル：「」、彼によって取得//ユーザデータを、 、リストに渡された
[] //、データを記憶するための空の配列を作成追加：リストを
trueに：//ショー
;}
これを達成するために指すように変更され; // this.ch = this.ch.bind（本）
= this.add this.add.bind（この）; //この点が変更達成する
}
CH（E）{//入力ボックスを取得し、ユーザ入力
this.setState（{タイトル：e.target.value}）;
}
追加（）{//データを追加するには、[追加]ボタンをクリックして
アラート（this.state.title）; //
VAR一覧= this.state.list;
するvar A = this.state.title;
VAR {T =
TT：A、
DONE：falseに、
SS：trueに
}
list.push（T）;
this.setState（{リスト、タイトル： ""}）//更新されたステータス
}
デル（N-）{//削除、[削除]ボタンをクリックしてデータ
VaRのリスト1 this.state.list =;
list1.splice（N- ,. 1）;
this.setState（{リスト：リスト1}）
}
CK（N-）{//チェックボックスをクリックして、完全な未完成の切り替え効果を達成するために
VARのLIST2を= this.state.list;
LIST2 [N-]の.done = LIST2 [N-]の.done ;!
this.setState（{リスト：LIST2}）
}
SL（N）{//実現数、データの各追加部分又は完全異なるデータが表示され
、VAR LIST3 = this.state.list
VAR S = 0;
list3.forEach（（V、I、A）=> {
IF（v.done）{
Sを++
}
}）;
戻りS;
}
選択選択解除を*****に問題クリック間で達成DA（）{//トグル効果
// VAR list4 = this.state.listを;
// //アラート（list4）;
// list4.map（（V、I、A）=> {
// IF（v.done == v.done）{！
= v.done v.done //！
//他} {
= v.done v.done //！
//}
Vを戻す//
//}）
// this.setState（{リスト：list4}）
VAR一覧= this.state.list;
List.map（（V、 I）=> {
VARのv.done = S;
S = S！の
v.done = S;
this.setState（{S：S}）！
！// v.done = v.done
// this.setState（{リスト}）
}）
}
DD（N）{
VAR一覧= this.state.list。
リスト[n]は.SS =リスト[n]は.SS！。
this.setState（{リスト}）。
}
DS（N）{
VAR一覧= this.state.list。
リスト[n]は.SS =リスト[n]は.SS！。
this.setState（{リスト}）。
}
CC（N、イベント）{//事件的参数都放到最后
VAR一覧= this.state.list。
リスト[n]は.tt = event.target.value。
this.setState（{リスト}）。
}
レンダリング（）{
リターン（
<DIV>
の<input type = "text"の値= {this.state.title}のonChange = {this.ch} />
<ボタンのonClick = {this.add}>添加</ボタン>
<H3>未完成{this.state.list.length-this.sl（）} </ H3>
<UL>
{
this.state.list.map （（V、I、A）=> {
IF（！v.done）{
リターン<LIキー= {I}>
の<input type = "チェックボックス"のonClick = {this.ck.bind（本、I）} defaultChecked = {v.done} />
<スパンスタイル= {{表示：v.ss "インラインブロック"： "なし"}}のonClick = {this.dd.bind（本、I）}> {v.tt } </スパン>
の<input type = "text"のスタイル= {{ディスプレイ：！？v.ss "インラインブロック"： "なし"}} onBlurイベント= {this.ds。バインド（この、I）}の値= {v.tt}のonChange = {this.cc.bind（本、I）} />
<input type = "ボタン"値= "删除"のonClick = {this.del.bind（本、I）} />
</ LI>
}
}）
}
</ UL>
<H3>已完成{this.sl（ ）} </ H3>
<OL>
{
this.state.list.map（（V、I、A）=> {
IF（v.done）{
リターン<LIキー= {I}>
の<input type = "チェックボックス"のonClick = {this.ck.bind（本、I）} defaultChecked = {v.done} />
{} v.tt
<input type = "ボタン"値= "删除"のonClick = {this.del.bind（本、I）} />
</ LI>
}
}）
}
</ OL>
の<input type = "ボタン"値=」全选/全不选」のonClick = {this.da.bind（本）} />
</ div>
）。
}
}
輸出のデフォルトに。