如何在 Node.js/html 中使用 React [关闭]答案

【问题标题】：How to use React With Node.js/html [closed]如何在 Node.js/html 中使用 React [关闭]
【发布时间】：2022-01-24 08:45:12
【问题描述】：

我尝试了多种使用谷歌的方法，查看了官方网站但没有成功。只有当我在 node.js 的 HTML 文件中这样做时，该代码才有效

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="root">

    </div>

    <script>

        function Hello() {
            return React.createElement('h1', null, "Hello world")
        }

        ReactDOM.render(Hello(), document.getElementById('root'));    </script>
</body>

</html>

如果我在代码中进行此更改，我希望它能够工作

<script>

    function Hello() {
        return <h1>Hello World</h1>
    }

    ReactDOM.render(<Hello />, document.getElementById('root'));    </script>

我如何从我的 MongoDB 数据库或 app.js 中的数组传输数据以响应 useState？

我的 app.js 文件：

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


app.get('/', (req,res) => {
    res.sendFile(__dirname + '/index.html')
})

app.listen(3000)

【问题讨论】：

标签： javascript html node.js reactjs express

【解决方案1】：

Node.js 在那里完全无关紧要。您正在处理完全是客户端代码。

JSX 语法不是 JavaScript 的一部分。你不能在纯 JavaScript 中使用它。您必须通过转译器运行它才能将其转换为 JavaScript。

你已经加载了一个转译器（Babel），但你没有使用它。

看the React documentation：

现在您可以在任何<script> 标签中使用 JSX，方法是向其添加 type="text/babel" 属性。

你没有添加那个属性。

请注意，浏览器内转译速度较慢且相对难以调试。我强烈建议使用local development environment。

【讨论】：

【解决方案2】：

首先：你不能使用 Node.js 客户端。

如果你想在你已经创建的 HTML 网站中使用 React：reactjs.org/docs/add-react-to-a-website

如果你想制作一个新的 React 应用程序，请按照以下指南操作：reactjs.org/docs/create-a-new-react-app

用于制作新的 React 应用...
我的快速 tldr 说明：

确保您的机器上安装了Node.js（应包括 npm）
打开你机器的终端，然后运行npm i react
转到您喜欢的编辑器，打开一个新终端并运行npx create-react-app name-of-project
（可能需要一点时间）
然后做cd name-of-project
然后做npm start
转到浏览器中的 localhost 链接，或其中一个 IP 地址来预览页面
（您甚至可以访问手机上的 IP 地址 - 如果它在同一个 WiFi 网络上）

总而言之，我真的推荐你试试CodeCademy's Free React Course
当我使用它时，它帮助我将 React 学习到了一个很好的标准。

【讨论】：

【解决方案3】：

如何从我的 MongoDB 数据库或 app.js 中的数组传输数据以响应 useState？

您将在 Node.js 服务器上编写一个 API 路由，该路由将从 mongodb 或数组返回数据。然后，您将使用 fetch API 或其他东西从 React.js 应用程序调用该 API。最后，您将使用useState 在您的 React 应用程序中存储和呈现数据。

如果我在代码中进行此更改，我希望它能够工作

<script>

function Hello() {
  return <h1>Hello World</h1>
}

ReactDOM.render(<Hello />, document.getElementById('root'));    
</script>

好的，上面的代码是JSX代码。这不是浏览器可以理解的 JavaScript/HTML/CSS 代码。您需要将此 JSX 代码转换为浏览器可以理解的 JavaScript/HTML/CSS 代码。如果您使用 create-react-app 创建 react 项目，它将为您进行转换。了解create-react-app。你会很高兴的。

到达那里后，请发布一个关于如何从 react 向 Node.js 服务器进行 API 调用的单独问题。

【讨论】：