React Hello World Example with ES6+JSX

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

by Pranesh Ravi

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>

CSS

ul{
  padding:0;
}

li{
  list-style:none;
}

JavaScript 1.7

var App = React.createClass({
   getInitialState(){
     return {
       items:[1,2,3],
       isEdit: true
     }
   },
   renderEditForm(){
   return(
   <div>
   <input type="text" />
   <button>save</button>
   </div>
   )
   },
   renderItem(){
     return(
       this.state.items.map((item,i)=>
         <li key={i}> {this.state.isEdit ? this.renderEditForm() : item}</li>)
     )
   },
   render(){
      return(
        <ul>
          {this.renderItem()}
        </ul>
      )
   }
})

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