&由于本人应用项目主要是2B的web应用程序, 所以以下暂不谈react的服务端渲染和react navie,
先说说ReactJS:
React 的组件化和 &数据单向绑定 的模式（flux） 使应用程序更易于开发和维护。
相对于angular,Ember这种全面的框架，react 比较轻量级（非包大小），这样比较容易在其基础上架构应用或者配合其他功能库。
视图层的JSX无缝混合js代码，功能强大又不失可读性，可以说是集成了声明式编程和命令式编程的优点。
框架支持增量更新DOM的特性能有效保证程序的性能，通俗点说，就是不容易让一般水平的人写出性能糟糕的程序，这一点对于组织大型复杂的应用程序来说是很重要的。
再说说TypeScript
强类型的编程语言更有利于工程化的一个原因是，更能被IDE充分的支持。宇宙最强IDE的VisualStudio 不只给TypeScript带来了很好的编程体验，近视于C#的方式实现了代码模块化 同时又能保留js动态语言灵活性，
一键生成解决了编译压缩的问题。
TSX对于React的JSX也提供了很好的支持。
使用ReactJS 和 TypeScrit 一段时间，总结了自认为一些比较实用的Tip，跟各位分享，望能起到抛砖引玉的作用 ，高手不吝赐教 ：
1.如何打包成单个js
& 使用r.js &与VS 编译集成。当然在开发阶段这部分可以省略。
2. 组件化使用面向对象的方式，参考winform &和 webform
& & 面向对象的方式定义React组件（图）
& & 组件基类：
& & 已经写好的控件
3.使用消息机制来解耦
& & 组件之间的通信，尽量不要互相引用，通过消息机制来完成。
& & Flux的思路也是如此，可以不需要直接使用flux库，如果掌握了flux的核心思路，用任何一个js事件消息库都可以。
& & 这边用的是EventEmitter2库
4.自己定义路由机制
5.使用后端编程的插件机制来解耦
& & 由于JS的动态语言特性，原生支持插件。所以只需要做一些少量封装，就可以实现简单实用的IOC插件功能。
控件注册：
阅读(...) 评论()typescript（1）
reactnative（1）
最近小小尝试了下 ReactNative + TypeScript 开发APP，爬了无数坑之后总算弄出来个结果，重要的地方记录下，后面会附上示例代码：
1、开发工具的选择
windows 平台我接触的开发工具主要三个，
WebStorm，Intellij IDEA 2016.2 版本，
这两个我都试过，开发完全没问题的，还有PHPStorm估计也行吧，没试过。
另外还有一个是VisualStudioCode：
对与 iOS 平台应该是不用选的就是 Nuclide 了吧，我是没用过哈，不知道怎么用，不过用过 Atom 感觉还是很酷的。
平时习惯用 jetbrains 的 IDE ，每个都绝对神器，VisualCode 感觉实在太难用了，坚持了一段时间还是放弃了。
下面示例都是用的 Intellij IDEA 2016.2
经过一番配置后，import 等导入和代码提示等等都是没问题的
2、基础开发环境安装
这个我就不说了，直接看这个网站就行了上面已经写得很完善了
，照着文档安装配置应该没什么问题的，文档看不懂的话网站的站长博客里面还有全套的视频讲解非常详细了，地址：。
3、安装 TypeScript 开发环境
npm install -g typescript
npm install typescript
tsc --init
npm install -g tsd
tsd init && tsd install react-native --save
tsd 初始化安装后，会生成 tsconfig.json 文件，貌似 react-native 初始化新项目的时候就有这么个文件来着，忘了，如果tsd初始化之前已存在该文件可直接删除。
查看 tsconfig.json 文件
"compilerOptions": {
"target": "es6",
"allowJs": true,
"jsx": "react",
//"outDir": "artifacts",
//"rootDir": "src",
"sourceMap": false,
"noImplicitAny": false
"filesGlob": [
"typings/**/*.d.ts",
"src/**/*.ts",
"src/**/*.tsx"
"exclude": [
"node_modules"
个人建议是 outDir 参数建议不要设置，使用默认值就行，这样每次修改 .ts 文件后就会直接在当前目录下生成同名的 es6语法编译后 .js 文件，当 index.android.js 入口文件加载项目文件时则很方便，如下图：
以上配置完成就可以开始使用 TypeScript 开发了。
简单做了个 List 加载文章列表的功能，实现起来很简单方便，和原生Android开发比起来简直快了太多太多。
不过一开始遇到了很多坑，主要还是由于对 TypeScript 不太熟悉
如 style 的设置，总是提示类型错误：
Error:(20, 15) TS2322:Type '{ flex: flexDirection: }' is not assignable to type 'ViewStyle'.
Types of property 'flexDirection' are incompatible.
Type 'string' is not assignable to type '"row" | "column" | "row-reverse" | "column-reverse"'.
Type 'string' is not assignable to type '"column-reverse"'.
类似上面这种错误，很是莫名其妙，搞了好半天才明白原来样式参数配置是需要进行类型转换，这也是 TypeScript很特色的地方啦
如下面这样：
4、TypeScript 跟 ReactNative 开发的关系
最后说一下这两者是如何发生关系的，可能还有跟我一样的小白还没弄清楚，我就按照自己的理解来说啦，
你用 TypeScript 语法写的 .ts .tsx 等后缀的程序是不能直接运行的，而是会被 tsconfig.json 配置中的 “target”: “es6”, 这项配置转换为 es6 语法的 .js 文件。
TypeScript 中的 import 只会加载 .ts .tsx
后缀的文件，而 Javascript 中的 import 只能加载 .js 等后缀的文件，
所以，当 ReactNative 启动时，首先加载入口文件，如 index.android.js ,代码如下：
import { AppRegistry } from 'react-native';
import IndexNavigator from './application/src/controller/navigator/IndexNavigator';
AppRegistry.registerComponent('mogudan', () =& IndexNavigator);
其中 import IndexNavigator from … 这一行加载的不是 IndexNavigator.ts 而是编译后生成的 IndexNavigator.js 文件，下面对比两个文件的差异：
IndexNavigator.ts
* Created by ZHOUZ on .
import * as React from 'react';
import {Navigator}
from 'react-native';
import IndexPage from '../page/IndexPage'
export default class IndexNavigator extends React.Component&any, any& {
render() {
let defaultName = 'IndexPage3311113';
let defaultComponent = IndexP
&Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) =& Navigator.SceneConfigs.VerticalDownSwipeJump }
renderScene={(route: any, navigator) =& {
let Component =
return &Component {...route.params} navigator={navigator} /&
IndexNavigator.js
为自动编译后生成的es6语法的 javascript 代码
"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments. i & i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
const React = require('react');
const react_native_1 = require('react-native');
const IndexPage_1 = require('../page/IndexPage');
class IndexNavigator ponent {
render() {
let defaultName = 'IndexPage3311113';
let defaultComponent = IndexPage_1.
return (React.createElement(react_native_1.Navigator, {initialRoute: { name: defaultName, component: defaultComponent }, configureScene: (route) =& react_native_1.Navigator.SceneConfigs.VerticalDownSwipeJump, renderScene: (route, navigator) =& {
let Component =
return React.createElement(Component, __assign({}, route.params, {navigator: navigator}));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = IndexN
大概就是这样了，最最后放上我做的示例代码，只包含 application 目录下的文件，android，ios 目录都是 react-native 自动生成的大家都一样的。
文件下载地址：
补充一个问题，开发时使用 fetch 会遇到提示找不到的解决办法，
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：319518次
积分：4831
积分：4831
排名：第4475名
原创：172篇
评论：69条
阅读：16389
(1)(1)(2)(3)(3)(3)(2)(2)(2)(1)(3)(1)(1)(1)(5)(2)(1)(1)(1)(4)(5)(1)(4)(2)(2)(24)(96)(4)说了两篇理论，是时候实操一下了。找个实例说说。
假设我们要用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:14&&{ &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 ponent&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& /&
&div className=&swiper-slide&&
&a href=&#&&
&img alt=&& src=&images/ad/app.jpg& /&
&div className=&swiper-slide&&
&a href=&#&&
&img alt=&& src=&images/ad/app.jpg& /&
&div className=&swiper-pagination&&&/div&
&/div&);}}
Foot组件如下：class Foot ponent&any,any&{public render(){
return (&div&
&div id=&footer&&
&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&
&/div&);}}
CatalogItem 组件如下：class CatalogItem ponent&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&
&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 className=&goods-go-btn&&去开团&/div&
&/div&);}}
CatalogList组件如下：class CatalogList ponent&any,any&{public render(){
return (&div&
&div id=&goods-list&&
&CatalogItem/&&CatalogItem/&
&/div&);}}
最后就是修正Index组件并把Head,CatalogList,Foot组件添加进去，并对应页面dom标签就可以：class Index extends
ponent&any,any& {public render(){
return (&div&&Head/&&CatalogList/&&Foot/&&/div&);}}function renderIndex(){ReactDOM.render(
&Index /&,
document.getElementById('wrap')
);}renderIndex();
回到default.html,你所做的就是添加Index.js和把其他css添加进去即可了。
最后一步，当然是运行看看，感觉不错吧。
大家开始手痒想马上连接数据了吧，别急，下篇见！！相关文章： 原文地址：http://blog.csdn.net/kinfey/article/details/.NET社区新闻，深度好文，微信中搜索dotNET跨平台或扫描二维码关注dotNET跨平台(opendotnet)　
　文章为作者独立观点，不代表大不六文章网立场
opendotnet在这里你可以谈微软.NET,Mono的跨平台开发技术，也可以谈谈其他的跨平台技术。
在这里可以让你的.NET项目有新的思路，不局限于微软的技术栈，横跨Windows，Linux 主流平台热门文章最新文章opendotnet在这里你可以谈微软.NET,Mono的跨平台开发技术，也可以谈谈其他的跨平台技术。
在这里可以让你的.NET项目有新的思路，不局限于微软的技术栈，横跨Windows，Linux 主流平台用typescript+react写的web版cnode - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
论坛上很久没看到cnode客户端专题的帖子了，这两天没啥事做，就用typescript和react写了个web版的。
目前只实现了话题列表、话题详情、用户详情几个页面的功能，后面再慢慢加。 我的css技能很挫，写样式很是花时间，为了图省事，界面参考了之前写的这个的版本。
贴几张截图：
项目部署在heroku上,在线预览地址。也可以去我的 clone代码看一下。
要说用typescript来写react的感觉，一个字！鹅妹子嘤。
来张gif感受一下。
好吧，我承认我是来安利typescript的，改天再写个软文推荐一下，名字都想好了，叫
楼主要是有设计图的话，我可以帮你写css
感觉可以置顶，哈哈
谢啦，没多少样式，我多折腾几下能搞定的。没有设计图，长什么样纯靠脑补
楼主用的啥IDE 是VS么
visual studio code
链接404了，最后那个
为啥不能收藏呢？
来自酷炫的
react有没有上传图片的组件?
请问react高级组件怎么通过typeScript 编译，目前编译一直报错
上面是报错文案
我就想问拿到的数据的content是论坛渲染好的模板，怎么用，自己加class?
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用
发表于 19:42|
来源medium|
作者Tim Ermilov
摘要：如何基于ES6，使用React构建一个新JavaScript应用？如何将ES6代码发布到NPM上？又如何在后续项目中使用这些代码？……本文通过具体的编程实践，一一揭晓。
【编者按】本文为《》的简译内容，讲述了作者基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用的编程心得。如果你想用React构建一个新的JavaScript应用，而且你还想实践ES6语法中的新特性，此外，你甚至想创建一些可重用组件并发布到NPM上，那么你究竟应该怎样实现这些需求？你如何将ES6代码发布到NPM，又如何在后续的项目中使用这些代码？我花了一些时间解决上面这些问题，现在我愿意与你们分享我习得的新知识。
如果你真的不希望阅读所有的细节，只想看看代码最终的效果——可以直接阅读最后一部分。
我们先来搞清楚我们到底想要得到什么，应该如何去实现。
我们的主要目标是：基于ES6，使用我们自定义的React组件创建一个React应用。其中最棘手的部分是自定义React组件。以下是实现这些目标的需求列表：
自定义组件应该使用ES6编写；
自定义组件应该完全自给自足（使用方法足够简单：安装，导入，渲染）；
自定义组件应该提供自身所需的样式（参考第2条，自给自足）；
自定义组件应该通过安装（因为）；
最后——所有自定义组件应该有单元测试和代码覆盖率报告；
加分项——自定义组件不应该相互依赖，但是应该能够相互影响。
此外，我们需要一些很棒的调试工具，例如：代码检查、源码映射（因为代码需要编译，所以这是调试的必要工具）。
现在我们已了解所有需求，可以开始寻找满足这些需求的方法。所以，首先需要选定我们将使用的工具集和相关库。
我们要基于ES6开发应用，目前的，所以我们需要将ES6编译为ES5。同时我们希望通过NPM管理自定义组件，需要选用一个兼容CommonJS的工具集。
目前有两种流行的可用选择——和。二者都满足我们的大部分需求，考虑到我们的项目需要使用样式文件，而Webpack对非JavaScript文件（例如：样式文件、图片、字体文件）非常友好，所以最终我们将选用Webpack。
Webpack已经能够满足大部分需求，我们将在此基础上加入，帮助我们完成更多任务（例如：单元测试、代码覆盖率检测、静态资源伺服）。
现在我们已经知道如何使用Webpack和Gulp.js来构建代码，可是如何才能满足我们的第一个需求——使用ES6？我们可以使用转译器，帮助我们将ES6代码转译为主流浏览器支持的ES5代码。目前流行的转译器有：、、（勉强算是），我们将选用Babel.js，它有一个更好的生态系统（插件、扩展等）。如果你尚不知晓其为何物，请记住这是一个非常棒的项目，我推荐你阅读它们的文档。最棒的是，Babel.js不仅支持ES6语法，它还可以编译JSX，所以我们可以在编译步骤彻底弃用标准React
JSX编译器了！
如果你只想使用Babel.js，我推荐你阅读它们的。Axel Rauschmayer博士曾经撰写，也值得一读，如果你对JavaScript感兴趣，我也极力推荐订阅他的博客。
现在我们选定了ES6转译器，让我们讨论一下自给自足的问题。如果我们开发纯React组件——那么可以轻松地让它们独立工作（可重用），你甚至可以参考学习编码方式。但如果我们需要在组件内提供默认的自身样式，需要怎样实现呢？
当然，我们可以选择“纯JS”方法向我们的JSX文件加入内联样式，就像这样：
const render = function() {
const defaultStyle = {
color: 'red',
&div style={defaultStyle}&
I have inline styles
JSX内联样式
这个方法存在一个问题，我们几乎无法通过父应用控制这个组件的样式。而且，如果我们需要加载图片或自定义字体文件，这个方法就会失效。所以，是否有更好的方法呢？
Webpack可以帮你解决这个问题！幸运的是，Webpack 加载器可以加载许多类型的文件。其背后的思想非常简单——在加载过程中动态地对载入文件进行可插拔转换。从本质上来说，加载器为我们处理各种文件。我们将选用一个特殊的来将我们的ES6代码转译为ES5代码。
但最酷的是，加载器可以处理任何文件。所以，如果我们想加载样式——我们只需要添加style-loader！最终，我决定使用LESS，它稍微复杂一些——我将创建如下的加载链：
首先，使用处理*.less文件，将其转换为CSS；
然后，使用将编译好的css传递给下一个步骤；
最后，使用将最终的样式引入到生成的代码中。
通过这个加载链，我们可以使用LESS编写组件的样式，下面这段代码演示了这种组件的入口点：
import './style/style.less';
import Component from './src/component';
export default C
借助Webpack将样式引入到JavaScript中&
正如你所见，加载样式像导入文件一样简单。的确，由less-loader、css-loader以及style-loader构成的加载链必须要在我们的Webpack配置文件中提前配置好（参考下一节的第一个示例）。
现在我们可以从相互独立的组件中加载样式，但是CSS默认使用全局变量，这意味着如果两个组件中使用了相同的类名，其中一个将被改写，我们如何回避这个问题呢？
我能想出来的最简单的方法是：在HTML标签和样式文件中，使用组件名称作为最外层元素的类名，人为地创建组件的作用域。就像这样：
.component-name {
const render = function() {
&div className="component-name"&
&span&I have scoped styles&/span&
组件样式的人为作用域
如此一来，所有组件将拥有唯一命名，当他们被封装进同一个应用中时不再产生冲突，能够很好地协同工作。而且，当我们想在应用层重新定义组件样式时，可以使用组件命名作为类名直接改写。
接着，你如何将ES6模块发布到NPM上呢？事实上，你无须这样做。至少目前还不需要。你可以直接向外发布你的原生代码，但这通常是一个糟糕的想法，当你后续想将代码引入到主应用或其它组件中时会感到非常痛苦。当然，你可以通知Webpack（同样也可以通知Browserify）来编译需要用到的代码。但是，如果这样做，你不得不使用Webpack（以及浏览器）来运行各种测试，我通常在命令行中运行测试，因为这样运行速度更快，并且便于后续的自动化测试封装（也就是我们常说的持续集成）。
目前我在项目中应用的最好方法是——同时传送原生ES6代码和编译后的ES5代码，实现这个方法非常简单：
向你的package.json文件添加构建指令；
在预发布阶段运行构建指令；
使用编译后的ES5代码作为主文件；
通过package.json文件的额外字段暴露ES6代码。
它看起来是这样的：
"name": "es6-component",
"version": "1.0.0",
"description": "My awesome ES6 component",
"main": "es5/component.js",
"es6": "index.js",
"scripts": {
"build": "gulp build",
"prepublish": "npm run build"
将ES6模块发布到NPM上的package.json
这种方法有两个优点：
在所有ES5代码中，我们可以轻松地引入或require()这个模块，它能够正常工作！
如果我们出于某些原因需要用到模块的源代码，我们同样可以轻松地通知Webpack使用“ES6”字段来加载或引入ES6代码。
单元测试及代码覆盖率
你必须佩服的是，在Babel中配置单元测试和代码覆盖率检测非常简单（得益于Babel伟大的生态系统，正如我之前提到的那样）。
--compilers: jsx?:babel/register
我一直使用作为测试工具，所以我会讲解如何将其应用到项目中。支持ES6代码非常简单，你只需在执行mocha指令时添加一个编译flag（或添加到mocha配置文件）就可以通知mocha使用babel预编译器：
完成这一步之后，就可以在ES6代码中运行测试了，当然你也可以使用ES6来编写测试文件！
现在要处理最棘手的部分——我们有了React组件，我们想使用mocha完成测试，却又不想在浏览器中运行测试（可以运行一个，但是它非常繁重），我们应该如何去做呢？
答案就是——基于用JavaScript实现了WHATWG的DOM和HTML标准。它比Phantom更轻量，并且满足几乎所有我们测试React所需的功能。
以下是为React配置jsdom环境的测试helper文件的示例：
import localStorage from 'localStorage';
import {jsdom} from 'jsdom';
// init jsdom
global.document = jsdom();
global.window = global.document.defaultV
global.navigator = global.window.
// local storage polyfill
global.window.localStorage = localS
global.localStorage = localS
// import react after dom
const React = require('react/addons');
before(function() {
// expose react and testutils
this.React = R
this.TestUtils = React.addons.TestU
beforeEach(function() {
// create container
this.container = global.window.document.createElement('div');
afterEach(function(done) {
// clean jsdom
this.React.unmountComponentAtNode(this.container);
// timeout
setTimeout(done);
在命令行中运行React测试的jsdom环境
注意我使用import声明引入jsdom和localStorage，但却使用require()加载React，这是因为import声明会被提前，我们需要确保在jsdom初始化之后加载React。如果你尝试在DOM就绪前加载React，那么直到你与组件进行交互时它才会开始工作，然后你得到的往往是各种各样的错误，因为React假设这属于非浏览器环境，不使用DOM相关特性。
现在我们有了正确运行的mocha测试，我们也可以轻松获取Istanbul覆盖率检测工具并正常执行：
istanbul cover _mocha -- -R spec
接下来实现我们的加分需求——无相互依赖的交互。这一部分内容来自于我正从事的一个项目，如果你不太感兴趣，大可跳过这一节。
当然，如果你依然感兴趣，那让我们一起讨论一下实现这个目标的方法。
我们需要使松耦合的系统中各部分相互交流，在完美的实现中它们甚至无须知道相互的存在，只须响应请求。这样的任务听起来是否非常熟悉？
你或许曾经听说过微服务这个概念，你甚至可能已经使用过它们。如果你对微服务所知甚少，我推荐你看一下。
如果你懒得看（或者想稍后看）他的演讲，那么简单了解一下微服务的思想：许多小规模、独立的，通过通用接口相互交流的离散服务实体。通用接口可以有多种形式，其中包括：消息总线、表征状态传输（REST，又称表征状态转移）、远程过程调用（RPC）等。
因为我们做的是客户端JavaScript应用，在接口问题上我们的确没有那么多的选择。幸运的是，有一个非常赞的库，它专门处理类似这样的情况——postal.js。
即使它仍然基于回调函数实现底层功能，但是它将消息分为channel和topic两类，提供了非常大的弹性。
通过示例演示所有的这一切是如何工作的，十分容易。
想象一下我们有一个App需要一些认证和URL签名功能来获取数据。通过postal我们可以定义一个认证channel，它将会监听那些签名请求，并通过不同的topic返回已签名的URL，就像这样：
import postal from 'postal';
// get postal channel for current component
const channel = postal.channel("auth");
const signUrl = () =& {
// signing code here
// listen to sign requests
const signAction = channel.subscribe("url.sign", function(url, envelope) {
const signedUrl = signUrl(url);
channel.publish("url.signed", signedUrl);
import postal from 'postal';
// get postal channels
const channel = postal.channel("query");
const authChannel = postal.channel("auth");
// define data fetching stuff
const requestUrl = 'http://...';
const getData = () =& {
// data-fetching logic here
// listen for data requests
const allItemsAction = channel.subscribe("items.all", () =& {
// wait for signed url
authChannel.subscribe("url.signed", (signedUrl) =& {
const data = getData(signedUrl);
channel.publish("items.data", data);
authChannel.publish("url.sign", requestUrl);
在组件中使用postal.js的channels进行通信
这段代码可以很好地工作，因为我们无须了解任何有关其它组件的信息——我们只须了解使用哪个channel和topic。一方面，这意味着管理这些内容的负担落到开发者身上；另一方面，在这种实现的基础上，我们可以轻松地更换认证组件——今天我们使用OAuth，明天我们使用自定义token系统，以后使用其它功能，我们只须更换一下认证组件就可以支持新的工作流。
代码检查和源码映射（Source Map）
最后，我们再为项目加入一些小改进：支持代码检查，启用源码映射。
不支持ES6和React代码，我们将使用代替它。eslint支持JavaScript和JSX的语法，并可以通过插件进行扩展。
将之于Webpack结合非常容易，你只须在你的Webpack配置文件中添加几行代码。下面这个代码片段展示了所需的配置：
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
debug: true,
// your other props here
preLoaders: [
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader'
// other modules options here
注意node_modules文件夹不包括在检查的范围内，所以程序只会检查你实际的组件代码。
Webpack将在编译过程结束后把所有的检查结果输出到控制台。
Turris.js——汇总一切
结合以上提及的所有内容，我创造了Turris.js——它包含一系列helper包，还有一个yeoman生成器，你可以用它轻松地为ES6 React应用和独立组件搭建脚手架。
如果你对生成器不感兴趣，只想看看应用和独立组件的示例代码，你可以在它们各自的Github仓库中找到它们：还有。
创建新应用
我尝试使创建新应用尽可能地简单，你可以这样创建一个新应用：
确保你已安装最新的io.js和NPM；
从NPM安装yeoman和turris-generator：
npm install -g yo generator-turris
创建一个新文件夹存放你的App，进入这个文件夹，执行turris生成器：
在回答一系列问题后，yeoman将为你完成所有工作；
执行“npm start”，启动你的新App；
访问http://localhost:8080，打开你最喜欢的编辑器并将应用改为你喜欢的样子。
除了为基础应用搭建脚手架外，Turris生成器还提供了三个helper生成器：
组件生成器——将在你的App中生成一个新的组件，可以非常便捷地生成你将不会重用的小组件；
页面生成器——将生成一个新页面并将它插入到React路由中，这里没有什么奇妙之处，它只是一个帮助你节省时间的子生成器；
Docker生成器——将生成一个dockfile，其中包含所有运行App所需的文件。
更多有关使用方法、子生成器、项目结构以及其它内容信息，可以在中找到。
创建一个独立组件
创建一个组件并不难，你可以这样做（需求与主生成器相同）：
通过NPM安装turris-generator-component：
$ npm install -g generator-turris-component
为你的组件创建一个新文件夹，进入这个文件夹，执行turris组件生成器：
在回答一系列问题后，yeoman将为你完成所有工作；
执行“npm start”，在调试模式下启动你的组件；
访问http://localhost:8080，打开你最喜欢的编辑器并将应用改为你喜欢的样子。
更多有关使用方法、项目结构以及其它内容信息，可以在中找到。
希望你已在这篇文章中找到有用的内容，或许你甚至已尝试我编写的生成器。即使你没有这样做——也请帮助我宣传一下！如果你已经尝试过——我非常乐意听取任何反馈意见，处理你们可能遇到的问题。当然，也很欢迎大家提交Pull Requests。（译者：刘振涛，审校：陈秋歌）
关于作者：Tim Ermilov，从事移动和Web开发工作。
英文原文：欢迎加入CSDN前端交流群：，进行前端技术交流。&
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章