<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>
class App extends React.Component {
render() {
return <Foo />;
}
}
class Foo extends React.Component {
state = { count: 0 };
increment = () => {
const { count } = this.state;
const newCount = count < 10 ? count + 1 : count;
this.setState({ count: newCount });
};
render() {
const { count } = this.state;
console.log("Foo render");
return (
<div>
<h1> {count} </h1>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
View Compiled
This Pen doesn't use any external CSS resources.