React with TypeScript 系列(三) --实战篇

编者语： 说了两篇理论，是时候实操一下了。找个实例说说。
假设我们要用ReactJS实现一下列表
由于React 是组件化的元素，所以这个时候你需要分解一下这个页面
如图所示，我会分解成
头 head - 这是一个滚动的广告，是页面的头部

尾foot - 这是一个底部，负责Tab

最后就是我们所说的列表catalogList了

按照这个划分我们的页面是由<head/><catalogList/><foot/>按顺序构成，若果再细分CatalogList 你可以针对每个行在划分成CatalogItem组件。而CatalogItem里的再划分是没有必要了。
我们开始搭建我们的平台
1. 开发工具和环境搭建
Visual Studio Code 是我的个人选择，当然你可以用Atom,也可以用SublimeText。如果要编译tsx文件你必须对VisualStudio Code 进行配置（这里有个前提是你需要把我的第一篇文章看了，因为你需要安装好react.d.tsd文件）,我在asp.net 5 模版下构建例子，添加了一个简单的Index.tsx文件。

当我需要编译这个文件时（mac 下cmd＋shit＋B，windows下自己找文档吧），系统会要求你创建一个编译环境

你点击Configure Task Runner,就会生成task.json,

我们先忽略上面，由于用到了TypeScript去编写React，那我们需要新增一个tsconfig.json去把一些编译参数添加进去，具体如

下：

<span style="font-size:14px;">{
	"compilerOptions": {
        "jsx" : "react","outDir": "./wwwroot/ts/","target": "es5","module": "commonjs","sourceMap": true
	},"files": [
        "./wwwroot/ts/Index.tsx"
    ]
}</span>

回到我们的task.json把args那行替换为"args":["-p","."]即可，

之后在Index.tsx重新按cmd+shit+B 就可以对tsx进行编译，生成Index.js,Index.js.map两个文件了。

二. 写代码去

按照之前分析的方法我们去构建tsx其实很简单(我这里先做一个静态的，动态的之后系列再谈)
Head组件如下：

class Head extends React.Component<any,any>{
    public render()
    {
        return (<div>
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            <div className="swiper-slide">
                                <a href="#">
                                    <img alt="" src="images/ad/app.jpg" />
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a href="#">
                                    <img alt="" src="images/ad/app.jpg" />
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a href="#">
                                    <img alt="" src="images/ad/app.jpg" />
                                </a>
                            </div>
                        </div>
                        <div className="swiper-pagination"></div>
                    </div>
              </div>);
    }
}

Foot组件如下：

class Foot extends React.Component<any,any>{
    public render()
    {
        return (<div>
                    <div id="footer">
                                <ul>
                                    <li><a href="#" className="navs curr"><div className="navs-home"></div>首页</a></li>
                                    <li><a href="#" className="navs"><div className="navs-group"></div>我的团</a></li>
                                    <li><a href="#" className="navs"><div className="navs-order"></div>我的订单</a></li>
                                    <li><a href="#" className="navs"><div className="navs-user"></div>个人中心</a></li>
                                </ul>
                     </div>
              </div>);
    }
}

CatalogItem 组件如下：

class CatalogItem extends React.Component<any,any>{
    public render()
    {
        return (<div>
                    <div className="goods">
                        <a href="#">
                            <div className="goods-img">
                                <img src="images/goods/good.jpg" alt="" />
                                <span className="goods-mark">
                                    <span className="goods-discount">8.0折</span>
                                    <span className="customers-num">3人团</span>
                                </span>
                            </div>
                            <h2>【正宗哈密瓜】西州蜜17号1个19.9元（单果大于1.5千克）</h2>
                            <p className="outline">【正宗哈密瓜】西州蜜，甜如蜜！椭圆浅麻绿，网纹细全密。甜不甜，大不大，一个重来有3斤！浓香溢，肉细腻，清甜爽口西州蜜！</p>
                            <div className="goods-go">
                                <div className="goods-go-icon"></div>
                                <div className="goods-go-price">
                                    <span>3人团</span>
                                    <b>¥19.90</b>
                                </div>
                                <div className="goods-go-btn">去开团</div>
                            </div>
                        </a>
                    </div>
              </div>);
    }
}

CatalogList组件如下：

class CatalogList extends React.Component<any,any>{
    public render()
    {
        return (<div>
                     <div id="goods-list">
                        <CatalogItem/><CatalogItem/>
                     </div>
                </div>);
    }
}

最后就是修正Index组件并把Head,CatalogList,Foot组件添加进去，并对应页面dom标签就可以：

class Index extends  React.Component<any,any> {
    
    
  public render(){
      return (<div><Head/><CatalogList/><Foot/></div>);
  }
    
}

function renderIndex(){
    
ReactDOM.render(
             <Index />,document.getElementById('wrap')
  
          );


}

renderIndex();

回到default.html,你所做的就是添加Index.js和把其他css添加进去即可了。

最后一步，当然是运行看看，感觉不错吧。
大家开始手痒想马上连接数据了吧，别急，下篇见！！

React with TypeScript 系列(三) --实战篇

相关推荐