From e6343a83e240c71b23ed4f292e62fa8c0ab3e181 Mon Sep 17 00:00:00 2001
From: sunnylqm <sunnylqm@qq.com>
Date: Mon, 14 Mar 2016 11:54:27 -0700
Subject: [PATCH] Update index.js using ES6

Summary:To unify and advocate ES6
Closes https://github.com/facebook/react-native/pull/6319

Differential Revision: D3048141

Pulled By: vjeux

fb-gh-sync-id: 114c782480f08125cd90ba4aaaaab01d2b574929
shipit-source-id: 114c782480f08125cd90ba4aaaaab01d2b574929
---
 website/src/react-native/index.js | 170 ++++++++++++++++++------------
 1 file changed, 100 insertions(+), 70 deletions(-)

diff --git a/website/src/react-native/index.js b/website/src/react-native/index.js
index 29796c45b67967..ea77ccd8cf2bd4 100644
--- a/website/src/react-native/index.js
+++ b/website/src/react-native/index.js
@@ -48,11 +48,14 @@ var index = React.createClass({
           <Prism>
 {`// iOS
 
-var React = require('react-native');
-var { TabBarIOS, NavigatorIOS } = React;
+import React, { 
+  Component,
+  TabBarIOS, 
+  NavigatorIOS 
+} from 'react-native';
 
-var App = React.createClass({
-  render: function() {
+class App extends Component {
+  render() {
     return (
       <TabBarIOS>
         <TabBarIOS.Item title="React Native" selected={true}>
@@ -60,26 +63,30 @@ var App = React.createClass({
         </TabBarIOS.Item>
       </TabBarIOS>
     );
-  },
-});`}
+  }
+}`}
           </Prism>
 
 <Prism>
 {`// Android
 
-var React = require('react-native');
-var { DrawerLayoutAndroid, ProgressBarAndroid, Text } = React;
+import React, { 
+  Component,
+  DrawerLayoutAndroid, 
+  ProgressBarAndroid, 
+  Text 
+} from 'react-native';
 
