update to React 16

2 files changed, 28 insertions, 25 deletions

diff --git a/vnext/src/app.js b/vnext/src/app.js
index 52f35076..7971c71f 100644
--- a/vnext/src/app.js
+++ b/vnext/src/app.js
@@ -1,23 +1,21 @@
 import "whatwg-fetch"
-import React, {PropTypes} from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ReactDOM from "react-dom"
 
 import Message from "./components/Message.jsx"
 
-const Page = React.createClass({  
-  getInitialState() {
-    return {msgs: [], loading: false}
-  },
-  propTypes: {
-    msgs: PropTypes.array,
-    source: PropTypes.string.isRequired
-  },
+class Page extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {msgs: [], loading: false}
+  }
   render() { 
     var nodes = this.state.msgs.map(msg => {
       return (<Message key={msg.mid} mid={msg.mid} user={msg.user} body={msg.body} timestamp={msg.timestamp}/>) 
     });
     return (<div className="msgs">{nodes}</div>)    
-  },
+  }
   componentDidMount() {
       fetch(this.props.source)
           .then(response => {
@@ -29,6 +27,11 @@ const Page = React.createClass({
         console.log(ex)
       });
   }
-});
+};
+
+Page.propTypes = {
+    msgs: PropTypes.array,
+    source: PropTypes.string.isRequired
+}
 
-ReactDOM.render(<Page source="https://api.juick.com/messages" />, document.getElementById("content"));
\ No newline at end of file
+ReactDOM.render(<Page source="https://api.juick.com/messages" />, document.getElementById("content"));
diff --git a/vnext/src/components/message.jsx b/vnext/src/components/message.jsx
index faeb4b4e..78ebdd38 100644
--- a/vnext/src/components/message.jsx
+++ b/vnext/src/components/message.jsx
@@ -1,15 +1,7 @@
-import React, {PropTypes} from "react"
+import React from 'react'
+import PropTypes from 'prop-types'
 
-const Message = React.createClass({
-  propTypes: {
-    mid: PropTypes.number.isRequired,
-    user: PropTypes.shape({
-      uid: PropTypes.number.isRequired,
-      uname: PropTypes.string.isRequired
-    }),
-    timestamp: PropTypes.string.isRequired,
-    body: PropTypes.string.isRequired
-  },
+export default class Message extends React.Component {
   render() { return (
     <article>
       <aside>
@@ -21,6 +13,14 @@ const Message = React.createClass({
         <time dateTime={this.props.timestamp} title={this.props.timestamp}>{this.props.timestamp}</time></a></header>
       <p>{this.props.body}</p>
     </article>) }
-});
+};
 
-export default Message
\ No newline at end of file
+Message.propTypes = {
+    mid: PropTypes.number.isRequired,
+    user: PropTypes.shape({
+      uid: PropTypes.number.isRequired,
+      uname: PropTypes.string.isRequired
+    }),
+    timestamp: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired
+}