Как сделать правильное взаимодействие jsx и React.js?

Question

[LB777]

Начал изучать React , где активно используется javascript в фомате jsx. Для его трансформации стал использовать гальповский пакет gulp-jsx , который преобразует формат jsx в понимаемый js.
В итоге строка

<h1 onClick={this.goodbye}>{this.state.message}</h1>

преобразуется в

React.DOM('h1', {onClick: this.goodbye}, [this.state.message])

которую не хочет понимать react.js
Из это вопрос, что я не так делаю и как заставить дружить react.js и jsx файлы?
P.S.: строка формата

React.DOM.h1({onClick:this.goodbye}, this.state.message));

отрабатывает нормально.
Данный код брал из примера статьи

Answer 1

[LB777]

вместо gulp-jsx надо было использовать gulp-react

Answer 2

[Руслан Абдуллаев]

А как и где вы потом подключаете скомпилированный из jsx шаблон?
По идее, если вы не используете реалтаймовый JSX Transformer, а используете прекомпиляцию на сервере, при помощи react-tools, то достаточно только подключить скомпилируемый файл в конце body

....
      <script src="build/from_jsx.js"></script>
  </body>
</html>

Т.е., если вы не используете jsx в чистом виде, в сочетании с JSXTransformer

<script type="text/jsx">
      ...
      render: function() {
        return (
          <h1 onClick={this.goodbye}>{this.state.message}</h1>
        );
      }
      ...
    </script>

то необходимо подключать уже скомпилированный js.