Node.js 语法错误：意外标记<；反应渲染

我在Express中设置了一个路由器，如下所示：

var r = require('rethinkdb');
var quotes = require('../model/quotes');
var user = require('../model/users');
var auth = require('../lib/auth');
var React=require('react');
var ReactDOMServer=require('react-dom/server')
var Homepage=React.createFactory(require('../component/index.js').Homepage);

module.exports = function(app, passport) {

    app.get('/', function(req, res) {
        if (req.user) {
            res.redirect('/dashboard');
        } else {
            var HomepageHTML=ReactDOMServer.renderToString(Homepage({}));
            res.render('index',{homepage:HomepageHTML});
        }
    });

}

将作为响应发送的

索引

页面，以swig模板引擎编写

{% extends 'main.html' %}

{% block title %}Homepage{% endblock %}

{% block body %}
    {{homepage}}
{% endblock %}

这是用React编写的

主页

组件：

var React=require('react');

var Homepage=React.createClass({
    render:function(){
        return (
            <div className="homepage-content">
                <div className="left">
                    <img src={{'../public/images/img_landing_page_mac.png'}}/>
                </div>
                <div className="right">
                    <h2 style={{fontSize:'33px',letterSpacing:'5px'}}>
                        Organize <br/>Modern Knowledge<br/> for Mankind
                    </h2>
                    <p style={{fontSize:'20px',marginTop:'35px',letterSpacing:'4px'}}>
                        Consume, Collect and Revisit <br/>Knowledge at Your Fingertips
                    </p>
                    <a href="#"
                    style={{marginTop:'80px',display:'inline-block',marginLeft:'-17px'}}>
                        <img src={{'../public/images/btn_get_chrome.png'}}/>
                    </a>
                </div>
            </div>
        );
    }
});

exports.Homepage=Homepage;

var React=require（'React'）；
var Homepage=React.createClass({
render:function（）{
返回(
为人类组织现代知识

用指尖消费、收集和重温
知识

);
}
});
exports.Homepage=主页；

当我启动服务器时，我遇到了这个错误，并徒劳地试图解决它

/home/kuro/Workspace/corate/component/index.js:30
        return (<div></div>);
                ^

SyntaxError: Unexpected token <
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/home/kuro/Workspace/corate/routes/index.js:7:34)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/home/kuro/Workspace/corate/app.js:43:1)
    at Module._compile (module.js:413:34)
[nodemon] app crashed - waiting for file changes before starting...

/home/kuro/Workspace/corate/component/index.js:30
返回（）；
^
SyntaxError:意外标记<
在exports.runInThisContext（vm.js:53:16）
在模块处编译（Module.js:387:25）
在Object.Module._extensions..js（Module.js:422:10）
在Module.load（Module.js:357:32）
在Function.Module.\u加载（Module.js:314:12）
at Module.require（Module.js:367:17）
根据需要（内部/module.js:16:19）
反对。（/home/kuro/Workspace/corate/routes/index.js:7:34）
在模块处编译（Module.js:413:34）
在Object.Module._extensions..js（Module.js:422:10）
在Module.load（Module.js:357:32）
在Function.Module.\u加载（Module.js:314:12）
at Module.require（Module.js:367:17）
根据需要（内部/module.js:16:19）
反对。（/home/kuro/Workspace/corate/app.js:43:1）
在模块处编译（Module.js:413:34）
[nodemon]应用程序崩溃-正在等待文件更改，然后再启动。。。

您是在学习教程还是什么？你需要将你的JSX转换成javascript，否则它会在第一个

@azium上出现语法错误。你的意思是我需要使用webpack或browserify捆绑我的React代码，然后在html中包含捆绑的输出吗？@azium你的评论提醒了我。谢谢，你不需要浏览或网页，尽管这些都很有帮助。您需要的是将JSX代码转换为JavaScript，这需要Babel或其他转换器（但通常是Babel）。是的：您仍然没有使用transpiler，例如，或允许节点加载.JSX代码并将其自动转换为js的