Merge pull request #20 from jakemmarsh/react-classes

convert to es6 classes, remove mixins

README.md

@@ -58,7 +58,6 @@ The ReactJS files are all located within `/app/js`, structured in the following
 /components
   - Footer.js (Simple, static footer component rendered on all pages.)
   - Header.js (Simple, static header component rendered on all pages.)
-/mixins
 /pages
   - HomePage.js (Example home page, serving as the default route.)
   - NotFoundPage.js (Displayed any time the user requests a non-existent route.)

__tests__/App.test.js

@@ -22,27 +22,27 @@ describe('App', function() {
     );
   });
 
-  it('#_onUserChange should set the error state if an error is received', function() {
+  it('#onUserChange should set the error state if an error is received', function() {
     const err = { message: 'Test error message.' };
     const app = TestUtils.renderIntoDocument(
       <App params={{}} query={{}}>
         <div />
       </App>
     );
 
-    app._onUserChange(err, null);
+    app.onUserChange(err, null);
     app.state.error.should.eql(err);
   });
 
-  it('#_onUserChange should set the user state and clear error if a new user is received', function() {
+  it('#onUserChange should set the user state and clear error if a new user is received', function() {
     const user = TestHelpers.fixtures.user;
     const app = TestUtils.renderIntoDocument(
       <App params={{}} query={{}}>
         <div />
       </App>
     );
 
-    app._onUserChange(null, user);
+    app.onUserChange(null, user);
     app.state.currentUser.should.eql(user);
     Should(app.state.error).be.null();
   });

app/js/App.js

@@ -1,56 +1,58 @@
 'use strict';
 
 import React              from 'react';
-import {ListenerMixin}    from 'reflux';
 
 import CurrentUserActions from './actions/CurrentUserActions';
 import CurrentUserStore   from './stores/CurrentUserStore';
 import Header             from './components/Header';
 import Footer             from './components/Footer';
 
-const App = React.createClass({
+const propTypes = {
+  params: React.PropTypes.object,
+  query: React.PropTypes.object,
+  children: React.PropTypes.oneOfType([
+    React.PropTypes.array,
+    React.PropTypes.object
+  ])
+};
 
-  mixins: [ListenerMixin],
+class App extends React.Component {
 
-  propTypes: {
-    params: React.PropTypes.object,
-    query: React.PropTypes.object,
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.array,
-      React.PropTypes.object
-    ])
-  },
-
-  getInitialState() {
-    return {
+  constructor(props) {
+    super(props);
+    this.state = {
       currentUser: {}
     };
-  },
+  }
 
-  _onUserChange(err, user) {
+  onUserChange(err, user) {
     if ( err ) {
       this.setState({ error: err });
     } else {
       this.setState({ currentUser: user || {}, error: null });
     }
-  },
+  }
 
   componentWillMount() {
     console.log('About to mount App');
-  },
+  }
 
   componentDidMount() {
-    this.listenTo(CurrentUserStore, this._onUserChange);
+    this.unsubscribe = CurrentUserStore.listen(this.onUserChange);
     CurrentUserActions.checkLoginStatus();
-  },
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
 
   renderChildren() {
     return React.cloneElement(this.props.children, {
       params: this.props.params,
       query: this.props.query,
       currentUser: this.state.currentUser
     });
-  },
+  }
 
   render() {
     return (
@@ -66,6 +68,8 @@ const App = React.createClass({
     );
   }
 
-});
+}
+
+App.propTypes = propTypes;
 
 export default App;

app/js/components/Footer.js

@@ -2,7 +2,11 @@
 
 import React from 'react';
 
-const Footer = React.createClass({
+class Footer extends React.Component{
+
+  constructor(props) {
+    super(props);
+  }
 
   render() {
     return (
@@ -14,6 +18,6 @@ const Footer = React.createClass({
     );
   }
 
-});
+}
 
 export default Footer;

app/js/components/Header.js

@@ -2,7 +2,11 @@
 
 import React from 'react';
 
-const Header = React.createClass({
+class Header extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
 
   render() {
     return (
@@ -14,6 +18,6 @@ const Header = React.createClass({
     );
   }
 
-});
+}
 
 export default Header;

app/js/pages/HomePage.js

@@ -4,11 +4,15 @@ import React         from 'react';
 import {Link}        from 'react-router';
 import DocumentTitle from 'react-document-title';
 
-const HomePage = React.createClass({
+const propTypes = {
+  currentUser: React.PropTypes.object
+};
 
-  propTypes: {
-    currentUser: React.PropTypes.object
-  },
+class HomePage extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
 
   render() {
     return (
@@ -28,6 +32,8 @@ const HomePage = React.createClass({
     );
   }
 
-});
+}
+
+HomePage.propTypes = propTypes;
 
 export default HomePage;

app/js/pages/NotFoundPage.js

@@ -3,11 +3,15 @@
 import React         from 'react';
 import DocumentTitle from 'react-document-title';
 
-const NotFoundPage = React.createClass({
+const propTypes = {
+  currentUser: React.PropTypes.object
+};
 
-  propTypes: {
-    currentUser: React.PropTypes.object
-  },
+class NotFoundPage extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
 
   render() {
     return (
@@ -21,6 +25,8 @@ const NotFoundPage = React.createClass({
     );
   }
 
-});
+}
+
+NotFoundPage.propTypes = propTypes;
 
 export default NotFoundPage;

app/js/pages/SearchPage.js

@@ -1,23 +1,27 @@
 'use strict';
 
 import React            from 'react';
-import LinkedStateMixin from 'react-addons-linked-state-mixin';
 import {Link}           from 'react-router';
 import DocumentTitle    from 'react-document-title';
 
-const SearchPage = React.createClass({
+const propTypes = {
+  currentUser: React.PropTypes.object
+};
 
-  mixins: [LinkedStateMixin],
+class SearchPage extends React.Component {
 
-  propTypes: {
-    currentUser: React.PropTypes.object
-  },
-
-  getInitialState() {
-    return {
+  constructor(props) {
+    super(props);
+    this.state = {
       query: ''
     };
-  },
+  }
+
+  handleQueryChange(evt) {
+    this.setState({
+      query: evt.target.value
+    });
+  }
 
   render() {
     return (
@@ -29,7 +33,7 @@ const SearchPage = React.createClass({
 
             <h2>Your query: <span ref="queryDisplay">{this.state.query}</span></h2>
 
-            <input type="text" valueLink={this.linkState('query')} ref="searchInput" />
+            <input type="text" onChange={this.handleQueryChange.bind(this)} ref="searchInput" />
           </div>
 
           <div>
@@ -41,6 +45,8 @@ const SearchPage = React.createClass({
     );
   }
 
-});
+}
+
+SearchPage.propTypes = propTypes;
 
 export default SearchPage;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rocket-boilerplate",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Jake Marsh <[email protected]>",
   "description": "Boilerplate using React, Browserify, SASS, and Gulp.",
   "repository": {
@@ -47,7 +47,6 @@
     "lodash": "^3.10.0",
     "mocha": "^2.3.3",
     "react": "^0.14.x",
-    "react-addons-linked-state-mixin": "^0.14.0",
     "react-addons-test-utils": "^0.14.0",
     "react-document-title": "^1.0.2",
     "react-dom": "^0.14.0",