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

释放双眼,带上耳机,听听看~!

假设我们要用ReactJS实现一下列表
由于React 是组件化的元素,所以这个时候你需要分解一下这个页面 React with TypeScript 系列(三) --实战篇

如图所示 ,我会分解成
头 head – 这是一个滚动的广告,是页面的头部
React with TypeScript 系列(三) --实战篇
尾foot – 这是一个底部,负责Tab
React with TypeScript 系列(三) --实战篇
最后就是我们所说的列表catalogList了
React with TypeScript 系列(三) --实战篇
React with TypeScript 系列(三) --实战篇

按照这个划分我们的页面是由<head/><catalogList/><foot/>按顺序构成,若果再细分CatalogList 你可以针对每个行在划分成CatalogItem组件。而CatalogItem里的再划分是没有必要了。
我们开始搭建我们的平台
**1. 开发工具和环境搭建
Visual Studio Code 是我的个人选择,当然你可以用Atom,也可以用SublimeText。如果要编译tsx文件你必须对VisualStudio Code 进行配置
React with TypeScript 系列(三) --实战篇
当我需要编译这个文件时(mac 下cmd+shit+B,windows下自己找文档吧),系统会要求你创建一个编译环境
React with TypeScript 系列(三) --实战篇
你点击Configure Task Runner, 就会生成task.json, React with TypeScript 系列(三) --实战篇
我们先忽略上面,由于用到了TypeScript去编写React,那我们需要新增一个tsconfig.json去把一些编译参数添加进去,具体如****下: **


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1{
2
3&quot;compilerOptions&quot;: {
4
5&quot;jsx&quot; : &quot;react&quot;,
6
7&quot;outDir&quot;: &quot;./wwwroot/ts/&quot;,
8
9&quot;target&quot;: &quot;es5&quot;,
10
11&quot;module&quot;: &quot;commonjs&quot;,
12
13&quot;sourceMap&quot;: true
14
15},
16
17&quot;files&quot;: [
18
19&quot;./wwwroot/ts/Index.tsx&quot;
20
21]
22
23}
24

回到我们的task.json把args那行替换为"args":["-p","."]即可,
React with TypeScript 系列(三) --实战篇
之后在Index.tsx重新按cmd+shit+B 就可以对tsx进行编译,生成Index.js,Index.js.map两个文件了。
React with TypeScript 系列(三) --实战篇
二. 写代码去

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


1
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
1class Head extends React.Component&lt;any,any&gt;{
2
3public render()
4
5{
6
7return (&lt;div&gt;
8
9&lt;div className=&quot;swiper-container&quot;&gt;
10
11&lt;div className=&quot;swiper-wrapper&quot;&gt;
12
13&lt;div className=&quot;swiper-slide&quot;&gt;
14
15&lt;a href=&quot;\#&quot;&gt;
16
17&lt;img alt=&quot;&quot; src=&quot;images/ad/app.jpg&quot; /&gt;
18
19&lt;/a&gt;
20
21&lt;/div&gt;
22
23&lt;div className=&quot;swiper-slide&quot;&gt;
24
25&lt;a href=&quot;\#&quot;&gt;
26
27&lt;img alt=&quot;&quot; src=&quot;images/ad/app.jpg&quot; /&gt;
28
29&lt;/a&gt;
30
31&lt;/div&gt;
32
33&lt;div className=&quot;swiper-slide&quot;&gt;
34
35&lt;a href=&quot;\#&quot;&gt;
36
37&lt;img alt=&quot;&quot; src=&quot;images/ad/app.jpg&quot; /&gt;
38
39&lt;/a&gt;
40
41&lt;/div&gt;
42
43&lt;/div&gt;
44
45&lt;div className=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
46
47&lt;/div&gt;
48
49&lt;/div&gt;);
50
51}
52
53}
54

Foot组件如下:


