React Web

基于 React 的構建無線 Web 應用框架

演示

安裝

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 插件就為你做了這件事情，它會：

掃描所有組件 @providesModule 信息并記錄下來。
Webpack 編譯時，使其可以識別 ReactActivityIndicator 這種寫法，而不會報錯。
根據目標平臺，幫助 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 做好代碼的編譯和打包工作。

第三步：平臺差異性

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;
}

Web 端初始化需要使用 runApplication

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

Web 端請求數據需要考慮跨域

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

Web 端的組件沒有 setNativeProps 方法

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

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 開源協議.