Javascript 如何将反应与表达结合起来

我分别处理客户端和服务器端代码。我现在设法让他们在同一个项目中同时工作，但我不知道如何让他们一起工作。我在客户端使用javascript/node/react/redux/webpack，在服务器端使用node/express/jade

index.js 此文件在端口3001上加载服务器，该端口也可以作为网页打开。它将我的服务器端连接到mysql数据库，并在网页上显示那里的信息

现在我有了这两个网页，它们可以同时运行，但是如何从中创建一个网页呢

---

我使用的是jade视图，所以我猜我的服务器将不得不提供这些jade视图以及数据库数据。我应该忘记服务器端页面，把它当作客户端的服务吗？

如果我正确理解了这个问题，您需要将Express应用程序编写为RESTful应用程序（使其返回JSON），然后使用React进行API调用，然后呈现响应。还有很多，但这或多或少就是它的工作原理。这里是一个关于创建REST API的简单教程

您可以使用Express作为后端（REST API），使用React作为前端（您可以使用Axios、superagent等软件包访问API）

我现在设法将它们混合在一起。但我不知道如何将它们结合起来。

我不明白。你不是做了就是没做？！如果你说你想把

express

与

react

合并，答案是你不能。一个是服务器端，另一个是客户端。您可以使用

express

创建端点，并将数据提供给客户端（

React

）。然后在

react

中处理显示部件。对于你问题的最后一部分，

jade视图

是我所知道的服务器端渲染视图，因此你要么使用这些视图进行完整的服务器端渲染，要么将

express.js

与

React.js

结合起来，就像我一开始说的那样。你想用expressjs提供React应用程序吗？对吗？到目前为止，您的react应用程序是使用webpack提供的，“我如何从express向react发送数据”-您响应Ajax请求。

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter as Router, Route } from 'react-router-dom';

import store from "./store/index";
import App from "./components/App";
import Home from './components/_HomePage';
import User from './components/_AboutPage';

render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById("app")
);

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var index = require('./server/routes/index');
var users = require('./server/routes/users');
var catalog = require('./server/routes/catalog');

var db = require('./db/db');

var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'server/views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
//app.use(express.json());
//app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'server/public')));

app.use('/', index);
app.use('/users', users);
app.use('/catalog', catalog);

// Connect to MySQL on start
db.connect(db.MODE_PRODUCTION, function(err) {
  if (err) {
    console.log('Unable to connect to MySQL.')
    process.exit(1)
  } else {
    app.listen(3001, function() {
      console.log('Listening on port 3001...')
    })
  }
})

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;