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

Posted 2023-03-10

【中文标题】每当我在 react 中保存 app.js 文件时，总是会出现错误并且出现意外令牌

【英文标题】：Whenever I save app.js files in react it errors always comes up and unexpected token

【发布时间】：2020-11-07 20:31:28

【问题描述】：

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 声明意外令牌。

【参考方案1】：

好的，这里有几个问题。

首先，你在返回途中有一堆东西不能去那里。

你会希望你的 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>
        );
    

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

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

【讨论】：

谢谢！不过只是一些问题，这是我第一次使用 react，所以我不知道为什么当自动保存这些东西给我所有这些问题时，我希望 express 和 node 充当后端。我的问题是我可以在不使用 app.js 的情况下做后端吗？

是的——事实上，我建议让你的后端完全独立于反应。您的后端可以只提供某些端点，例如 /login 或 /posts，而不知道它们将如何使用，并且您的反应前端将根据需要调用它们。因此，您的后端将与您的 react app.js 没有关联。

另外，如果您刚刚开始，我建议您查看 create-react-app 以帮助您开始项目。它将组合一个已经可以工作且易于开发的前端文件夹结构。您可以从那里对其进行自定义。