javascript - react 应用程序 : Start API server with React server

Question

我正在研究一个非常简单的 react应用程序(我的第一个)，但我不知道如何启动 API 和 react 服务器...

我正在使用 react-router对于客户端路由，我使用了 express在另一个项目上，所以我用它开始了我的 React 项目来设置 API。

但我想知道是否有办法使用react-router处理 API 路由并返回一些数据...

我用谷歌搜索并环顾四周，但我似乎能找到任何相关信息(既没有确认也没有反驳)。

有人对此有任何意见吗？
(我知道这不是一个合适的 SO 问题，但我似乎无法找到任何信息来结束这个唠叨的奇迹)

Answer 1

I'm working on a pretty simple react App (my first), but I can't figure out how to get both the API and the react server to start...

有一个 npm 模块用于我的 React/Express 应用程序，名为 concurrently，我用它来同时启动我的客户端和后端服务器。

我是全局安装的:

npm install concurrently

在我的应用程序的主 package.json 中，我的脚本设置如下:

"scripts":{
  "start": "concurrently \"npm run server\" \"npm run client\"",
  "server": "node bin/www",
  "client": "node start-client.js"
}

该设置允许我运行 npm start 并启动我的服务器和客户端脚本。

在 start-client.js 中，我有这个:

const args = ["start"];
const opts = { stdio: "inherit", cwd: "client", shell: true };
require("child_process").spawn("npm", args, opts);

start-client.js 位于我的应用程序的根目录。

我的文件结构是这样的:

|--bin
|--client
|--routes
|--app.js
|--package.json
|--start-client.js

But I was wondering if there was a way to use react-router to handle API routes and return some data...

为了从 API 服务器获取数据，我在 React 组件中使用了原生的 fetch() 方法。

因为我使用的是 Express，所以我将创建一个路由并将其导出到我的 app.js 文件中，如下所示:

/* myRoute.js */
var express = require('express')
var router = express.Router()

router.get('/', function(req, res, next) {
  res.send('index', {title: 'Express'})
})

module.exports = router

/* app.js */

var myRoute = require('./routes/myRoute')
var app = express()
//will fetch data from this endpoint
app.use('/myRoute', myRoute)

现在在我的 React 组件中，我将从 /myRoute 获取数据，如下所示:

fetch('/myRoute')
  .then(res => JSON.parse(res))
  .then(res => console.log(res))