React-core-image-upload V2.2 is released

React-core-image-upload is a really light-weight plugin for react.js developers to upload his images. Now you could also compress and crop image via this plugin. The 详情 »

使用 React 开发 Atom 插件

Atom 是目前非常流行的编辑器,除了好用小巧的特点,它丰富的插件也给开发者提供了很多的便利性。 Atom 是基于 Electron 开发的,也就是说我们可以通过写 HTML + CSS + JavaScript 的方式来构建我们的桌面应用。而一个典型的Electron App 的架构如图: 其实我们在完成实际的插件的部分,也就是工作的最上层,使用我们前端最基本的知识去实现基本的需求。当然这一层的实现,可以有很多方式,你可以使用简单的JS 去创建视图窗口,你也可以使用一些框架,比如 Vue. 详情 »

开始使用 React-VR

React-VR 是 Facebook 团队推出的使用JavaScript来开发VR应用的框架,和 React 相似,你可以通过编写组件的形式来进行程序的开发。(写过 React-Native的应该可以很快上手吧。) 快速开始 首先我们需要安装脚手架程序: npm install -g react-vr-cli 安装成功后,我们就可以开始创建项目了。 react-vr init vrexamples 如果初始化过程中,遇见了提示 yarn 依赖安装的问题,你可以进入项目目录, 详情 »

解决travis ci 中chrome找不到的办法

写一些react插件,大家会引入CI集成测试。这样有助于开源项目的质量。尤其引入了karma 进行浏览器的自动测试。 自己写react.js的开源组件的时候用的是 Airbnb Enzyme + Karma的测试环境。这个时候我们需要调用chrome测试,通常我们在 karma.conf.js 指定 browsers 参数为['chrome']。但是在CI的测试环境中。会提示 Cannot load browser "[Chrome]": it 详情 »

React-core-image-upload 发布2.0了

在不久前,我们把vue-core-image-upload 发布了2.0 。这次我们保持了完整的api迁移到了react上。支持了header 定义,支持了 file change 的自定义事件,更新了更加详细的文档。 react-core-image-upload 项目地址 Demo 快速开始 使用 npm npm install react-core-image-upload --save-dev 使用 yarn yarn add 详情 »

[转]React Native 热加载(Hot Reload)原理简介

原文地址: http://www.jianshu.com/p/1fa6e9c0799f 最近发现 React Native 官方博客上面这篇介绍 Hot Reload 原理的文章,仔细阅读了一下,顺便翻译为中文,以飨读者。本文不少内容加入了译者的理解,并没有严格字对字翻译,英文水平不错的同学可以直接阅读原文 React Native 的设计目标是为开发者提供最好的开发体验,其中很重要的一点就是尽量缩短文件修改后到看到修改所产生的变化之间所需的时间。我们的目标是将这个循环所需的时间降到 1 详情 »

使用React 制作一个简单的加载动画组件

最近项目开发时候遇到这样的情况就毫不客气的介入了加载条的开发计划中来。 Github 项目地址 演示效果 定义需求 加载条说简单的需求来说就是: 加载动画 + 文案 + 层级位置 如果理解需求了的话,开发就相对轻松了。自己能够用到的的场景大致有弹框提交,页面加载数据,按钮禁用提交这些。 自己设计的一般结构如下 <div className="react-loading-spinner" > <div className="loading-inner"> {loading} 详情 »

使用enzyme 测试你的React 组件

enzyme 是Airbnb推出一款用于测试React编写的组件的测试工具。通过它你可以轻松的完成断言,DOM操作以及遍历 React Components 输出。 enzyme 支持多种测试类库,比如Chai.js ,Mocha,或者Jasmine.你也可以用它来测试你的React-Native 程序。而且至此多种模块加载工具,比如webpack,SystemJS, 或者Browserify。几乎你可以从它的官方主页找到这些使用指南。 Po主最近写了一款上传组件react-core-image-upload,开发环境主要是webpack + babel + react。这次测试自己也就选择了karma + webpack. 详情 »

使用yarn 制作一个webpack + react 种子

前言 很早以前写过使用React-router和Webpack快速构建一个react程序。很多网友发现版本太老,于是乎最近又重新组织了下结构,使用最近发布的yarn作为包管理工具,介绍下基本安装步骤。并且这次代码包提到了github上,这样大家也可以有个直接参考。 Github 项目地址 初始化项目 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作,关于安装yarn,你可以看这里 我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令: yarn init yarn 如果没有安装,全程用 详情 »

React Native 开发小Tips

相信好多写React Native的都是前端出身,当然遇见问题的,也很多时候会想从前端出发,但由于React Native本身的限制,并不是支持足够多的属性和样式,所以Bo主结合自己的开发实践,并总结了一些将来开发可能会遇见的问题并给出一些小的代码参考;(PS实现不好的希望能大家提出看法,自己也会更新)。 自己将代码放到了example下,并且做成了一个App.这样可以查看具体运行效果: 截图1: 截图2: 项目地址 开始 git clone https://github.com/JackPu/react-native-tips.git 详情 »