React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Joey deVilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app">
    <!-- 
    This element's contents will be filled by our React code's output.
    -->
</div>

JavaScript 1.7

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.onSubmit = this.onSubmit.bind(this)
  }
  
  
  render() {
    const name = this.props.name
    const greeting = this.props.greeting
    return (<div>
      <h1>Hello, {name}!</h1>
      <p>{greeting}, {name}.</p>
      
      <form onSubmit={this.onSubmit}>
        <input ref="nameTextField" type="text" placeholder="Enter your name here." 
        />
        <button>Enter</button>
      </form>
    </div>)
  }
  
  onSubmit(event) {
    event.preventDefault()
    const nameTextField = this.refs.nameTextField
    const newName = nameTextField.value
    alert(newName)
  }

}

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please tell me your name"
}


ReactDOM.render(
  <Hello name="Kate" greeting="Welcome to Tampa Code Camp" />,
  document.getElementById('app')
)