Complete Hello (old JS)

Hello!

by Joey deVilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app">
    <!-- 
    This element's contents will be filled by our React code's output.
    -->
</div>

JavaScript 1.7

const Greeting = React.createClass({

	render: function() {
		const name = this.props.name
		const message = this.props.message

		return (
			<div>
				<h1>Hello, {name}!</h1>
				<p>{message}</p>
			</div>
		)
	}
})


const NameForm = React.createClass({

	onFormSubmit: function(e) {
		e.preventDefault()

		const inputName = this.refs.name.value
		if (inputName.length > 0) {
			this.refs.name.value = ""
			this.props.onNewName(inputName)
		}
		else {
			this.props.onNoName()
		}
	},

	render: function() {
		return (
			<div>
				<form onSubmit={this.onFormSubmit}>
					<input ref="name" type="text" placeholder="Enter your name here." />
					<button>Enter</button>
				</form>
			</div>
		)
	}
})


const Hello = React.createClass({

	getDefaultProps: function() {
		return {
			name: "stranger",
			message: "What's your name?"
		}
	},

	getInitialState: function() {
		return {
			name: this.props.name,
			message: this.props.message
		}
	},

	handleNewName: function(name) {
		this.setState({
			name: name,
			message: "Pleased to meet you, " + name + "."
		})
	},

	handleNoName: function() {
		this.setState({
			name: "stranger",
			message: "Seriously, what's your name?"
		})
	},

	render: function() {
		const name = this.state.name
		const message = this.state.message
		return(
			<div>
				<Greeting name={name} message={message} />
				<NameForm onNewName={this.handleNewName}
					           onNoName={this.handleNoName} />
			</div>
		)
	}

})


ReactDOM.render(
	<Hello />,
	document.getElementById('app')
)