React Loader Example with ES6+JSX

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

by Joe Saad

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

let cars = [
    	{id: 1, name: "Golf"},
      {id: 2, name: "Audi"},
      {id: 3, name: "Passat"},
      {id: 4, name: "Bmw"}
    ];

class Test extends React.Component {
		constructor(props){
    	super(props);
      
      this.state = {
      	loading: true
      }
    }
    
    componentDidMount(){
    	setTimeout(() => {
      	this.setState({loading: false})
      },2000)
    }
    
		render(){
    	let content = this.state.loading ? <div>Loading</div> : cars.map((c, i) => <div key={i}>{c.name}</div>)
    
    	return (
      	<div>{content}</div>
      )
    }
}

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