Example of rendering to two React instances (e.g., different parts of a page) as a single component.

app.js

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

var HelloInput = React.createClass({
	render: function() {
    	return (
        	<div><input value={this.props.name} onChange={ev=>this.props.update(ev.target.value)}/></div>
        );
    }
});

ReactDOM.render(
	<Hello name="World" />,
	document.getElementById('container')
);

function render(name, updateName) {
	ReactDOM.render(
    	<Hello name={name} />,
    	document.getElementById('container')
    );
    ReactDOM.render(
    	<HelloInput name={name} update={updateName} />,
    	document.getElementById('container2')
	);
}

var name = "Hello World!";

function updateName(newName) {
	name = newName;
    render(name, updateName);
}

render(name, updateName);

page.html

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

<div id="container2"></div>

Don't actually try to run this. It's written for JSFiddle, and can be seen in this fiddle.

To actually use this pattern in an app, you would need to add actual program structure, as well as building a complete html page.