title: dom is not defined error after transforming jsx to js
body: <p>I created a jsx file as below</p>
  
  <pre><code>  /** @jsx dom */
  (function(){
  'use strict';
  
  define([
          'jquery',
          'react',
          'react-dom'
      ],
  
      function($, React, ReactDOM){
  
          var AppView = React.createClass({
              render: function() {
                  return &lt;div&gt;Hello World&lt;/div&gt;;
              }
          });
  
          ReactDOM.render(&lt;AppView /&gt;, document.getElementById('dsl-application'));
  
      });
  })();
  </code></pre>
  
  <p>And transformed the jsx to js using below command</p>
  
  <pre><code>babel --watch src --out-dir bundle --preset react
  </code></pre>
  
  <p>And the out put file is like below</p>
  
  <pre><code>(function () {
  'use strict';
  
  define(['jquery', 'react', 'react-dom'], function ($, React, ReactDOM) {
  
      var AppView = React.createClass({
          displayName: 'AppView',
  
          render: function () {
              return dom(
                  'div',
                  null,
                  'Hello World'
              );
          }
      });
  
  
      ReactDOM.render(dom(AppView, null), document.getElementById('dsl-application'));
  });
  })();
  </code></pre>
  
  <p>The problem is I got Uncaught ReferenceError: dom is not defined when I run the js file in browser. dom is added after transformation. Any clue how to fix this?</p>