First of all, Parcel is a dead simple to use bundler that supports JSX, hot reloading, code splitting, and various file types (including TypeScript) out of the box: https://parceljs.org
Second, that React code is much longer than it needs to be, mostly due to formatting, but if you use function components and React "Hooks" it can be extremely short:
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>The current count is {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
};
With the imports and call to "render" it's about 15 lines of code, which is much shorter than all of his other examples.The class version (written how I'd do it) is about 25 lines, which still shorter. Here it is without JSX, using Preact's HyperScript-style `h` instead of `React.createElement`:
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: props.count || 0
};
}
increment() {
const { count } = this.state;
this.setState({ count: count + 1 });
}
decrement() {
const { count } = this.state;
this.setState({ count: count + 1 });
}
render() {
const { count } = this.state;
return h("div",
h("p", "The current count is " + count),
h("button", { onClick: () => this.increment() }, "Increment"),
h("button", { onClick: () => this.decrement() }, "Decrement")
);
}
}
And of course these are toy applications, which aren't even representative of real applications. I'm not sure I can go back to imperative UI toolkits like GWT, etc.The application size seems approximately accurate, but if you really care about bundle size you could use Preact (which supports most of React's features). The brings the bundle size down to about 10KB, which is also much smaller than his examples.
Load time is also unfair due to lack of bundling.