Convert from React.createClass to ES6 classes

Reviewed By: cpojer Differential Revision: D3619143 fbshipit-source-id: e14e81468d467437ee3d79c34c34b7780a46ca1c
lunaleaps · Jul 26, 2016 · a2fb703 · a2fb703
1 parent 857d2b8
commit a2fb703
Show file tree

Hide file tree

Showing 133 changed files with 2,125 additions and 2,192 deletions.
diff --git a/Examples/Movies/MovieCell.js b/Examples/Movies/MovieCell.js
@@ -31,8 +31,8 @@ var getStyleFromScore = require('./getStyleFromScore');
 var getImageSource = require('./getImageSource');
 var getTextFromScore = require('./getTextFromScore');
 
-var MovieCell = React.createClass({
-  render: function() {
+class MovieCell extends React.Component {
+  render() {
     var criticsScore = this.props.movie.ratings.critics_score;
     var TouchableElement = TouchableHighlight;
     if (Platform.OS === 'android') {
@@ -66,7 +66,7 @@ var MovieCell = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   textContainer: {

diff --git a/Examples/Movies/MovieScreen.js b/Examples/Movies/MovieScreen.js
@@ -29,8 +29,8 @@ var getImageSource = require('./getImageSource');
 var getStyleFromScore = require('./getStyleFromScore');
 var getTextFromScore = require('./getTextFromScore');
 
-var MovieScreen = React.createClass({
-  render: function() {
+class MovieScreen extends React.Component {
+  render() {
     return (
       <ScrollView contentContainerStyle={styles.contentContainer}>
         <View style={styles.mainSection}>
@@ -57,11 +57,11 @@ var MovieScreen = React.createClass({
         <Cast actors={this.props.movie.abridged_cast} />
       </ScrollView>
     );
-  },
-});
+  }
+}
 
-var Ratings = React.createClass({
-  render: function() {
+class Ratings extends React.Component {
+  render() {
     var criticsScore = this.props.ratings.critics_score;
     var audienceScore = this.props.ratings.audience_score;
 
@@ -81,11 +81,11 @@ var Ratings = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
-var Cast = React.createClass({
-  render: function() {
+class Cast extends React.Component {
+  render() {
     if (!this.props.actors) {
       return null;
     }
@@ -100,8 +100,8 @@ var Cast = React.createClass({
         )}
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   contentContainer: {

diff --git a/Examples/Movies/MoviesApp.android.js b/Examples/Movies/MoviesApp.android.js
@@ -65,8 +65,8 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
   }
 };
 
-var MoviesApp = React.createClass({
-  render: function() {
+class MoviesApp extends React.Component {
+  render() {
     var initialRoute = {name: 'search'};
     return (
       <Navigator
@@ -77,7 +77,7 @@ var MoviesApp = React.createClass({
       />
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

diff --git a/Examples/Movies/MoviesApp.ios.js b/Examples/Movies/MoviesApp.ios.js
@@ -26,8 +26,8 @@ var {
 
 var SearchScreen = require('./SearchScreen');
 
-var MoviesApp = React.createClass({
-  render: function() {
+class MoviesApp extends React.Component {
+  render() {
     return (
       <NavigatorIOS
         style={styles.container}
@@ -38,7 +38,7 @@ var MoviesApp = React.createClass({
       />
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

diff --git a/Examples/Movies/SearchBar.android.js b/Examples/Movies/SearchBar.android.js
@@ -30,8 +30,8 @@ var {
 
 var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;
 
-var SearchBar = React.createClass({
-  render: function() {
+class SearchBar extends React.Component {
+  render() {
     var background = IS_RIPPLE_EFFECT_SUPPORTED ?
       TouchableNativeFeedback.SelectableBackgroundBorderless() :
       TouchableNativeFeedback.SelectableBackground();
@@ -67,7 +67,7 @@ var SearchBar = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   searchBar: {

diff --git a/Examples/Movies/SearchBar.ios.js b/Examples/Movies/SearchBar.ios.js
@@ -25,8 +25,8 @@ var {
   View,
 } = ReactNative;
 
-var SearchBar = React.createClass({
-  render: function() {
+class SearchBar extends React.Component {
+  render() {
     return (
       <View style={styles.searchBar}>
         <TextInput
@@ -44,7 +44,7 @@ var SearchBar = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   searchBar: {

diff --git a/Examples/Movies/SearchScreen.js b/Examples/Movies/SearchScreen.js
@@ -318,8 +318,8 @@ var SearchScreen = React.createClass({
   },
 });
 
-var NoMovies = React.createClass({
-  render: function() {
+class NoMovies extends React.Component {
+  render() {
     var text = '';
     if (this.props.filter) {
       text = `No results for "${this.props.filter}"`;
@@ -335,7 +335,7 @@ var NoMovies = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

diff --git a/Examples/TicTacToe/TicTacToeApp.js b/Examples/TicTacToe/TicTacToeApp.js
@@ -94,8 +94,8 @@ class Board {
   }
 }
 
-var Cell = React.createClass({
-  cellStyle() {
+class Cell extends React.Component {
+  cellStyle = () => {
     switch (this.props.player) {
       case 1:
         return styles.cellX;
@@ -104,9 +104,9 @@ var Cell = React.createClass({
       default:
         return null;
     }
-  },
+  };
 
-  textStyle() {
+  textStyle = () => {
     switch (this.props.player) {
       case 1:
         return styles.cellTextX;
@@ -115,9 +115,9 @@ var Cell = React.createClass({
       default:
         return {};
     }
-  },
+  };
 
-  textContents() {
+  textContents = () => {
     switch (this.props.player) {
       case 1:
         return 'X';
@@ -126,7 +126,7 @@ var Cell = React.createClass({
       default:
         return '';
     }
-  },
+  };
 
   render() {
     return (
@@ -142,9 +142,9 @@ var Cell = React.createClass({
       </TouchableHighlight>
     );
   }
-});
+}
 
-var GameEndOverlay = React.createClass({
+class GameEndOverlay extends React.Component {
   render() {
     var board = this.props.board;
 
@@ -175,7 +175,7 @@ var GameEndOverlay = React.createClass({
       </View>
     );
   }
-});
+}
 
 var TicTacToeApp = React.createClass({
   getInitialState() {

diff --git a/Examples/UIExplorer/js/AccessibilityAndroidExample.android.js b/Examples/UIExplorer/js/AccessibilityAndroidExample.android.js
@@ -36,40 +36,35 @@ var UIExplorerPage = require('./UIExplorerPage');
 
 var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];
 
-var AccessibilityAndroidExample = React.createClass({
+class AccessibilityAndroidExample extends React.Component {
+  static title = 'Accessibility';
+  static description = 'Examples of using Accessibility API.';
 
-  statics: {
-    title: 'Accessibility',
-    description: 'Examples of using Accessibility API.',
-  },
-
-  getInitialState: function() {
-    return {
-      count: 0,
-      backgroundImportantForAcc: 0,
-      forgroundImportantForAcc: 0,
-    };
-  },
+  state = {
+    count: 0,
+    backgroundImportantForAcc: 0,
+    forgroundImportantForAcc: 0,
+  };
 
-  _addOne: function() {
+  _addOne = () => {
     this.setState({
       count: ++this.state.count,
     });
-  },
+  };
 
-  _changeBackgroundImportantForAcc: function() {
+  _changeBackgroundImportantForAcc = () => {
     this.setState({
       backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
     });
-  },
+  };
 
-  _changeForgroundImportantForAcc: function() {
+  _changeForgroundImportantForAcc = () => {
     this.setState({
       forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <UIExplorerPage title={'Accessibility'}>
 
@@ -202,8 +197,8 @@ var AccessibilityAndroidExample = React.createClass({
 
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
    embedded: {

diff --git a/Examples/UIExplorer/js/AccessibilityIOSExample.js b/Examples/UIExplorer/js/AccessibilityIOSExample.js
@@ -29,7 +29,7 @@ var {
   View,
 } = ReactNative;
 
-var AccessibilityIOSExample = React.createClass({
+class AccessibilityIOSExample extends React.Component {
   render() {
     return (
       <View>
@@ -60,8 +60,8 @@ var AccessibilityIOSExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 exports.title = 'AccessibilityIOS';
 exports.description = 'Interface to show iOS\' accessibility samples';