尝试将我合作伙伴的React代码与我的Node后端结合起来

Question

标题解释了这一切，这里是上下文

我的搭档有一个和react-scripts start一起运行的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory} from 'react-router';

import App from './components/App.jsx';
import SignUp from './components/SignUp.jsx';
import SignIn from './components/SignIn.jsx';

ReactDOM.render(
    <Router path="/" history={browserHistory} >
        <Route path="/app" component={App} />
        <Route path="/signup" component={SignUp} />
        <Route path="/signin" component={SignIn} />
    </Router>,
    document.getElementById('root')
);

现在我在后端使用这个app.js

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

const public_folder = '/public';
// app.use(express.static(__dirname + public_folder));

app.set('trust proxy', 1) // trust first proxy

app.get('/', function (req, res) {
  res.send('hello, world!')
})

require('./server/routes')(app);

app.get('*', function(req, res) {
    console.log("Went into catch all *");
    // res.sendFile(__dirname + public_folder  + '/index.html');
});


module.exports = app;

我从下面的教程中学到了一些基本的Node，我有点理解React是如何工作的，但现在我和我的合作伙伴处于需要合并我们的两部分的阶段。有人能解释一下我需要做什么吗？如果需要，我愿意提供更多的细节。我们需要使用Babel吗，因为我们有jsx文件？

Answer 1

是的，如果你想在后端呈现你的React组件并为它们提供Express服务，你将不得不使用Babel或其他一些转译器来转译你的服务器端代码。然后，您可以使用renderToString创建一个超文本标记语言字符串，并将其与响应一起发送。