reactjs前端开发

总体架构

前端主架构reactjs+jquery+bootstrap

使用jquery.i18n.properties进行多国语言开发

使用bootstrap进行页面布局

reactjs组件开发

分页组件 Pagination

用法：\

一般外面包裹一个div用来固定该分页控件的位置

滚动图片组件 CarouselPicture

用法：\

其中data为json字符串：

var data=JSON.stringify({id:1,desc:’desc’,gourl:’abc’,items:[{id:100,desc:’100’,imgurl:’/res/0.jpg’,gourl:’/0’},{id:101,desc:’101’,imgurl:’/res/1.jpg’,gourl:’/1’}]});

消息组件InstantBookPanel

用法：\

react组件开发中遇到的问题

如何类似airbnb使用Handlebars, hbsfy/runtime进行html模板的动态加载

http://wix.github.io/react-templates/

http://handlebarsjs.com/

https://www.npmjs.com/package/hbsfy#2-3-0

http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html

如何使用flight.js进行事件模块化加载

https://github.com/flightjs/flight/tree/v1.x

http://flightjs.github.io/

关于多国语言国际化i18n问题

airbnb使用的方案（个人感觉jquery.i18n.properties简单些）：

https://github.com/airbnb/polyglot.js

如何进行js文件的动态加载，而不是全部打包到bundle.js中，分部分打包

https://github.com/wix/react-templates/tree/gh-pages/sample 里面的例子里有使用require.js进行动态加载的例子，可以参考

出了一个极其郁闷的错误，link中的属性rel记错了，记成了ref！！！ rel是relationship的意思！

<link href=”css/bootstrap.min.css” rel=”stylesheet” >

<link href=”css/bootstrap.min.css” ref=”stylesheet” >

开发中的经验积累

html中的margin, padding-（top，left，right，bottom）如果设置为百分比，则是相对父节点的宽度。注意：不论是哪个方位！

require()中函数不能是变量，跟requireJS的加载机制有关系，不支持动态加载。

https://github.com/seajs/seajs/issues/1135

后端使用python