###ステップ1：足場がコンピュータにインストールされている反応
cnpmインストール作成反応するアプリ-g
###ステップ2：プロジェクトを作成します。
creact反応するアプリのプロジェクト名（ショッピング）
###ステップ3：プロジェクトが正常に実行できるかどうかを確認するために、プロジェクトに行きます
CDショッピング======> NPM開始或cnpm糸--save后糸のスタートをインストール
###ステップ4：2つのフォルダや店舗アプリケーションを作成します。
App.jsとApp.cssは====「index.jsはApp.jsを導入するの経路に適応する必要があるアプリケーションフォルダに移動しました
二つのファイルsp.cssとsp.jsは、お店のフォルダに移動し作成します
###第五ステップ：コードsp.jsを書きます
インポートを反応させる、コンポーネント「反応」{から}; // ---->モジュールに組み込ま反応
移入「./sp.css」//導入sp.cssスタイル
クラスComponent Spの{延び
コンストラクタ（小道具）{
スーパー（小道具） ;
= {this.state //初期化状態を定義
良い：//良い方法でアレイに書き込まれるデータのページ保存
"1.png"、TXT：{IMG ： " 手"、JQ：12、NUMを1は、確認：偽}、//ここに写真が地元のイメージである、あなたは交換する必要がある自分のスタイルの客室に交換する必要がある
「2.png」、TXT：{IMG ：「20：表」、JQをNUM :. 1、チェック：falseに}、
{IMG： "3.png"、TXT： "椅子"、JQ：32、NUM :. 1、チェック：falseに}、
{IMG： "1.png"、TXT：「ベンチ」JQ：40、チェックNUM :. 1：} falseに
]、
C：falseに //後決意チェックボックスの状態を定義
}
}
ZJ（）{// --->総
VAR一覧= this.state.good; //リスト内のデータ取得
VAR S = 0; //ストアの合計変数を宣言
（（list.forEach V、I）=> { //その内部サイクルデータ
IF（v.checked）{ //決定、チェックボックスが選択されたときに
S + =（* v.jq v.num）; // 合計等号現在データを選択価格*数量
}
}）;
S戻り
}
（N）{//ボタン+追加JJを
this.state.good = VARリストと、
リスト[N-】.num ++; //現在の添字N- 、クリックして、プラスそれぞれの数1。
this.setState（{○：リスト}）現在の状態を更新//
}
建（N-）{// -ボタン保存
VAR一覧= this.state.good;
リスト[N-] .num--;// Nデクリメント、クリック、現在のインデックスの1
IF（リスト[N-】.num <= 0）{ 「最小を購入する」数がゼロに達した判断、ポップアップは、バックを行わず、最小数は1である。
アラート（ "最小を買う"）;
リスト[N- = .num 1;
}
this.setState（{○：リスト}）更新//現在のステータス
}
のTg（N-）{ // - - >スイッチボタンクリックのチェックボックスは、現在3つのメソッドを実行するには実装されてもよい
VAR一覧を= this.state.good;
一覧[N-]一覧は、= N- [] .checkedを;! .checkedを//負の値を
// == ============================== ===第一の方法
//するvar LER = list.filter（（V 、I ）=> { //フィルタリングの配列方法は
v.checked戻す// // --->チェックボックスが選択されている戻り
@}）;
// IF（ler.length == List.lengthを）{ / / --->選択されたチェックボックスの長さのデータ長を解析し、配列は同じです
This.setState //（{グッド：リスト、C：trueに}）// --->はい場合は、すべての属性を選択するがtrueにfalseに更新されます
//他{}
// this.setState（{グッド：リスト、 C：} falseに）// --->でない場合は、falseにすべての属性を選択する
} //
// ==========================第二の方法====================
// VARのlist.everyのLER =（（V、I）=> { // --->すべての複数条件がtrueに満たされたときにチェックボックスがチェックされます
。v.checked返す// // --->シングルfalseに戻っ選択
）} //
// //にconsole.log（LER）
// this.setState（良好{：リスト、C：LER}）、CCのLERのステータスを更新// LERが偽である場合、CCは偽であり、そしてその逆
// ================ ====================================第三の方法
VAR太陽= 0; //太陽を宣言する値の保存に使用
するvar FFを=はtrue。//真偽判定の状態宣言
list.forEachを（（V、I）=> { //サイクル判定
IF（v.checked）{ //太陽を聞か追加する場合、チェックボックスが選択された場合。1
太陽++
}
}）
IF（==太陽List.length）{ //ときときその全長に等しく選択され、太陽の数は、現在の
FFが真=; //状態FFはtrueに出力される
}他{ //逆に
偽のFF =
}
this.setState（{良い：リスト、C：FF}）//現在のCC状態FFの状態を等しくする
}
QX（）{ // --->選択
VAR一覧= this.state.good;
VARのC = ！this.state.c; // ---> trueに現在の状態を変更するために選択し
list.forEach（（V、I）=> { // --->循環電流のリスト配列
Cは= v.checked; // --->に良好に割り当てられた真のステータスを選択チェック
}）;
this.setState（{良い：リスト、C}）//更新状況
}
JS（）{ // --->請求
VAR一覧= this.state.good;
=（（V、I）=> {list.filter VaRは//アレイ法は、フィルタの条件を満たし、新しいアレイ出力は、フィルタ条件が満たさスワップありません
戻りv.checked 時//チェックボックスが選択されている
}）
はconsole.log（A）//現在コンソール、価格、数量、等に出力データを選択
}
レンダリング（）{
リターン（
<クラス名= DIV "ボックス「>
<UL>
{
this.state.good.map（（V、I）=> { 修復の地図データの//アレイ法の後、新たなアレイ戻りライン
戻り<LIキー= {I}>
{/ * <スパンクラス名= {（v.checked "アクティブ"：？ ""）+」D1" }のonClick = {this.tg.bind（本、I）}> < /スパン> * /}
<IMG SRC = {v.checked "/ ab.png"？ "/ aa.png"} ALT = ""のonClick = {this.tg.bind（本、I）} />
< IMGのSRC = {v.img} ALT = "" />
<DIVクラス名= "BOX1">
<P> {v.txt} </ P>
<I> $ {v.jq} </ I>
の<input type = "ボタン"値= "+"のonClick = {this.jj.bind（本、I）} />
<input type = "text"値= {v.numスタイル= {} {幅： "20ピクセル"}} /> {/ *注：スタイルを増加させるためには、中括弧{}を{} * /}ビス
<input type = "ボタン"値= " - "のonClick = {this.jian.bind（本、I）} />
</ div>
</ LI>
}）
}
</ UL>
<DIVクラス名= "BOX2" >
<スパンクラス名= {（this.state.c "アクティブ"：？ ""）+」D1" }のonClick = {this.qx.bind（本）}> <B>全选</ B> </スパン>
<スパン>合计$ {this.zj（）} </スパン>
の<input type = "ボタン"値= "结算"のonClick = {this.js.bind（本）} />
</ div>
</ DIV >
）;
}
}
エクスポートデフォルトSpを; //由来
###在sp.css中写样式
.box ul{
list-style: none;
}
.box ul li{
width: 400px;
height: 150px;
line-height: 10px;
}
.box ul li:hover{
background: #ccc;
}
.box ul li>img{
margin: 10px 0;
width: 100px;
height: 100px;
float: left;
}
.d1{
float: left;
display: block;
width: 40px;
height: 40px;
border: 1px solid #000;
border-radius:50%;
}
.active{
background:url(/ab.png) no-repeat;
background-size:40px 40px;
}
.box1{
float: right;
}
###在App.js中写入代码
import React from 'react';//引入react模块
import Sp from "../shop/sp"//引入sp.js文件
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Sp></Sp>{/* sp.js的组件*/}
</div>
);
}
}
export default App;//导出
###以上一个简单的购物车已经完成了 ，欢迎联系我，一起交流学习！！！