How to re render the view when the browser is resized

How can I get React to re-render the view when the browser window is resized?

Background

I have some blocks that I want to layout individually on the page, however I also want them to update when the browser window changes. The very end result will be something likeBen Holland'sPinterest layout, but written using React not just jQuery. I’m still a way off.

Code

Here’s my app:

varMyApp = React.createClass({//does the http get from the serverloadBlocksFromServer:function(){ $.ajax({url:this.props.url,dataType:'json',mimeType:'textPlain',success:function(data){this.setState({data: data.events}); }.bind(this) }); },getInitialState:function(){return{data: []}; },componentWillMount:function(){this.loadBlocksFromServer(); },render:function(){return(<div><Blocksdata={this.state.data}/>div>); } }); React.renderComponent(<MyAppurl="url_here"/>,document.getElementById('view') )

Then I have the blockcomponent (equivalent to a pinin the above Pinterest example):

varBlock = React.createClass({render:function(){return(<divclass="dp-block"style={{left:this.props.top,top:this.props.left}}><h2>{this.props.title}h2><p>{this.props.children}p>div>); } });

and the list/collection of Blocks :

varBlocks = React.createClass({render:function(){//I've temporarily got code that assigns a random position//See inside the function below...varblockNodes =this.props.data.map(function(block){//temporary random positionvartopOffset =Math.random() * $(window).width() +'px';varleftOffset =Math.random() * $(window).height() +'px';return<Blockorder={block.id}title={block.summary}left={leftOffset}top={topOffset}>{block.description}Block>; });return(<div>{blockNodes}div>); } });

Question

Should I add jQuery’s window resize? If so, where?

$(window).resize(function(){// re-render the component});

Is there a more “React” way of doing this?