Question

我是新人的反应。我想开始一个我自己的小世界示例。

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

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（用于requeir（）部分）和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而不是entriely使用nodejs吗？让nodejs和npm模块（或bower ..）有反应的东西更正确吗？

由于

Answer 1

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

事实上，你给出的第二个例子就是这样做 - 在客户端使用React而不提及node.js。

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

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

例如，在我正在处理的项目中，我使用browserify构建了一个保存在public/js/bundle.js的单个Javascript文件，该文件包含在我的{{<script>标记中。 1}}并且它全部由Apache提供。这个包包含我的应用程序代码（包括一些React组件）以及我的应用程序代码的所有依赖项（包括index.html和react等）。客户端的主要好处是减少页面请求的数量和所需的带宽（因为我可以使用UglifyJS来缩小整个捆绑包）。开发人员的主要好处是，您可以使用Babel之类的工具来编写react-dom代码而不是简单的旧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，该框架非常先进，包含服务器端渲染。我当然可以使用其他技术编写这个项目，但我确实喜欢它提供的客户端和服务器之间的共享代码库。

Answer 2

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

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

当然还有其他原因，JSX只是其中之一。 Node.js还提供了许多其他与JavaScript生态系统相关的工具。那些也可以在例如Java系统上使用，但是它总是有点笨拙。在实践中，您会遇到针对不同库和其他资源的情况，主要是针对Node生态系统给出使用说明，而其他则更多地取决于用户。

Answer 3

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

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

确实需要nodeJS在前端ENV吗？

3 个答案: