React Web

基于 React 的构建无线 Web 应用框架

演示

• UIExplorer
• Movies
• TicTacToe
• Game2048

安装

npm install react-web --save

使用

第一步：项目中修改 webpack 配置

在 webpack 配置中，需要添加 alias 将 react-native 指向 react-web，其次需要安装 haste-resolver-webpack-plugin 插件。

// webpack.config.js  var HasteResolverPlugin = require('haste-resolver-webpack-plugin');    module.exports = {    resolve: {      alias: {        'react-native': 'react-web'      }    },    plugins: [      new HasteResolverPlugin({        platform: 'web',        nodeModules: ['react-web']      })    ]  }

HasteResolverPlugin 的用处？

使用 React Web 组件，需要在我们的组件中去 require('ReactActivityIndicator')，如果目标是 Web 端，那么打包时就会引用 ActivityIndicator.web.js 这个文件。

HasteResolverPlugin 插件就为你做了这件事情，它会：

1. 扫描所有组件 @providesModule 信息并记录下来。
2. Webpack 编译时，使其可以识别 ReactActivityIndicator 这种写法，而不会报错。
3. 根据目标平台，帮助 Webpack 打包对应组件文件。

你可以在每个组件顶部注释发现类似 @providesModule ReactActivityIndicator 的注释，没错就是给 HasteResolverPlugin 插件用的。

第二步：引入你需要的模块

加载模块的两种方式：

第一种

var React = require('react-native');  var {    AppRegistry,    StyleSheet,    View,    Platform,  } = React;

这种引用方式看起来像是我们在使用原生的 react-native 的方式：

我们像在 Node.js 中一样 require 模块，并通过解构赋值的写法，使得一些组件可以在当前文件的作用域中被引用。

也就是说，如果我们这样定义了，每次应用组件时就可以直接：

var styles = StyleSheet.create({   //your code  });

而不用：

var styles = React.StyleSheet.create({   //your code  });

但实际上在 react-web 中这样引用就比较与众不同了：

我们 require('react-native')，在 react-web 构建的时候也会被重命名，变成引用到 react-web 封装后的形式，相当于 require('ReactReact')；

与此同时，这种形式的写法会把所有的组件一次性引入进来，包括 ReactAppRegistry/ReactView/... 等等，即使有些组件并没有应用到。

第二种

var AppRegistry = require('ReactAppRegistry');  var View = require('ReactView');  var Text = require('ReactText');  var Platform = require('ReactPlatform');

这里我们按需 require 封装后的组件：ReactAppRegistry/ReactView/...。 封装后的组件使我们不再需要关心平台的差异(Web/iOS/Android)。像上面提到的，HasteResolverPlugin 插件会帮助 webpack 做好代码的编译和打包工作。

第三步：平台差异性

1. Web 端的 pageX/pageY 获取与 React Native 有差异

   if (Platform.OS == 'web') {    var touch = event.nativeEvent.changedTouches[0];    pageX = touch.pageX;    pageY = touch.pageY;  } else {    startX = event.nativeEvent.pageX;    startY = event.nativeEvent.pageY;  }

2. Web 端初始化需要使用 runApplication

   AppRegistry.registerComponent('Game2048', () => Game2048);  if(Platform.OS == 'web'){    var app = document.createElement('div');    document.body.appendChild(app);    AppRegistry.runApplication('Game2048', {      rootTag: app    })  }

3. Web 端请求数据需要考虑跨域

   var fetch = Platform.OS === 'web'? require('ReactJsonp'): require('ReactFetch');

4. Web 端的组件没有 setNativeProps 方法

   var setNativeProps = require('ReactSetNativeProps')  setNativeProps(this.refs.foo, {    style: {      top: 0    }  })

5. Web 端没有 LayoutAnimation

   var LayoutAnimation = require('ReactLayoutAnimation')  if(Platform.OS !== 'web'){    LayoutAnimation.configureNext(...)  }

任务脚本

• 校验代码规范 - npm run lint - 提交代码之前必须先执行这个以校验代码规范。
• 测试 - npm test - 使用 Jest 运行单元测试。
• 开发 - npm start - 执行之后会启动一个本地服务器 localhost:3000 并且带有 Hot Module Reloading 的功能。
• 生成 Demo - npm run demo - 执行之后会在 pages 目录下生成 demo 静态文件用于部署演示。

开源协议

React Web 基于 BSD 开源协议.