React Base Fiddle (JSX)

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

by thekenwheeler

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-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.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 MyComponent extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	valid: false
    };
  }
  submitForm(e) {
  	e.preventDefault()
  	alert(this.refs.zipcode.value)
  }
  inputChange(e) {
  	let valid = false;
    if(e.target.value.length > 4) valid = true;
    if(isNaN(e.target.value)) valid = false;
  	this.setState({
    	valid: valid
    });
  }
  render() {
  	return (
    	<form onSubmit={this.submitForm.bind(this)}>
      	<input 
        	style={{
          	outline: "none",
          	borderColor: this.state.valid ? "green" : "red"
          }}
        	onChange={this.inputChange.bind(this)}
        	type="text" 
          ref="zipcode"/>
      	<input type="submit" value="submit"/>
      </form>
    )
  }
}

class App extends React.Component {
    render() {
        return (
        	<div>
          	<MyComponent name="Demetrick"/>
          </div>
        )
    }
}
 
ReactDOM.render(<App/>,
    document.getElementById('container')
);