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添加进去即可了。

     

   

      最后一步，当然是运行看看，感觉不错吧。

                                                                


             大家开始手痒想马上连接数据了吧，别急，下篇见！！