编者语: 说了两篇理论,是时候实操一下了。找个实例说说。
假设我们要用ReactJS实现一下列表
由于React 是组件化的元素,所以这个时候你需要分解一下这个页面
如图所示 ,我会分解成
头 head - 这是一个滚动的广告,是页面的头部
尾foot - 这是一个底部,负责Tab
最后就是我们所说的列表catalogList了
之后在Index.tsx重新按cmd+shit+B 就可以对tsx进行编译,生成Index.js,Index.js.map两个文件了。
二. 写代码去
最后一步,当然是运行看看,感觉不错吧。
大家开始手痒想马上连接数据了吧,别急,下篇见!!
假设我们要用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添加进去即可了。
最后一步,当然是运行看看,感觉不错吧。
大家开始手痒想马上连接数据了吧,别急,下篇见!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。