Null's Blog

React版博客系列1--基础说明与标签组件

关于寒假作业

上个Express(4+)框架浅析系列才刚开始,就到春节了。
老大:关于假期作业,我提几个参考性建议:react、nodejs、typescript、es6、webpack、npm、angular2等等
我:话说我能不能吧 我以前写的 拿出来分享

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
58
59
60
61
62
老大:不能,就好像你能拿着你去年的假期作业交上去?去年你是一年级,今天二年级了,假期作业水平都不一样。
我:小时候就干过这种事 去年写的作文今年还拿来写。
# 先上demo
使用react,首先是要将数据与表现分离,于是有了[blog_api](https://github.com/mywei1989/blog_api)与[blog_react](https://github.com/mywei1989/blog_react)
<!--more-->
# 大体结构
demo会持续更新,直到完成,希望不会像之前的blog_angular一样太监掉。
blog_api使用express4+构建,不太属于本次作业范围。
blog_react使用React,就不能避免使用到了webpack,但要写的足够新,es6必须等上,所以涵盖了作业中的react、nodejs、es6、webpack、npm等内容。
当然,主体还是围绕react进行说明,如果特别需要注意的知识点,会独立一篇进行表述。本文假设用户了解基本的react、nodejs、es6、webpack、npm的概念。
# 组件划分
这里再厚颜无耻下本人博客[https://www.nullcn.com](http://www.nullcn.com),开源代码在这里[blog
](https://github.com/mywei1989/blog),求一波Star
![组件划分](https://statics.nullcn.com/blog_react_topic/1.png)
结构清晰明了,甚至不需要我画上红色框。
目前先实现Tags,标签
# 标签
tags标签,使用一个接口返回所有的标签信息,需要使用的包括tagid和tagname,接收jquery的promise对象,在加载前显示loading,出错时显示error,正常时按找静态页面要求渲染出该组件
```javascript
//assets/blog/js/tags.js
import React from 'react';
import $ from 'jquery';
class TagList extends React.Component {
constructor(props){
super(props);
this.state = {
loading: true,
error: null,
data: null
};
}
componentDidMount(){
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
}
render(){
if(this.state.loading){
return <span>Loading...</span>
}else if(this.state.error != null){
return <span>Error:{this.state.error.message}</span>
}else{
var tags = this.state.data;
var taglist = tags.map(function (tag) {
return (
<li className="tag-list-item" key={tag.tag}>
<a className="tag-list-link" href={"/tag/"+tag.tag+"/"}>{tag.tagName}</a>
</li>
);
});
return (
<ul className="tag-list">
{taglist}
</ul>
);
}
}
}
export default TagList;

在app.js中这样引用tag并使用:

1
2
3
//assets/blog/js/app.js
import TagList from './tags';
//<TagList promise={$.getJSON('http://localhost:3001/getAllTag')}/>

新版的react不再推荐使用JSXTransformer.js进行编译,而是使用babel编译,所以,webpack.config.js应该引入最新的babel-loader加载器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{test: /\.js?$/,loaders: ['babel-loader?presets[]=es2015&presets[]=react'],include: path.join(__dirname, '.')}
]
}
}

注意,不要试图使用 npm install -g 并 npm link package.json里的包。link只能解决引用问题,并不能处理包之间的依赖。这个坑我趟过,所以我觉得有必要说一说。
cd进入源码目录有 使用

1
npm install

安装所有依赖。
只有可根据需要执行webpack打包或监视打包命令:

1
2
webpack
webpack -d --watch

最后,看看index.html,可以直接双击执行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>null-index</title>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link type="text/css" rel="stylesheet" href="assets/global/plugins/normalize.css/normalize.css" />
<link type="text/css" rel="stylesheet" href="assets/blog/css/style.css" />
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>

下篇预告:Archive组件。欢迎关注。