React 真的需要前端 ENV 上的 nodeJS 吗?

IT技术 javascript node.js reactjs
2021-05-20 00:43:57

我是react的新手。我想开始一个我自己的 hello world 小例子。

大多数教程提供这样的东西:

应用程序.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'));

索引.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(用于需要()的一部分)和NPM安装和NPM开始..这一切。

我可以在没有 nodeJS 的情况下做不同的事情

应用程序.js

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

索引.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 install 阶段导入的 react 的依赖项。问题是——哪个更好?我可以只使用 cdn 而不是完全使用 nodejs 吗?使用 nodejs 和 npm module(或 bower ..)来响应内容是否更正确?

谢谢

3个回答

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

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

也就是说,有几种不同的方式来使用 node.js,它们在构建基于 React 的应用程序时非常有用。

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

例如,在我正在处理的一个项目中,我使用 browserify 构建了一个保存在public/js/bundle.js其中的Javascript 文件,文件通过<script>的普通旧标签包含在内index.html并且全部由 Apache 提供。这个包包含我的应用程序代码(包括一些 React 组件)以及我的应用程序代码的所有依赖项(包括reactreact-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,该框架非常先进,并结合了服务器端渲染。我当然可以使用其他技术编写这个项目,但我确实喜欢这提供的客户端和服务器之间的共享代码库。

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

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

当然还有其他原因,JSX 的东西只是第一个。Node.js 还附带了许多其他与 javascript 生态系统相关的工具。那些也可以用于,例如,java 系统,但它总是有点 hacky。在实践中你会遇到对于不同的库和附加资源,使用说明往往主要针对 Node 生态系统给出,其他的则由用户决定。

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

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