Use create-react-class, drop React.createClass

Josh Beckman

2017-04-12 84755ceb54dd6f5fe7682912336b243e4b7dc59b

Use create-react-class, drop React.createClass

Reference:
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass

> Warning: A Component: React.createClass is deprecated and will be
> removed in version 16. Use plain JavaScript classes instead. If you're
> not yet ready to migrate, create-react-class is available on npm as a
> drop-in replacement.

 DateTime.js

@@ -1,13 +1,14 @@
'use strict';

var assign = require('object-assign'),
        createClass = require('create-react-class'),
    moment = require('moment'),
    React = require('react'),
    CalendarContainer = require('./src/CalendarContainer')
;

var TYPES = React.PropTypes;
var Datetime = React.createClass({
var Datetime = createClass({
    propTypes: {
        // value: TYPES.object | TYPES.string,
        // defaultValue: TYPES.object | TYPES.string,

 package.json

@@ -76,6 +76,7 @@
    "webpack-stream": "^3.2.0"
  },
  "dependencies": {
    "create-react-class": "^15.5.2",
    "object-assign": "^3.0.0",
    "react-onclickoutside": "^5.9.0"
  },

 src/CalendarContainer.js

@@ -1,11 +1,12 @@
var React = require('react'),
  createClass = require('create-react-class'),
  DaysView = require('./DaysView'),
  MonthsView = require('./MonthsView'),
  YearsView = require('./YearsView'),
  TimeView = require('./TimeView')
;

var CalendarContainer = React.createClass({
var CalendarContainer = createClass({
    viewComponents: {
        days: DaysView,
        months: MonthsView,

 src/DaysView.js

@@ -1,12 +1,13 @@
'use strict';

var React = require('react'),
    createClass = require('create-react-class'),
    moment = require('moment'),
  onClickOutside = require('react-onclickoutside')
;

var DOM = React.DOM;
var DateTimePickerDays = onClickOutside( React.createClass({
var DateTimePickerDays = onClickOutside( createClass({
    render: function() {
        var footer = this.renderFooter(),
            date = this.props.viewDate,

 src/MonthsView.js

@@ -1,11 +1,12 @@
'use strict';

var React = require('react'),
    createClass = require('create-react-class'),
    onClickOutside = require('react-onclickoutside')
;

var DOM = React.DOM;
var DateTimePickerMonths = onClickOutside( React.createClass({
var DateTimePickerMonths = onClickOutside( createClass({
    render: function() {
        return DOM.div({ className: 'rdtMonths' }, [
            DOM.table({ key: 'a' }, DOM.thead( {}, DOM.tr( {}, [

 src/TimeView.js

@@ -1,12 +1,13 @@
'use strict';

var React = require('react'),
    createClass = require('create-react-class'),
    assign = require('object-assign'),
  onClickOutside = require('react-onclickoutside')
;

var DOM = React.DOM;
var DateTimePickerTime = onClickOutside( React.createClass({
var DateTimePickerTime = onClickOutside( createClass({
    getInitialState: function() {
        return this.calculateState( this.props );
    },

 src/YearsView.js

@@ -1,11 +1,12 @@
'use strict';

var React = require('react'),
    createClass = require('create-react-class'),
    onClickOutside = require('react-onclickoutside')
;

var DOM = React.DOM;
var DateTimePickerYears = onClickOutside( React.createClass({
var DateTimePickerYears = onClickOutside( createClass({
    render: function() {
        var year = parseInt( this.props.viewDate.year() / 10, 10 ) * 10;