Nick Satija

Hands On Tech Leader - CTO - JS Fiddle TTL React

by nsatija

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class Hello extends React.Component {
 render(){
   return <div> {
      'Hello ' + this.props.name
    } < /div>;
 }
}

class GoodBye extends React.Component {
render() {
    return <div > Goodbye < /div>
  }
}


class Appender extends React.Component {
render() {
    return <div className = "appender" > {
      this.props.children
    } < /div>
  }
}

ReactDOM.render( < Appender >
  < Hello name={'Nick'}/ >
  < GoodBye / >
  < /Appender>,
  document.getElementById('container')
)