react-chat-skeleton.js

/*
 * -------------------
 * React Chat Scaffold
 * -------------------
 */
import React    from 'react'
import xhttp    from 'xhttp'

/*
 * Individual message component
 */
const Message = React.createClass({

  displayName: 'Message',

  render () {
    return (
      <div className='chat__message'>
        <div className='chat__message--userName'>
          <h3>{this.props.userName}</h3>
        </div>
        <div className='chat__message--text'>
          <p>{this.props.text}</p>
          <small>At: {this.props.timeStamp}</small>
        </div>
      </div>
    )
  }
})

/*
 * User input component
 */
const Input = React.createClass({

  displayName: 'TextInput',

  getInitialState () {
    return {
      text: ''
    }
  },

  handleInput (e) {
    e.preventDefault()
    this.setState({
      text: this.refs.text.getDOMNode().value()
    })
  },

  render () {
    return (
      <input type='text' ref='text' onChange={this.handleInput} className='chat__input' />
    )
  },

  getText () {
    return this.state.text
  }
})


/*
 * Messages list component
 */
const Messages = React.createClass({

  displayName: 'MessagesList',

  render () {
    return (
      <div className='chat__messages'>
        {this.props.messages.map((message) => {
          <Message
            text={message.text}
            timestamp={message.timestamp}
            userName={message.username}
          />
        })}
      </div>
    )
  }
})


/*
 * Application wrapper component
 */
const App = React.createClass({

  displayName: 'ChatApp',

  getInitialState() {
    return {
      messages: [],
      timer: function () {}
    }
  },

  componentWillMount () {
    this.state.timer = setInterval(() => {
      getMessages()
    }, 1000)
  },

  componentWillUnmount () {
    clearInterval(this.state.timer)
  },

  getMessages () {
    xhttp({
      url: '/api/getMessages',
      type: 'get',
      success: (data) => {
        if (data.length > this.state.messages.length) {
          this.setState({
            messages: data
          })
        }
      }
    })
  },

  handleSubmit (e) {
    e.preventDefault ()
    xhttp({
      url: '/api/post',
      method: 'post',
      type: 'json',
      data: Input.getText()
    })
  },

  render () {
    <div className='app'>
      <div className='chat-window'>
        <Messages {...this.state} />
      </div>
      <div className='chat-input'>
        <form onSubmit={this.handleSubmit}>
          <Input />
          <button type='submit'>Send</button>
        </form>
      </div>
    </div>
  }
})

React.render(<App />, document.getElementById('chat'))

Note: Haven't tested this, probably doesn't work. Just for fun.