React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Szymon Jednac

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

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 {	
  render() {    
  	//Use SharedScale.scaleImpl here
    const { title, scaleComponent } = this.props;
    
    return (
    	<div>
        <h1>{title}</h1>
        <div>{scaleComponent ? "Component reference present" : "No component"}</div>
        <div>{scaleComponent && scaleComponent.scaleImpl ? scaleComponent.scaleImpl : "No scale"}</div>
      </div>
		);
  }
}

class DataView extends React.Component {   
	constructor(props) {
  	super(props);
  
    this.scaleComponent = React.createRef();
  }
  
  componentDidMount() {
  	console.log("Component mounted.")
  	this.forceUpdate();
  }
  
	render() {
  	console.log(this.scaleComponent);

		return(
    	<div>
    	  <SharedScale ref={this.scaleComponent} />
	      <Graph title="Graph 1" scaleComponent={this.scaleComponent.current} />        
	    </div>
    );
  }
}

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