在尝试连接前端（React）和后端（Node.js）时导入Express

我对js非常陌生，我正在尝试构建一个完整的web应用程序堆栈。我已经构建了大部分前端代码，并且我的后端文件具有到数据库的连接和查询。 我正在尝试将这两个文件连接在一起，但一旦我尝试在任何文件中导入“express”，它就会中断。无需导入express，即可正常工作。 在浏览器运行时出现此错误：“TypeError:无法获取未定义或空引用的属性'prototype'” Index.js（尝试在此处导入Express）

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
//导入“./index.css”；
//var express=require（'express'）
//var app=express（）
var Connection=require（‘冗长’）。连接；
var Request=require（‘冗长’）。Request；
//常量axios=require（'axios'）
ReactDOM.render（，document.getElementById（'root'））；
//如果你想让你的应用程序离线工作并更快地加载，你可以更改
//取消注册（）以在下面注册（）。注意，这有一些陷阱。
//了解有关服务人员的更多信息：
serviceWorker.unregister（）；

App.js（前端）

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Box”导入框；
从'@material ui/core/styles'导入{createMuiTheme}；
从'@material ui/styles'导入{ThemeProvider}；
从“@material ui/core”导入{排版}；
//var express=require（'express'）
//var app=express（）
//更改UI的原色
const theme=createMuiTheme({
调色板：{
主要：{
主要名称：“#00a843”，
背景：“线性梯度（45度，Fe6B30%，FF8E53 90%），
},
},
}); 
导出默认类App扩展React.Component
{
建造师（道具）{
超级（道具）；
this.handleinterclick=this.handleinterclick.bind（this）；
this.handleSaveClick=this.handleSaveClick.bind（this）；
this.state={showAll:false，inputmail:，successfullySaved:true，newList:：}；
}
异步handleInterclick（）{
//将输入的电子邮件发送到服务器
//var xhr=newXMLHttpRequest（）
//当服务器响应时获取回调
//xhr.addEventListener（'load'，（）=>{
//使用此处的结果更新组件的状态
//console.log（xhr.responseText）
//   })
//用动词和url打开请求
//xhr.open（'PUT'，'/api/controllers/AppController/enter'））
//发送请求
//send（JSON.stringify（{yourEmail:this.state.inputEmail}））
/*
const response=wait fetch（'/api/controllers/AppController/enter'{
方法：'放'，
正文：JSON.stringify（{email:this.state.inputEmail}），
})
log（wait response.json（））
*/
//更新UI以反映正在按下的按钮
this.setState（{showAll:true}）；
}
handleSaveClick（）{
//保存到数据库
var xhr=newXMLHttpRequest（）
//当服务器响应时获取回调
xhr.addEventListener（'load'，（）=>{
//使用此处的结果更新组件的状态
console.log（xhr.responseText）
})
//用动词和url打开请求
xhr.open（'PUT'，'/api/controllers/AppController/save'）
//发送请求
send（JSON.stringify（{newList:this.state.newList}））
//更新UI以反映保存状态
this.setState（{showAll:false，inputmail:，successfullySaved:true，newList:}）；
//添加成功的保存消息
}
渲染（）{
返回(
{
如果（ev.key=='Enter'）{
this.setState（{showAll:true}）；
ev.preventDefault（）；
}
}}
onChange={e=>this.setState（{inputEmail:e.target.value}）}
样式={{宽度：600}
占位符=“第一个\最后一个”
autoComplete=“电子邮件”
输入道具={{
心理医生：是的，
风格：{fontSize:17，fontFamily:“Helvetica”}
}}
输入道具={{
风格：{fontFamily:“Helvetica”}
}}
variant=“概述”
/>


进入
);
}
}
功能压具（道具）
{ 
如果（！props.show）{
返回null；
}
返回(
在单击下面的“更新您的列表”之前，请检查拼写和格式。目前没有错误检查。
{
//使用材质UI中的网格布局替换上述DIV
}
{//文本框及其标签的垂直布局
}
在此处添加/更改/删除电子邮件并用分号（；）分隔：
{//文本框及其标签的垂直布局
}
在此处查看您当前的脉搏检查列表：


保存您的更新！
);
}
);
}

您的全栈web应用程序应分别运行客户端和服务器，即在localhost:3000（后端）上运行Express应用程序，并从运行在单独的web包服务器（前端）上的客户端（React）向其发送HTTP请求

---

因为应用程序是“完整堆栈”，这并不意味着前端和后端是组合的。这些是分开的。希望这有帮助。

Express不是前端技术。如果您只是在学习JS，我不建议立即构建一个完整的堆栈应用程序。

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

// import './index.css';
// var express = require('express')
// var app = express()
var Connection = require('tedious').Connection;
var Request = require('tedious').Request;
// const axios = require('axios')


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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { Typography } from '@material-ui/core';

// var express = require('express')
// var app = express()

