Edit in JSFiddle

/** @jsx React.DOM */

var ApplicationWithValueLink = React.createClass({
  mixins: [React.addons.LinkedStateMixin],

  getInitialState: function() {
    return { color: "#FF0000" }
  },
  
  render: function() {
    return (
      <div>
        <div>
          <span style={{color: this.state.color}}>My Color Picker</span>
          <button onClick={this.changeColor.bind(null, "#FF0000")}>Red</button>
          <button onClick={this.changeColor.bind(null, "#00FF00")}>Green</button>
          <button onClick={this.changeColor.bind(null, "#0000FF")}>Blue</button>
          <input type="text" valueLink={this.linkState("color")} />
        </div>
        <div>
          <ColorPicker valueLink={this.linkState("color")} />
        </div>
      </div>
    );
  },
  
  changeColor: function(color) {
    this.setState({color: color});
  }
});

var ApplicationWithoutValueLink = React.createClass({
  getInitialState: function() {
    return { color: "#FF0000" }
  },
  
  render: function() {
    return (
      <div>
        <div>
          <span style={{color: this.state.color}}>My Color Picker</span>
          <button onClick={this.changeColor.bind(null, "#FF0000")}>Red</button>
          <button onClick={this.changeColor.bind(null, "#00FF00")}>Green</button>
          <button onClick={this.changeColor.bind(null, "#0000FF")}>Blue</button>
          <input type="text" value={this.state.color} onChange={this.changeColorText} />
        </div>
        <div>
          <ColorPicker value={this.state.color} onChange={this.changeColor} />
        </div>
      </div>
    );
  },
  
  changeColor: function(color) {
    this.setState({color: color});
  },
  
  changeColorText: function(evt) {
    this.changeColor(evt.target.value);
  }
});

var ColorPicker = React.createClass({
  propTypes: {
    value: React.PropTypes.string,
    onChange: React.PropTypes.func,
    valueLink: React.PropTypes.shape({ // TODO: what about React.PropTypes.link(...)?
      value: React.PropTypes.string,
      requestChange: React.PropTypes.func
    })
  },

  getDefaultProps: function() {
    return {
      value: "",
      onChange: function() {},
      valueLink: null
    };
  },

  getValueLink: function(props) {
    return props.valueLink || {
      value: props.value,
      requestChange: props.onChange
    };
  },

  render: function() {
    return <div />;
  },

  componentDidMount: function() {
    jQuery(this.getDOMNode()).colorPicker({
      pickerDefault: this.getValueLink(this.props).value,
      onColorChange: this.onColorChange
    });
  },

  componentWillReceiveProps: function(nextProps) {
    var currentValueLink = this.getValueLink(this.props),
        nextValueLink = this.getValueLink(nextProps);
    
    if (currentValueLink.value !== nextValueLink.value) {
      var node = jQuery(this.getDOMNode());
      node.val(nextValueLink.value);
      node.change();
    }
  },

  onColorChange: function(id, color) {
    this.getValueLink(this.props).requestChange(color);
  }
});

React.renderComponent(<ApplicationWithValueLink />, document.getElementById("app1"));
React.renderComponent(<ApplicationWithoutValueLink />, document.getElementById("app2"));

<p><strong>With valueLink</strong></p>
<div id="app1"></div>
<hr>
<p><strong>With value and onChange</strong></p>
<div id="app2"></div>

<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="https://dl.dropboxusercontent.com/u/113308/dnd/jsfiddle/jquery.colorPicker.min.js"></script>