React 0.14 mocha组建单元测试(二)

使用react的情况下,一般也会用到redux,那么对于这种在react中使用redux的情况,写测试的时候就不能只用之前的文章里面介绍的方式写了。来看下组件例子importReact,{Component,findDOMNode}from'react'import{connect}from'react-redux'import{increase,decrease,fetchItems}from'../../actions/counter'classHomeextendsComponent{render(){const{item,number,isFetching,increase, ...

React 0.14 mocha组建单元测试(一)

先来一个简单的小组件:importReact,{Component}from'react'classBarextendsComponent{render(){return(<divclassName='bar'><h5>AndIamBar!</h5></div>);}}exportdefaultBar;好了,到这里就足够了,来看看测试如何写:importReactfrom'react';importexpectfrom'expect';importTestUtilsfrom'react-addons-test-utils';importBarfr...

分享react-router实例

终于搞了一个大大的router:ReactDOM.render((<Routerhistory={browserHistory}><Routepath='/'component={PanelContainer}onEnter={Public.reactCheckLogin}><IndexRoutecomponent={DiagramListShow}/><Routepath='panel/dataShow'component={DiagramListShow}/><Routepath='panel/diagramShow'component={DiagramShow}><IndexRoutecomponent={ApiDiagram}/><Routepath='apisum'component={ApiDiagram}/>...

React Native 之 状态指示器【加载数据的状态等待】

结合上几篇博文,今天学习下,如果来优化一下我们的状态指示器。前面几篇文章,在renderLoadingView方法中,直接使用了一个View,然后加了一个简单的字符串进行提示,看起来还是简陋的很。修改之后,这个方法的代码如下:renderLoadingView:function(){return(<LoadingView/>);},这个LoadingView方法,是根据官方教程进行改写的,其中有个小提示,里面用到了react-timer-mixin这个库,还是提交安装比较好,不然后面还要安装之后再重新启动。重要的问题就上面这些了,下面把LoadingView整个代码贴到下面:'usestrict';varReact=requ...

React Native 之 列表【ListView 添加 点击列表跳转到指定视图】

上一篇文章中我们了解了一下,简单的添加列表,但是列表添加了,点击列表没有什么反应啊,这不就没啥作用了,这里记录下如何实现点击的效果。ReactNative中有个组件叫做TouchableHighlight,一看这名字就知道干啥的了,然后我们在这上面加一个touch的事件。这里我把上一节的renderMovie的方法代码列到这里:renderMovie:function(movie){return(<TouchableHighlightonPress={()=>this._pressRow(movie.id)}><Viewstyle={styles.container}key={movie.id}><Image&...

关于Laravel5教程的纠错

教程地址:http://www.golaravel.com/laravel/docs/5.1/quickstart/#validation有兴趣的自己的可以去看下。没事自己,也看了下,这个最近比较火的PHP框架,总体先不做评价,给那些入门后看了这个教程很困惑的人吧,包括我在内。这个教程里面说的Validation,也不知道是哪个版本的,从链接地址上看出来是5.1这个版本的,但是我用的是5.2的版本,应该不是那种不兼容的问题。只是在添加路由的过程中,只给除了如何添加路由但是没有说明白,如何去放置这些路由,由于这个是直接在routes.php中直接添加路由的,可能需要其他一切设置吧,毕竟这里的全局errors不应该就只是一个routes能解决的,我觉得。先说下问题吧,说...

React Native 之 列表【ListView,NavigatorIOS】

React-Native最近看了下他的ListView组件,记录下自己实现的小小功能:一个简单的列表都没啥特别的了,这里添加一个导航。首先使用NavigatorIOS组件,给我们的首页添加一个导航varWalkerfreeProject=React.createClass({render:function(){return(<NavigatorIOSstyle={styles.container}initialRoute={{'title':'Welcome','component':Movies,}} ...

Koa+React实现form表单上传文件

在nodejs里面通过html的表单上传图片,跟php比较起来还是麻烦一些,特别是在react中使用表单提交含有文件的数据。最近也在做这个操作,找了很多资料,一直都是有个co-busboy这个,其实它也是基于busboy去封装的,不过这个更适合在koa里面使用。以往的表单提交,我们用浏览器去debug的时候,会看到,提交了一个post提交的数据,这个一般只是值的提交,不包括有文件,但是在react中,好像就更加复杂了一些,对于表单提交要单独自己写一个提交的事件去处理,累死submit这样的jquey函数。而且提交成功后,我们用chrome去debug的时候,会发现提交的是一个RequestPayload这样的,跟FormData不一样,而且我们在koa中...

React中上传图片到qiniu

在React中使用qiniu上传图片,实现方式有很多种,一种是在web端实现上传,一种是在server端实现上传这里我说下我是如何在web端实现上传图片到七牛的七牛的官方已经有了javascript的使用说明我这里就不重复了。使用React首先是要把qiniu提供的js引入,由于我这里是使用的webpack,所以我就直接放在了引入文件中,这样我就可以全局引用了。require('./qiniu.js');在组件中把qiniu的对象引入进来constQiniu=require('qiniu');然后在componentDidMount这个方法中去初始化//七牛上传大图letuploader=Qiniu.uploader({runtimes:'html5,flash,html4',browse_button:'pickfiles'...