gpt4 book ai didi

javascript - 如何使用express/node.js通过互联网请求React应用程序

转载 作者:太空宇宙 更新时间:2023-11-03 23:48:27 25 4
gpt4 key购买 nike

我有一个名为 tree Branch 的目录,其中包含一个包含我的 index.html 的 public 文件夹和一个包含我的 js(app .js/index.js) 和 css(index.css, app.css) 文件。在 Tree Branch 目录中有一个名为 server.js 的文件,这里是代码

const express = require('express');
const path = require('path');

const app = express();

// Serve the js files and css from the React app
app.use('/js', express.static(path.join(__dirname, 'src/')));
app.use('/css', express.static(path.join(__dirname, 'src/')));

app.get('/', (req,res) =>{
res.sendFile(path.join(__dirname + '/public/index.html'));

});

const port = process.env.PORT || 3000;
app.listen(port);

console.log('App is listening on port ' + port);

这里是index.html的相关代码

  <title>React App</title>
</head>
<body>
<div id="root"></div>
</body>

App.js


function App() {
return (
<div className="App">
<header className="App-header">
<p>
Portfolio coming soon
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

这里是index.js

import React from 'react';
import ReactDOM from 'react-dom';
import '../css/index.css';
import App from './App';

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

index.html 的请求似乎有效,但它只呈现一个空页面,而没有在 App.js 中生成内容。如何连接此代码,以便当我请求 index.html 时它会呈现 jsx 元素?

最佳答案

在开发时,您可以单独运行两个服务器(React 和 Node)。对于生产环境,您必须使用

构建您的 react应用程序
npm run build

并将该构建放入您的 node.js 公共(public)文件夹中。现在,您只需在生产环境中运行 node.js 服务器,它就会使用您的 JSX 加载网页。

关于javascript - 如何使用express/node.js通过互联网请求React应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60182139/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com