如何在 Node.js/html 中使用 React

Question

我尝试了多种使用谷歌的方法，检查了官方网站但没有奏效。 只有当我在 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)

Answer 1

Node.js 在那里完全不相关。 您正在处理完全客户端代码。

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

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

查看React 文档：

现在你可以通过添加type="text/babel"属性在任何<script>标签中使用 JSX。

您没有添加该属性。

请注意，浏览器内转译速度较慢且相对难以调试。 我强烈建议使用本地开发环境。

Answer 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
Go 到您的首选编辑器，打开一个新终端并运行npx create-react-app name-of-project
（可能需要一点）
然后做cd name-of-project
然后做npm start
Go 到浏览器中的 localhost 链接，或 IP 地址之一以预览页面
（您甚至可以将 go 发送到手机上的 IP 地址 - 如果它在同一个 WiFi 网络上）

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

Answer 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 。 你会对 go 很好。

一旦你在那里，发布一个单独的问题，关于如何从反应到 Node.js 服务器进行 API 调用。

如何在 Node.js/html 中使用 React

问题描述

3 个解决方案

解决方案1
0 已采纳 2021-12-23 10:23:13

解决方案2
-1 2021-12-23 11:09:51

解决方案3
-1 2021-12-23 11:14:13

如何在 Node.js/html 中使用 React

问题描述

3 个解决方案

解决方案1 0 已采纳 2021-12-23 10:23:13

解决方案2 -1 2021-12-23 11:09:51

解决方案3 -1 2021-12-23 11:14:13

解决方案1
0 已采纳 2021-12-23 10:23:13

解决方案2
-1 2021-12-23 11:09:51

解决方案3
-1 2021-12-23 11:14:13