Convert React.createClass to ES6 classes and createReactClass calls

2018-10-31 21:18:44 +02:00
parent eb1acc8145
commit d4fa041ba8
38 changed files with 587 additions and 411 deletions
--- a/assets/js/src/form/fields/checkbox.jsx
+++ b/assets/js/src/form/fields/checkbox.jsx
@ -1,11 +1,12 @@
 import React from 'react';

-const FormFieldCheckbox = React.createClass({
-  onValueChange: function onValueChange(e) {
+class FormFieldCheckbox extends React.Component {
+  onValueChange = (e) => {
    e.target.value = this.checkbox.checked ? '1' : '0';
    return this.props.onValueChange(e);
-  },
-  render: function render() {
+  };
+
+  render() {
    if (this.props.field.values === undefined) {
      return false;
    }
@ -37,7 +38,7 @@ const FormFieldCheckbox = React.createClass({
        { options }
      </div>
    );
-  },
-});
+  }
+}

 export default FormFieldCheckbox;
--- a/assets/js/src/form/fields/field.jsx
+++ b/assets/js/src/form/fields/field.jsx
@ -8,8 +8,8 @@ import FormFieldSelection from 'form/fields/selection.jsx';
 import FormFieldDate from 'form/fields/date.jsx';
 import jQuery from 'jquery';

-const FormField = React.createClass({
-  renderField: function renderField(data, inline = false) {
+class FormField extends React.Component {
+  renderField = (data, inline = false) => {
    let description = false;
    if (data.field.description) {
      description = (
@ -76,8 +76,9 @@ const FormField = React.createClass({
        { description }
      </div>
    );
-  },
-  render: function render() {
+  };
+
+  render() {
    let field = false;

    if (this.props.field.fields !== undefined) {
@ -113,7 +114,7 @@ const FormField = React.createClass({
        </td>
      </tr>
    );
-  },
-});
+  }
+}

 export default FormField;
--- a/assets/js/src/form/fields/radio.jsx
+++ b/assets/js/src/form/fields/radio.jsx
@ -1,7 +1,7 @@
 import React from 'react';

-const FormFieldRadio = React.createClass({
-  render: function render() {
+class FormFieldRadio extends React.Component {
+  render() {
    if (this.props.field.values === undefined) {
      return false;
    }
@ -30,7 +30,7 @@ const FormFieldRadio = React.createClass({
        { options }
      </div>
    );
-  },
-});
+  }
+}

 export default FormFieldRadio;
--- a/assets/js/src/form/fields/select.jsx
+++ b/assets/js/src/form/fields/select.jsx
@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'underscore';

-const FormFieldSelect = React.createClass({
+class FormFieldSelect extends React.Component {
  render() {
    if (this.props.field.values === undefined) {
      return false;
@ -70,7 +70,7 @@ const FormFieldSelect = React.createClass({
        {options}
      </select>
    );
-  },
-});
+  }
+}

 module.exports = FormFieldSelect;
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@ -4,22 +4,26 @@ import _ from 'underscore';
 import 'react-dom';
 import 'select2';

-const Selection = React.createClass({
-  allowMultipleValues: function allowMultipleValues() {
+class Selection extends React.Component {
+  allowMultipleValues = () => {
    return (this.props.field.multiple === true);
-  },
-  isSelect2Initialized: function isSelect2Initialized() {
+  };
+
+  isSelect2Initialized = () => {
    return (jQuery(`#${this.select.id}`).hasClass('select2-hidden-accessible') === true);
-  },
-  isSelect2Component: function isSelect2Component() {
+  };
+
+  isSelect2Component = () => {
    return this.allowMultipleValues() || this.props.field.forceSelect2;
-  },
-  componentDidMount: function componentDidMount() {
+  };
+
+  componentDidMount() {
    if (this.isSelect2Component()) {
      this.setupSelect2();
    }
-  },
-  componentDidUpdate: function componentDidUpdate(prevProps) {
+  }
+
+  componentDidUpdate(prevProps) {
    if ((this.props.item !== undefined && prevProps.item !== undefined)
      && (this.props.item.id !== prevProps.item.id)
    ) {
@ -34,27 +38,32 @@ const Selection = React.createClass({
    ) {
      this.resetSelect2();
    }
-  },
-  componentWillUnmount: function componentWillUnmount() {
+  }
+
+  componentWillUnmount() {
    if (this.isSelect2Component()) {
      this.destroySelect2();
    }
-  },
-  getFieldId: function getFieldId(data) {
+  }
+
+  getFieldId = (data) => {
    const props = data || this.props;
    return props.field.id || props.field.name;
-  },
-  resetSelect2: function resetSelect2() {
+  };
+
+  resetSelect2 = () => {
    this.destroySelect2();
    this.setupSelect2();
-  },
-  destroySelect2: function destroySelect2() {
+  };
+
+  destroySelect2 = () => {
    if (this.isSelect2Initialized()) {
      jQuery(`#${this.select.id}`).select2('destroy');
      this.cleanupAfterSelect2();
    }
-  },
-  cleanupAfterSelect2: function cleanupAfterSelect2() {
+  };
+
+  cleanupAfterSelect2 = () => {
    // remove DOM elements created by Select2 that are not tracked by React
    jQuery(`#${this.select.id}`)
      .find('option:not(.default)')
@ -64,8 +73,9 @@ const Selection = React.createClass({
    jQuery(`#${this.select.id}`)
      .off('select2:unselecting')
      .off('select2:opening');
-  },
-  setupSelect2: function setupSelect2() {
+  };
+
+  setupSelect2 = () => {
    if (this.isSelect2Initialized()) {
      return;
    }
@ -138,8 +148,9 @@ const Selection = React.createClass({
    });

    select2.on('change', this.handleChange);
-  },
-  getSelectedValues: function getSelectedValues() {
+  };
+
+  getSelectedValues = () => {
    if (this.props.field.selected !== undefined) {
      return this.props.field.selected(this.props.item);
    } else if (this.props.item !== undefined && this.props.field.name !== undefined) {
@ -152,8 +163,9 @@ const Selection = React.createClass({
      }
    }
    return null;
-  },
-  getItems: function getItems() {
+  };
+
+  getItems = () => {
    let items;
    if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
      items = window[`mailpoet_${this.props.field.endpoint}`];
@ -168,8 +180,9 @@ const Selection = React.createClass({
    }

    return items;
-  },
-  handleChange: function handleChange(e) {
+  };
+
+  handleChange = (e) => {
    if (this.props.onValueChange === undefined) return;

    const valueTextPair = jQuery(`#${this.select.id}`).children(':selected').map(function element() {
@ -185,43 +198,49 @@ const Selection = React.createClass({
        id: e.target.id,
      },
    });
-  },
-  getLabel: function getLabel(item) {
+  };
+
+  getLabel = (item) => {
    if (this.props.field.getLabel !== undefined) {
      return this.props.field.getLabel(item, this.props.item);
    }
    return item.name;
-  },
-  getSearchLabel: function getSearchLabel(item) {
+  };
+
+  getSearchLabel = (item) => {
    if (this.props.field.getSearchLabel !== undefined) {
      return this.props.field.getSearchLabel(item, this.props.item);
    }
    return null;
-  },
-  getValue: function getValue(item) {
+  };
+
+  getValue = (item) => {
    if (this.props.field.getValue !== undefined) {
      return this.props.field.getValue(item, this.props.item);
    }
    return item.id;
-  },
+  };
+
  // When it's impossible to represent the desired value in DOM,
  // this function may be used to transform the placeholder value into
  // desired value.
-  transformChangedValue: function transformChangedValue(value, textValuePair) {
+  transformChangedValue = (value, textValuePair) => {
    if (typeof this.props.field.transformChangedValue === 'function') {
      return this.props.field.transformChangedValue.call(this, value, textValuePair);
    }
    return value;
-  },
-  insertEmptyOption: function insertEmptyOption() {
+  };
+
+  insertEmptyOption = () => {
    // https://select2.org/placeholders
    // For single selects only, in order for the placeholder value to appear,
    // we must have a blank <option> as the first option in the <select> control.
    if (this.allowMultipleValues()) return undefined;
    if (this.props.field.placeholder) return (<option className="default" />);
    return undefined;
-  },
-  render: function render() {
+  };
+
+  render() {
    const items = this.getItems(this.props.field);
    const selectedValues = this.getSelectedValues();
    const options = items.map((item) => {
@ -255,7 +274,7 @@ const Selection = React.createClass({
        { options }
      </select>
    );
-  },
-});
+  }
+}

 export default Selection;
--- a/assets/js/src/form/fields/text.jsx
+++ b/assets/js/src/form/fields/text.jsx
@ -1,6 +1,6 @@
 import React from 'react';

-const FormFieldText = React.createClass({
+class FormFieldText extends React.Component {
  render() {
    const name = this.props.field.name || null;
    const item = this.props.item || {};
@ -51,7 +51,7 @@ const FormFieldText = React.createClass({
        {...this.props.field.validation}
      />
    );
-  },
-});
+  }
+}

 module.exports = FormFieldText;
--- a/assets/js/src/form/form.jsx
+++ b/assets/js/src/form/form.jsx
@ -4,29 +4,30 @@ import classNames from 'classnames';
 import FormField from 'form/fields/field.jsx';
 import jQuery from 'jquery';

-const Form = React.createClass({
-  contextTypes: {
+class Form extends React.Component {
+  static contextTypes = {
    router: React.PropTypes.object.isRequired,
-  },
-  getDefaultProps: function getDefaultProps() {
-    return {
-      params: {},
-    };
-  },
-  getInitialState: function getInitialState() {
-    return {
-      loading: false,
-      errors: [],
-      item: {},
-    };
-  },
-  getValues: function getValues() {
+  };
+
+  static defaultProps = {
+    params: {},
+  };
+
+  state = {
+    loading: false,
+    errors: [],
+    item: {},
+  };
+
+  getValues = () => {
    return this.props.item ? this.props.item : this.state.item;
-  },
-  getErrors: function getErrors() {
+  };
+
+  getErrors = () => {
    return this.props.errors ? this.props.errors : this.state.errors;
-  },
-  componentDidMount: function componentDidMount() {
+  };
+
+  componentDidMount() {
    if (this.props.params.id !== undefined) {
      this.loadItem(this.props.params.id);
    } else {
@ -36,8 +37,9 @@ const Form = React.createClass({
        });
      });
    }
-  },
-  componentWillReceiveProps: function componentWillReceiveProps(props) {
+  }
+
+  componentWillReceiveProps(props) {
    if (props.params.id === undefined) {
      setImmediate(() => {
        this.setState({
@ -49,8 +51,9 @@ const Form = React.createClass({
        this.form.reset();
      }
    }
-  },
-  loadItem: function loadItem(id) {
+  }
+
+  loadItem = (id) => {
    this.setState({ loading: true });

    MailPoet.Ajax.post({
@ -76,8 +79,9 @@ const Form = React.createClass({
        this.context.router.push('/new');
      });
    });
-  },
-  handleSubmit: function handleSubmit(e) {
+  };
+
+  handleSubmit = (e) => {
    e.preventDefault();

    // handle validation
@ -129,8 +133,9 @@ const Form = React.createClass({
        this.setState({ errors: response.errors });
      }
    });
-  },
-  handleValueChange: function handleValueChange(e) {
+  };
+
+  handleValueChange = (e) => {
    if (this.props.onChange) {
      return this.props.onChange(e);
    }
@ -143,8 +148,9 @@ const Form = React.createClass({
      item,
    });
    return true;
-  },
-  render: function render() {
+  };
+
+  render() {
    let errors;
    if (this.getErrors() !== undefined) {
      errors = this.getErrors().map(error => (
@ -231,7 +237,7 @@ const Form = React.createClass({
        { afterFormContent }
      </div>
    );
-  },
-});
+  }
+}

 export default Form;
--- a/assets/js/src/form_editor/form_editor.js
+++ b/assets/js/src/form_editor/form_editor.js
@ -672,7 +672,7 @@ WysijaForm = {
    if (type === undefined) type = 'block';
    // identify element
    id = element.identify();
-    instance = WysijaForm.instances[id] || new WysijaForm[type.capitalize().camelize()](id);
+    instance = WysijaForm.instances[id] || new (WysijaForm[type.capitalize().camelize()])(id);

    WysijaForm.instances[id] = instance;
    return instance;
--- a/assets/js/src/forms/forms.jsx
+++ b/assets/js/src/forms/forms.jsx
@ -6,11 +6,11 @@ import FormList from './list.jsx';

 const history = useRouterHistory(createHashHistory)({ queryKey: false });

-const App = React.createClass({
+class App extends React.Component {
  render() {
    return this.props.children;
-  },
-});
+  }
+}

 const container = document.getElementById('forms_container');

--- a/assets/js/src/forms/list.jsx
+++ b/assets/js/src/forms/list.jsx
@ -122,8 +122,8 @@ const itemActions = [
  },
 ];

-const FormList = React.createClass({
-  createForm() {
+class FormList extends React.Component {
+  createForm = () => {
    MailPoet.Ajax.post({
      api_version: window.mailpoet_api_version,
      endpoint: 'forms',
@ -138,8 +138,9 @@ const FormList = React.createClass({
        );
      }
    });
-  },
-  renderItem(form, actions) {
+  };
+
+  renderItem = (form, actions) => {
    const rowClasses = classNames(
      'manage-column',
      'column-primary',
@ -177,7 +178,8 @@ const FormList = React.createClass({
        </td>
      </div>
    );
-  },
+  };
+
  render() {
    return (
      <div>
@ -204,7 +206,7 @@ const FormList = React.createClass({
        />
      </div>
    );
-  },
-});
+  }
+}

 module.exports = FormList;
--- a/assets/js/src/help/help.jsx
+++ b/assets/js/src/help/help.jsx
@ -9,11 +9,11 @@ import KnowledgeBase from 'help/knowledge_base.jsx';

 const history = useRouterHistory(createHashHistory)({ queryKey: false });

-const App = React.createClass({
+class App extends React.Component {
  render() {
    return this.props.children;
-  },
-});
+  }
+}

 const container = document.getElementById('help_container');

--- a/assets/js/src/listing/bulk_actions.jsx
+++ b/assets/js/src/listing/bulk_actions.jsx
@ -1,14 +1,13 @@
 import React from 'react';
 import MailPoet from 'mailpoet';

-const ListingBulkActions = React.createClass({
-  getInitialState: function getInitialState() {
-    return {
-      action: false,
-      extra: false,
-    };
-  },
-  handleChangeAction: function handleChangeAction(e) {
+class ListingBulkActions extends React.Component {
+  state = {
+    action: false,
+    extra: false,
+  };
+
+  handleChangeAction = (e) => {
    this.setState({
      action: e.target.value,
      extra: false,
@ -22,8 +21,9 @@ const ListingBulkActions = React.createClass({
        });
      }
    });
-  },
-  handleApplyAction: function handleApplyAction(e) {
+  };
+
+  handleApplyAction = (e) => {
    e.preventDefault();

    const action = this.getSelectedAction();
@ -58,8 +58,9 @@ const ListingBulkActions = React.createClass({
      action: false,
      extra: false,
    });
-  },
-  getSelectedAction: function getSelectedAction() {
+  };
+
+  getSelectedAction = () => {
    const selectedAction = this.action.value;
    if (selectedAction.length > 0) {
      const action = this.props.bulk_actions.filter(act => (act.name === selectedAction));
@ -69,8 +70,9 @@ const ListingBulkActions = React.createClass({
      }
    }
    return null;
-  },
-  render: function render() {
+  };
+
+  render() {
    if (this.props.bulk_actions.length === 0) {
      return null;
    }
@ -108,7 +110,7 @@ const ListingBulkActions = React.createClass({
        { this.state.extra }
      </div>
    );
-  },
-});
+  }
+}

 export default ListingBulkActions;
--- a/assets/js/src/listing/filters.jsx
+++ b/assets/js/src/listing/filters.jsx
@ -2,8 +2,8 @@ import React from 'react';
 import jQuery from 'jquery';
 import MailPoet from 'mailpoet';

-const ListingFilters = React.createClass({
-  handleFilterAction: function handleFilterAction() {
+class ListingFilters extends React.Component {
+  handleFilterAction = () => {
    const filters = {};
    this.getAvailableFilters().forEach((filter, i) => {
      filters[this[`filter-${i}`].name] = this[`filter-${i}`].value;
@ -12,11 +12,13 @@ const ListingFilters = React.createClass({
      this.props.onBeforeSelectFilter(filters);
    }
    return this.props.onSelectFilter(filters);
-  },
-  handleEmptyTrash: function handleEmptyTrash() {
+  };
+
+  handleEmptyTrash = () => {
    return this.props.onEmptyTrash();
-  },
-  getAvailableFilters: function getAvailableFilters() {
+  };
+
+  getAvailableFilters = () => {
    const filters = this.props.filters;
    return Object.keys(filters).filter(filter => !(
      filters[filter].length === 0
@ -25,8 +27,9 @@ const ListingFilters = React.createClass({
          && !filters[filter][0].value
        )
    ));
-  },
-  componentDidUpdate: function componentDidUpdate() {
+  };
+
+  componentDidUpdate() {
    const selectedFilters = this.props.filter;
    this.getAvailableFilters().forEach(
      (filter, i) => {
@ -37,8 +40,9 @@ const ListingFilters = React.createClass({
        }
      }
    );
-  },
-  render: function render() {
+  }
+
+  render() {
    const filters = this.props.filters;
    const availableFilters = this.getAvailableFilters()
      .map((filter, i) => (
@ -89,7 +93,7 @@ const ListingFilters = React.createClass({
        { emptyTrash }
      </div>
    );
-  },
-});
+  }
+}

 export default ListingFilters;
--- a/assets/js/src/listing/header.jsx
+++ b/assets/js/src/listing/header.jsx
@ -2,13 +2,14 @@ import MailPoet from 'mailpoet';
 import React from 'react';
 import classNames from 'classnames';

-const ListingHeader = React.createClass({
-  handleSelectItems: function handleSelectItems() {
+class ListingHeader extends React.Component {
+  handleSelectItems = () => {
    return this.props.onSelectItems(
      this.toggle.checked
    );
-  },
-  render: function render() {
+  };
+
+  render() {
    const columns = this.props.columns.map((column, index) => {
      const renderColumn = column;
      renderColumn.is_primary = (index === 0);
@ -53,16 +54,17 @@ const ListingHeader = React.createClass({
        {columns}
      </tr>
    );
-  },
-});
+  }
+}

-const ListingColumn = React.createClass({
-  handleSort: function handleSort() {
+class ListingColumn extends React.Component {
+  handleSort = () => {
    const sortBy = this.props.column.name;
    const sortOrder = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
    this.props.onSort(sortBy, sortOrder);
-  },
-  render: function render() {
+  };
+
+  render() {
    const classes = classNames(
      'manage-column',
      { 'column-primary': this.props.column.is_primary },
@ -95,7 +97,7 @@ const ListingColumn = React.createClass({
        width={this.props.column.width || null}
      >{label}</th>
    );
-  },
-});
+  }
+}

 module.exports = ListingHeader;
--- a/assets/js/src/listing/listing.jsx
+++ b/assets/js/src/listing/listing.jsx
@ -1,6 +1,7 @@
 import MailPoet from 'mailpoet';
 import jQuery from 'jquery';
 import React from 'react';
+import createReactClass from 'create-react-class';
 import _ from 'underscore';
 import { Link } from 'react-router';
 import classNames from 'classnames';
@ -11,33 +12,37 @@ import ListingSearch from 'listing/search.jsx';
 import ListingGroups from 'listing/groups.jsx';
 import ListingFilters from 'listing/filters.jsx';

-const ListingItem = React.createClass({
-  getInitialState: function getInitialState() {
-    return {
-      expanded: false,
-    };
-  },
-  handleSelectItem: function handleSelectItem(e) {
+class ListingItem extends React.Component {
+  state = {
+    expanded: false,
+  };
+
+  handleSelectItem = (e) => {
    this.props.onSelectItem(
      parseInt(e.target.value, 10),
      e.target.checked
    );

    return !e.target.checked;
-  },
-  handleRestoreItem: function handleRestoreItem(id) {
+  };
+
+  handleRestoreItem = (id) => {
    this.props.onRestoreItem(id);
-  },
-  handleTrashItem: function handleTrashItem(id) {
+  };
+
+  handleTrashItem = (id) => {
    this.props.onTrashItem(id);
-  },
-  handleDeleteItem: function handleDeleteItem(id) {
+  };
+
+  handleDeleteItem = (id) => {
    this.props.onDeleteItem(id);
-  },
-  handleToggleItem: function handleToggleItem() {
+  };
+
+  handleToggleItem = () => {
    this.setState({ expanded: !this.state.expanded });
-  },
-  render: function render() {
+  };
+
+  render() {
    let checkbox = false;

    if (this.props.is_selectable === true) {
@ -193,12 +198,11 @@ const ListingItem = React.createClass({
        { this.props.onRenderItem(this.props.item, actions) }
      </tr>
    );
-  },
-});
+  }
+}

-
-const ListingItems = React.createClass({
-  render: function render() {
+class ListingItems extends React.Component {
+  render() {
    if (this.props.items.length === 0) {
      let message;
      if (this.props.loading === true) {
@ -293,13 +297,16 @@ const ListingItems = React.createClass({
        })}
      </tbody>
    );
-  },
-});
+  }
+}
+
+const Listing = createReactClass({
+  displayName: 'Listing',

-const Listing = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired,
  },
+
  getInitialState: function getInitialState() {
    return {
      loading: false,
@ -319,11 +326,13 @@ const Listing = React.createClass({
      meta: {},
    };
  },
+
  getParam: function getParam(param) {
    const regex = /(.*)\[(.*)\]/;
    const matches = regex.exec(param);
    return [matches[1], matches[2]];
  },
+
  initWithParams: function initWithParams(params) {
    const state = this.getInitialState();
    // check for url params
@ -365,6 +374,7 @@ const Listing = React.createClass({
      this.getItems();
    });
  },
+
  getParams: function getParams() {
    // get all route parameters (without the "splat")
    const params = _.omit(this.props.params, 'splat');
@ -376,6 +386,7 @@ const Listing = React.createClass({
    }
    return params;
  },
+
  setParams: function setParams() {
    if (this.props.location) {
      const params = Object.keys(this.state)
@ -413,6 +424,7 @@ const Listing = React.createClass({
      }
    }
  },
+
  getUrlWithParams: function getUrlWithParams(params) {
    let baseUrl = (this.props.base_url !== undefined)
      ? this.props.base_url
@ -424,6 +436,7 @@ const Listing = React.createClass({
    }
    return `/${params}`;
  },
+
  setBaseUrlParams: function setBaseUrlParams(baseUrl) {
    let ret = baseUrl;
    if (ret.indexOf(':') !== -1) {
@ -437,6 +450,7 @@ const Listing = React.createClass({

    return ret;
  },
+
  componentDidMount: function componentDidMount() {
    this.isComponentMounted = true;
    const params = this.props.params || {};
@ -448,13 +462,16 @@ const Listing = React.createClass({
      });
    }
  },
+
  componentWillUnmount: function componentWillUnmount() {
    this.isComponentMounted = false;
  },
+
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    const params = nextProps.params || {};
    this.initWithParams(params);
  },
+
  getItems: function getItems() {
    if (!this.isComponentMounted) return;

@ -507,6 +524,7 @@ const Listing = React.createClass({
      }
    });
  },
+
  handleRestoreItem: function handleRestoreItem(id) {
    this.setState({
      loading: true,
@ -535,6 +553,7 @@ const Listing = React.createClass({
      );
    });
  },
+
  handleTrashItem: function handleTrashItem(id) {
    this.setState({
      loading: true,
@ -563,6 +582,7 @@ const Listing = React.createClass({
      );
    });
  },
+
  handleDeleteItem: function handleDeleteItem(id) {
    this.setState({
      loading: true,
@ -591,6 +611,7 @@ const Listing = React.createClass({
      );
    });
  },
+
  handleEmptyTrash: function handleEmptyTrash() {
    return this.handleBulkAction('all', {
      action: 'delete',
@ -611,6 +632,7 @@ const Listing = React.createClass({
      );
    });
  },
+
  handleBulkAction: function handleBulkAction(selectedIds, params) {
    if (
      this.state.selection === false
@ -651,6 +673,7 @@ const Listing = React.createClass({
      }
    });
  },
+
  handleSearch: function handleSearch(search) {
    this.setState({
      search,
@ -661,6 +684,7 @@ const Listing = React.createClass({
      this.setParams();
    });
  },
+
  handleSort: function handleSort(sortBy, sortOrder = 'asc') {
    this.setState({
      sort_by: sortBy,
@ -669,6 +693,7 @@ const Listing = React.createClass({
      this.setParams();
    });
  },
+
  handleSelectItem: function handleSelectItem(id, isChecked) {
    let selectedIds = this.state.selected_ids;
    let selection = false;
@ -690,6 +715,7 @@ const Listing = React.createClass({
      selected_ids: selectedIds,
    });
  },
+
  handleSelectItems: function handleSelectItems(isChecked) {
    if (isChecked === false) {
      this.clearSelection();
@ -702,6 +728,7 @@ const Listing = React.createClass({
      });
    }
  },
+
  handleSelectAll: function handleSelectAll() {
    if (this.state.selection === 'all') {
      this.clearSelection();
@ -712,12 +739,14 @@ const Listing = React.createClass({
      });
    }
  },
+
  clearSelection: function clearSelection() {
    this.setState({
      selection: false,
      selected_ids: [],
    });
  },
+
  handleFilter: function handleFilter(filters) {
    this.setState({
      filter: filters,
@ -726,6 +755,7 @@ const Listing = React.createClass({
      this.setParams();
    });
  },
+
  handleGroup: function handleGroup(group) {
    // reset search
    jQuery('#search_input').val('');
@ -739,6 +769,7 @@ const Listing = React.createClass({
      this.setParams();
    });
  },
+
  handleSetPage: function handleSetPage(page) {
    this.setState({
      page,
@ -748,13 +779,16 @@ const Listing = React.createClass({
      this.setParams();
    });
  },
+
  handleRenderItem: function handleRenderItem(item, actions) {
    const render = this.props.onRenderItem(item, actions, this.state.meta);
    return render.props.children;
  },
+
  handleRefreshItems: function handleRefreshItems() {
    this.getItems();
  },
+
  render: function render() {
    const items = this.state.items;
    const sortBy = this.state.sort_by;
--- a/assets/js/src/listing/pages.jsx
+++ b/assets/js/src/listing/pages.jsx
@ -2,55 +2,64 @@ import React from 'react';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';

-const ListingPages = React.createClass({
-  getInitialState: function getInitialState() {
-    return {
-      page: null,
-    };
-  },
-  setPage: function setPage(page) {
+class ListingPages extends React.Component {
+  state = {
+    page: null,
+  };
+
+  setPage = (page) => {
    this.setState({
      page: null,
    }, () => {
      this.props.onSetPage(this.constrainPage(page));
    });
-  },
-  setFirstPage: function setFirstPage() {
+  };
+
+  setFirstPage = () => {
    this.setPage(1);
-  },
-  setLastPage: function setLastPage() {
+  };
+
+  setLastPage = () => {
    this.setPage(this.getLastPage());
-  },
-  setPreviousPage: function setPreviousPage() {
+  };
+
+  setPreviousPage = () => {
    this.setPage(this.constrainPage(
      parseInt(this.props.page, 10) - 1)
    );
-  },
-  setNextPage: function setNextPage() {
+  };
+
+  setNextPage = () => {
    this.setPage(this.constrainPage(
      parseInt(this.props.page, 10) + 1)
    );
-  },
-  constrainPage: function constrainPage(page) {
+  };
+
+  constrainPage = (page) => {
    return Math.min(Math.max(1, Math.abs(Number(page))), this.getLastPage());
-  },
-  handleSetManualPage: function handleSetManualPage(e) {
+  };
+
+  handleSetManualPage = (e) => {
    if (e.which === 13) {
      this.setPage(this.state.page);
    }
-  },
-  handleChangeManualPage: function handleChangeManualPage(e) {
+  };
+
+  handleChangeManualPage = (e) => {
    this.setState({
      page: e.target.value,
    });
-  },
-  handleBlurManualPage: function handleBlurManualPage(e) {
+  };
+
+  handleBlurManualPage = (e) => {
    this.setPage(e.target.value);
-  },
-  getLastPage: function getLastPage() {
+  };
+
+  getLastPage = () => {
    return Math.ceil(this.props.count / this.props.limit);
-  },
-  render: function render() {
+  };
+
+  render() {
    if (this.props.count === 0) {
      return false;
    }
@ -181,7 +190,7 @@ const ListingPages = React.createClass({
        { pagination }
      </div>
    );
-  },
-});
+  }
+}

 module.exports = ListingPages;
--- a/assets/js/src/newsletters/breadcrumb.jsx
+++ b/assets/js/src/newsletters/breadcrumb.jsx
@ -3,9 +3,10 @@ import classNames from 'classnames';
 import { Link } from 'react-router';
 import MailPoet from 'mailpoet';

-const Breadcrumb = React.createClass({
-  getInitialState: function getInitialState() {
-    const steps = this.props.steps || [
+class Breadcrumb extends React.Component {
+  constructor(props) {
+    super(props);
+    const steps = props.steps || [
      {
        name: 'type',
        label: MailPoet.I18n.t('selectType'),
@ -24,12 +25,14 @@ const Breadcrumb = React.createClass({
        label: MailPoet.I18n.t('send'),
      },
    ];
-    return {
+
+    this.state = {
      step: null,
      steps,
    };
-  },
-  render: function render() {
+  }
+
+  render() {
    const steps = this.state.steps.map((step, index) => {
      const stepClasses = classNames(
        { mailpoet_current: (this.props.step === step.name) }
@ -58,8 +61,8 @@ const Breadcrumb = React.createClass({
        { steps }
      </p>
    );
-  },
-});
+  }
+}

 module.exports = Breadcrumb;

--- a/assets/js/src/newsletters/listings/notification.jsx
+++ b/assets/js/src/newsletters/listings/notification.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { Link } from 'react-router';

 import Listing from 'listing/listing.jsx';
@ -157,8 +158,10 @@ const newsletterActions = [
  },
 ];

-const NewsletterListNotification = React.createClass({
+const NewsletterListNotification = createReactClass({
+  displayName: 'NewsletterListNotification',
  mixins: [MailerMixin, CronMixin],
+
  updateStatus: function updateStatus(e) {
    // make the event persist so that we can still override the selected value
    // in the ajax callback
@ -185,6 +188,7 @@ const NewsletterListNotification = React.createClass({
      e.target.value = response.status;
    });
  },
+
  renderStatus: function renderStatus(newsletter) {
    return (
      <select
@ -197,6 +201,7 @@ const NewsletterListNotification = React.createClass({
      </select>
    );
  },
+
  renderSettings: function renderSettings(newsletter) {
    let sendingFrequency;

@ -265,6 +270,7 @@ const NewsletterListNotification = React.createClass({
      </span>
    );
  },
+
  renderHistoryLink: function renderHistoryLink(newsletter) {
    const childrenCount = Number((newsletter.children_count));
    if (childrenCount === 0) {
@ -278,6 +284,7 @@ const NewsletterListNotification = React.createClass({
      >{ MailPoet.I18n.t('viewHistory') }</Link>
    );
  },
+
  renderItem: function renderItem(newsletter, actions) {
    const rowClasses = classNames(
      'manage-column',
@ -311,6 +318,7 @@ const NewsletterListNotification = React.createClass({
      </div>
    );
  },
+
  render: function render() {
    return (
      <div>
--- a/assets/js/src/newsletters/listings/notification_history.jsx
+++ b/assets/js/src/newsletters/listings/notification_history.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
@ -57,8 +58,10 @@ let newsletterActions = [
 Hooks.addFilter('mailpoet_newsletters_listings_notification_history_actions', StatisticsMixin.addStatsCTAAction);
 newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_notification_history_actions', newsletterActions);

-const NewsletterListNotificationHistory = React.createClass({
+const NewsletterListNotificationHistory = createReactClass({
+  displayName: 'NewsletterListNotificationHistory',
  mixins: [QueueMixin, StatisticsMixin, MailerMixin, CronMixin],
+
  renderItem: function renderItem(newsletter, actions, meta) {
    const rowClasses = classNames(
      'manage-column',
@ -96,6 +99,7 @@ const NewsletterListNotificationHistory = React.createClass({
      </div>
    );
  },
+
  render: function render() {
    return (
      <div>
--- a/assets/js/src/newsletters/listings/standard.jsx
+++ b/assets/js/src/newsletters/listings/standard.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { confirmAlert } from 'react-confirm-alert';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
@ -172,8 +173,10 @@ let newsletterActions = [
 Hooks.addFilter('mailpoet_newsletters_listings_standard_actions', StatisticsMixin.addStatsCTAAction);
 newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_standard_actions', newsletterActions);

-const NewsletterListStandard = React.createClass({
+const NewsletterListStandard = createReactClass({
+  displayName: 'NewsletterListStandard',
  mixins: [QueueMixin, StatisticsMixin, MailerMixin, CronMixin],
+
  renderItem: function renderItem(newsletter, actions, meta) {
    const rowClasses = classNames(
      'manage-column',
@ -212,6 +215,7 @@ const NewsletterListStandard = React.createClass({
      </div>
    );
  },
+
  render: function render() {
    return (
      <div>
--- a/assets/js/src/newsletters/listings/tabs.jsx
+++ b/assets/js/src/newsletters/listings/tabs.jsx
@ -4,29 +4,28 @@ import classNames from 'classnames';
 import MailPoet from 'mailpoet';
 import Hooks from 'wp-js-hooks';

-const ListingTabs = React.createClass({
-  getInitialState() {
-    return {
-      tab: null,
-      tabs: Hooks.applyFilters('mailpoet_newsletters_listings_tabs', [
-        {
-          name: 'standard',
-          label: MailPoet.I18n.t('tabStandardTitle'),
-          link: '/standard',
-        },
-        {
-          name: 'welcome',
-          label: MailPoet.I18n.t('tabWelcomeTitle'),
-          link: '/welcome',
-        },
-        {
-          name: 'notification',
-          label: MailPoet.I18n.t('tabNotificationTitle'),
-          link: '/notification',
-        },
-      ]),
-    };
-  },
+class ListingTabs extends React.Component {
+  state = {
+    tab: null,
+    tabs: Hooks.applyFilters('mailpoet_newsletters_listings_tabs', [
+      {
+        name: 'standard',
+        label: MailPoet.I18n.t('tabStandardTitle'),
+        link: '/standard',
+      },
+      {
+        name: 'welcome',
+        label: MailPoet.I18n.t('tabWelcomeTitle'),
+        link: '/welcome',
+      },
+      {
+        name: 'notification',
+        label: MailPoet.I18n.t('tabNotificationTitle'),
+        link: '/notification',
+      },
+    ]),
+  };
+
  render() {
    const tabs = this.state.tabs.map((tab) => {
      const tabClasses = classNames(
@ -51,7 +50,7 @@ const ListingTabs = React.createClass({
        { tabs }
      </h2>
    );
-  },
-});
+  }
+}

 module.exports = ListingTabs;
--- a/assets/js/src/newsletters/listings/welcome.jsx
+++ b/assets/js/src/newsletters/listings/welcome.jsx
@ -1,5 +1,7 @@
 import React from 'react';

+import createReactClass from 'create-react-class';
+
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
 import ListingHeading from 'newsletters/listings/heading.jsx';
@ -153,8 +155,10 @@ let newsletterActions = [
 Hooks.addFilter('mailpoet_newsletters_listings_welcome_notification_actions', StatisticsMixin.addStatsCTAAction);
 newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_welcome_notification_actions', newsletterActions);

-const NewsletterListWelcome = React.createClass({
+const NewsletterListWelcome = createReactClass({
+  displayName: 'NewsletterListWelcome',
  mixins: [StatisticsMixin, MailerMixin, CronMixin],
+
  updateStatus: function updateStatus(e) {
    // make the event persist so that we can still override the selected value
    // in the ajax callback
@ -181,6 +185,7 @@ const NewsletterListWelcome = React.createClass({
      e.target.value = response.status;
    });
  },
+
  renderStatus: function renderStatus(newsletter) {
    const totalSent = (parseInt(newsletter.total_sent, 10)) ?
      MailPoet.I18n.t('sentToXSubscribers')
@ -203,6 +208,7 @@ const NewsletterListWelcome = React.createClass({
      </div>
    );
  },
+
  renderSettings: function renderSettings(newsletter) {
    let sendingEvent;
    let sendingDelay;
@ -278,6 +284,7 @@ const NewsletterListWelcome = React.createClass({
      </span>
    );
  },
+
  renderItem: function renderItem(newsletter, actions) {
    const rowClasses = classNames(
      'manage-column',
@ -316,6 +323,7 @@ const NewsletterListWelcome = React.createClass({
      </div>
    );
  },
+
  render: function render() {
    return (
      <div>
--- a/assets/js/src/newsletters/newsletters.jsx
+++ b/assets/js/src/newsletters/newsletters.jsx
@ -19,11 +19,11 @@ import NewsletterListNotificationHistory from 'newsletters/listings/notification

 const history = useRouterHistory(createHashHistory)({ queryKey: false });

-const App = React.createClass({
+class App extends React.Component {
  render() {
    return this.props.children;
-  },
-});
+  }
+}

 const container = document.getElementById('newsletters_container');

--- a/assets/js/src/newsletters/send.jsx
+++ b/assets/js/src/newsletters/send.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import createReactClass from 'create-react-class';
 import MailPoet from 'mailpoet';
 import _ from 'underscore';
 import Breadcrumb from 'newsletters/breadcrumb.jsx';
@ -11,10 +12,13 @@ import jQuery from 'jquery';
 import { fromUrl } from 'common/thumbnail.jsx';
 import Hooks from 'wp-js-hooks';

-const NewsletterSend = React.createClass({
+const NewsletterSend = createReactClass({
+  displayName: 'NewsletterSend',
+
  contextTypes: {
    router: React.PropTypes.object.isRequired,
  },
+
  getInitialState: function getInitialState() {
    return {
      fields: [],
@ -22,14 +26,17 @@ const NewsletterSend = React.createClass({
      loading: true,
    };
  },
+
  getFieldsByNewsletter: function getFieldsByNewsletter(newsletter) {
    const type = this.getSubtype(newsletter);
    return type.getFields(newsletter);
  },
+
  getSendButtonOptions: function getSendButtonOptions() {
    const type = this.getSubtype(this.state.item);
    return type.getSendButtonOptions(this.state.item);
  },
+
  getSubtype: function getSubtype(newsletter) {
    switch (newsletter.type) {
      case 'notification': return NotificationNewsletterFields;
@ -37,16 +44,20 @@ const NewsletterSend = React.createClass({
      default: return Hooks.applyFilters('mailpoet_newsletters_send_newsletter_fields', StandardNewsletterFields, newsletter);
    }
  },
+
  isValid: function isValid() {
    return jQuery('#mailpoet_newsletter').parsley().isValid();
  },
+
  componentDidMount: function componentDidMount() {
    this.loadItem(this.props.params.id);
    jQuery('#mailpoet_newsletter').parsley();
  },
+
  componentWillReceiveProps: function componentWillReceiveProps(props) {
    this.loadItem(props.params.id);
  },
+
  loadItem: function loadItem(id) {
    this.setState({ loading: true });

@ -72,6 +83,7 @@ const NewsletterSend = React.createClass({
      });
    });
  },
+
  saveTemplate: function saveTemplate(response, done) {
    fromUrl(response.meta.preview_url)
      .then((thumbnail) => {
@ -97,6 +109,7 @@ const NewsletterSend = React.createClass({
        this.showError({ errors: [err] });
      });
  },
+
  handleSend: function handleSend(e) {
    e.preventDefault();

@ -124,6 +137,7 @@ const NewsletterSend = React.createClass({
        MailPoet.Modal.loading(false);
      });
  },
+
  sendNewsletter: function sendNewsletter(newsletter) {
    return MailPoet.Ajax.post(
      Hooks.applyFilters(
@ -171,6 +185,7 @@ const NewsletterSend = React.createClass({
      MailPoet.Modal.loading(false);
    });
  },
+
  activateNewsletter: function activateEmail(newsletter) {
    return MailPoet.Ajax.post({
      api_version: window.mailpoet_api_version,
@ -213,6 +228,7 @@ const NewsletterSend = React.createClass({
      MailPoet.Modal.loading(false);
    });
  },
+
  handleResume: function handleResume(e) {
    e.preventDefault();
    if (!this.isValid()) {
@ -251,6 +267,7 @@ const NewsletterSend = React.createClass({
    }
    return false;
  },
+
  handleSave: function handleSave(e) {
    e.preventDefault();

@ -264,6 +281,7 @@ const NewsletterSend = React.createClass({
      this.showError(err);
    });
  },
+
  handleRedirectToDesign: function handleRedirectToDesign(e) {
    e.preventDefault();
    const redirectTo = e.target.href;
@ -278,6 +296,7 @@ const NewsletterSend = React.createClass({
      this.showError(err);
    });
  },
+
  saveNewsletter: function saveNewsletter() {
    const data = this.state.item;
    data.queue = undefined;
@ -302,6 +321,7 @@ const NewsletterSend = React.createClass({
      this.setState({ loading: false });
    });
  },
+
  showError: (response) => {
    if (response.errors.length > 0) {
      MailPoet.Notice.error(
@ -310,6 +330,7 @@ const NewsletterSend = React.createClass({
      );
    }
  },
+
  handleFormChange: function handleFormChange(e) {
    const item = this.state.item;
    const field = e.target.name;
@ -321,6 +342,7 @@ const NewsletterSend = React.createClass({
    });
    return true;
  },
+
  render: function render() {
    const isPaused = this.state.item.status === 'sending'
      && this.state.item.queue
--- a/assets/js/src/newsletters/send/standard.jsx
+++ b/assets/js/src/newsletters/send/standard.jsx
@ -72,8 +72,8 @@ const datepickerTranslations = {
  ],
 };

-const DateText = React.createClass({
-  onChange: function onChange(event) {
+class DateText extends React.Component {
+  onChange = (event) => {
    const changeEvent = event;
    // Swap display format to storage format
    const displayDate = changeEvent.target.value;
@ -81,8 +81,9 @@ const DateText = React.createClass({

    changeEvent.target.value = storageDate;
    this.props.onChange(changeEvent);
-  },
-  componentDidMount: function componentDidMount() {
+  };
+
+  componentDidMount() {
    const $element = jQuery(this.dateInput);
    const that = this;
    if ($element.datepicker) {
@ -117,28 +118,33 @@ const DateText = React.createClass({

      this.datepickerInitialized = true;
    }
-  },
-  componentWillUnmount: function componentWillUnmount() {
+  }
+
+  componentWillUnmount() {
    if (this.datepickerInitialized) {
      jQuery(this.dateInput).datepicker('destroy');
    }
-  },
-  getFieldName: function getFieldName() {
+  }
+
+  getFieldName = () => {
    return this.props.name || 'date';
-  },
-  getDisplayDate: function getDisplayDate(date) {
+  };
+
+  getDisplayDate = (date) => {
    return MailPoet.Date.format(date, {
      parseFormat: this.props.storageFormat,
      format: this.props.displayFormat,
    });
-  },
-  getStorageDate: function getStorageDate(date) {
+  };
+
+  getStorageDate = (date) => {
    return MailPoet.Date.format(date, {
      parseFormat: this.props.displayFormat,
      format: this.props.storageFormat,
    });
-  },
-  render: function render() {
+  };
+
+  render() {
    return (
      <input
        type="text"
@ -152,11 +158,11 @@ const DateText = React.createClass({
        {...this.props.validation}
      />
    );
-  },
-});
+  }
+}

-const TimeSelect = React.createClass({
-  render: function render() {
+class TimeSelect extends React.Component {
+  render() {
    const options = Object.keys(timeOfDayItems).map(
      value => (
        <option
@ -179,32 +185,33 @@ const TimeSelect = React.createClass({
        {options}
      </select>
    );
-  },
-});
+  }
+}

-const DateTime = React.createClass({
-  DATE_TIME_SEPARATOR: ' ',
-  getInitialState: function getInitialState() {
-    return this.buildStateFromProps(this.props);
-  },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+class DateTime extends React.Component {
+  DATE_TIME_SEPARATOR = ' ';
+
+  componentWillReceiveProps(nextProps) {
    this.setState(this.buildStateFromProps(nextProps));
-  },
-  buildStateFromProps: function buildStateFromProps(props) {
+  }
+
+  buildStateFromProps = (props) => {
    const value = props.value || defaultDateTime;
    const [date, time] = value.split(this.DATE_TIME_SEPARATOR);
    return {
      date,
      time,
    };
-  },
-  handleChange: function handleChange(event) {
+  };
+
+  handleChange = (event) => {
    const newState = {};
    newState[event.target.name] = event.target.value;

    this.setState(newState, this.propagateChange);
-  },
-  propagateChange: function propagateChange() {
+  };
+
+  propagateChange = () => {
    if (this.props.onChange) {
      this.props.onChange({
        target: {
@ -213,11 +220,15 @@ const DateTime = React.createClass({
        },
      });
    }
-  },
-  getDateTime: function getDateTime() {
+  };
+
+  getDateTime = () => {
    return [this.state.date, this.state.time].join(this.DATE_TIME_SEPARATOR);
-  },
-  render: function render() {
+  };
+
+  state = this.buildStateFromProps(this.props);
+
+  render() {
    return (
      <span>
        <DateText
@ -238,11 +249,11 @@ const DateTime = React.createClass({
        />
      </span>
    );
-  },
-});
+  }
+}

-const StandardScheduling = React.createClass({
-  getCurrentValue: function getCurrentValue() {
+class StandardScheduling extends React.Component {
+  getCurrentValue = () => {
    return _.defaults(
      this.props.item[this.props.field.name] || {},
      {
@ -250,8 +261,9 @@ const StandardScheduling = React.createClass({
        scheduledAt: defaultDateTime,
      }
    );
-  },
-  handleValueChange: function handleValueChange(event) {
+  };
+
+  handleValueChange = (event) => {
    const oldValue = this.getCurrentValue();
    const newValue = {};
    newValue[event.target.name] = event.target.value;
@ -262,23 +274,27 @@ const StandardScheduling = React.createClass({
        value: _.extend({}, oldValue, newValue),
      },
    });
-  },
-  handleCheckboxChange: function handleCheckboxChange(event) {
+  };
+
+  handleCheckboxChange = (event) => {
    const changeEvent = event;
    changeEvent.target.value = this.isScheduledInput.checked ? '1' : '0';
    return this.handleValueChange(changeEvent);
-  },
-  isScheduled: function isScheduled() {
+  };
+
+  isScheduled = () => {
    return this.getCurrentValue().isScheduled === '1';
-  },
-  getDateValidation: function getDateValidation() {
+  };
+
+  getDateValidation = () => {
    return {
      'data-parsley-required': true,
      'data-parsley-required-message': MailPoet.I18n.t('noScheduledDateError'),
      'data-parsley-errors-container': '#mailpoet_scheduling',
    };
-  },
-  render: function render() {
+  };
+
+  render() {
    let schedulingOptions;

    if (this.isScheduled()) {
@ -313,8 +329,8 @@ const StandardScheduling = React.createClass({
        {schedulingOptions}
      </div>
    );
-  },
-});
+  }
+}

 let fields = [
  {
--- a/assets/js/src/newsletters/types.jsx
+++ b/assets/js/src/newsletters/types.jsx
@ -5,11 +5,12 @@ import Hooks from 'wp-js-hooks';
 import _ from 'underscore';
 import 'react-router';

-const NewsletterTypes = React.createClass({
-  contextTypes: {
+class NewsletterTypes extends React.Component {
+  static contextTypes = {
    router: React.PropTypes.object.isRequired,
-  },
-  setupNewsletter: function setupNewsletter(type) {
+  };
+
+  setupNewsletter = (type) => {
    if (type !== undefined) {
      this.context.router.push(`/new/${type}`);
      MailPoet.trackEvent('Emails > Type selected', {
@ -17,8 +18,9 @@ const NewsletterTypes = React.createClass({
        'Email type': type,
      });
    }
-  },
-  createNewsletter: function createNewsletter(type) {
+  };
+
+  createNewsletter = (type) => {
    MailPoet.trackEvent('Emails > Type selected', {
      'MailPoet Free version': window.mailpoet_version,
      'Email type': type,
@ -41,8 +43,9 @@ const NewsletterTypes = React.createClass({
        );
      }
    });
-  },
-  getAutomaticEmails: function getAutomaticEmails() {
+  };
+
+  getAutomaticEmails = () => {
    if (!window.mailpoet_automatic_emails) return [];

    return _.map(window.mailpoet_automatic_emails, (automaticEmail) => {
@ -63,8 +66,9 @@ const NewsletterTypes = React.createClass({

      return email;
    });
-  },
-  render: function render() {
+  };
+
+  render() {
    const createStandardNewsletter = _.partial(this.createNewsletter, 'standard');
    const createNotificationNewsletter = _.partial(this.setupNewsletter, 'notification');
    const createWelcomeNewsletter = _.partial(this.setupNewsletter, 'welcome');
@ -169,7 +173,7 @@ const NewsletterTypes = React.createClass({
        </ul>
      </div>
    );
-  },
-});
+  }
+}

 module.exports = NewsletterTypes;
--- a/assets/js/src/newsletters/types/notification/notification.jsx
+++ b/assets/js/src/newsletters/types/notification/notification.jsx
@ -10,27 +10,28 @@ const field = {
  component: Scheduling,
 };

-const NewsletterNotification = React.createClass({
-  contextTypes: {
+class NewsletterNotification extends React.Component {
+  static contextTypes = {
    router: React.PropTypes.object.isRequired,
-  },
-  getInitialState: function getInitialState() {
-    return {
-      options: {
-        intervalType: 'daily',
-        timeOfDay: 0,
-        weekDay: 1,
-        monthDay: 0,
-        nthWeekDay: 1,
-      },
-    };
-  },
-  handleValueChange: function handleValueChange(event) {
+  };
+
+  state = {
+    options: {
+      intervalType: 'daily',
+      timeOfDay: 0,
+      weekDay: 1,
+      monthDay: 0,
+      nthWeekDay: 1,
+    },
+  };
+
+  handleValueChange = (event) => {
    const state = this.state;
    state[event.target.name] = event.target.value;
    this.setState(state);
-  },
-  handleNext: function handleNext() {
+  };
+
+  handleNext = () => {
    MailPoet.Ajax.post({
      api_version: window.mailpoet_api_version,
      endpoint: 'newsletters',
@ -49,11 +50,13 @@ const NewsletterNotification = React.createClass({
        );
      }
    });
-  },
-  showTemplateSelection: function showTemplateSelection(newsletterId) {
+  };
+
+  showTemplateSelection = (newsletterId) => {
    this.context.router.push(`/template/${newsletterId}`);
-  },
-  render: function render() {
+  };
+
+  render() {
    return (
      <div>
        <h1>{MailPoet.I18n.t('postNotificationNewsletterTypeTitle')}</h1>
@ -77,8 +80,8 @@ const NewsletterNotification = React.createClass({
        </p>
      </div>
    );
-  },
-});
+  }
+}

 module.exports = NewsletterNotification;

--- a/assets/js/src/newsletters/types/notification/scheduling.jsx
+++ b/assets/js/src/newsletters/types/notification/scheduling.jsx
@ -34,11 +34,12 @@ const nthWeekDayField = {
  values: nthWeekDayValues,
 };

-const NotificationScheduling = React.createClass({
-  getCurrentValue: function getCurrentValue() {
+class NotificationScheduling extends React.Component {
+  getCurrentValue = () => {
    return (this.props.item[this.props.field.name] || {});
-  },
-  handleValueChange: function handleValueChange(name, value) {
+  };
+
+  handleValueChange = (name, value) => {
    const oldValue = this.getCurrentValue();
    const newValue = {};

@ -50,38 +51,44 @@ const NotificationScheduling = React.createClass({
        value: _.extend({}, oldValue, newValue),
      },
    });
-  },
-  handleIntervalChange: function handleIntervalChange(event) {
+  };
+
+  handleIntervalChange = (event) => {
    return this.handleValueChange(
      'intervalType',
      event.target.value
    );
-  },
-  handleTimeOfDayChange: function handleTimeOfDayChange(event) {
+  };
+
+  handleTimeOfDayChange = (event) => {
    return this.handleValueChange(
      'timeOfDay',
      event.target.value
    );
-  },
-  handleWeekDayChange: function handleWeekDayChange(event) {
+  };
+
+  handleWeekDayChange = (event) => {
    return this.handleValueChange(
      'weekDay',
      event.target.value
    );
-  },
-  handleMonthDayChange: function handleMonthDayChange(event) {
+  };
+
+  handleMonthDayChange = (event) => {
    return this.handleValueChange(
      'monthDay',
      event.target.value
    );
-  },
-  handleNthWeekDayChange: function handleNthWeekDayChange(event) {
+  };
+
+  handleNthWeekDayChange = (event) => {
    return this.handleValueChange(
      'nthWeekDay',
      event.target.value
    );
-  },
-  render: function render() {
+  };
+
+  render() {
    const value = this.getCurrentValue();
    let timeOfDaySelection;
    let weekDaySelection;
@ -143,7 +150,7 @@ const NotificationScheduling = React.createClass({
        {timeOfDaySelection}
      </div>
    );
-  },
-});
+  }
+}

 module.exports = NotificationScheduling;
--- a/assets/js/src/newsletters/types/standard.jsx
+++ b/assets/js/src/newsletters/types/standard.jsx
@ -2,14 +2,16 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 import Breadcrumb from 'newsletters/breadcrumb.jsx';

-const NewsletterStandard = React.createClass({
-  contextTypes: {
+class NewsletterStandard extends React.Component {
+  static contextTypes = {
    router: React.PropTypes.object.isRequired,
-  },
-  showTemplateSelection: function showTemplateSelection(newsletterId) {
+  };
+
+  showTemplateSelection = (newsletterId) => {
    this.context.router.push(`/template/${newsletterId}`);
-  },
-  componentDidMount: function componentDidMount() {
+  };
+
+  componentDidMount() {
    // No options for this type, create a newsletter upon mounting
    MailPoet.Ajax.post({
      api_version: window.mailpoet_api_version,
@ -28,16 +30,17 @@ const NewsletterStandard = React.createClass({
        );
      }
    });
-  },
-  render: function render() {
+  }
+
+  render() {
    return (
      <div>
        <h1>{MailPoet.I18n.t('regularNewsletterTypeTitle')}</h1>
        <Breadcrumb step="type" />
      </div>
    );
-  },
-});
+  }
+}

 module.exports = NewsletterStandard;

--- a/assets/js/src/newsletters/types/welcome/scheduling.jsx
+++ b/assets/js/src/newsletters/types/welcome/scheduling.jsx
@ -47,14 +47,16 @@ const afterTimeTypeField = {
  values: timeDelayValues,
 };

-const WelcomeScheduling = React.createClass({
-  contextTypes: {
+class WelcomeScheduling extends React.Component {
+  static contextTypes = {
    router: React.PropTypes.object.isRequired,
-  },
-  getCurrentValue: function getCurrentValue() {
+  };
+
+  getCurrentValue = () => {
    return (this.props.item[this.props.field.name] || {});
-  },
-  handleValueChange: function handleValueChange(name, value) {
+  };
+
+  handleValueChange = (name, value) => {
    const oldValue = this.getCurrentValue();
    const newValue = {};

@ -66,38 +68,44 @@ const WelcomeScheduling = React.createClass({
        value: _.extend({}, oldValue, newValue),
      },
    });
-  },
-  handleEventChange: function handleEventChange(event) {
+  };
+
+  handleEventChange = (event) => {
    return this.handleValueChange(
      'event',
      event.target.value
    );
-  },
-  handleSegmentChange: function handleSegmentChange(event) {
+  };
+
+  handleSegmentChange = (event) => {
    return this.handleValueChange(
      'segment',
      event.target.value
    );
-  },
-  handleRoleChange: function handleRoleChange(event) {
+  };
+
+  handleRoleChange = (event) => {
    return this.handleValueChange(
      'role',
      event.target.value
    );
-  },
-  handleAfterTimeNumberChange: function handleAfterTimeNumberChange(event) {
+  };
+
+  handleAfterTimeNumberChange = (event) => {
    return this.handleValueChange(
      'afterTimeNumber',
      event.target.value
    );
-  },
-  handleAfterTimeTypeChange: function handleAfterTimeTypeChange(event) {
+  };
+
+  handleAfterTimeTypeChange = (event) => {
    return this.handleValueChange(
      'afterTimeType',
      event.target.value
    );
-  },
-  handleNext: function handleNext() {
+  };
+
+  handleNext = () => {
    MailPoet.Ajax.post({
      api_version: window.mailpoet_api_version,
      endpoint: 'newsletters',
@ -116,11 +124,13 @@ const WelcomeScheduling = React.createClass({
        );
      }
    });
-  },
-  showTemplateSelection: function showTemplateSelection(newsletterId) {
+  };
+
+  showTemplateSelection = (newsletterId) => {
    this.context.router.push(`/template/${newsletterId}`);
-  },
-  render: function render() {
+  };
+
+  render() {
    const value = this.getCurrentValue();
    let roleSegmentSelection;
    let timeNumber;
@ -171,7 +181,7 @@ const WelcomeScheduling = React.createClass({
        />
      </div>
    );
-  },
-});
+  }
+}

 module.exports = WelcomeScheduling;
--- a/assets/js/src/segments/list.jsx
+++ b/assets/js/src/segments/list.jsx
@ -191,8 +191,8 @@ const itemActions = [
  },
 ];

-const SegmentList = React.createClass({
-  renderItem: function renderItem(segment, actions) {
+class SegmentList extends React.Component {
+  renderItem = (segment, actions) => {
    const rowClasses = classNames(
      'manage-column',
      'column-primary',
@ -248,8 +248,9 @@ const SegmentList = React.createClass({
        </td>
      </div>
    );
-  },
-  render: function render() {
+  };
+
+  render() {
    return (
      <div>
        <h1 className="title">
@ -272,7 +273,7 @@ const SegmentList = React.createClass({
        />
      </div>
    );
-  },
-});
+  }
+}

 module.exports = SegmentList;
--- a/assets/js/src/segments/segments.jsx
+++ b/assets/js/src/segments/segments.jsx
@ -8,11 +8,11 @@ import SegmentForm from 'segments/form.jsx';

 const history = useRouterHistory(createHashHistory)({ queryKey: false });

-const App = React.createClass({
+class App extends React.Component {
  render() {
    return this.props.children;
-  },
-});
+  }
+}

 const container = document.getElementById('segments_container');

--- a/assets/js/src/subscribers/form.jsx
+++ b/assets/js/src/subscribers/form.jsx
@ -175,8 +175,8 @@ function afterFormContent() {
  );
 }

-const SubscriberForm = React.createClass({
-  render: function render() {
+class SubscriberForm extends React.Component {
+  render() {
    return (
      <div>
        <h1 className="title">
@ -194,7 +194,7 @@ const SubscriberForm = React.createClass({
        />
      </div>
    );
-  },
-});
+  }
+}

 module.exports = SubscriberForm;
--- a/assets/js/src/subscribers/list.jsx
+++ b/assets/js/src/subscribers/list.jsx
@ -242,8 +242,8 @@ const itemActions = [
  },
 ];

-const SubscriberList = React.createClass({
-  getSegmentFromId: function getSegmentFromId(segmentId) {
+class SubscriberList extends React.Component {
+  getSegmentFromId = (segmentId) => {
    let result = false;
    window.mailpoet_segments.forEach((segment) => {
      if (segment.id === segmentId) {
@ -251,8 +251,9 @@ const SubscriberList = React.createClass({
      }
    });
    return result;
-  },
-  renderItem: function renderItem(subscriber, actions) {
+  };
+
+  renderItem = (subscriber, actions) => {
    const rowClasses = classNames(
      'manage-column',
      'column-primary',
@ -333,8 +334,9 @@ const SubscriberList = React.createClass({
        </td>
      </div>
    );
-  },
-  render: function render() {
+  };
+
+  render() {
    return (
      <div>
        <h1 className="title">
@ -368,7 +370,7 @@ const SubscriberList = React.createClass({
        />
      </div>
    );
-  },
-});
+  }
+}

 module.exports = SubscriberList;
--- a/assets/js/src/subscribers/subscribers.jsx
+++ b/assets/js/src/subscribers/subscribers.jsx
@ -7,11 +7,11 @@ import SubscriberForm from 'subscribers/form.jsx';

 const history = useRouterHistory(createHashHistory)({ queryKey: false });

-const App = React.createClass({
+class App extends React.Component {
  render() {
    return this.props.children;
-  },
-});
+  }
+}

 const container = document.getElementById('subscribers_container');

--- a/package-lock.json
+++ b/package-lock.json
@ -2170,9 +2170,9 @@
      }
    },
    "create-react-class": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.2.tgz",
-      "integrity": "sha1-zx7RXxKq1/FO9fLf4F5sQvke8Co=",
+      "version": "15.6.3",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
      "requires": {
        "fbjs": "^0.8.9",
        "loose-envify": "^1.3.1",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "blob-tmp": "^1.0.0",
    "classnames": "^2.1.3",
    "codemirror": "^5.37.0",
+    "create-react-class": "^15.6.3",
    "file-saver": "^1.3.8",
    "handlebars": "4.0.11",
    "history": "1.13.1",
--- a/webpack.config.js
+++ b/webpack.config.js
@ -246,6 +246,7 @@ var adminConfig = {
      'react-dom',
      require.resolve('react-router'),
      'react-string-replace',
+      'prop-types',
      'listing/listing.jsx',
      'form/form.jsx',
      'intro.js',