exploring react

image-slider.jsx

var App = React.createClass({
  getInitialState: function() {
    return {
      red: 0,
      green: 0,
      blue: 0
    };
  },

  update: function() {
    this.setState({
      red: this.refs.red.refs.color.value,
      green: this.refs.green.refs.color.value,
      blue: this.refs.blue.refs.color.value
    });
  },
  
  render: function() {
    return (
      <div>
        <Slider 
          ref="red"
          value={this.state.red} 
          update={this.update} />
        <hr />
        <Slider 
          ref="green" 
          value={this.state.green} 
          update={this.update} />
        <hr />
        <Slider 
          ref="blue" 
          value={this.state.blue} 
          update={this.update} />
      </div>
    );
  }
});

var Slider = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.value}
        <br/>
        <input 
          ref="color"
          value={this.props.value}
          type="range"
          min="0"
          max="255"
          onChange={this.props.update}/>
      </div>
    );
  }
});

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

nested-components.jsx

var Heart = React.createClass({
  render: function() {
    return (
      <span>Love</span>
    );
  }
});

var Button = React.createClass({
  render: function() {
    console.log(this.props.children);
    return (
      <button>{this.props.children}</button>
    );
  }
});

var App = React.createClass({
  render: function()  {
    return (
      <Button>
        I <Heart /> React
      </Button>
    );
  }
});
        
ReactDOM.render(
  <App />,
  document.getElementById('app')
);