react 真的需要前端 ENV 上的 nodeJS 吗？答案

【问题标题】：does react really need nodeJS on the frontend ENV?react 真的需要前端 ENV 上的 nodeJS 吗？
【发布时间】：2017-06-09 20:58:41
【问题描述】：

我是反应新手。我想开始一个我自己的小 hello world 示例。

大多数教程都提供这样的内容：

app.js

var React = require('react');
var ReactDOM = require('react-dom');
var reactElement = React.createElement('h1', { className: 'header' },
'This is React');
ReactDOM.render(reactElement, document.getElementById('react-
application'));

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
    <title>Snapterest</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
    bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div id="react-application">
        I am about to learn the essentials of React.js.
    </div>
    <script src="./app.js"></script>
</body>
</html>

问题是那个示例需要 nodeJS（对于 require() 部分）和 npm install 和 npm start.. 所有这些。

没有nodeJS，我可以做不同的事情

app.js

var reactElement = React.createElement('h1', { className: 'header' },
'This is React');
ReactDOM.render(reactElement, document.getElementById('react-application'));

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
    <title>Snapterest</title>
 
     <script src=" /react-0.14.8.min.js"></script>
 <script src=" /react-dom-0.14.8.min.js"></script>


</head>
<body>
    <div id="react-application">
     dsf
    </div>
    <script src="./app.js"></script>
</body>
</html>

在此示例中，我使用 cdn 来导入 nodejs 应在 npm 安装阶段导入的 react 依赖项。问题是——哪个更好？我可以只使用cdn而不完全使用nodejs吗？让 nodejs 和 npm 模块（或 bower ..）拥有反应的东西更正确吗？

谢谢

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

React js 是一个客户端库，如果你用纯 Js（没有 jsx 等）编写整个代码，你就不需要 node.js。

但是对于代码管理来说，react 应用被分割或者构造成多个文件，需要node.js 模块或者lib 处理来编译、组合、打包、生成最终可以在浏览器上运行的客户端js 脚本。

【讨论】：

你可以在没有node.js的情况下使用多个文件客户端，这并不意味着需要node.js
@eis 是正确的。你真正需要的是一个 TypeScript 编译器，它可以编译和组合你的 TS。

【解决方案2】：

我认为当前接受的答案缺少一些关键信息。答案是正确的——不需要 Node.js——但是你会遇到它经常使用的第一个原因是人们在编写 React 时更喜欢使用JSX 格式。

JSX 不会像那样在浏览器中工作。例如，您可以使用babel-standalone 来帮助浏览器处理 JSX，但这意味着您的 JSX 代码将在每次页面加载时重新编译，效率不高。更高效的是在构建站点、服务器端的同时编译 JSX。大多数此类工具都是基于节点的，这也是经常使用 Node.js 的原因之一。

当然，还有其他原因，JSX 只是第一个。 Node.js 还附带了许多其他与 JavaScript 生态系统相关的工具。这些也可以在例如java系统上使用，但它总是有点hacky。在实践中，您会遇到不同的库和其他资源，使用说明往往主要针对 Node 生态系统，而其他更多取决于用户。

【讨论】：

【解决方案3】：

标题中提出的问题的答案是不，你不需要node.js在客户端使用React。

事实上，您给出的第二个示例就是这样做的——在客户端使用 React，而没有提及 node.js。

也就是说，在构建基于 React 的应用程序时，有几种不同的方式可以使用 node.js。

使用基于 node.js 的构建工具（如 browserify 或 webpack）将您的客户端代码捆绑到一个整洁的包中，然后将其提供给客户端。

例如，在我正在进行的一个项目中，我使用 browserify 构建了一个保存在 public/js/bundle.js 的单个 Javascript 文件，该文件通过我的 index.html 中的一个普通的旧 <script> 标记包含在内，并且全部由阿帕奇。这个包包含我的应用程序代码（包括一些 React 组件）以及我的应用程序代码的所有依赖项（包括 react 和 react-dom 等）。客户端的主要好处是减少页面请求的数量和所需的带宽（因为我可以使用UglifyJS 来缩小整个捆绑包）。对开发人员的主要好处是您可以使用 Babel 等工具编写 .jsx 代码而不是普通的旧 Javascript - 这极大地提高了生产力。

在 node.js 中编写一个 HTTP 服务器

近年来，关于使用 node.js 构建整个应用程序（客户端和服务器端）的讨论很多。这里的主要好处是代码重用：假设您编写了一个库，它对日期做了一些花哨的事情。如果你用 Javascript 编写客户端代码，用 PHP 编写服务器端代码，那么你必须重写那个库；如果你在两边都使用node.js，你只需要做一次。

在 node.js 中编写一个 HTTP 服务器并将其与您的 React 应用程序集成

使用 React 编写的单页应用程序 (SPA) 存在一个问题：在客户端接收并执行 Javascript 代码之前，页面不会被渲染。这意味着不执行 Javascript 的客户端将看不到任何东西 - 例如 Google 的网络爬虫。所以如果你想让你的页面被索引，你需要想办法在客户端发出请求时提供一个完全呈现的页面。解决方案是服务器端 React 渲染。这是一个相当具有挑战性的话题，如果您对它感兴趣，我鼓励您做一些谷歌搜索。

现在关于您的问题：哪个更好？一如既往，这取决于您的需求。

我的一个项目是一个遗留的 PHP 应用程序，我正在重写一些前端代码以使用 React 组件。我需要 node.js HTTP 服务器还是服务器端渲染？一点都不。但我正在使用 Babel 和 Browserify 让我作为开发人员的生活更轻松。

我的另一个个人项目是使用名为 Next.js 的框架编写的小型 SPA，该框架非常先进，包含服务器端渲染。我当然可以使用其他技术编写这个项目，但我确实喜欢它提供的客户端和服务器之间的共享代码库。

【讨论】：