Javascript 未定义“express”无未定义

我正在为我的全栈web应用程序实现一个websocket聊天服务器，并逐渐意识到大多数源代码只提供html+js的教程，我不太确定如何从js迁移到JSX

我开始尝试将js代码集成到我的jsx聊天组件文件中，但遇到了express未定义的问题

下面是我建立express服务器的JS：

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

uses = [];
connections = [];

server.listen(process.env.port || 3000);
console.log('server running...');

以下是我在JSX中的尝试：

import React, { Component } from "react";

class ChatComponent extends Component {

  state = { 
    express: require('express'),
    app: express(),
    server: require('http').createServer(this.app),
    io: require('socket.io').listen(this.server),
    users: [],
    connections: [],
  }

  render() {
    return (
      <React.Fragment>
      ...

我还将express和socket.io依赖项包含在我的package.json中，npm也会更新它

{
  "name": "javlet-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "express": "*",
    "jquery": "^3.4.1",
    "js-cookie": "^2.2.1",
    "popper.js": "^1.15.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-google-login": "^5.0.5",
    "react-new-window": "^0.1.2",
    "react-scripts": "3.0.1",
    "react-webcam": "^3.0.1",
    "socket.io": "*",
    "typescript": "^3.6.3",
    "uws": "^10.148.1",
    "yarn": "^1.17.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "jest --coverage"
  },
 ...

如有任何建议，将不胜感激。

---

如果需要，可以提供更多代码。谢谢

Express是一个节点服务器端库，而react是一个客户端库。因此，对于聊天应用程序设置，您将创建一个express server和react应用程序

express server将向浏览器提供react应用程序，react应用程序将从express server获取聊天数据

快速运行

在项目文件夹中，创建一个服务器文件夹，并在该文件夹中创建一个名为index.js的文件。 在服务器文件夹内，从终端运行：

npm init -y

npx create-react-app client

其次是：

npm i express socket.io

这将处理服务器依赖关系。 现在在index.js中：

server/index.js：

const app = require("express")();
const server = require("http").Server(app);
const io = require("socket.io")(server);

server.listen(4000);

app.get("/", function(req, res) {
  res.send("express-server");
});

io.on("connection", function(socket) {
  socket.emit("news", { message: "Hello World" });
  socket.on("my other event", function(data) {
    console.log("response to my other event: ", data);
  });
});

这将设置服务器在localhost:4000上可用。 要测试这一点，请从终端-服务器文件夹内-运行：

node index.js

现在从浏览器转到localhost:4000，您应该会看到消息express server。 这就是后端所做的一切

打开react应用程序

i从终端运行中删除项目文件夹：

npm init -y

npx create-react-app client

这可能需要几分钟，但将在客户端文件夹中创建一个基本的react应用程序

创建react应用程序完成后，是时候安装react依赖项了，因此在客户端文件夹内运行：

npm i socket.io-client

差不多了

导航到client/src/App.js，并将其中的所有内容替换为：

import React, { Component } from 'react';
import './App.css';
import socketIOClient from 'socket.io-client'

class App extends Component {
  state = {
    news: ''
  }

  componentDidMount() {
    const handleMessage = (message) => {
      this.setState({ news: message })
    }

    const socket = socketIOClient('http://127.0.0.1:4000')
    socket.on('news', function (data) {
      handleMessage(data.message)
      socket.emit('my other event', { my: 'data' })
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>React Socket.io</h1>
          <p>{this.state.news}</p>
        </header>
      </div>
    );
  }
}

export default App;

这将启动react应用程序并在浏览器中自动打开该应用程序

此时，您应该让react应用程序在浏览器中运行，express应用程序也在运行

react应用程序应显示：

response to my other event: { my: 'data' }

React Socket.io 你好，世界 快速终点站应显示：

response to my other event: { my: 'data' }

解释react应用程序中发生的事情-

我们在页面开始时导入了socket.io-client-在react中，所有依赖项都在开始时使用import语句导入。 在组件开始时，我们为state.news设置了一个空字符串，这可以阻止我们在从服务器接收和发送数据之前，在组件首次装载时收到错误。 React类组件有许多称为生命周期方法的内置方法，componentDidMount就是其中之一，它是一种在浏览器中装入组件后立即运行的方法。这就是我们连接到express服务器的地方，因此socket.io侦听来自服务器的数据，当它接收到消息时，它将其传递给handleMessage函数，该函数使用消息调用setState。 setState是react中内置的一种方法，用于更改/向组件状态添加值。 最后，由于react的工作方式，由于状态已更改，因此将重新呈现组件并显示“Hello World”消息。

---

是服务器端的NodeJS库，您不应该在React中使用它。我相信JSX是React.createElement的缩写，它最终创建DOM元素。您无法将所有JS迁移到JSXHi，谢谢您的回答。所以我们没有对JSX组件做任何事情？嗨，JSX是React用来在浏览器中呈现元素的代码，它是javascript和HTML的混合体。在上面的示例中，在应用程序组件中，呈现函数内部类似于HTML的部分是用JSX编写的。总之，JSX是一种类似HTML的语法，在前端的React组件中使用。