Base crossfade + passage a React 0.14

src/app.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var ReactDOM = require('react-dom');
 var LauncherView = require('./components/launcher/launcher-view.js');
 var EditView = require('./components/edit/edit-view.js');
 var Provider = require('react-redux').Provider;
@@ -34,9 +35,9 @@ function select(state) {
 // Connect App to Redux store
 App = connect(select)(App);
 
-React.render(
+ReactDOM.render(
   <Provider store={store}>
-    { function() { return <App />; } }
+    <App />
   </Provider>
   ,
   document.body

src/components/edit/tree-item.js

@@ -1,4 +1,4 @@
-var React = require('react/addons');
+var React = require('react');
 var classNames = require('classnames');
 var AppIcon = require('../common/app-icon.js');
 var DragSource = require('react-dnd').DragSource;
@@ -10,7 +10,7 @@ var TreeItem = React.createClass({
     render: function() {
 
       var data = this.props.data;
-    
+
       var connectDragSource = this.props.connectDragSource;
       var connectDropTarget = this.props.connectDropTarget;
 

src/components/launcher/crossfade-image.js

@@ -1,6 +1,7 @@
-/* jshint node: true jsx: true */
+/* jshint node: true */
 var React = require('react');
 var AnimateMixin = require('../mixins/animate');
+var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 
 module.exports = React.createClass({
 
@@ -20,27 +21,18 @@ module.exports = React.createClass({
 
   render: function() {
 
-    var topStyle = {};
-
-    if(this.state.prevSrc) {
-      topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
-    }
-
-    var bottomStyle = {
+    var topStyle = {
       backgroundImage: 'url('+this.state.currSrc+')'
     };
 
     return (
       <div className="crossfade-image">
-        <div className="bottom" style={bottomStyle}></div>
-        <div ref="top" className="top" style={topStyle}></div>
+        <ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
+          <div key={this.state.currSrc} className="top" style={topStyle}></div>
+        </ReactCSSTransitionGroup>
       </div>
     );
 
-  },
-
-  componentDidUpdate: function() {
-    this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
   }
 
 });

src/components/mixins/lazy-load.js

@@ -1,4 +1,4 @@
-var React = require('react');
+var ReactDOM = require('react-dom');
 
 var _listeners = [];
 
@@ -6,7 +6,7 @@ module.exports = {
 
   isInViewport: function() {
 
-    var el = React.findDOMNode(this);
+    var el = ReactDOM.findDOMNode(this);
 
     if(!el) return false;