<!DOCTYPE html>
<html>
<head>
<script src="https://npmcdn.com/react@15.4/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.4/dist/react-dom.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>
// This file should have the extension .jsx so that plunker compiles all the JSX
// The index.html file will include this file as script.js (not .jsx) however
// Define a component:
var Button = React.createClass({
getInitialState: function() {
return {counter: 0};
},
handleClick: function(){
this.setState( {counter: this.state.counter + 1});
},
render: function() {
return(
<button onClick={this.handleClick}>{this.state.counter}</button>
);
}
});
var Result = React.createClass({
render:function(){
return (
<div>XXX</div>
);
}
});
var Main = React.createClass({
render: function(){
return (
<div>
<Button />
<Result />
</div>
)
}
})
// Render a component to the browser:
ReactDOM.render( <Main/ > , // What to render (an instance of the Main component)
document.getElementById('container') // Where to render it
);
// If nothing appears in the browser, check the dev-tools console for errors.
// ******************************************************
// * Checkout the new jsComplete Interactive Lab!! *
// * http://jscomplete.com/interactive-learning-demo/ *
// ******************************************************