Tag: reactjs

React / Redux同构/服务器端渲染和媒体查询

我开始创build一个基于Node的同构React / Redux应用程序。 该项目的一个要求是基于“移动”和“桌面”视图的“adapative”渲染特定组件。 我已经实现了Redux动作和Reducer来存储有关用户视图的屏幕信息（基于媒体查询 – “小”，“中”，“大”）的状态。 在调整状态/商店得到更新。 默认状态是“小”。 const defaultState = { isMobile: true, isTablet: false, isDesktop: false, sizes: { small: true, medium: false, large: false, huge: false, }, }; 在需要根据屏幕尺寸在两个不同版本中呈现“自适应”的组件中，我简单地做一个： 如果（小）返回变化1 如果（中）返回变化2 所有的工作。 现在我面临两个问题： 我的应用程序是同构的，这意味着标记也呈现服务器端。 服务器不知道用户的浏览器和媒体查询。 所以，因为我的默认状态是“小”，服务器将始终呈现“variation1”。 节点服务器是该站点的入口点。 它看起来像渲染需要“延迟”（中间件？），服务器需要从React应用程序获取“传递”之前从客户端获取一些有关浏览器宽度的信息。 任何想法如何解决这个问题？ 因为渲染是基于状态的，所以即使在浏览器大小是“桌面”的情况下，在加载“变化1”之后几秒钟总是可以看到（闪烁）。 这是因为在使用当前屏幕宽度更新状态之前，JS检测需要几毫秒的时间。 我认为这与上面的问题和默认状态一起玩。 我找不到任何解决scheme1，但我想必须有一些同构和响应/自适应。

与一个Web小部件 – meteor，反应，节点通信

我正在构build一个聊天仪表板和小部件，客户应该能够将小部件放入其页面。 一些类似的例子是Intercom或者Drift 。 目前，“主”应用程序是用Meteor.js编写的（前端是React）。 我写了一个<Widget />组件，并将其引入到/widget目录中。 在这个目录里面，我也有一个index.jsx文件， index.jsx包含以下内容： import React from 'react'; import …… ReactDOM.render( <Widget/>, document.getElementById('widget-target') ); 然后我在index.jsx设置一个入口点的webpackconfiguration，当运行bundle.js在公共目录下将bundle.js吐出来。 这可以包含在另一个页面，只需包含一个script和div ： <script src="http://localhost:3000/bundle.js" type="text/javascript"></script> <div id="widget-target"></div> 几个问题： 这个实现有什么问题？ 他们的安全问题是否需要注意？ 前面链接的例子似乎都以某种forms使用iframe。 什么是与我的主要meteor应用程序沟通的最佳方式？ 一个REST API？ 用Socket.io发送事件？ 小部件是一个聊天小部件，所以我需要来回发送消息。 我怎样才能为用户和小部件实现某种唯一的标识符/用户身份validation？ 目前，该小部件是预编译的。

如何部署分离的前端和后端？

我正在开发一个新的项目与反应/快递作为前端和回环作为后端api。 我在不同的端口在我的开发环境中将它们分开。 我应该如何在生产中部署它们？ 1）在同一台服务器上托pipe – 用不同的子域分隔后端？ 2）托pipe在2个不同的服务器上 – 似乎不可能使用相同的域名

使用Jesttesting失败，错误：观察文件更改时出错：EMFILE

我试图编写一个React.js应用程序的testing。 一切都很顺利，但使目录跟踪Git（做了一个Git回购）。 testing失败，下面的错误 2017-01-15 05:05 node[1278] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22) 2017-01-15 05:05 node[1278] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22) events.js:160 throw er; // Unhandled 'error' event ^ Error: Error watching file for changes: EMFILE at exports._errnoException (util.js:1022:11) at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11) 我相信这是因为.git目录，因为当我删除.git目录时，它正在运行没有错误。 似乎在观看文件时发生exception。 我的开发环境是MacOS 10.12.2和Node 6.9.4。 我该如何解决这个问题？

webpack-dev-server无法find模块'webpack'

我试图使用webpack-dev-server来运行一个简单的程序，但我得到这个错误： module.js:471 throw err; ^ Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) 我用下面的npm命令安装了webpack npm install –save-dev webpack 我有以下configuration： (webpack.config.js) var webpack = require('webpack'); var path = require('path'); var […]

asynchronous/等待不等待