1
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
1class Foot extends React.Component&lt;any,any&gt;{
2
3public render()
4
5{
6
7return (&lt;div&gt;
8
9&lt;div id=&quot;footer&quot;&gt;
10
11&lt;ul&gt;
12
13&lt;li&gt;&lt;a href=&quot;\#&quot; className=&quot;navs curr&quot;&gt;&lt;div className=&quot;navs-home&quot;&gt;&lt;/div&gt;首页&lt;/a&gt;&lt;/li&gt;
14
15&lt;li&gt;&lt;a href=&quot;\#&quot; className=&quot;navs&quot;&gt;&lt;div className=&quot;navs-group&quot;&gt;&lt;/div&gt;我的团&lt;/a&gt;&lt;/li&gt;
16
17&lt;li&gt;&lt;a href=&quot;\#&quot; className=&quot;navs&quot;&gt;&lt;div className=&quot;navs-order&quot;&gt;&lt;/div&gt;我的订单&lt;/a&gt;&lt;/li&gt;
18
19&lt;li&gt;&lt;a href=&quot;\#&quot; className=&quot;navs&quot;&gt;&lt;div className=&quot;navs-user&quot;&gt;&lt;/div&gt;个人中心&lt;/a&gt;&lt;/li&gt;
20
21&lt;/ul&gt;
22
23&lt;/div&gt;
24
25&lt;/div&gt;);
26
27}
28
29}
30

CatalogItem 组件如下:


1
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
1class CatalogItem extends React.Component&lt;any,any&gt;{
2
3public render()
4
5{
6
7return (&lt;div&gt;
8
9&lt;div className=&quot;goods&quot;&gt;
10
11&lt;a href=&quot;\#&quot;&gt;
12
13&lt;div className=&quot;goods-img&quot;&gt;
14
15&lt;img src=&quot;images/goods/good.jpg&quot; alt=&quot;&quot; /&gt;
16
17&lt;span className=&quot;goods-mark&quot;&gt;
18
19&lt;span className=&quot;goods-discount&quot;&gt;8.0折&lt;/span&gt;
20
21&lt;span className=&quot;customers-num&quot;&gt;3人团&lt;/span&gt;
22
23&lt;/span&gt;
24
25&lt;/div&gt;
26
27&lt;h2&gt;【正宗哈密瓜】西州蜜17号1个19.9元(单果大于1.5千克)&lt;/h2&gt;
28
29&lt;p className=&quot;outline&quot;&gt;【正宗哈密瓜】西州蜜,甜如蜜!椭圆浅麻绿,网纹细全密。甜不甜,大不大,一个重来有3斤!浓香溢,肉细腻,清甜爽口西州蜜!&lt;/p&gt;
30
31&lt;div className=&quot;goods-go&quot;&gt;
32
33&lt;div className=&quot;goods-go-icon&quot;&gt;&lt;/div&gt;
34
35&lt;div className=&quot;goods-go-price&quot;&gt;
36
37&lt;span&gt;3人团&lt;/span&gt;
38
39&lt;b&gt;¥19.90&lt;/b&gt;
40
41&lt;/div&gt;
42
43&lt;div className=&quot;goods-go-btn&quot;&gt;去开团&lt;/div&gt;
44
45&lt;/div&gt;
46
47&lt;/a&gt;
48
49&lt;/div&gt;
50
51&lt;/div&gt;);
52
53}
54
55}
56
57

CatalogList组件如下:


1
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
1class CatalogList extends React.Component&lt;any,any&gt;{
2
3public render()
4
5{
6
7return (&lt;div&gt;
8
9&lt;div id=&quot;goods-list&quot;&gt;
10
11&lt;CatalogItem/&gt;&lt;CatalogItem/&gt;
12
13&lt;/div&gt;
14
15&lt;/div&gt;);
16
17}
18
19}
20```js
21
22最后就是修正Index组件并把Head,CatalogList,Foot组件添加进去,并对应页面dom标签就可以:  
23
24```js
25class Index extends React.Component&lt;any,any&gt; {
26
27public render(){
28
29return (&lt;div&gt;&lt;Head/&gt;&lt;CatalogList/&gt;&lt;Foot/&gt;&lt;/div&gt;);
30
31}
32
33}
34
35function renderIndex(){
36
37ReactDOM.render(
38
39&lt;Index /&gt;,
40
41document.getElementById(&#x27;wrap&#x27;)
42
43);
44
45}
46
47renderIndex();
48
49

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

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
安全技术

OpenSSL之Blowfish对称加密

2021-8-18 16:36:11

安全技术

C++ 高性能服务器网络框架设计细节

2022-1-11 12:36:11

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索