React + React Router + WebPack + Express的全栈开发流程。
React in TypeScript
绑定事件正确的写法
<a onClick={e=>{this.handleClick(e)}}>XXX</a>或
<a onClick={this.handleClick.bind(this)}>XXX</a>直接使用 onClick={this.handleClick} 有可能会出现this为null的错误（调用方this未知）
JQuery与React事件模块的差异
JQuery和React的事件系统相互独立，如$('XXX').change()并不能触发React的onchange
原生事件会触发两者，如XXX.dispatchEvent(new Event('change', {bubbles:true}));
TypeScript+Webpack导入AMD/CommonJS的包
//如果有.d.ts 可以直接import
import * as React from 'react';
//如果没有.d.ts 则可以
import 'XXX';
declare var require:any;
require('XXX');注意 require(string)是同步加载 require(array, callback)是异步加载
注意：异步加载的依赖不会被打包到CommonChunk
React-Router：在组件中取router
//不建议这么搞
static contextTypes = {
router: React.PropTypes.object.isRequired
}
//搞个全局变量比较好
<Router ref={(r)=>Global.router=r.router}>服务端渲染
RenderDomServer.renderToString()
前端使用ReactDom.render()再render一个一模一样的东西（props也要全部一致），此时不会重新渲染，只会绑定上事件 。
默认state
在构造函数中 this.state = …
默认props
static defaultProps = { … }
JQuery操作React的DOM的问题
使用JQuery如果改动了DOM，那么在React更新的时候可能会出错 比如做拖拽排序，如果用JQuery改动了DIV的顺序，但是React辨别顺序是根据data-reactid来的，所以会出现顺序不一样的情况。
前后台公用shared目录
如果引用了项目父文件夹的内容，那么编译出来的目录结构会变喔！（变成父级那样的了）
可以创建快捷方式： Windows： mklink /J Linux：ln -s
用WebStorm打开时，为了防止代码提示多处混淆，可以右键相应目录 > Mark as exclude
React中正确显示换行
//给显示文字的容器设置如下CSS
white-space: pre-wrap 获取当前类的静态成员
类似PHP中的 self::， 可通过 this.constructor，如下
class MyClass{
static MyStatic: string = 'MyStatic Value';
getMyStatic(){
return this.constructor['MyStatic']
}
}自定义Component，首字母一定要大写
const Test = props=><div>Test</div>
const test2 = props=><div>Test</div>
//首字母大写 可以被正常识别
<Test /> //编译出来是 React.createElement(Test,null);
//首字母小写 会被当做内置Component 无法正常识别
<test2 /> //编译出来是 React.createElement("test2",null);Webpack
Webpack用BootStrap
通过node_modules加载
new webpack.ProvidePlugin({
'$': "jquery",
'jQuery': "jquery",
'window.jQuery': "jquery",
'window.$': 'jquery'
})这样jQuery变成了全局了，在独立引入bootstrap.js就可以啦,可保障每个地方用到的$都是一样的。
或外部加载jquery
externals: {
"jquery": "jQuery"
}webpack-dev-server单页面应用调试配置
devServer:{
hot: true,
historyApiFallback: true,
host: '0.0.0.0',
proxy: {
'/api/*': {
target: '[http://la.livechart.cn](http://la.livechart.cn/)',
changeOrigin: true
}
}
}Webpack动态加载及公共模块提取
需要动态加载的模块，通过require(array,callback)加载
提取公共模块可以使用
//webpack.config.js
...
plugins:[
new webpack.optimize.CommonsChunkPlugin()
]但是默认是不会提取动态加载的模块中的公共部分的，要提取动态加载模块的公共部分，可以给CommonsChunkPlugin带上参数，如下：
new webpack.optimize.CommonsChunkPlugin({async:true, minChunks:2})浏览器的坑
Chrome的AJAX请求在页面刷新时会错误的BUG
页面中的AJAX请求，在请求未完成时，刷新或跳转到其它网页，则会抛出错误，状态码为0。
假设你是用JQuery去请求的, $.ajax(…).done(…).fail(…)，
如果在请求未完成的时候刷新或链去了其它页面，那么此时会触发fail！！
所以这种情况之下，不建议在fail里面使用alert，因为会阻塞住浏览器，必须点了确定才能继续。
NodeJS后端
从Git npm install
npm install git+[https://](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)[用户名](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)[:](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)[密码](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)[@github.com/npm/npm.git](https://%E7%94%A8%E6%88%B7%E5%90%8D:%E5%AF%86%E7%A0%81@github.com/npm/npm.git)外部库
long
long.fromInt得出的可以用==判断，其它的只能用equals判断
const Long = require('long');
new Long(123) == new Long(123); //false
Long.fromInt(123) == Long.fromInt(123); //true
Long.fromString('123') == Long.fromString('123'); //false