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://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="app">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {renderNeed: false, needArray: []}
    this.addNeed = this.addNeed.bind(this)
  }
  
  addNeed(e) {
    e.preventDefault();
    this.setState({
        renderNeed: true, 
        needArray: [<Need key={Math.random()}/>, ...this.state.needArray]
     })
  }
  
  render() {
    return (
      <div>
        <a href="#" onClick = {this.addNeed}>add</a>
        {this.state.renderNeed ? this.state.needArray : null}
      </div>
    )
  }
}

class Need extends React.Component {
  constructor(props) {
    super(props)
    this.processNeed = this.processNeed.bind(this);
    this.state ={
        why: " ",
        howMuch: 0
    }
  }
  processNeed(e){
    e.preventDefault();
  }
  
  render() {
    return (
    <div className ="need">
            <form onSubmit = {this.processNeed}>
              <input type="text" />
              <input type="text" />
              <input type="submit" />
            </form>
            <div>
                <h1>{this.state.why}</h1>
                <h1>{this.state.howMuch}</h1>
            </div>
          </div>  
    )
  }
}

React.render(<App />, document.getElementById('app'));