释放双眼，带上耳机，听听看~！
假设我们要用ReactJS实现一下列表
由于React 是组件化的元素，所以这个时候你需要分解一下这个页面 
如图所示 ，我会分解成
头 head – 这是一个滚动的广告，是页面的头部
尾foot – 这是一个底部，负责Tab
最后就是我们所说的列表catalogList了
按照这个划分我们的页面是由<head/><catalogList/><foot/>按顺序构成，若果再细分CatalogList 你可以针对每个行在划分成CatalogItem组件。而CatalogItem里的再划分是没有必要了。
我们开始搭建我们的平台
**1. 开发工具和环境搭建
Visual Studio Code 是我的个人选择，当然你可以用Atom,也可以用SublimeText。如果要编译tsx文件你必须对VisualStudio Code 进行配置
当我需要编译这个文件时（mac 下cmd＋shit＋B，windows下自己找文档吧），系统会要求你创建一个编译环境
你点击Configure Task Runner, 就会生成task.json,
我们先忽略上面，由于用到了TypeScript去编写React，那我们需要新增一个tsconfig.json去把一些编译参数添加进去，具体如****下： **
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3"compilerOptions": {
4
5"jsx" : "react",
6
7"outDir": "./wwwroot/ts/",
8
9"target": "es5",
10
11"module": "commonjs",
12
13"sourceMap": true
14
15},
16
17"files": [
18
19"./wwwroot/ts/Index.tsx"
20
21]
22
23}
24
回到我们的task.json把args那行替换为"args":["-p","."]即可，
之后在Index.tsx重新按cmd+shit+B 就可以对tsx进行编译，生成Index.js,Index.js.map两个文件了。
二. 写代码去
按照之前分析的方法我们去构建tsx其实很简单(我这里先做一个静态的，动态的之后系列再谈)
Head组件如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3public render()
4
5{
6
7return (<div>
8
9<div className="swiper-container">
10
11<div className="swiper-wrapper">
12
13<div className="swiper-slide">
14
15<a href="\#">
16
17<img alt="" src="images/ad/app.jpg" />
18
19</a>
20
21</div>
22
23<div className="swiper-slide">
24
25<a href="\#">
26
27<img alt="" src="images/ad/app.jpg" />
28
29</a>
30
31</div>
32
33<div className="swiper-slide">
34
35<a href="\#">
36
37<img alt="" src="images/ad/app.jpg" />
38
39</a>
40
41</div>
42
43</div>
44
45<div className="swiper-pagination"></div>
46
47</div>
48
49</div>);
50
51}
52
53}
54
Foot组件如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3public render()
4
5{
6
7return (<div>
8
9<div id="footer">
10
11<ul>
12
13<li><a href="\#" className="navs curr"><div className="navs-home"></div>首页</a></li>
14
15<li><a href="\#" className="navs"><div className="navs-group"></div>我的团</a></li>
16
17<li><a href="\#" className="navs"><div className="navs-order"></div>我的订单</a></li>
18
19<li><a href="\#" className="navs"><div className="navs-user"></div>个人中心</a></li>
20
21</ul>
22
23</div>
24
25</div>);
26
27}
28
29}
30
CatalogItem 组件如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2
3public render()
4
5{
6
7return (<div>
8
9<div className="goods">
10
11<a href="\#">
12
13<div className="goods-img">
14
15<img src="images/goods/good.jpg" alt="" />
16
17<span className="goods-mark">
18
19<span className="goods-discount">8.0折</span>
20
21<span className="customers-num">3人团</span>
22
23</span>
24
25</div>
26
27<h2>【正宗哈密瓜】西州蜜17号1个19.9元（单果大于1.5千克）</h2>
28
29<p className="outline">【正宗哈密瓜】西州蜜，甜如蜜！椭圆浅麻绿，网纹细全密。甜不甜，大不大，一个重来有3斤！浓香溢，肉细腻，清甜爽口西州蜜！</p>
30
31<div className="goods-go">
32
33<div className="goods-go-icon"></div>
34
35<div className="goods-go-price">
36
37<span>3人团</span>
38
39<b>¥19.90</b>
40
41</div>
42
43<div className="goods-go-btn">去开团</div>
44
45</div>
46
47</a>
48
49</div>
50
51</div>);
52
53}
54
55}
56
57
CatalogList组件如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3public render()
4
5{
6
7return (<div>
8
9<div id="goods-list">
10
11<CatalogItem/><CatalogItem/>
12
13</div>
14
15</div>);
16
17}
18
19}
20```js
21
22最后就是修正Index组件并把Head,CatalogList,Foot组件添加进去，并对应页面dom标签就可以：
23
24```js
25class Index extends React.Component<any,any> {
26
27public render(){
28
29return (<div><Head/><CatalogList/><Foot/></div>);
30
31}
32
33}
34
35function renderIndex(){
36
37ReactDOM.render(
38
39<Index />,
40
41document.getElementById('wrap')
42
43);
44
45}
46
47renderIndex();
48
49
回到default.html,你所做的就是添加Index.js和把其他css添加进去即可了。
最后一步，当然是运行看看，感觉不错吧。
