终于开始准备连载这一系列，React-360 前身就是 React-VR。大概在 2.0.0 的时候还是使用 React-vr 来命名，但是随后重新开始了命名；因此安装的一些包的名称也有变化了。 比如我们在初始化的项目时候，需要安装 $ npm install -g react-360-cli 小插曲 为什么更名？ 2017 年 Facebook 发布了 JavaScript 框架 react-vr ，它是基于 JS 来实现用于在浏览器创建 VR 内容的框架。但是在同时， oculus 开始基于 C++ 开始编写 API ，因此为了避免两者出现一些困扰，我们重新命名了框架 react-360, 专注于创建 沉浸式的 VR 内容，同时支持 PC, 手机以及 VR 设备； 阅读之前 在具体阅读之前，建议了解下下面内容; React(https: 详情 »
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 xhr2 help us to gain more ability to handle files. Last two days, we were trying to migrate Vue-core-image-upload to react.js one. And all the new features of Vue-core-image-upload 详情 »
Atom 是目前非常流行的编辑器，除了好用小巧的特点，它丰富的插件也给开发者提供了很多的便利性。 Atom 是基于 Electron 开发的，也就是说我们可以通过写 HTML + CSS + JavaScript 的方式来构建我们的桌面应用。而一个典型的Electron App 的架构如图: 其实我们在完成实际的插件的部分，也就是工作的最上层，使用我们前端最基本的知识去实现基本的需求。当然这一层的实现，可以有很多方式，你可以使用简单的JS 去创建视图窗口，你也可以使用一些框架，比如 Vue.js 以及今天提及的 React。React 最核心的一个目标: A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES React 的发展很迅速，现在不仅可以完成普通网站的开发，也能能够开发原生的App(React-Native)，也可以开发 VR 相关的内容 (React-VR), 当然桌面应用现在也是可以借助于 Electron 完成。 今天我们简单实现一个插件，通过菜单按钮，呼出对话框，然后完成输入字符串，并将字符串插入到我们的当前代码中。 创建项目 详情 »
React-VR 是 Facebook 团队推出的使用JavaScript来开发VR应用的框架，和 React 相似，你可以通过编写组件的形式来进行程序的开发。(写过 React-Native的应该可以很快上手吧。) 快速开始 首先我们需要安装脚手架程序: npm install -g react-vr-cli 安装成功后，我们就可以开始创建项目了。 react-vr init vrexamples 如果初始化过程中，遇见了提示 yarn 依赖安装的问题，你可以进入项目目录，重新安装就好。 初始化成功后，我们进入项目，然后输入npm start , 访问: http:/localhost:8081/vr/ 就可以看到web上的内容了。如果你有VR的设备，你也可以戴上体验下。 编辑代码 这个时候我们打开编辑器， 查看index.vr.js 的源码，写过React-Native的是不是有种泪奔的感觉，的却是这样写的： 'use strict'; import React from 'react'; import { AppRegistry, asset, 详情 »
写一些react插件，大家会引入CI集成测试。这样有助于开源项目的质量。尤其引入了karma 进行浏览器的自动测试。 自己写react.js的开源组件的时候用的是 Airbnb Enzyme + Karma的测试环境。这个时候我们需要调用chrome测试，通常我们在 karma.conf.js 指定 browsers 参数为['chrome']。但是在CI的测试环境中。会提示 Cannot load browser "[Chrome]": it is not registered! Perhaps you are missing some plugin? 这个时候需要我们对测试环境做个判断重新指定浏览器，参考如下： const path = require('path'); let browsers = ['Chrome']; // trvis env if (process.env.TRAVIS) { browsers = ['Chrome_travis_ci'] 详情 »
在不久前，我们把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-core-image-upload 使用ES6 进行开发 import React from 'react'; import ReactCoreImageUpload from 'react-core-image-upload'; let App = React.createClass({ //... render() { return( <div> <ReactCoreImageUpload text="Upload Your Image" class={['pure-button', 详情 »
原文地址: http://www.jianshu.com/p/1fa6e9c0799f 最近发现 React Native 官方博客上面这篇介绍 Hot Reload 原理的文章，仔细阅读了一下，顺便翻译为中文，以飨读者。本文不少内容加入了译者的理解，并没有严格字对字翻译，英文水平不错的同学可以直接阅读原文 React Native 的设计目标是为开发者提供最好的开发体验，其中很重要的一点就是尽量缩短文件修改后到看到修改所产生的变化之间所需的时间。我们的目标是将这个循环所需的时间降到 1 秒以下，即使你应用的功能和体积在不断的膨胀。 通过下面三个主要特性我们离目标越来越近： 基于 Javascript 进行开发，避免了长时间的代码编译过程 实现了一个名为 Packager 的工具，用来将 es6/flow/jsx 文件转换成虚拟机可以理解的普通 JavaScript 语言。Packager 被设计为一个服务器，从而能够在内存中保存当下的状态，实现快速的增量更新，同时可以使用系统的多核 CPU 提高性能。 新增了一个名为实时加载（Live Reload）的特性，实现保存代码修改后自动重新加载 APP 详情 »
最近项目开发时候遇到这样的情况就毫不客气的介入了加载条的开发计划中来。 Github 项目地址 演示效果 定义需求 加载条说简单的需求来说就是: 加载动画 + 文案 + 层级位置 如果理解需求了的话，开发就相对轻松了。自己能够用到的的场景大致有弹框提交，页面加载数据，按钮禁用提交这些。 自己设计的一般结构如下 <div className="react-loading-spinner" > <div className="loading-inner"> {loading} . // loading animation element <div className="alert-text">{this.props.text}</div> </div> </div> 由于JSX的方便性，我们可以定义行内的直接返回loading中的东西。同样也可以作为children存放自定义的元素放进去，比如你喜欢使用svg或者css动画等。 详情 »
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. 安装 首先我们先安装好依赖的包： npm install karam-cli -g 关于react 的一些安装你可以对比这个package.json。 然后再安装karam 和所需的常规依赖。 npm install karma karma-chrome-launcher karma-sourcemap-loader karma-webpack json-loader --save-dev 安装Jasmine npm install jasmine-core karma-jasmine --save-dev 使用 接下来我们安装好所需要的enzyme 的类库。由于最新版本的enzyme是支持React15.x 详情 »
前言 很早以前写过使用React-router和Webpack快速构建一个react程序。很多网友发现版本太老，于是乎最近又重新组织了下结构，使用最近发布的yarn作为包管理工具,介绍下基本安装步骤。并且这次代码包提到了github上，这样大家也可以有个直接参考。 Github 项目地址 初始化项目 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作，关于安装yarn，你可以看这里 我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令： yarn init yarn 如果没有安装，全程用 npm代替也没问题。 项目会初始化 package.json ,然后填写一些基本信息即可。 接下来我们开始安装依赖项，再 package.json 的添加下面内容 "dependencies": { "react": "^15.4.0-rc.4", "react-dom": "^15.3.2& 详情 »
