React Web

A framework for building web apps with React.

Examples

Install

npm install react-web --save

Usage

Webpack configuration

Inside your webpack configuration, alias the react-native package to the react-web package, then install and add haste-resolver-webpack-plugin plugin.

// webpack.config.js
var HasteResolverPlugin = require('haste-resolver-webpack-plugin');

module.exports = {
  resolve: {
    alias: {
      'react-native': 'react-web'
    }
  },
  plugins: [
    new HasteResolverPlugin({
      platform: 'web'
    })
  ]
}

What does HasteResolverPlugin do?

When using components of react-web, just require('ReactActivityIndicator'), and Webpack will build a bundle with ActivityIndicator.web.js for web platform.

HasteResolverPlugin will do the following for you:

Walk over all components and check out the @providesModule info.
When webpack build bundle, it makes your components recognised rather than throwing an error.
It will help webpack build bundle with correct file depending on the target platform.

You can find something like @providesModule ReactActivityIndicator on react-web component's comment, yes, it's for HasteResolverPlugin.

Require modules

Two ways to require modules.

The CommonJS way

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

This reference method looks like we're in the way of using the native react-native way:

Like the require module in Node.js, and through Destructuring assignment, allows some components to be referenced in the scope of the current file. That is to say, if we do so, each application component can be directly:

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

rather than:

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

But in fact it is quite different in react-web. We require('react-native'), in the construction of the react-web will be renamed, equivalent to require('ReactReact'). At the same time, this form of writing will put all the components into at one time, including ReactAppRegistry/ReactView/... And so on, even some components did not apply to.

The Haste way

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

In this way, we load our components on demand, such as ReactAppRegistry or ReactView and so on. Packaged components so that we no longer need to care about the differences between the platform. As mentioned above, the HasteResolverPlugin plugin will help webpack to compile and package the code.

Fix platform differences

Native events without direct pageX/pageY on web platform

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

Should run application on web platform

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

Should care about fetch domain on web platform

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

Component without setNativeProps method on web platform

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

Without LayoutAnimation on web platform

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

Scripts

Linting - npm run lint - Must run it before commit.
Testing - npm test - Run unit testing by jest.
Developing - npm start - This will run a server at localhost:3000 and use Hot Module Reloading.
Demo deployment - npm run demo - Generate demo assets under pages directory.

License

React Web is BSD licensed.

ustccjw / react-web