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

@@ -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';
 
-class MyCustomView extends React.Component {
+var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
+
+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';
 
-class MyCustomView extends React.Component {
+var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
+
+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>