-var App = React.createClass({
-  render: function() {
+class App extends Component {
+  render() {
     return (
       <DrawerLayoutAndroid
         renderNavigationView={() => <Text>React Native</Text>}>
         <ProgressBarAndroid />
       </DrawerLayoutAndroid>
     );
-  },
-});`}
+  }
+}`}
           </Prism>
 
           <h2>Asynchronous Execution</h2>
@@ -98,11 +105,15 @@ var App = React.createClass({
           <Prism>
 {`// iOS & Android
 
-var React = require('react-native');
-var { ScrollView, TouchableHighlight, Text } = React;
+import React, { 
+  Component,
+  ScrollView,
+  TouchableHighlight,
+  Text
+} from 'react-native';
 
-var TouchDemo = React.createClass({
-  render: function() {
+class TouchDemo extends Component {
+  render() {
     return (
       <ScrollView>
         <TouchableHighlight onPress={() => console.log('pressed')}>
@@ -110,8 +121,8 @@ var TouchDemo = React.createClass({
         </TouchableHighlight>
       </ScrollView>
     );
-  },
-});`}
+  }
+}`}
           </Prism>
 
           <h2>Flexbox and Styling</h2>
@@ -121,11 +132,16 @@ var TouchDemo = React.createClass({
           <Prism>
 {`// iOS & Android
 
-var React = require('react-native');
-var { Image, StyleSheet, Text, View } = React;
+var React, {
+  Component,
+  Image, 
+  StyleSheet, 
+  Text, 
+  View 
+} from 'react-native';
 
-var ReactNative = React.createClass({
-  render: function() {
+class ReactNative extends Component {
+  render() {
     return (
       <View style={styles.row}>
         <Image
@@ -142,8 +158,8 @@ var ReactNative = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 var styles = StyleSheet.create({
   row: { flexDirection: 'row', margin: 40 },
   image: { width: 40, height: 40, marginRight: 10 },
@@ -158,29 +174,32 @@ var styles = StyleSheet.create({
             React Native is focused on changing the way view code is written.  For the rest, we look to the web for universal standards and polyfill those APIs where appropriate. You can use npm to install JavaScript libraries that work on top of the functionality baked into React Native, such as XMLHttpRequest, window.requestAnimationFrame, and navigator.geolocation.  We are working on expanding the available APIs, and are excited for the Open Source community to contribute as well.
           </p>
           <Prism>
-{`// iOS (Android support for geolocation coming)
+{`// iOS & Android
 
-var React = require('react-native');
-var { Text } = React;
+import React, { 
+  Component,
+  Text 
+} from 'react-native';
 
-var GeoInfo = React.createClass({
-  getInitialState: function() {
-    return { position: 'unknown' };
+class GeoInfo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { position: 'unknown' };
   },
-  componentDidMount: function() {
+  componentDidMount() {
     navigator.geolocation.getCurrentPosition(
       (position) => this.setState({position}),
       (error) => console.error(error)
     );
-  },
-  render: function() {
+  }
+  render() {
     return (
       <Text>
         Position: {JSON.stringify(this.state.position)}
       </Text>
     );
-  },
-});`}
+  }
+}`}
           </Prism>
 
           <h2>Extensibility</h2>
@@ -213,24 +232,28 @@ RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlo
           <Prism>
 {`// JavaScript
 
-var React = require('react-native');
-var { NativeModules, Text } = React;
+import React, {
+  Component,
+  NativeModules,
+  Text
+} from 'react-native';
 
-var Message = React.createClass({
-  getInitialState() {
-    return { text: 'Goodbye World.' };
-  },
+class Message extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { text: 'Goodbye World.' };
+  }
   componentDidMount() {
     NativeModules.MyCustomModule.processString(this.state.text, (text) => {
       this.setState({text});
     });
-  },
-  render: function() {
+  }
+  render() {
     return (
       <Text>{this.state.text}</Text>
     );
   }
-});`}
+}`}
           </Prism>
 
           <h3>Creating iOS views</h3>
@@ -260,20 +283,22 @@ RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);
           <Prism>
 {`// JavaScript
 
-var React = require('react-native');
-var { requireNativeComponent } = React;
+import React, { 
+  Component,
+  requireNativeComponent
+} from 'react-native';
+
+var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
 
-class MyCustomView extends React.Component {
+export default class MyCustomView extends Component {
+  static propTypes = {
+    myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
+  };
   render() {
     return <NativeMyCustomView {...this.props} />;
   }
 }
-MyCustomView.propTypes = {
-  myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
-};
-
-var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
-module.exports = MyCustomView;`}
+`}
           </Prism>
 
           <h3>Creating Android modules</h3>
@@ -300,23 +325,27 @@ public class MyCustomModule extends ReactContextBaseJavaModule {
 <Prism>
 {`// JavaScript
 
-var React = require('react-native');
-var { NativeModules, Text } = React;
-var Message = React.createClass({
-  getInitialState() {
-    return { text: 'Goodbye World.' };
+import React, {
+  Component,
+  NativeModules,
+  Text
+} from 'react-native';
+class Message extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { text: 'Goodbye World.' };
   },
   componentDidMount() {
     NativeModules.MyCustomModule.processString(this.state.text, (text) => {
       this.setState({text});
     });
-  },
-  render: function() {
+  }
+  render() {
     return (
       <Text>{this.state.text}</Text>
     );
   }
-});
+}
 `}
           </Prism>
 
@@ -348,20 +377,21 @@ public class MyCustomViewManager extends SimpleViewManager<MyCustomView> {
           <Prism>
 {`// JavaScript
 
-var React = require('react-native');
-var { requireNativeComponent } = React;
+import React, {
+  Component,
+  requireNativeComponent 
+} from 'react-native';
+
+var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
 
-class MyCustomView extends React.Component {
+export default class MyCustomView extends Component {
+  static propTypes = {
+    myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
+  };
   render() {
     return <NativeMyCustomView {...this.props} />;
   }
 }
-MyCustomView.propTypes = {
-  myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
-};
-
-var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
-module.exports = MyCustomView;
 `}
           </Prism>
           </div>