Javascript 跑步时吞下一大口水就可以扔出球来；//未处理'；错误'；事件

main.js

var React=require（'React'）；
var-App=require（'./components/App.js'）；
反应(
,
document.getElementById（'容器'）
);

app.js

var React=require（'React'）；
var App=React.createClass({
render:function（）{
返回(
你好

);
}
});
module.exports=App；

---

gulpfile.js中有任何问题吗？因为如果我在main.js文件中编写react组件代码，它可以正常工作。

您忘记了将JSX转换为Javascript

这是我的gulp构建任务——它使用browserify和reactify转换和绑定我的组件，然后缩小它们，最后将它们放入我的应用程序读取的目录中

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');

gulp.task('build', function () {
    browserify({
        entries : ['./js_modules/main.js'],
        transform : [reactify],
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(streamify(uglify('bundle.js')))
    .pipe(gulp.dest('src/main/webapp/js/bundle.js'));
});

---

尝试在app.js第9行的语法错误中的HTML周围放置一个字符串。我想你没有JSX编译器？@JSess:这是JSX，不是HTML。现在我清楚我的问题是什么了。实际上，我的main.js的jsx代码正在被编译，但app.js的jsx没有，因为当我用普通javascript替换app.js的jsx代码时，它运行得非常好。/**@jsx React.DOM*/我只是在app.js和main.js文件的顶部添加了这个代码，它最终工作了。有人能告诉我为什么我需要在每个文件的顶部添加这些pragma吗？？

var React = require('react'); 
  var App = React.createClass({
render: function(){
    return (
        <p>Hello</p>
    );
}
});
module.exports = App;

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');

gulp.task('build', function () {
    browserify({
        entries : ['./js_modules/main.js'],
        transform : [reactify],
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(streamify(uglify('bundle.js')))
    .pipe(gulp.dest('src/main/webapp/js/bundle.js'));
});