使用 Express 设置 React 应用程序答案

【问题标题】：Setting up a React app with Express使用 Express 设置 React 应用程序
【发布时间】：2015-09-26 12:34:48
【问题描述】：

我第一次在这里发帖，我对网络开发完全陌生，所以如果这里已经有类似的东西，我提前道歉（我已经很好地搜索了）！

简而言之，我正在制作一个基于用户搜索输入从 Instagram 获取图像的应用程序。挺容易。但是，我使用的是 Node 和 Express 服务器端以及 React 客户端，并且我在 Google 上搜索了许多 React 教程、Express 教程，我什至对如何开始感到困惑。每个教程都使用不同的依赖项（我已经尝试过 Google 并了解它们的作用），并且有时没有明确说明将代码放在哪里 - 我见过 app.js, server.js。 js，模板.jsx。希望有人可以通俗地解释一下，对我们新手有所帮助。

所以基本上，我想知道如何设置我的应用程序以及我需要哪些文件，例如app.js 包含此代码，server.js 包含此代码等，以便至少在我的页面上显示一些内容。

到目前为止，我有这个：

// in my app.js

var express = require('express'),
    app = express();

app.use(express.static('public'));

app.get('/hashtag/:hashtag', function(req, res) {
  var token = (removed);

  // this is where id fetch instagram imgs

});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Instagallery server listening on http://%s:%s', host, port);
});

非常感谢您提供的任何帮助/信息！

【问题讨论】：

react 是客户端应用程序，基本与 express 捆绑在一起，您可以将其捆绑在静态文件夹中，您可以使用 app.use(express.static(path.join(__dirname, 'public'))); 进行设置，这样您就可以将您的 html、javascript 静态文件放在名为 public 的文件夹中。 React 基本上是一个与 node 或 express 无关的 web 组件
谢谢@syarul。我现在设法启动并运行它，但感谢您解释哪些文件放在哪里。

标签： javascript node.js express reactjs

【解决方案1】：

迟到了，但本教程提供了使用 Express 设置 React 的概述，可能对遇到类似挫折的其他人有用。

https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.yjzuy2k97

【讨论】：

一点也不，这太棒了@nicholasericksen 谢谢你的分享！
嗯，这应该让您了解事情是如何工作的，尤其是在使用 SSR 时，但是本教程中使用的一些库，例如，react-router 有一个重大更新。

【解决方案2】：

如果任何初学者只是在寻找 react 和 express 之间的连接，那么这将是一个精简且更容易上手的版本，没有 babel、测试工具和其他最初不需要的样板。

https://medium.com/@kushalvmahajan/i-am-about-to-tell-you-a-story-on-how-to-a-node-express-app-connected-to-react-c2fb973accf2

【讨论】：