我的路由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， 「無未使用 - 瓦爾」：0， 「無下劃線吊着」：0， 「無警報」：0， 「無孤塊」：0 }， 「全局」：{ 「jQuery的」：真實， 「$」：真 } }

鏈接完整的應用程序，我停止在這裏對git here

鏈接到當前教程here

Answer 1

你是關閉您的實現有點

使用React創建類您需要請執行下列操作

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> 
     ) 
    } 
}) 

或者你可以使用ES6語法

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> 
      ) 
     } 
    } 

或者你可以使用ES6箭頭語法

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:() => { 通過

render() { return (...) } 

，或者如果您的項目不支持ES6：

render: function(){return ...} ，並告訴我，如果能解決問題