私のルーティングReact.jsは実行されていません

Question

私はチュートリアルのdudに続いて、今問題を持っています ルーティングはうまくいかず、gulpを実行すると、ターミナルに 'gulp-eslint' ：これは私のファイル

/home/im/Project/react/psadmin/src/main.js 
    7:13 error Unexpected token = 

/home/im/Project/react/psadmin/src/components/homePage.js 
    6:13 error Unexpected token = 

/home/im/Project/react/psadmin/src/components/about/aboutPage.js 
    6:13 error Unexpected token = 

です：

"use strict" 

var gulp = require('gulp') 
var connect = require('gulp-connect') // Runs a local dev server 
var open = require('gulp-open') // Open a URL in a web browser 
var browserify = require('browserify') // Bundle JS 
var reactify = require('reactify') // Transform React JSX to JS 
var source = require('vinyl-source-stream') // Use convertional text streams with Gulp 
var concat = require('gulp-concat') // Concatenates files 
var lint = require('gulp-eslin') // Lint JS files, including JSX 

var config = { 
    port: 9005, 
    devBaseUrl: 'http://localhost', 
    paths: { 
     html: './src/*.html', 
     js: './src/**/*.js', 
     css: [ 
      'node_modules/bootstrap/dist/css/bootstrap.min.css', 
      'node_modules/bootstrap/dist/css/bootstrap-theme.min.css' 
     ], 
     dist: './dist', 
     mainJs: './src/main.js' 
    } 
} 

// Start a local development server 
gulp.task('connect',() => { 
    connect.server({ 
     root: ['dist'], 
     port: config.port, 
     base: config.devBaseUrl, 
     livereload: true 

    }) 
}) 

gulp.task('open', ['connect'],() => { 
    gulp.src('dist/index.html') 
     .pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/'})) 
}) 

gulp.task('html',() => { 
    gulp.src(config.paths.html) 
     .pipe(gulp.dest(config.paths.dist)) 
     .pipe(connect.reload()) 
}) 

gulp.task('js',() => { 
    browserify(config.paths.mainJs) 
     .transform(reactify) 
     .bundle() 
     .on('error', console.error.bind(console)) 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest(config.paths.dist + '/scripts')) 
     .pipe(connect.reload()) 
}) 

gulp.task('css',() => { 
    gulp.src(config.paths.css) 
     .pipe(concat('bundle.css')) 
     .pipe(gulp.dest(config.paths.dist + '/css')) 
}) 

gulp.task('lint',() => { 
    return gulp.src(config.paths.js) 
     .pipe(lint({config: 'eslint.config.json'})) 
     .pipe(lint.format()) 
}) 

gulp.task('watch',() => { 
    gulp.watch(config.paths.html, ['html']) 
    gulp.watch(config.paths.js, ['js', 'lint']) 
    gulp.watch(config.paths.css, ['css']) 
}) 

gulp.task('default', ['html', 'js', 'lint', 'css', 'open', 'watch']) 

main.js

$ = jQuery = require('jquery') 
var React = require('react') 
var Home = require('./components/homePage') 
var About = require('./components/about/aboutPage') 

var App = React.createClass({ 
    render:() => { 
     var Child 

     switch(this.props.route) { 
      case 'about': 
       Child = About 
       break 
      default: 
       Child = Home 
     } 

     return (
      <div> 
       <Child /> 
      </div> 
     ) 
    } 
}) 

function render() { 
    var route = window.location.hash.substr(1) 
    React.render(<App route={route} />, document.getElementById('app')) 
} 
window.addEventListener('hashchange', render) 
render() 

homePage.js

"use strict" 

var React = require('react') 

var Home = React.createClass({ 
    render:() => { 
     return (
      <div className="jumbotron"> 
       <h1>Pluralsight Administration</h1> 
       <p>React, React Router, and Flux for ultra-responsive web apps.</p> 
      </div> 
     ) 
    } 
}) 

module.exports = Home 

aboutPage.js

"use strict" 

var React = require('react') 

var About = React.createClass({ 
    render:() => { 
     return (
      <div> 
       <h1>About</h1> 
       <p> 
        This application uses the following technologies: 
        <ul> 
         <li>React</li> 
         <li>React Router</li> 
         <li>Flux</li> 
         <li>Node</li> 
         <li>Gulp</li> 
         <li>Browserify</li> 
         <li>Bootstrap</li> 
        </lu> 
      </div> 
     ) 
    } 
}) 

module.exports = About 

eslint.conf.json

{ "ルート"：真、 "ecmaFeatures"：{ "JSX"：真 }、 "env"：{ "browser"：true、 "node"：true、 "jquery"：true }、 "rules"：{ "引用符"：0、 "無トレーリングスペース"：0、 "EOL-最後の"：0、 "ノー・未使用-VARS"：0、 "ノーアンダースコア-ブラブラ"：0、 "警告なし"：0、 "無孤立電子ブロック"：0 }、 "グローバル"：{ "jQueryの"：真、 "$"：に忠実 } }

リンク私が停止している完全なアプリケーションはgitにあります here

現在のチュートリアルへのリンクhere

Answer 1

あなたの実装にはほとんどオフになっています

React Createクラスを使用すると、次

var About = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <h1>About</h1> 
       <p> 
        This application uses the following technologies: 
        <ul> 
         <li>React</li> 
         <li>React Router</li> 
         <li>Flux</li> 
         <li>Node</li> 
         <li>Gulp</li> 
         <li>Browserify</li> 
         <li>Bootstrap</li> 
        </lu> 
      </div> 
     ) 
    } 
}) 

それとも、

class About extends React.Component { 
     render() { 
      return (
       <div> 
        <h1>About</h1> 
        <p> 
         This application uses the following technologies: 
         <ul> 
          <li>React</li> 
          <li>React Router</li> 
          <li>Flux</li> 
          <li>Node</li> 
          <li>Gulp</li> 
          <li>Browserify</li> 
          <li>Bootstrap</li> 
         </lu> 
       </div> 
      ) 
     } 
    } 

それとも、

const About =() => (
       <div> 
        <h1>About</h1> 
        <p> 
         This application uses the following technologies: 
         <ul> 
          <li>React</li> 
          <li>React Router</li> 
          <li>Flux</li> 
          <li>Node</li> 
          <li>Gulp</li> 
          <li>Browserify</li> 
          <li>Bootstrap</li> 
         </lu> 
       </div> 
      ) 

Answer 2

あなたの構文が間違っています。

置き換える

render() { return (...) } 

によって、または場合render:() => { ES6サポートしていないプロジェクト：

render: function(){return ...} をし、それが問題を修正するなら、私に教え