反应真的需要前端ENV上的nodeJS吗？

小编典典

反应真的需要前端ENV上的nodeJS吗？

reactjs

我是新来的。我想举一个自己的例子。

大多数教程都提供以下内容：

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而不完全使用nodejs吗？让nodejs和npm模块（或bower ..）具有react东西更正确吗？

谢谢

阅读 247

2020-07-22

共1个答案

小编典典

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

实际上，您给出的第二个示例就是这样做的-在客户端使用React，而无需提及node.js。

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

使用基于node.js的构建工具像
browserify或的WebPack捆绑您的客户端代码在一个干净，整洁的软件包，你接发球给客户端。

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

在node.js中编写HTTP服务器

近年来，关于使用node.js构建整个应用程序（客户端和
服务器端）的讨论很多。这里的主要好处是代码重用：假设您编写了一个对日期有幻想的库。如果要用Javascript编写客户端代码，用PHP编写服务器端代码，则必须重写该库。如果双方都使用node.js，则只需执行一次。

在node.js中编写一个HTTP Server并将其与React应用程序集成

用React编写的单页面应用程序（SPA）有一个问题：在客户端接收并执行Javascript代码之前，页面不会呈现。这意味着不执行Javascript的客户端将看不到任何内容，例如Google的网络抓取工具。因此，如果要为页面建立索引，则需要找出某种方法来在客户端发出请求时为完全渲染的页面提供服务。解决方案是服务器端React渲染。这是一个极具挑战性的主题，如果您对此感兴趣，我鼓励您做一些谷歌搜索。

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

我的项目之一是一个旧版PHP应用程序，我在其中重写了一些前端代码以使用React组件。我需要一个node.js
HTTP服务器或服务器端渲染吗？一点都不。但是我正在使用Babel和Browserify来简化我作为开发人员的生活。

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

2020-07-22