If you don't like the "boilerplate" of a single class definition, use a functional component, which is just a function that returns JSX, that is also a component. It could literally not be more straightforward.

Or could you not hear me over the sound of that axe you're grinding? :)

*stateless components

JSX is not a template language, it is just syntax sugar: see it as a different way to write javascript: https://facebook.github.io/react/docs/jsx-in-depth.html you can't say the same about templates.

It really isn't a template language as the term is commonly used. If you feel so strongly about the weird syntax you can write equivalent code in javascript syntax instead.

  return React.createElement(
    button,
    { className: "square", onClick: () => this.setState({value: 'X'}) },
    this.state.value
  );

If you think your code is written in a template language, then the code I just wrote must also be written in a template language (with different syntax).

That's not a good thing.

I want to write this, and have it actually be HTML:

    <div>
        <div>
        </div>
    <div>

I like HTML.

Though I personally can tolerate JSX, maybe you like SGML templating [1] which uses native markup mechanisms such as entity references for fully HTML-aware and injection-free templating.

[1]: http://sgmljs.net/docs/templating.html

Disclaimer: my project, and SGML is most certainly not a "lightweight template engine" by any measure

Same here! Try VueJS. Especially Vue Components as they wrap up HTML template and JS code. Vue creates the render function from the HTML template, so no mucking around with jsx. Personally I want to think in "HTML" with JS secondary.

I love VueJS.

> Most use the html+javascript language which is compiled and then spits out JavaScript and html. This is pretty much identical to PHP - which is a preprocessor template language.

No, it spits out javascript (the exact same javascript that I wrote), which returns shadow DOM trees (which are javascript objects), which the renderer looks at to modify the actual DOM.

Also not sure what you mean by "looks like" javascript. It's clearly javascript - just a function call with 4 arguments.

Template languages create strings. JSX creates hyperscript.

JSX by its nature statically checks for tag balance, etc. The non-JavaScript part of its syntax has actual semantics. In a template language the non-Turing-complete part of the syntax is just strings.

JSX is a perfectly good notation for describing how data maps to its presentation in a DOM tree.

if you want to build your UI with React you have to think about JSX as an easier way to write javascript. you can see it as a template language but it won't help you to code :)