反应-SyntaxError：意外令牌

Question

I'd like to use Express, pg and react for my project. 我想使用Express，pg并对我的项目做出反应。 But react give me some problems. 但是反应给我带来了一些问题。

Here's my project's dir 这是我项目的目录

index.js index.js

var express = require('express');
var server = express();
var path = require('path');
var app = require('./app/app.js');

server.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/public/index.html'));
});
server.listen(3000, function () {
    console.log("server is running on port 3000!");
});

var connexionDB = require('./db/connexionAvecPg');

app.js app.js

var react = require('react');
var {render} = require('react-dom');

var App = react.createClass({
    render: function () {
        return(
                <div>
                    <p>test</p>
                </div>
                );
    }
});

render(
        <App/>,
        document.getElementById('root')
        );

(Yes it's ES5, but i have my reason for using it instead of ES6-7) （是的是ES5，但是我有理由使用它而不是ES6-7）

Here's my bug 这是我的虫子

What's wrong with my code? 我的代码有什么问题？ did i forget something? 我忘记了什么吗？ Thx for your time. 谢谢你的时间。

---\\ EDIT /--- ---编辑/-

After Ming Soon's answer, I tried this: 在明顺回答之后，我尝试了以下操作：

app.js app.js

var React = require('react');
var ReactDOM = require('react-dom');

class App extends React.component{
    render() {
        return React.createElement('div', null, 'Test');
    }
};

ReactDOM.render(
        React.createElement(App, null),
        document.getElementById('root')
        );

But i have this: 但是我有这个：

/home/josue/im-expressandpg/app/app.js:14
class App extends React.component{
                       ^

TypeError: Class extends value undefined is not a constructor or null

---\\ EDIT 2 /--- ---编辑2 / ---

Thx to PSo i saw my mistake. 谢谢PSo我看到了我的错误。 I changed this: 我改变了这个：

class App extends React.component{

To this: 对此：

class App extends React.Component{

When i exec: 当我执行时：

/home/josue/im-expressandpg/app/app.js:17
        document.getElementById('root')
        ^

ReferenceError: document is not defined

If i add this: 如果我添加此：

var document = require('./../public/index.html');

I get: 我得到：

/home/josue/im-expressandpg/public/index.html:1
(function (exports, require, module, __filename, __dirname) { <!doctype html>
                                                              ^
SyntaxError: Unexpected token <

Answer 1

To use the JSX syntax, you have to transpile the code. 要使用JSX语法，您必须转换代码。 Babel can be used as a transpiler. Babel可用作翻译机。 If you don't want to use any transpiler, then you should use react.createElement() function. 如果您不想使用任何编译器，则应使用react.createElement()函数。

Answer 2

Remove the lower part of the code, that's duplicate of render function. 删除代码的下部，即渲染功能的重复部分。 And remember to export it for later use. 并记得将其导出以供以后使用。

var React = require('react');
var ReactDOM = require('react-dom');

class App extends React.Component{
    render() {
        return React.createElement('div', null, 'Test');
    }
};

export default App;

反应-SyntaxError：意外令牌

问题描述

2 个解决方案

解决方案1
1 2017-02-21 09:15:52

解决方案2
0 2017-02-21 10:22:17

反应-SyntaxError：意外令牌

问题描述

2 个解决方案

解决方案1 1 2017-02-21 09:15:52

解决方案2 0 2017-02-21 10:22:17

解决方案1
1 2017-02-21 09:15:52

解决方案2
0 2017-02-21 10:22:17