//change the primary colours of the UI 
const theme = createMuiTheme({
  palette: {

    primary: {

      main: '#00a843',
      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    },

    },
  }); 



export default class App extends React.Component
{
  constructor(props) {
    super(props);
    this.handleEnterClick = this.handleEnterClick.bind(this);
    this.handleSaveClick = this.handleSaveClick.bind(this);
    this.state = {showAll: false, inputEmail: "", successfullySaved: true, newList: ""};
  }

  async handleEnterClick() {
    //send the entered email to the server

//   var xhr = new XMLHttpRequest()
    // get a callback when the server responds
//   xhr.addEventListener('load', () => {
      // update the state of the component with the result here
//     console.log(xhr.responseText)
//   })
    // open the request with the verb and the url
//   xhr.open('PUT', '/api/controllers/AppController/enter')
    // send the request
//    xhr.send(JSON.stringify({ yourEmail: this.state.inputEmail }))
/*
    const response = await fetch('/api/controllers/AppController/enter', {
      method: 'PUT',
      body: JSON.stringify({ email: this.state.inputEmail }),
    })
    console.log(await response.json())
*/
    //update the UI to reflect the button being pressed
    this.setState({showAll: true});
  }

  handleSaveClick() {
    //save to the datbase
    var xhr = new XMLHttpRequest()
    // get a callback when the server responds
    xhr.addEventListener('load', () => {
      // update the state of the component with the result here
      console.log(xhr.responseText)
    })
    // open the request with the verb and the url
    xhr.open('PUT', '/api/controllers/AppController/save')
    // send the request
    xhr.send(JSON.stringify({ newList: this.state.newList }))


    //update the UI to reflect the save
    this.setState({showAll: false, inputEmail: "", successfullySaved: true, newList: ""});
    //add a successful save message
  }


  render () {
    return (
      <form display="flex" noValidate autoComplete="off">
      <ThemeProvider theme={theme}>
      <div align = 'center'>

        <TextField 
          id="tfInputEmail"
          value={this.state.inputEmail}
          onKeyPress={(ev) => {
            if (ev.key === 'Enter') {
              this.setState({showAll: true});
               ev.preventDefault();
            }
          }}

          onChange={e => this.setState({ inputEmail: e.target.value })}
          style={{ width: 600}}
          placeholder="first_last"

          autoComplete = "email" 
          InputLabelProps={{
            shrink: true,
            style: {fontSize: 17, fontFamily: "Helvetica"}
          }}
          inputProps={{
            style: {fontFamily: "Helvetica"}
          }}

          variant="outlined"
        />
        <br/>

        <Button id="btnEnter" variant="contained" color="primary"
        style={{ marginTop: 15, marginBottom: 35, width: 600, height: 35}} onClick={this.handleEnterClick}>
          Enter
        </Button>

        <PressedEnter show={this.state.showAll} click={this.handleSaveClick} list={this.state.newList}/>
      </div>
      </ThemeProvider>
    </form>
    );
  }

}

function PressedEnter(props)
{ 
  if(!props.show) {
    return null;
  }

  return (
    <div >

        <Box fontSize={18} fontFamily="Helvetica"  marginLeft="9px" 
          marginBottom="20px" marginTop="30px">
          Check spelling and formatting before clicking 'Update your list' below. There's no error checking at the moment.
        </Box>
        <div width="100%" horizontal layout > 
        {
          // REPLACE THE ABOVE DIV WITH A GRID LAYOUT FROM MATERIAL UI 
        }

          {// Vertical layout for the textbox and its label 
          }
          <div> 
            <Box fontSize={16} fontFamily="Helvetica" 
              marginBottom="10px" marginTop="20px">
              Add/change/delete emails and separate by semicolon (;) here:
            </Box>


            <TextField
              id="tfChangeList"

              multiline
              style={{ margin: 8, width: 446}}
              InputLabelProps={{
                shrink: true,
                style: {fontSize: 20, fontFamily: "Helvetica"}
              }}
              inputProps={{
                style: {height:300, fontFamily: "Helvetica"}
              }}
              variant="outlined"
            />
          </div>


          {// Vertical layout for the textbox and its label 
          }
          <div>
            <Box fontSize={16} fontFamily="Helvetica" 
                marginBottom="10px" marginTop="20px">
                View your current Pulse Check list here:
            </Box>

            <TextField
              disabled
              id="tfCurrentList"
              multiline 
              style={{ margin: 8, width: 446}}
              InputLabelProps={{
                shrink: true,
                style: {fontSize: 20, fontFamily: "Helvetica"}
              }}
              inputProps={{
                style: {height:300, fontFamily: "Helvetica"}
              }}
              variant="outlined"
            />
          </div>

        </div>
        <br/>
        <Button id="btnSave" variant="contained" color="primary" style={{ marginLeft: 8, marginBottom: 8, 
          marginTop: -8}} onClick={props.click}>
          Save your Updates!
        </Button>
    </div>
  );
}
  );
}