React + Velocity

Showcase of simple chat

by Jordan Enev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class App extends React.Component{
	constructor(props) {
		super(props);
		this.state = {
			messages: []
		}
	}
	
	sendMessage(e) {
		if (e.key !== 'Enter') return;
	
		const message = {
			time: Date(),
			text: e.target.value
		};
		
		this.setState({messages: this.state.messages.concat([message])})
	}
	
	render() {
		return <div>
			<input onKeyPress={this.sendMessage.bind(this)} />
			<Messages messages={this.state.messages} />
		</div>
	}
}

class Messages extends React.Component{

	renderMessages() {
		const {messages} = this.props;
		
		return messages.map( function(message, index){
			return <li key={index}>[{message.time.toString()}] {message.text}</li>
		});;
	}

	render() {
		const style = {
			height: '100px',
			overflowY: 'scroll'
		};
		return <ul style={style}>{this.renderMessages()}</ul>
	}
}

ReactDOM.render(<App />, document.getElementById('container'));