Javascript 每当我在react中保存app.js文件时，总会出现错误和意外标记 类应用程序扩展组件{ render（）{ 返回( const jwt=require（'jsonwebtoken'） app.use（express.json（）） 常数员额=[{ 用户名：“Cr3”， 标题：“帖子1” }] const express=require（'express'） const app=express（） app.get（'/posts'，（req，res）=>{ res.json（帖子） }) app.post（'/login'，（req，res）=>{ //使用令牌对用户进行身份验证 const username=req.body.username const accessToken=jwt.sign（用户、进程、环境访问\u令牌\u秘密） res.json（{accessToken:accessToken}）//创建访问令牌 const user={name:username}//将名称标记为用户名 }) app.listen（3000） < div id=“colorlib页面”> < div id=“容器包装”> < 边栏>< div id=“colorlib main”> < 简介>< 关于>< 功能> < /div>< /div> ); } } 导出默认应用程序；

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

好的，这里有几个问题

首先，你在回归过程中有很多东西不能去那里。

您希望您的应用程序类改为如下所示：

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;

类应用程序扩展组件{
render（）{
返回(
<
div id=“colorlib页面”>
<
div id=“容器包装”>
<
边栏><
div id=“colorlib main”>
<
简介><
关于><
功能>
<
/div><
/div>
);
}
}

其次，你把前端和后端的东西混合在一起。React是一个前端库，它在浏览器中运行以帮助呈现页面。express是一个后端库，为客户提供您所需的一切服务。我不太确定您想让这段代码做什么，但实际上您不需要任何花哨的express后端来服务react代码，它可以使用文件托管服务器（如apache）来服务。（当然有一些方法可以进行服务器端渲染，并使用express返回前端数据，但不是这样）

---

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

谢谢！，不过还有一些问题，这是我第一次使用react，所以我不知道为什么自动保存这些东西会给我带来这些问题，我希望express和node充当后端。我的问题是，我能在不使用app.js的情况下做一个后端吗？是的，事实上，我建议让你的后端完全独立于react。您的后端可以只提供某些端点，如/login或/post，而不知道如何使用它们，您的react前端将根据需要调用它们。因此，您的后端将与您的react app.js没有关联。此外，如果您刚刚开始，我建议您看看create react app，以帮助启动您的项目。它将整合一个前端文件夹结构，该结构已经开始工作，并且易于开发。你可以从那里定制它。

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