ReactJs example by Ryan Vice - www.ViceSoftware.com

Hello React - composite components - how to componse simple components. author(s): Ryan Vice

by Abid Akhtar

HTML

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
 
<div id="view"/>

Babel + JSX

var HelloMessage = React.createClass({
    render: function() {
        return <div>{this.props.message}</div>;
    }
});

var HelloReact = React.createClass({
  getInitialState: function() {
          return { message: 'default'}
      },
  updateMessage: function () {
      console.info('updateMessage');
      this.setState({ 
          message: this.refs.messageTextBox.value
      });
  },
  render: function() {
    return (
      <div> 
          <HelloMessage message='Hello React'></HelloMessage>
          <input type='text' ref='messageTextBox' />
          <button onClick={this.updateMessage}>Update</button>
          <div>{this.state.message}</div>
      </div>
      );
  }
});
 
ReactDOM.render(
  <HelloReact/>, 
  document.getElementById('view'));