React Hello World Example with ES6+JSX

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

by billjohnston4

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://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container"></div>

JavaScript 1.7

class StateTest extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      test: 0,
    }
    setInterval(() => {
    	this.setState({ test: this.state.test + 1 })
    }, 1000)
  }
  componentDidUpdate() {
    console.log('StateTest Updated')
  }
  render() {
    return <div>StateTest</div>
  }
}

class ClassVarTest extends React.Component {
  constructor(props) {
    super(props)
    this.test = 0
    setInterval(() => {
			this.test = this.test + 1
    }, 1000)
  }
  componentDidUpdate() {
    console.log('ClassVarTest Updated')
  }
  render() {
    return <div>ClassVar</div>
  }
}

class Wrapper extends React.Component {
  render() {
    return (
    	<div>
      	<h4>(Check the console to see the component updates)</h4>
      	<ClassVarTest />
        <StateTest />
      </div>
    )
  }
}


React.render( <Wrapper /> , document.getElementById('container'));