title: How can i bundle react app that needs jquery ajax call
body: <p>I am developing a react app using ecma6 standard. now i am creating a bundle to be used in browser using the gulpfile.js below :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var gulp = require('gulp');
  var browserify = require('browserify');
  var babelify = require('babelify');
  var source = require('vinyl-source-stream');
  var glob = require('glob');
  
  gulp.task('build', function () {
  
    browserify({
      entries: 'index.jsx',
      extensions: ['.jsx'],
      debug: true
    })
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('dist'));
  });
   
  gulp.task('default', ['build']);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I have one of the react component that uses jQuery ajax calls, something like this :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> componentDidMount() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can i modify my gulp file so that the jquery codes can be included in the react code?</p>