Articles of reactjs

与一个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 […]

React 15与React-redux不兼容

我正在尝试升级到我的项目上刚刚发布的react@15.0.0-rc.1,该项目也使用react-redux@^4.4.0软件包。 但是,当我尝试运行文档( https://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html )中build议的升级时, npm install –save react@15.0.0-rc.1 react-dom@15.0.0-rc.1 它出现了一个错误,因为版本不兼容: npm ERR! peerinvalid Peer react-addons-test-utils@0.14.7 wants react@^0.14.7 npm ERR! peerinvalid Peer react-redux@4.4.0 wants react@^0.14.0 有什么build议吗?