単純な反応モジュールをes6クラスに変換した後、反応モジュールをクラスエラー

Question

に変換します。私はいくつかのガルプ解析エラーを持っています。

var React = require('react'); 
    // import React from 'react'; 
    class UdpComp extends React.Component { 

     constructor (props){ 
     super(props); 
     this.state = { udpinput: props.udpinput }; 
     }, 
     render: function() { 
     return(
      <div className="udpText"> 
       <h2>UDP-INPUT: {this.state.udpinput}</h2> 
      </div> 
     ) // return 
     } // render 
    })// UdpComp 

    export default UdpComp; 

OK、私のgulpfile.babel.jsは次のようになります。

var gulp = require('gulp'), 
    browserify = require('gulp-browserify'), 
    concatCss = require('gulp-concat-css'), 
    sass = require('gulp-sass'), 
    run = require('gulp-run'); 

var src = './process', 
    app = './app'; 

var sassOptions = { 
    errLogToConsole: true, 
    outputStyle: 'expanded' 
}; // https://www.sitepoint.com/simple-gulpy-workflow-sass/ 


gulp.task('js', function() { 
    return gulp.src(src + '/js/apprender.js') 
    .pipe(browserify({ 
     transform: 'reactify', 
     extensions: 'browserify-css', 
     debug: true 
    })) 
    .on('error', function (err) { 
     console.error('Error!', err.message); 
    }) 
    .pipe(gulp.dest(app + '/js')); 
}); 

gulp.task('html', function() { 
    gulp.src(src + '/**/*.html'); 
}); 

gulp.task('css', function() { 
    gulp.src(src + '/css/*.css') 
    .pipe(sass(sassOptions).on('error', sass.logError)) 
    .pipe(concatCss('app.css')) 
    .pipe(gulp.dest(app + '/css')); 
}); 

gulp.task('fonts', function() { 
    gulp.src('node_modules/bootstrap/dist/fonts/**/*') 
    .pipe(gulp.dest(app + '/fonts')); 
}); 

gulp.task('watch', ['serve'], function() { 
    gulp.watch(src + '/js/**/*', ['js']); 
    gulp.watch(src + '/css/**/*.css', ['css']); 
    gulp.watch([ app + '/**/*.html'], ['html']); 
}); 

gulp.task('serve', ['html', 'js', 'css'], function() { 
    run('electron app/main.js').exec(); 
}); 

gulp.task('default', ['watch', 'fonts', 'serve']); 

呼び出し一気は私が

\process\js\UdpCompReact.js: Parse Error: Line 14: Unexpected identifier error

理由を取得し、私はES6コードを解析することができますか？

Answer 1

14行目は見えませんが、コンストラクタの直後にカンマがあると思います。 ES5の「クラス」とは対照的に、ES6クラスはメソッド間でカンマを必要としません。それを取り除くと正常に動作するはずです（または少なくとも14行目を取得してください）

Answer 2

これをES5に変換した後、パイプをgulpタスクにパイプする必要があります。私はbabelを使用していて、gulp-babel npmパッケージがあります。

Answer 3

古いバージョンを使用しているときに、私のコードを変更しました。 インポート 'react'からの反作用はエラーをスローします。

// var React = require('react'); 
import React from 'react'; 

class UdpComp extends React.Component { 

    constructor (props){ 
    super(props); 
    this.state = { udpinput: this.props.udpinput }; 
    } 


    render() { 
    return(
     <div className="udpText"> 
      <h2>UDP-INPUT: {this.state.udpinput}</h2> 
     </div> 
    ) // return 
    } // render 



}; // UdpComp 

module.exports = UdpComp; 
// export default UdpComp;