Convert twitter-example to ES6

Author: charpeni

twitter-example/components/BackButton.js

@@ -1,33 +1,21 @@
-'use strict';
-
-var React = require('react-native');
-
-var {
-  StyleSheet,
-  TouchableHighlight,
-  Image,
-  View,
-} = React;
-
-
-var styles = StyleSheet.create({
-  backButton: {
-    width: 10,
-    height: 17,
-    marginLeft: 10,
-    marginTop: 3,
-    marginRight: 10
+import React, { StyleSheet, Image } from 'react-native';
+
+export default class BackButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      backButton: {
+        width: 10,
+        height: 17,
+        marginLeft: 10,
+        marginTop: 3,
+        marginRight: 10,
+      },
+    });
   }
-});
-
-
-var BackButton = React.createClass({
   render() {
     return (
-      <Image source={require('image!back_button')} style={styles.backButton} />
-    )
+      <Image source={require('../images/back_button.png')} style={this.styles.backButton} />
+    );
   }
-}); 
-
-
-module.exports = BackButton;
+}

twitter-example/components/RightCorner.js

@@ -0,0 +1,20 @@
+import React, { StyleSheet, View } from 'react-native';
+
+export default class RightCorner extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      button: {
+        width: 100,
+        height: 50,
+        backgroundColor: 'orange',
+      },
+    });
+  }
+
+  render() {
+    return (
+      <View style={this.styles.button} />
+    );
+  }
+}

twitter-example/components/Tweet.js

@@ -1,83 +1,82 @@
-'use strict';
+import React, { StyleSheet, Text, TouchableHighlight, Image, View, PropTypes } from 'react-native';
 
-var React = require('react-native');
+const propTypes = {
+  goToTweet: PropTypes.func.isRequired,
+  text: PropTypes.string,
+  user: PropTypes.object,
+};
 
-var {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  Image,
-  View,
-} = React;
+class Tweet extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = StyleSheet.create({
+      tweetContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'white',
+        borderBottomWidth: 1,
+        borderColor: '#DAE6F0',
+        paddingTop: 4,
+        paddingBottom: 10,
+      },
+      avatar: {
+        backgroundColor: 'gray',
+        width: 50,
+        height: 50,
+        marginLeft: 10,
+        borderRadius: 4,
+      },
+      userContainer: {
+        flexDirection: 'row',
+      },
+      username: {
+        marginLeft: 4,
+        fontSize: 13,
+        color: '#8999a5',
+        marginTop: 2,
+      },
+      name: {
+        fontWeight: '600',
+        fontSize: 15,
+      },
+      text: {
+        marginTop: 5,
+      },
+      rightContainer: {
+        flex: 1,
+        padding: 10,
+      },
+    });
+    this.goToTweet = this.goToTweet.bind(this);
+  }
 
-var Tweet = React.createClass({
-  
-  goToTweet: function() {
+  goToTweet() {
     this.props.goToTweet(this.props);
-  },
+  }
 
   render() {
-    var {
+    const {
       text,
-      user
+      user,
     } = this.props;
 
     return (
       <TouchableHighlight underlayColor="transparent" onPress={this.goToTweet}>
-        <View style={styles.tweetContainer}>
-          <Image source={{uri: user.avatar}} style={styles.avatar} />
-          <View style={styles.rightContainer}>
-            <View style={styles.userContainer}>
-              <Text style={styles.name}>{user.name}</Text>
-              <Text style={styles.username}>@{user.username}</Text>
+        <View style={this.styles.tweetContainer}>
+          <Image source={{ uri: user.avatar }} style={this.styles.avatar} />
+          <View style={this.styles.rightContainer}>
+            <View style={this.styles.userContainer}>
+              <Text style={this.styles.name}>{user.name}</Text>
+              <Text style={this.styles.username}>@{user.username}</Text>
             </View>
-            <Text style={styles.text}>{text}</Text>
+            <Text style={this.styles.text}>{text}</Text>
           </View>
         </View>
       </TouchableHighlight>
-    )
-  }
-});
-
-var styles = StyleSheet.create({
-  tweetContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderBottomWidth: 1,
-    borderColor: '#DAE6F0',
-    paddingTop: 4,
-    paddingBottom: 10
-  },
-  avatar: {
-    backgroundColor: 'gray',
-    width: 50,
-    height: 50,
-    marginLeft: 10,
-    borderRadius: 4
-  },
-  userContainer: {
-    flexDirection: 'row'
-  },
-  username: {
-    marginLeft: 4,
-    fontSize: 13,
-    color: '#8999a5',
-    marginTop: 2
-  },
-  name: {
-    fontWeight: '600',
-    fontSize: 15
-  },
-  text: {
-    marginTop: 5
-  },
-  rightContainer: {
-    flex: 1,
-    padding: 10
+    );
   }
-});
+}
 
+Tweet.propTypes = propTypes;
 
-module.exports = Tweet;
+export default Tweet;