我遇到了一个我不完全明白的问题。 我觉得有可能是我没有掌握的概念，可以优化的代码，可能还有一个错误的方法。 要大大简化整体stream程： 向外部API发出请求 对返回的JSON对象进行分析并扫描链接引用 如果find任何链接引用，则会使用真正的JSON数据填充/replace链接引用 一旦所有链接引用被replace，原始请求将被返回并用于构build内容 这里是原始请求（＃1）： await Store.get(Constants.Contentful.ENTRY, Contentful[page.file]) Store.get代表： async get(type, id) { return await this._get(type, id); } 哪些电话： _get(type, id) { return new Promise(async (resolve, reject) => { var data = _json[id] = _json[id] || await this._api(type, id); console.log(data) if(isAsset(data)) { resolve(data); } else if(isEntry(data)) { await this._scan(data); resolve(data); } else […]

哪种方法更快，表示为：服务器端渲染与客户端渲染

我想知道的是，你如何构build你的Web应用程序？ 我真的很困惑，应该为我的项目使用哪种方法。 已经决定select哪些技术。 1）Node.js并表示为其框架 2）MongoDB 3）反应+通量 但是现在的问题，我应该使用方法（A）还是方法（B） 方法（A） – 用于HTML的Serverside呈现 app.get('/users/', function(request, respond) { var user = "Jack"; respond.render("user", { user: user }); }); 方法（B） – HTML的客户端呈现 app.get('/users/', function(request, respond){ var user = "Jack"; respond.json({ user: user }); }); 方法A将从服务器和数据呈现HTML。 方法B只是响应客户端需要的数据React.js，以便它可以操纵数据。 我关心的是，我应该使用哪种方法？ 大多数初创公司使用哪种方法？ 谢谢。

服务器端反应：Babel不会在服务器上dynamic地转换JSX。 为什么？

我使用Node.js的LoopbackJS框架（与Express相同，因为它基于Express）。 而且我无法设置React服务器端渲染。 我遵循这篇文章 ，并在这里回答了Stackoverflow和其他文章，不起作用。 巴贝尔文件是悲惨的，没有例子，“尝试猜测”的风格。 以下是他们提供的关于如何在即时渲染React的唯一信息： $ npm install -g babel-core require("babel-core/register"); 所有具有扩展名.es6，.es，.jsx和.js的节点所需的后续文件将由Babel转换。 polyfill中指定的polyfill也是自动需要的。 但它不起作用。 顺便说一下，其他文章build议使用require("babel/register") 。 有什么不同？ 我尝试了两个。 结果是一样的 – SyntaxError: Unexpected token 。 这是我的代码： 这是client/js/components.js ： var React = require('react'); var ReactDOM = require('react'); var Form = React.createClass({ render: function() { return ( <form action="" method="post" id="login-form"> <div><input type="text" id="login" placeholder="Login" /></div> <div><input […]

Eslint – 超出最大调用堆栈大小

在React / Webpack项目中工作时，我开始对eslint库有问题。 eslint软件包使用npm下载，并用于使用webpack预加载器来validation项目。 preLoaders: [{ test: /\.jsx?$/, loaders: [ 'eslint' ], include: path.resolve(__dirname, 'app') }] 它曾经工作得很好，直到最近，当我试图克隆相同的项目到其他文件夹。 在安装依赖项“npm install”并启动项目“npm start”之后，出现以下错误。 ERROR in ./main.view.jsx Module build failed: RangeError: Maximum call stack size exceeded at keys (native) at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:78:24) at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14) at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:93:26) at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14) at Referencer.Visitor.visitChildren (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:93:26) at Referencer.Visitor.visit (project/node_modules/eslint/node_modules/escope/node_modules/esrecurse/esrecurse.js:112:14) at Referencer.Visitor.visitChildren […]

呈现在服务器上反应

我一直在试图弄清楚如何在服务器上呈现反应（node / express），最后find一个足够简单的教程来理解正在发生的事情。 但是现在，在设置好所有东西之后，我在React.render方法中收到错误： 这是我的组件文件： var React = require('react'); var box = React.createClass({ render: function() { return ( <div style='padding: 10px'> this.props.text </div> ); } }); React.render(<box text='testing server side'/>, document.body); module.exports = box; 当我运行npm start时出现错误： 文件没有定义 我如何解决这个问题？ 我需要还是不需要渲染方法？ 为了给出更多的上下文，这个box组件正在被另一个组件需要： var React = require('react'); var Box = require('../react-jsx/box.js'); //this is the box component var Component […]