title: React.render error
body: <p>I just started playing with React and did not understand rendering ReactElement.</p>
  
  <p>Here is my component in Compo.jsx</p>
  
  <pre><code>(function(React) {
    var AnotherComponent = require('./another.jsx');
  
    module.exports = React.createClass({
      render: function() {
        return (
          &lt;div className="container"&gt;
            &lt;div className="page-header"&gt;
              &lt;h1&gt;Header&lt;/h1&gt;
            &lt;/div&gt;
  
            &lt;AnotherComponent data={this.props.ddd} /&gt;
          &lt;/div&gt;
        );
      }
    });
  
  })(React);
  </code></pre>
  
  <p>In the main app.js</p>
  
  <pre><code>(function(React, _) {
    var Compo = require('Compo.jsx'),
        data = [];
  
    var render = function() {
      React.render(
        React.createElement(Compo, { ddd: data }), 
        //&lt;Compo ddd={ data } /&gt;,
        document.body
      );
    };
  
    render();
  
  }(React, _));
  </code></pre>
  
  <p>If my understanding is correct, both</p>
  
  <pre><code>React.createElement(Compo, { ddd: data })
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;Compo ddd={ data } /&gt;
  </code></pre>
  
  <p>should return the same ReactElement, but the latter gives me compile error saying
  "<strong>Expected an identifier and instead saw '&lt;'.</strong>".</p>
  
  <p>What am I missing here?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>And my gulp file is</p>
  
  <pre><code>var gulp = require('gulp'),
      del = require('del'),
      run = require('gulp-run'),
      less = require('gulp-less'),
      cssmin = require('gulp-minify-css'),
      browserify = require('browserify'),
      uglify = require('gulp-uglify'),
      concat = require('gulp-concat'),
      jshint = require('gulp-jshint'),
      source = require('vinyl-source-stream'),
      buffer = require('vinyl-buffer'),
      reactify = require('reactify'),
      package = require('./package.json'),
      browserSync = require('browser-sync'),
      reload = browserSync.reload;
  
  gulp.task('clean', function(cb) {
    del(['dist/**'], cb);
  })
  
  .task('server', function() {
    browserSync({
      host: process.env.IP,
      port: process.env.PORT,
      server: {
       baseDir: './'
      }
    });
  })
  
  .task('less', function() {
    return gulp.src(package.paths.less)
    .pipe(less())
    .pipe(concat(package.dest.style))
    .pipe(gulp.dest(package.dest.dist));
  })
  .task('less:min', function() {
    return gulp.src(package.paths.less)
    .pipe(less())
    .pipe(concat(package.dest.style))
    .pipe(cssmin())
    .pipe(gulp.dest(package.dest.dist));
  })
  
  .task('lint', function() {
    return gulp.src(package.paths.js)
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
  })
  
  .task('js', function() {
    return browserify(package.paths.app)
    .transform(reactify)
    .bundle()
    .pipe(source(package.dest.app))
    .pipe(gulp.dest(package.dest.dist));
  })
  
  .task('serve', ['clean', 'lint', 'less', 'js', 'server'], function() {
    return gulp.watch([
      package.paths.js, package.paths.jsx, package.paths.html, package.paths.less
    ], [
     'lint', 'less', 'js', browserSync.reload
    ]);
  });
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "test",
    "version": "1",
    "devDependencies": {
      "gulp": "3.8.11",
      "gulp-run": "1.6.5",
      "gulp-less": "2.0.1",
      "gulp-concat": "2.4.3",
      "gulp-uglify": "1.0.2",
      "gulp-minify-css": "0.3.11",
      "gulp-jshint": "1.9.0",
      "browser-sync": "1.8.2",
      "browserify": "3.44.2",
      "vinyl-source-stream": "1.0.0",
      "vinyl-buffer": "1.0.0",
      "reactify": "0.17.1",
      "del": "1.1.1"
    },
    "paths": {
      "less": "assets/less/*.less",
      "js": "./app/**/*.js",
      "jsx": "./app/**/*.jsx",
      "app": "./app/app.js",
      "html": "*.html"
    },
    "dest": {
      "style": "style.css",
      "app": "app.js",
      "dist": "dist"
    }
  }
  </code></pre>