javascript - Node.js 服务器用 React.JS 覆盖整个 DOM

Question

我正在尝试做的事情:我正在尝试练习 MERN 结构，所以我想设置一个 Node.js 服务器并首先对前端使用react。

但是，当服务器被触发时，整个 DOM 被覆盖，这是为什么？

server.js是一个简单的node.js

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

// console.log that your server is up and running
app.listen(3000, () => console.log(`Listening on port 3000`));

// create a GET route
app.get('/test', (req, res) => {
  res.send({ express: 'I MADE IT' });
});

React.js 是我的前端:

import React from 'react';
import logo from './img/nav-logo.png';
import Product1 from './img/manage.png';
import Product2 from './img/deliver.png';
import Product3 from './img/market.png';
import Service from './service.js'
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {
  constructor(props){
    super(props)

    this.state={
      items: [{
          desc:"Manage",
          price: 5000,
          purchased: false,
        },
        {
          desc:"Deliver",
          price: 2000,
          purchased: false,
        },
        {
          desc:"Market",
          price: 4000,
          purchased: false,
        }
      ],
      data:null,
    }
  }

  componentDidMount() {
    console.log("here")
    this.callApi()
      .then(res => this.setState({ data: res.express }))
      .catch(err => console.log(err));
  }

  callApi = async () => {
    const response = await fetch('/test');
    const body = await response.json();

    if (response.status !== 200) throw Error(body.message);

    return body;
  };

  handleClick(desc){
    const newItems = this.state.items.slice()
    this.printItems(newItems)
    for(var item of newItems){
      if(item.desc === desc){
        item.purchased = !item.purchased
      }
    }
    this.printItems(newItems)

    this.setState({
      items: newItems
    })
  }

  printItems(items){
    console.log(items[0].purchased + "  " + items[1].purchased + " " + items[2].purchased)
  }

  render()  {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Shopping Center</h1>
        </header>
      <div>
        <div>
          {this.state.data}   //<------------trying to render the data here
        </div>
        <Service url={Product1} desc="Manage" alt="MA" purchased={this.state.items[0].purchased} thisClick={ (desc) => this.handleClick("Manage")} />
        <Service url={Product2} desc="Deliver" alt="DE" purchased={this.state.items[1].purchased} thisClick={ (desc) => this.handleClick("Deliver")}/>
        <Service url={Product3} desc="Market" alt="MR" purchased={this.state.items[2].purchased} thisClick={ (desc) => this.handleClick("Market")}/>
      </div>
      </div>
    );
  }
}

export default App;

如果没有运行我的node.js，我可以很好地渲染我的 react 。但是，一旦我执行了npm server.js。 localhost:3000 将不再起作用。所以我treid localhost:3000/test，整个HTML变成了字符串“{express: 'I MADE IT'}”

我的index.js

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

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

我想将消息渲染为常规 React DOM 的一部分，但不知何故， Node 服务器覆盖了我的整个前端。

此外，我在控制台中收到一条错误消息，状态如下:

SyntaxError: Unexpected token < in JSON at position 0
    at App._callee$ (App.js:42)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:296)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3000/static/js/bundle.js:31252:21)
    at step (App.css?9a66:26)
    at App.css?9a66:26

我找到的代码行是componentDidMount()方法

我的 package.json 文件:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.1.3",
    "express": "^4.16.3",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5",
    "reactstrap": "^6.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

Answer 1

对于开发，假设您正在为 React 应用程序使用 create-react-app，则可以使用 development proxy在不同的端口上运行 Express 和 React。任何 fetch() 请求都将被重定向到 package.json 中指定的代理路径/端口。这将使您能够利用每个平台的开发工具。

1. 将 Express 服务器端口更改为 3000 以外的任何端口。例如 app.listen(3001, () => console.log('Listening on port 3001')); 这样 create-react-app 可以在 3000 上运行，而 Express 可以在 3001 上运行。
2. 向 React 应用程序的 package.json 添加了以下行以启用代理，"proxy": "http://localhost:3001"。对 /api/test 的获取请求将重定向到 http://localhost:3001/api/test。

对于生产，假设您希望两个应用程序在同一端口上运行:

1. 使用static()为服务器设置静态资源加载方法。
2. 向服务器添加了逻辑，以重定向与您的“API”路径不匹配的所有请求，以使用 sendFile() 加载生产构建的 npm run build React 应用程序的 index.html 。这将允许在 React 应用程序中使用路由。

这是基本的情况，从 npm run build 命令生成的 create-react-app build 文件夹被放置在路径 /public/build 中:

app.use(express.static(path.join(__dirname, 'public', 'build')));

// API route
app.get('/api/test', (req, res) => {
  res.send({ express: 'I MADE IT' });
});

// catch-all route
app.use('*', function (request, response) {
  response.sendFile(path.join(__dirname, 'public', 'build', 'index.html'));
});

react fetch():

// ...
const response = await fetch('/api/test'); // this matches the path specified on server, before the catch all route
const body = await response.json();
// ...

看看这个 answer因为这是一个类似的问题。

更新: - 创建简单 Express + React 开发环境的步骤:

1. 使用 express-generator 创建 Express 应用程序。运行命令npxexpress-generatorreact-express
2. 导航到创建的项目。运行命令cd react-express。
3. 运行命令npm install。然后删除目录public。
4. 使用create-react-app创建React应用程序。运行命令npx create-react-app public。
5. 同时安装。运行命令npm install并发--save-dev。
6. 在 express-generator 创建的项目基础上编辑 app.js。从第 25 行开始添加以下行。这是为了公开并在 /api/test 处结束，并提供“包罗万象”的路由来加载由 npm run build 生成的 index.html。

```

app.get('/api/test', (req, res) => {
  res.send({ express: 'I MADE IT' });
});

app.use('*', function (request, response) {
  response.sendFile(path.join(__dirname, 'public', 'build', 'index.html'));
});

```

编辑 /bin/www 第 15 行，将端口从 3000 更改为 3001。 var port = normalizePort(process.env.PORT || '3001');

编辑由 create-react-app 在 /build/package.json 创建的 package.json。添加以下行"proxy": "http://localhost:3001"。

在位于项目根部(由express-generator 创建)的基础 package.json 中，将以下行添加到 srcipts:"dev": "concurrently\"node ./bin/www\"\"cd public && npm start\""

从项目的基础运行命令npm run dev。这将加载服务器 (Express) 和客户端 (React)，并代理调用，在此示例中，端口 3000 上的 /api/test 将被定向到在 3001 运行的服务器端口。

希望有帮助!