Fleece:一个基于React, Typescript, D3的Rpos列表站

写过一些react-native的代码和react的demo，也用过typescript。

正好我的project站需要重构，而之前写前端框架的生命周期这篇博文写了个demo，就索性选择了react+typescript方案重新写一个简单的单页站。

基本语法与react-native大概没什么两样，不同的是在react-native中我用的是es6,在这里用了typescript。

生命周期本身大同小异，没什么好讲的。

写的时候有几点选择：

1.年初的时候一直酝酿，有好多界面方面的想法，不过终究因自己的想象力欠缺，实在不知道怎么布局好，就索性参照了github repos的样式布局。

2.这次没有和react-native相通的地方是尝试在tsx代码用直接import less样式文件，而在react-native中，我都是用const styles来解决。前者引用方式在web中感觉很方便，而后者还是不太习惯其写法。

3.在react的tsx代码中，父组件和子组件的传值变得和在react-native有些不一样。在react-native中，子组件调用父组件，只需要在父组件中定义事件，子组件用props来访问可以直接拿到；而在这里，这同时需要在子组件初始化定义事件类型，这大概是由typescript决定的吧。

4.在使用webpack打包的时候，webpack版本已经升级到4系列，最大变化感觉是：

Webpack1

module: {
    loaders: [{
        test: /\.(less|css)$/,
        loader: "style!css!less!postcss"
    }, {
        test: /\.json$/,
        loader: 'json'
    }]
}

Webpack4

module: {
    rules: [{
        test: /\.(less|css)$/,
        use: [
            "style-loader", 
            "css-loader", 
            "less-loader", 
            "postcss-loader"
        ]
    }]
};

(这里引用的是网上的一段代码)

正好借助这次机会练习一下久未写的react感受一下，这样看下来，几大常见框架的难易程度已经很明显了：

Vue < AngularJS < Backbone< React(Preact) < Angular

最后留一个上面的源码:fleece

二级域名 project 已经更新为 fleece, 对于 fleece 的下个功能更新，可能需要在其他时间了。

后面我的重心开始继续转到今年的计划上，这里权当是个小插曲。