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>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
Babel + JSX
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ''
}
}
handleChange = event => {
this.setState({
name: event.target.value
});
}
resetInput = () => {
this.setState({ name: '' });
}
render() {
const { name } = this.state;
return (
<div>
<input type="text" value={name} onChange={this.handleChange} />
<p>Hello, {name}</p>
<button onClick={this.resetInput}>Reset</button>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);