откровенно 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