Migration from React v0.13 to v0.14

frontend/js/download/Detect.js

@@ -1,5 +1,6 @@
 'use strict';
-var React = require('react/addons');
+var React = require('react');
+var ReactDOM = require('react-dom');
 var Option = React.createFactory(require('./Option'));
 var cx = require('classnames');
 
@@ -56,7 +57,7 @@ var Detect = React.createClass({
  var windowTop = window.pageYOffset;
  var windowBottom = windowTop + windowHeight;
 
- var node = this.getDOMNode();
+ var node = ReactDOM.findDOMNode(this);
  var nodeTop = node.offsetTop;
  var nodeBottom = nodeTop + node.offsetHeight;
  var offset;
@@ -84,7 +85,7 @@ var Detect = React.createClass({
 
  mouseDown: function(e) {
  var props = this.props;
- var metadataPane = this.refs.option.refs.metadata.getDOMNode();
+ var metadataPane = ReactDOM.findDOMNode(this.refs.option.refs.metadata);
  if (metadataPane.contains(e.target) && !this.state.clickFocused) {
  this.setState({clickFocused: true});
  }
@@ -94,7 +95,7 @@ var Detect = React.createClass({
  blur: function(e) {
  if (this.state.clickFocused) {
  this.setState({clickFocused: false});
- this.refs.option.refs.input.getDOMNode().focus();
+ this.refs.option.refs.input.focus();
  return e.preventDefault();
  }
 

frontend/js/download/DetectList.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var Detect = React.createFactory(require('./Detect'));
 var DOM = React.DOM, ul = DOM.ul, li = DOM.li;
 var cx = require('classnames');
@@ -24,8 +24,8 @@ var DetectList = React.createClass({
 
  var nextRef = Math.max(0, Math.min(currentIndex + offset, this.props.detects.length));
  if (nextRef !== currentIndex) {
- this.refs[currentIndex].refs.option.refs.input.getDOMNode().blur();
- this.refs[nextRef].refs.option.refs.input.getDOMNode().focus();
+ this.refs[currentIndex].refs.option.refs.input.blur();
+ this.refs[nextRef].refs.option.refs.input.focus();
  }
  e.preventDefault();
  }

frontend/js/download/DownloadOverlay.js

@@ -1,7 +1,7 @@
 /*globals Modernizr*/
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var DownloadOverlayOption = React.createFactory(require('./DownloadOverlayOption'));
 var gruntify = require('./util').gruntify;
 var DOM = React.DOM, div = DOM.div, form = DOM.form, button = DOM.button, input = DOM.input, ul = DOM.ul, li = DOM.li;
@@ -83,8 +83,7 @@ var DownloadOverlay = React.createClass({
  },
 
  toggleOverlay: function(e) {
- var container = this.refs.container.getDOMNode();
- if (!container.contains(e.target)) {
+ if (!this.refs.container.contains(e.target)) {
  this.props.toggle(false);
  }
  },

frontend/js/download/DownloadOverlayOption.js

@@ -1,7 +1,7 @@
 /*globals ZeroClipboard, Modernizr*/
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var DOM = React.DOM, textarea = DOM.textarea, a = DOM.a, li = DOM.li, label = DOM.label, button = DOM.button, span=DOM.span;
 
 var DownloadOverlayOption = React.createClass({
@@ -19,7 +19,7 @@ var DownloadOverlayOption = React.createClass({
  var state = this.state;
  var props = this.props;
  if (state.hasFlash) {
- var zeroClipboard = new ZeroClipboard(this.refs[props.title].getDOMNode());
+ var zeroClipboard = new ZeroClipboard(this.refs[props.title]);
  ZeroClipboard.on('error', function() {
  Modernizr.flash = false;
  self.setState({hasFlash: false});
@@ -77,7 +77,7 @@ var DownloadOverlayOption = React.createClass({
  componentDidUpdate: function() {
  this.setupClipboard();
  var textarea = this.refs.textarea;
- textarea && textarea.getDOMNode().select();
+ textarea && textarea.select();
  },
 
  clickDownload: function() {

frontend/js/download/DownloadUI.js

@@ -1,5 +1,5 @@
 'use strict';
-var React = require('react/addons');
+var React = require('react');
 var DetectList = React.createFactory(require('./DetectList'));
 var LeftColumn = React.createFactory(require('./LeftColumn'));
 var SearchHeader = React.createFactory(require('./SearchHeader'));
@@ -80,7 +80,7 @@ var DownloadUI = React.createClass({
  focusFirst: function() {
  var topDetect = this.refs.detectList.refs[0];
  if (topDetect) {
- topDetect.refs.option.refs.input.getDOMNode().focus();
+ topDetect.refs.option.refs.input.focus();
  }
  },
 

frontend/js/download/LeftColumn.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var Option = React.createFactory(require('./Option'));
 var util = require('./util');
 var cx = require('classnames');

frontend/js/download/Metadata.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var MetadataDocs = React.createFactory(require('./MetadataDocs'));
 var MetadataList = React.createFactory(require('./MetadataList'));
 var MetadataNotes = React.createFactory(require('./MetadataNotes'));

frontend/js/download/MetadataDocs.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var DOM = React.DOM, div = DOM.div;
 var MetadataDocs = React.createClass({
  mixins: [PureRenderMixin],

frontend/js/download/MetadataList.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var util = require('./util');
 var pluralize = util.pluralize;
 var DOM = React.DOM, div = DOM.div, ul = DOM.ul, li = DOM.li;

frontend/js/download/MetadataNotes.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var DOM = React.DOM, div = DOM.div, a = DOM.a;
 var MetadataNotes = React.createClass({
  mixins: [PureRenderMixin],

frontend/js/download/MetadataPolyfills.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var util = require('./util');
 var listify = util.listify;
 var DOM = React.DOM, div = DOM.div, ul = DOM.ul, li = DOM.li, a = DOM.a;

frontend/js/download/Option.js

@@ -1,5 +1,6 @@
 'use strict';
-var React = require('react/addons');
+var React = require('react');
+var ReactDOM = require('react-dom');
 var SVGToggle = React.createFactory(require('./SVGToggle'));
 var Metadata = React.createFactory(require('./Metadata'));
 var DOM = React.DOM, div = DOM.div, input = DOM.input, label = DOM.label;
@@ -49,7 +50,7 @@ var Option = React.createClass({
 
  keyDown: function(e) {
  if (e.which === 13) {
- var input = this.refs.input.getDOMNode();
+ var input = this.refs.input;
  input.checked = !input.checked;
  this.change();
  e.preventDefault();
@@ -58,7 +59,7 @@ var Option = React.createClass({
 
  click: function(e) {
  var props = this.props;
- var toggle = this.refs.SVGToggle.getDOMNode();
+ var toggle = ReactDOM.findDOMNode(this.refs.SVGToggle);
 
  if (props.ignoreLabelClick && !toggle.contains(e.target)) {
  e.preventDefault();

frontend/js/download/SVGToggle.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var DOM = React.DOM, svg = DOM.svg, circle = DOM.circle, path = DOM.path;
 
 var SVGToggle = React.createClass({

frontend/js/download/SearchHeader.js

@@ -1,6 +1,6 @@
 'use strict';
-var React = require('react/addons');
-var PureRenderMixin = React.addons.PureRenderMixin;
+var React = require('react');
+var PureRenderMixin = require('react-addons-pure-render-mixin');
 var Fuse = require('fuse.js');
 var DOM = React.DOM, div = DOM.div, input = DOM.input, label = DOM.label, button = DOM.button;
 var fuseOptions = {
@@ -44,7 +44,7 @@ var SearchHeader = React.createClass({
  },
 
  change: function() {
- var val = this.refs.search.getDOMNode().value;
+ var val = this.refs.search.value;
  this.props.onChange(fuse.search(val), val);
  },
 

frontend/js/download/index.js

@@ -1,5 +1,6 @@
 'use strict';
-var React = require('react/addons');
+var React = require('react');
+var ReactDOM = require('react-dom');
 var DownloadUI = React.createFactory(require('./DownloadUI'));
 var currentSearch;
 var shouldBuild;
@@ -159,7 +160,7 @@ ZeroClipboard.config({
  flashLoadTimeout: 5000
 });
 
-React.render(DownloadUI({
+ReactDOM.render(DownloadUI({
  detects: window._modernizrMetadata,
  options: window._options,
  currentSearch: currentSearch,

gulpfile.js

@@ -30,12 +30,12 @@ process.env.cache_time = Date.now();
 gulp.task('browserify', function() {
  // the react lib has wonderful debugging messages, but it comes at the cost of a much
  // larger lib. So use the `.min` mode when building the production site to save those byte$
- var reactVersion = process.env.NODE_ENV === 'production' ? 'react/dist/react-with-addons.min' : 'react/addons';
+ var reactVersion = process.env.NODE_ENV === 'production' ? 'react/dist/react.min' : 'react';
 
  return browserify('./frontend/js/download/index.js')
  .transform(aliasify, {
  aliases: {
- 'react/addons': reactVersion
+ 'react': reactVersion
  }
  })
  .bundle()

package.json

@@ -62,7 +62,9 @@
  "he": "^0.5.0",
  "highlight.js": "^8.5.0",
  "modernizr": "^3",
- "react": "^0.13.0",
+ "react": "^0.14.0",
+ "react-addons-pure-render-mixin": "^0.14.7",
+ "react-dom": "^0.14.0",
  "rss": "^1.1.1",
  "yaml-front-matter": "^3.2.3",
  "zeroclipboard": "^2.2.0"

server/buildSteps/download.js

@@ -1,10 +1,11 @@
 'use strict';
 var React = require('react');
 var Modernizr = require('modernizr');
+var ReactDOMServer = require('react-dom/server');
 
 var DownloadModule = require('../../frontend/js/download/DownloadUI');
 var downloadFactory = React.createFactory(DownloadModule);
 var options = require('../util/modernizrOptions');
 
 // render a static version of the `builder` for a faster inital render/script-less clients
-module.exports = React.renderToString(downloadFactory({detects:Modernizr.metadata(), options: options}));
+module.exports = ReactDOMServer.renderToString(downloadFactory({detects:Modernizr.metadata(), options: options}));