WlcomeApp React Components and message passing between the components; Tutorials @ http://time2hack.com/2016/03/intro-react-js.html & http://time2hack.com/2016/03/todo-app-with-reactjs-and-bootstrap.html

WelcomeApp.jsx

//WelcomeApp: App Container, houses other components
//and creats underlying servicing methods
var WelcomeApp = React.createClass({ 
  getInitialState: function(){
    return { name: this.props.name };
  },
  handleKeyUp: function(newVal) {
    this.setState( {name: newVal } );
  },
  render: function(){
    return (
      <div>
        <WelcomeInput 
          changeName={this.handleKeyUp.bind(this)} />
        <WelcomeMessage name={this.state.name} />
      </div>
    )
  }
});

//WelcomeInput: Responsible for taking inputs
var WelcomeInput = React.createClass({ 
  handleKeyUp: function() {
    this.props.changeName(this.refs.name.value)
  },
  render: function(){
    return (
      <p>
        <input type="text" ref="name" 
          className="form-control"
          onKeyUp={this.handleKeyUp} 
          placeholder="Your Name" />
      </p>
    );
  }
});

//WelcomeMessage: Responsible for feedback to user
var WelcomeMessage = React.createClass({ 
  render: function(){
    return (
        <p className="lead">Hello {this.props.name}!</p>
      );
  }
});
ReactDOM.render(
    <WelcomeApp name='World' />, 
    document.getElementById('app') 
  );