React Bootstrap with JSX

by Szymon Jednac

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
<div id='container' />

Babel + JSX

class SharedScale extends React.Component {    
  render() {  
  	//Define a D3 scale at *rendering* time (depends on the current 
    //viewport size - react-sizeme), keep a reference to it and use the object
    //to show a reference scale for the user.
  	this.scaleImpl = '# D3 scale # ';
  
  	return <p>{this.scaleImpl}</p>;
  }
};

class Graph extends React.Component {
	constructor(props) {
  	super(props);
  }

  render() {    
    return (
    	<div>
        <h1>{this.props.title}</h1>
        <div>{this.props.scaleComponent ? "Component reference present" : "No component"}</div>
        <div>{this.props.scaleComponent && this.props.scaleComponent.scaleImpl ? "Scale present" : "No scale"}</div>
      </div>
		);
  }
}

class DataView extends React.Component {   
	constructor(props) {
  	super(props);
  
  	this.scale = React.createRef();
  }
  
	render() {
	  console.log(this.scale);
		return(
    	<div>
    	  <SharedScale ref={this.scale} />
        {this.scale.current &&
	        <Graph title="Graph 1" scaleComponent={this.scale.current} />
        }
	    </div>
    );
  }
}

ReactDOM.render(
 	<DataView />,
  document.getElementById('container')
);