In case you don't know (and I also didn't until recently), those namings come from the HTML DOM Javascript API, and not from React. So having that naming in React+JSX is more a consequence of operating on that abstraction level, than a quirky decision of the React developers.

for and class are reserved statements, hence htmlFor and className are the official api names, in other words they belong to the actual web-api spec, there's nothing arbitrary about it:

https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...

https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEl...

If you really dislike it, you can still use class and for: https://github.com/insin/babel-plugin-react-html-attrs

> or I would be able to write a simple if-else statement

{} evaluates to a ternary. You can use if, according to the spec that's what do expressions are there for.

    do {
        if (condition) <div>yes</div>
        else <h>nope</h>
    }

    condition 
        ? <div>yes</div> 
        : <h>nope</h>

These two things are explained in a single sentence, every tutorial eases you into it, the first thing that comes up once JSX is mentioned.

    const { for, class } = this.props

    const { for: forHtml, class: className } = this.props