我是新的反应.我想开始一个我自己的小世界示例.
大多数教程都提供如下内容:
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
Snapterest I am about to learn the essentials of React.js.
问题是,那个例子需要的NodeJS(用于requeir()的一部分)和NPM安装和NPM开始..这一切.
我可以像这样在没有nodeJS的情况下做到这一点
app.js
var reactElement = React.createElement('h1', { className: 'header' }, 'This is React'); ReactDOM.render(reactElement, document.getElementById('react-application'));
的index.html
Snapterest dsf
在这个例子中,我使用cdn来导入nodejs应该在npm安装阶段导入的react的依赖项.问题是 - 哪个更好?我可以使用cdn而不是entriely使用nodejs吗?让nodejs和npm模块(或bower ..)有反应的东西更正确吗?
谢谢
标题中提出的问题的答案是否定的,您不需要node.js在客户端使用React.
实际上,你给出的第二个例子就是这样做 - 在客户端使用React而不提及node.js.
也就是说,有几种不同的方法可以使用node.js,这些方法在构建基于React的应用程序时非常有用.
使用基于node.js的构建工具像browserify或的WebPack捆绑您的客户端代码在一个干净,整洁的软件包,你接发球给客户端.
例如,在我正在处理的项目中,我使用browserify来构建一个保存在public/js/bundle.js
其中的单个Javascript文件,该文件通过我的普通旧标记包含在内,
index.html
并且全部由Apache提供.这个包包含我的应用程序代码(包括一些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 ,它非常先进,包含服务器端渲染.我当然可以使用其他技术编写这个项目,但我确实喜欢它提供的客户端和服务器之间的共享代码库.