React Browserify Babel - 予期しないトークンエラー

Question

私はコマンドラインからbrowserifyを使って依存関係をバンドルしようとしています。コマンドはエラーなしで完了することができますが、ページが読み込まれると '予期しないトークン<'というエラーが発生します。

ここで私が使用しているコマンドです：

browserify -t [ babelify --presets [ es2015 react ] ] main.js -o bundle.js 

main.js

'use strict'; 
var React = require('react'); 
var ReactDom = require('react-dom'); 
var $ = require('jQuery'); 

JSX：ArneHugoへ

'use strict'; 

var React = require('react'); 
var ReactDom = require('react-dom'); 
var $ = require('jQuery'); 

class SideNav extends React.Component{ 
constructor(props) { 
    super(props); 
    this.state = {items: new Array()}; 

} 
componentDidMount() { 
    $.ajax({ 
     url:"/json/sidenav.json", 
     dataType: "json", 
     cache: false, 
     success: function(data) { 
      this.setState({items: data}); 
     }.bind(this) 
    }); 
} 
render() { 
    var items = []; 
    this.state.items.forEach((item) => { 
     items.push(<NavItem title={item.title} link={item.link} active={item.active} />); 
    }); 
    return (
     <ul className="nav nav-sidebar"> 
     {items} 
     </ul> 
    ); 
    } 

} 
class NavItem extends React.Component{ 
    render() { 
     var clazz = this.props.active ? 'active' : ''; 
     var link = this.props.active ? 
       <a href="#">{this.props.title} <span className="sr-only">(current)</span></a> : 
       <a href={this.props.link}>{this.props.title}</a> 
     return (
      <li className={clazz}>{link}</li> 
     ); 
    } 
} 

ReactDOM.render(
    <SideNav/>, 
    document.getElementById('sidenav') 
); 

Answer 1

巨大なありがとう！彼はJSXを私の.hmtlに含めていることに気がつきました。これは、それが蒸散されていないことを意味していました。それをmain.jsに移動して、タイプミスを修正して問題を修正しました。