How to make proper interaction between jsx and React.js?

Question

React

I started to study React, where javascript is actively used in the jsx format. For its transformation, Galpov's gulp-jsx package began to be used, which converts the jsx format into understandable js.
As a result, the line

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

converted to

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

which react.js does not want to understand
From this question, what am I doing wrong and how to make react.js and jsx files be friends?
PS: format string

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

works fine.
This code was taken from an example article

Answer 1

gulp-react should have been used instead of gulp-jsx

Answer 2

And how and where do you then connect the template compiled from jsx?
In theory, if you do not use the real-time JSX Transformer, but use precompilation on the server using react-tools, then you just need to include the compiled file at the end of body

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

That is, if you are not using jsx in its purest form, in combination with JSXTransformer

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

then you need to include the already compiled js.