React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class LineChartView extends React.Component {
    
    constructor(props) {
    	super(props);
       this.updateOptions = this.updateOptions.bind(this);
    }
    
  componentDidMount(){
    	this.updateOptions(this.props.options);
    }
    
    componentWillUnmount() {
        if (this.chart && Object.prototype.toString.call(this.chart.destroy) == '[object Function]') {
            this.chart.destroy();
        }
    }
    
    componentWillReceiveProps(nextProps) {
		    this.updateOptions(nextProps.options);
    }
    
    updateOptions(options) {
    if (this.chart && Object.prototype.toString.call(this.chart.destroy) == '[object Function]') {
        this.chart.destroy();
    }
    this.chart = Highcharts.chart('chart', options);
    }
    
    render() {
    
      return(

          <div id='chart'>
          </div>

          );
    }
}

class ContainerComponent extends React.Component {
	constructor(props) {
  	super(props);
  	this.state = {
      	selected: 0
      };
  }
	render() {
  var options = [];
  options[0] = {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908,...