Greeter.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <title>ReactJS </title>
 <script src="react.js"></script>
 <script src="react-dom.js"></script>
 <script src="browser.min.js"></script>
 <style>
	input {
		margin : 10px;
	}
 </style>
</head>
<body>
 
 <script type="text/babel">
	
	var Greeter = React.createClass({
		getInitialState : function(){
			return {
				message : '[Default Message]'
			}
		},
		greet : function(){
		console.log('this ', this);
			var message = 'Hi ' + this.refs.txtName.value + ' have a nice day !'
			this.setState({
				message : message
			})
		},
		render : function(){
			return (<div>
				<label>Name : </label>
				<input type="text" ref="txtName"/>
				<input type="text" ref="abc"/>
				<input type="button" value="Greet" onClick={this.greet}/>
				<div>{this.state.message}</div>
			</div>);
		}
	});
	
	 
	
	ReactDOM.render(<Greeter />, document.body);
 </script>
<!-- ReactDOM.render(<Content title="Welcome to React" message="Hey You"/>, document.body); -->
</body>
</html>