当前位置: 首页 > 工具软件 > reactjs101 > 使用案例 >

reactjs前端开发

魏雅惠
2023-12-01

总体架构

前端主架构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

 类似资料: