Question

我想使用Express，pg并为我的项目做出反应。但反应给我带来了一些问题。

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

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')
        );

（是的，它是ES5，但我有理由使用它代替ES6-7）

Here's my bug

我的代码出了什么问题？我忘记了什么吗？感谢你的时间。

--- \ EDIT / ---

在Ming Soon的回答之后，我尝试了这个：

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')
        );

但我有这个：

/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 / ---

对我来说，我看到了我的错误。我改变了这个：

class App extends React.component{

对此：

class App extends React.Component{

当我执行时：

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

ReferenceError: document is not defined

如果我加上这个：

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

我明白了：

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

Answer 1

要使用JSX语法，您必须转换代码。 Babel可以用作转换器。如果您不想使用任何转换器，那么您应该使用react.createElement()函数。

Answer 2

删除代码的下半部分，这是渲染函数的副本。并记得将其导出以供日后使用。

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

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

export default App;

React - Syntaxerror：意外令牌＆lt;

2 个答案: