Gulp、Uncaught SyntaxError：予期せぬトークン<

私は "gulp"コマンドを実行すると反応がありますが、クロムに行くと何も表示されません。クロムコンソールはこう言っています：Gulp、Uncaught SyntaxError：予期せぬトークン<

"Uncaught SyntaxError: Unexpected token <" at my main.js:10 file

だと思います。

これは私のmain.jsファイルです：

var App = require('./components/App'); 
var React = require('react'); 
var ReactDOM = require('react-dom'); 
var AppAPI = require('./utils/appAPI.js'); 


AppAPI.getContacts(); 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);

そして、これはこれは私のindex.htmlファイル

<html> 
<head> 
    <title>ReactApp</title> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="app" class="container"></div> 

    <script src="js/jquery-1.12.0.min.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="js/main.js"></script> 
</body> 
</html>

アプリです私gulpfile.js

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var reactify = require('reactify'); // Converts jsx to js 
var source = require('vinyl-source-stream'); // Converts string to a stream 

gulp.task('browserify', function(){ 
    browserify('./src/js/main.js') 
     .transform('reactify') 
     .bundle() 
     .pipe(source('main.js')) 
     .pipe(gulp.dest('dist/js')); 
}); 

gulp.task('copy', function(){ 
    gulp.src('src/index.html') 
     .pipe(gulp.dest('dist')); 
    gulp.src('src/css/*.*') 
     .pipe(gulp.dest('dist/css')); 
    gulp.src('src/js/vendors/*.*') 
     .pipe(gulp.dest('dist/js')); 
}); 

gulp.task('default', ['browserify', 'copy'], function(){ 
    return gulp.watch('src/**/*.*', ['browserify', 'copy']); 
});

です。 jsは

var React = require('react'); 
var AppActions = require('../actions/AppActions'); 
var AppStore = require('../stores/AppStore'); 
var AddForm = require('./AddForm.js'); 

function getAppState(){ 
    return { 
     contacts: AppStore.getContacts() 
    } 
} 

var App = React.createClass({ 
    getInitialState: function(){ 
     return getAppState(); 
    }, 

    componentDidMount: function(){ 
     AppStore.addChangeListener(this._onChange); 
    }, 

    componentUnmount: function(){ 
     AppStore.removeChangeListener(this._onChange); 
    }, 

    render: function(){ 
     console.log(this.state.contacts); 
     return(
      <div> 
       <AddForm /> 
      </div> 
     ); 
    }, 

    // Update view state when change is received 
    _onChange: function(){ 
     this.setState(getAppState()); 
    } 
}); 

module.exports = App;

出典

2016-03-30 rjay

申し訳ありません.App.jsの添付を忘れました。 – rjay

@David Reactではインラインマークアップ（JSX）が可能です。ここの問題は明らかにGulpがそれを知らないことです。 – Pointy

これはReactのJSXです.Replifyプラグインがおそらくリムージングしようとしているものです。 – Andy