js стиль render для react.js
 

откровенно render() в стиле псевдо тегов меня раздражает. Хотя и понимаю что "блондинкам" проше его принять.
1) Атрибуты вовсе не атрибуты, но это думаю со временем всеже станет атрибутами также как к этому пришли с элементами svg.
2) Компиляция. решает очень маленькую задачу - только внешний вид. Имхо столь малое не повод коверкать спецификацию синтексиса js.
3) Ломает разметку. Пропушу проблему подсветки, но то как выглядит код если писать все атрибуты не в одну строку хочесться глаза вырвать. Чуть болеше чем подстановка переменных преврашается в кашу.

Я предпочитаю js стиль кода в js. Поначалу React позволял писать обычным js не сильно сложнее чем тегами. Но когда компоненты стали классами, а не фабриками это стало невозможно.
Для того чтоб и дальше писать js на js написал инструмен https://www.npmjs.com/package/jso-to-react . Элементы представлены как массив [свойства, child, child, ...] . Простая конструкция дает очень компактный результат шаблона, а также гибкость в его форматировании.
В комбинации с https://www.npmjs.org/package/bem-name шаблон становиться еще проще, но это уже опционально.

Исходники и документация с примером тут https://github.com/vflash/jso-to-react

В чем проблема перейти на нормальную IDE?
Использую phpstorm.
Там jsx поддерживается на ура

мой редактор меня устраивает. параметр выбора редактора это не только посветка кода.

<cmps.PaymentPage
    tabs={this.props.tabs}
    step={this.props.step}
    productType={this.props.productType}
    boxOnBack={this.props.goBack}
    boxTitle={null}
>
  ...
</cmps.PaymentPage>

[
  {
      class: cmps.PaymentPage,
      tabs: this.props.tabs,
      step: this.props.step,

      productType: this.props.productType,
      boxOnBack: this.props.goBack,
      boxTitle: null,
  }
  , ...
]

"на вкус и цвет" каждому свое но по мне js в js получается чише

Ну вы же сказали, что не поддерживает редактор, и это как видимо - один из ваших доводов против jsx.
Поэтому я предложил довод в ответ :)

Но в примере вы все же имхо, недоговариваете :)

http://jamesknelson.com/learn-raw-re...x-es6-webpack/

Вот это ближе к правде

React.createElement('li', {className: 'Contact'},
        React.createElement('h2', {className: 'Contact-name'}, this.props.name)
      )

vs

<li className="Contract">
	<h2 className="Contract-name">{ this.props.name }</h2>
</li>

Тут вы правы.

для IDE за $ 199.00 наверно позорно не прикрутить подсветку.

Про ломает разметку это я про то как выглядит код. Теги обычно не принято разбивать на несколько строк, и выглядит это не так эффектно как в одну строку. Найдите гденибуть хоть в одной документации чтобы использовали переносы строк.
И когда в шаблоне чуть больше логике чем в примерах, то от разметки тега остаются рожки да ножки. Вот и получается что или живи с этой кашей или вычисления выносишь по максимум за пределы разметки. Но тогда теряем контекст.

React.createElement('div', {},

никто так руками писать разметку не станет.
для сравнения как это можно записать в "jso"

['+li.Contract'
    , ['+h2.Contract-name', this.props.name]
]

Ваша позиция знакома и ясна.
Ок :)