diff options
author | 2017-12-20 13:57:15 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 4c50a8676b41fdcc5d46e9608da1c9ca9ffb86d8 (patch) | |
tree | 533b5e0d5f40484252fbd662e8cc17a0eddab5b4 /vnext/src | |
parent | 813c5e7eda90944733d60dd324459ced93c9c087 (diff) |
update to React 16
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/app.js | 27 | ||||
-rw-r--r-- | vnext/src/components/message.jsx | 26 |
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 +} |