React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>(function(n,t,i,r){var u,f;n[i]=n[i]||{},n[i].initial={accountCode:"EVERY11143",host:"EVERY11143.pcapredict.com"},n[i].on=n[i].on||function(){(n[i].onq=n[i].onq||[]).push(arguments)},u=t.createElement("script"),u.async=!0,u.src=r,f=t.getElementsByTagName("script")[0],f.parentNode.insertBefore(u,f)})(window,document,"pca","//EVERY11143.pcapredict.com/js/sensor.js")</script>

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

CSS

.container {
  display: flex;
  flex-direction: column;
}

.form-container {
  display: flex;
  flex-direction: column;
}

.suggested {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  min-height: 400px;
  overflow: auto;
}

label {
  flex: 2;
  margin: 10px 0px;
  padding: 10px;
  min-width: 30px;
}

Babel + JSX

class Form extends React.Component {

	constructor (props) {
  	super(props)
    
    this._changeHandler = this._changeHandler.bind(this)
    
    this.state = {
    	address1: "",
    	country: "US"
    }
  }
  
  componentDidUpdate() {
  	console.log(this.state)
  }
  
  _changeHandler(propname, e) {
  	this.setState({
    	[propname]: e.target.value
    })
    
    console.log(this.state)
  }

  render() {
    return (
    <div className="form-container">
    <label htmlFor="Address1">
    Address1:
      <input id="Address1" type="text" value={this.state.address1} onChange={this._changeHandler.bind(this, 'address1')} />
    </label>
    </div>
    )
  }
}

ReactDOM.render(
  <Form name="World" />,
  document.getElementById('container')
);