[change] separate the React and React Native APIs

Fix #136

README.md

@@ -46,7 +46,8 @@ Demos:
 Sample:
 
 ```js
-import React, { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native'
 
 // Components
 const Card = ({ children }) => <View style={styles.card}>{children}</View>

docs/components/ActivityIndicator.md

@@ -23,7 +23,8 @@ Size of the indicator. Small has a height of `20`, large has a height of `36`.
 ## Examples
 
 ```js
-import React, { ActivityIndicator, Component, StyleSheet, View } from 'react-native'
+import React, { Component } from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
 
 class ToggleAnimatingActivityIndicator extends Component {
   constructor(props) {

docs/components/Image.md

@@ -78,7 +78,8 @@ Example usage:
 
 ```js
 import placeholderAvatar from './placeholderAvatar.png'
-import React, { Component, Image, PropTypes, StyleSheet } from 'react-native'
+import React, { Component } from 'react'
+import { Image, PropTypes, StyleSheet } from 'react-native'
 
 export default class ImageExample extends Component {
   constructor(props, context) {

docs/components/ListView.md

@@ -15,7 +15,8 @@ Content to display over the image.
 ## Examples
 
 ```js
-import React, { Component, ListView, PropTypes } from 'react-native'
+import React, { Component, PropTypes } from 'react'
+import { ListView } from 'react-native'
 
 export default class ListViewExample extends Component {
   static propTypes = {}

docs/components/Portal.md

@@ -33,7 +33,8 @@ React component to render.  This same tag can later be used in `closeModal`.
 ## Examples
 
 ```js
-import React, { Portal, Text, Touchable } from 'react-native'
+import React, { Component } from 'react'
+import { Portal, Text, Touchable } from 'react-native'
 
 export default class PortalExample extends Component {
   componentWillMount() {

docs/components/ScrollView.md

@@ -83,7 +83,8 @@ Scrolls to a given `x`, `y` offset (animation is not currently supported).
 ## Examples
 
 ```js
-import React, { Component, ScrollView, StyleSheet } from 'react-native'
+import React, { Component } from 'react'
+import { ScrollView, StyleSheet } from 'react-native'
 import Item from './Item'
 
 export default class ScrollViewExample extends Component {

docs/components/Text.md

@@ -75,7 +75,8 @@ Used to locate this view in end-to-end tests.
 ## Examples
 
 ```js
-import React, { Component, PropTypes, StyleSheet, Text } from 'react-native'
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, Text } from 'react-native'
 
 export default class PrettyText extends Component {
   static propTypes = {

docs/components/TextInput.md

@@ -164,7 +164,8 @@ Focus the underlying DOM input.
 ## Examples
 
 ```js
-import React, { Component, StyleSheet, TextInput } from 'react-native'
+import React, { Component } from 'react'
+import { StyleSheet, TextInput } from 'react-native'
 
 export default class TextInputExample extends Component {
   constructor(props, context) {

docs/components/View.md

@@ -184,7 +184,8 @@ Used to locate this view in end-to-end tests.
 ## Examples
 
 ```js
-import React, { Component, PropTypes, StyleSheet, View } from 'react-native'
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, View } from 'react-native'
 
 export default class ViewExample extends Component {
   render() {

docs/guides/react-native.md

@@ -40,11 +40,7 @@ module.exports = {
 Minor platform differences can use the `Platform` module.
 
 ```js
-import { AppRegistry, Platform, StyleSheet } from 'react-native'
-
-const styles = StyleSheet.create({
-  height: (Platform.OS === 'web') ? 200 : 100
-})
+import { AppRegistry, Platform } from 'react-native'
 
 AppRegistry.registerComponent('MyApp', () => MyApp)
 

docs/guides/rendering.md

@@ -21,14 +21,15 @@ module.exports = {
 Rendering without using the `AppRegistry`:
 
 ```js
-import React from 'react-native'
+import ReactDOM from 'react-dom'
+import ReactDOMServer from 'react-dom/server'
 
 // DOM render
-React.render(<div />, document.getElementById('react-app'))
+ReactDOM.render(<div />, document.getElementById('react-app'))
 
 // Server render
-React.renderToString(<div />)
-React.renderToStaticMarkup(<div />)
+ReactDOMServer.renderToString(<div />)
+ReactDOMServer.renderToStaticMarkup(<div />)
 ```
 
 Rendering using the `AppRegistry`:
@@ -36,7 +37,7 @@ Rendering using the `AppRegistry`:
 ```js
 // App.js
 
-import React, { AppRegistry } from 'react-native'
+import React from 'react'
 
 // component that renders the app
 const AppContainer = (props) => { /* ... */ }
@@ -46,8 +47,8 @@ export default AppContainer
 ```js
 // client.js
 
-import React, { AppRegistry } from 'react-native'
 import App from './App'
+import { AppRegistry } from 'react-native'
 
 // registers the app
 AppRegistry.registerComponent('App', () => App)
@@ -62,7 +63,7 @@ rendering.
 ```js
 // AppShell.js
 
-import React from 'react-native'
+import React from 'react'
 
 const AppShell = (html, styleElement) => (
   <html>
@@ -82,9 +83,9 @@ export default AppShell
 ```js
 // server.js
 
-import React, { AppRegistry } from 'react-native'
 import App from './App'
 import AppShell from './AppShell'
+import { AppRegistry } from 'react-native'
 
 // registers the app
 AppRegistry.registerComponent('App', () => App)

examples/2048/Game2048.js

@@ -16,7 +16,8 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Animated,
   AppRegistry,
@@ -24,7 +25,7 @@ var {
   Text,
   TouchableBounce,
   View,
-} = React;
+} = ReactNative;
 
 var GameBoard = require('./GameBoard');
 

examples/TicTacToe/TicTacToe.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppRegistry,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 class Board {
   grid: Array<Array<number>>;

examples/components/App.js

@@ -1,6 +1,7 @@
 import GridView from './GridView'
 import Heading from './Heading'
-import React, { Image, StyleSheet, ScrollView, Text, TextInput, TouchableHighlight, View } from 'react-native'
+import React from 'react'
+import { Image, StyleSheet, ScrollView, Text, TextInput, TouchableHighlight, View } from 'react-native'
 
 export default class App extends React.Component {
   static propTypes = {

examples/index.js

@@ -1,4 +1,4 @@
-import React, { AppRegistry } from 'react-native'
+import { AppRegistry } from 'react-native'
 import Game2048 from './2048/Game2048'
 import TicTacToeApp from './TicTacToe/TicTacToe'
 

src/__tests__/index-test.js

@@ -1,23 +0,0 @@
-/* eslint-env mocha */
-
-import assert from 'assert'
-import React from '..'
-
-suite('ReactNativeWeb', () => {
-  suite('exports', () => {
-    test('React', () => {
-      assert.ok(React)
-    })
-
-    test('ReactDOM methods', () => {
-      assert.ok(React.findDOMNode)
-      assert.ok(React.render)
-      assert.ok(React.unmountComponentAtNode)
-    })
-
-    test('ReactDOM/server methods', () => {
-      assert.ok(React.renderToString)
-      assert.ok(React.renderToStaticMarkup)
-    })
-  })
-})

src/index.js

@@ -1,7 +1,3 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import ReactDOMServer from 'react-dom/server'
-
 import './apis/PanResponder/injectResponderEventPlugin'
 
 // apis
@@ -80,12 +76,7 @@ const ReactNative = {
   // propTypes
   ColorPropType,
   EdgeInsetsPropType,
-  PointPropType,
-
-  // React
-  ...React,
-  ...ReactDOM,
-  ...ReactDOMServer
+  PointPropType
 }
 
 module.exports = ReactNative