将 express 与 react 应用程序连接起来答案

【问题标题】：Connect express with react application将 express 与 react 应用程序连接起来
【发布时间】：2018-11-25 11:31:31
【问题描述】：

我想用 express server 创建简单的 react 应用。

我已经设置了简单的快速服务器，如下所示。

package.json

{
  "name": "hometask1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "eslint": "^5.9.0",
    "eslint-loader": "^2.1.1",
    "express": "^4.16.4",
    "jest": "^23.6.0",
    "npm-run-all": "^4.1.3",
    "open": "0.0.5",
    "webpack": "^4.26.0",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-hot-middleware": "^2.24.3"
  },
  "proxy": "http://localhost:3000/"
}

index.js

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

//app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Listening on port ${port}!`))

app.get('/express_backend', (req, res) => {
    res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
  });

我的文件夹结构如下：

projectfolder    
    node_modules
    index.html
    index.js
    package.json
    package-lock.json

现在，我想将此 express.js 与我的 react 应用程序连接起来。以下是我的反应应用程序。（我不想使用 create-react-app）

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">

    var helloWorld = React.createElement("h1", {}, 'Hello World!');

    class HelloWorld extends React.Component {
        render () {
            return (
                    <h1>Hello World!</h1>
                )
        }
    }

    const container = React.createElement("div", {}, helloWorld, <HelloWorld /> );  

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

</html>

任何帮助将不胜感激。

【问题讨论】：

你的connect 你的express 服务器和你的react app 到底是什么意思？您希望express 为您的 html 文件提供服务，还是希望您的前端应用调用后端端点？
我想表达 html 文件。当我运行 localhost 它应该运行 index.html react app。
好的。我认为connect 并不是一个好词。这可能意味着几件事。但在这种情况下，第一个答案是正确的。
好的，谢谢，那我试试

标签： javascript reactjs express

【解决方案1】：

您需要根据基本 URL 请求 (http://domain/) 从公共目录提供文件

1。使 css、jss 文件可公开访问

将此行添加到您的快速服务器文件中

const app = express()
const port = 3000
app.use(express.static('public')) // this line

2。将`index.html` 和`index.js` 移动到`public` 目录

你的目录结构看起来像

projectfolder    
    node_modules
    public
        index.html
        index.js
    package.json
    package-lock.json

3。添加路由以提供索引文件

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

【讨论】：

3.没有必要，express.static 确实在根目录上服务index.html
你还需要在 index.js 中添加const path = require('path'); 那一行
是的，您实际上并不需要 public 文件夹。这是一种常见的做法，但不需要为html file 提供服务。文件夹的名称也可以是您想要的任何名称。

1。使 css、jss 文件可公开访问

2。将index.html 和index.js 移动到public 目录

3。添加路由以提供索引文件

2。将`index.html` 和`index.js` 移动到`public` 目录