npx jscodeshift -t ../react-codemod/transforms/class.js src

Author: ryankshaw

dist/react-tokeninput.js

@@ -7,28 +7,26 @@ var without = require('lodash-node/modern/arrays/without')
 var uniq = require('lodash-node/modern/arrays/uniq')
 var names = require('./names')
 
-var App = React.createClass({
-  getInitialState: function() {
-    return {
-      input: '',
-      loading: false,
-      selected: [],
-      options: names
-    };
-  },
-
-  handleChange: function(value) {
+class App extends React.Component {
+  state = {
+    input: '',
+    loading: false,
+    selected: [],
+    options: names
+  };
+
+  handleChange = (value) => {
     this.setState({
       selected: value
     })
-  },
+  };
 
-  handleRemove: function(value) {
+  handleRemove = (value) => {
     var selectedOptions = uniq(without(this.state.selected,value))
     this.handleChange(selectedOptions)
-  },
+  };
 
-  handleSelect: function(value, combobox) {
+  handleSelect = (value, combobox) => {
     if(typeof value === 'string') {
       value = {id: value, name: value};
     }
@@ -40,9 +38,9 @@ var App = React.createClass({
     })
 
     this.handleChange(selected)
-  },
+  };
 
-  handleInput: function(userInput) {
+  handleInput = (userInput) => {
     this.setState({
       input: userInput,
       loading: true,
@@ -54,9 +52,9 @@ var App = React.createClass({
         loading: false
       })
     }.bind(this), 500)
-  },
+  };
 
-  filterTags: function(userInput) {
+  filterTags = (userInput) => {
     if (userInput === '')
       return this.setState({options: []});
     var filter = new RegExp('^'+userInput, 'i');
@@ -70,9 +68,9 @@ var App = React.createClass({
     this.setState({
       options: filteredNames
     });
-  },
+  };
 
-  renderComboboxOptions: function() {
+  renderComboboxOptions = () => {
     return this.state.options.map(function(name) {
       return (
         <ComboboxOption
@@ -82,9 +80,9 @@ var App = React.createClass({
         >{name.name}</ComboboxOption>
       );
     });
-  },
+  };
 
-  render: function() {
+  render() {
     var selectedNames = this.state.selected.map(function(tag) {
       return <li key={tag.id}>{tag.name}</li>
     })
@@ -119,6 +117,6 @@ var App = React.createClass({
       </div>
     );
   }
-})
+}
 
 ReactDOM.render(<App/>, document.getElementById('application'))

dist/react-tokeninput.js.map

@@ -13,7 +13,7 @@ module.exports = function(config) {
       cache: true,
       module: {
         loaders: [
-          { test: /\.js$/, loader: 'jsx-loader'}
+          { test: /\.js$/, loader: 'babel'}
         ]
       }
     },