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="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class Form extends React.Component {
	    constructor(props) {
      super(props)
      this.formSubmit = this.formSubmit.bind(this)
      this.state = {
        contacts: [{
          name: 'John',
          email: '[email protected]',
          number: 111 - 111 - 111,
        }, {
          name: 'Dave',
          email: '[email protected]',
          phone: '222-222-222',
        }],
      }
    }
    formSubmit(e) {
      const details = {}
      e.target.childNodes.forEach(function(el) {
        if (el.tagName === 'INPUT')
          details[el.name] = el.value
        el.value = null
      })
      const newContacts = this.state.contacts.slice()
      newContacts.push(details)
      this.setState({
        contacts: newContacts
      })
      e.preventDefault()
    }
    render() {
      const contacts = this.state.contacts.map((el) => < div > {
          el
        } < /div>)
        return <div class = "conent" > {
            contacts
          } < form onSubmit = {
            this.formSubmit
          } >
          < input type = 'text'
        name = "name"
        placeholder = "Name" / >
        < input type = 'text'
        name = "email"
        placeholder = "Email" / >
        < input type = 'number'
        name = "phone"
        placeholder = "Phone" / >
        < button type = 'submit'
        onSubmit = {
          this.handleSubmit
        } > SUBMIT < /button> < /form> < /div>
      }
    }
    React.render( < Form / > , document.getElementById('container'));