每当我在 React 中保存 app.js 文件时，总是会出现错误和意外的令牌

Question

class App extends Component {
    render() {
        return (

            const jwt = require('jsonwebtoken')

            app.use(express.json())

            const posts = [{
                username: 'Cr3',
                title: 'Post 1'
            }]

            const express = require('express')
            const app = express()

            app.get('/posts', (req, res) => {
                res.json(posts)
            })

            app.post('/login', (req, res) => {
                //Auth the user using tokens

                const username = req.body.username

                const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET)
                res.json({ accessToken: accessToken }) //Create access token

                const user = { name: username } //label name as username

            })

            app.listen(3000)

            <
            div id = "colorlib-page" >
            <
            div id = "container-wrap" >
            <
            Sidebar > < /Sidebar> <
            div id = "colorlib-main" >
            <
            Introduction > < /Introduction> <
            About > < /About> <
            Functions > < /Functions>

            <
            /div> < /
            div > <
            /div>


        );
    }
}



export default App;

这是代码，我不知道为什么每次保存它都会发疯并显示一堆错误，我试图关闭自动格式化以及将 app.js 更改为 app.jsx 这让情况变得更糟了一段时间，很多时候当我重新运行我的 node.js 服务器时，错误似乎一直指向 const jwt 声明意外令牌。

Answer 1

好的，这里有几个问题。

首先，你的return中间有一堆东西放不下。

您希望您的应用 class 看起来像这样：

class App extends Component {
    render() {
        return (
            <
            div id = "colorlib-page" >
            <
            div id = "container-wrap" >
            <
            Sidebar > < /Sidebar> <
            div id = "colorlib-main" >
            <
            Introduction > < /Introduction> <
            About > < /About> <
            Functions > < /Functions>

            <
            /div> < /
            div > <
            /div>
        );
    }
}

其次，您将前端和后端的东西混合在一起。 React 是一个前端库，它运行在浏览器中以帮助渲染页面。 express 是一个后端库，可以根据您的需要为客户提供服务。我不确定你试图让这段代码做什么，但你实际上不需要任何花哨的 express 后端来服务反应代码，它可以使用像 apache 这样的文件托管服务器来服务。（当然有办法做服务器端渲染，return 前端数据使用 express，但不是这样的）。

我建议将所有 express 内容放在一个后端项目中，而将所有 react 内容放在一个单独的前端项目中。如果前端需要与之通信，它可以对您的运行后端进行 REST 调用。

每当我在 React 中保存 app.js 文件时，总是会出现错误和意外的令牌

Whenever I save app.js files in react it errors always comes up and unexpected token

javascript

express

reactjs

visual-studio-code

jwt-auth