Articles of reactjs

Webpack错误:无法find模块“。”

我正在使用musixmatch-sdk中的api,并通过使用webpack构build项目时webpack 。 我正在使用webpack 2 , react , node 。 musixmatch网站上的默认import是: var MusixmatchApi = require('../../build/javascript-client/src/index'); 但是,这并没有工作,并得到这个错误: ERROR in ./build/javascript-client/src/index.js<br/> Module not found: Error: Can't resolve 'ApiClient' in '/Users/myname/lyrix/build/javascript-client/src'<br/> @ ./build/javascript-client/src/index.js 28:4-2099<br/> @ ./src/server.js 所以我写了一个绝对path如下: const MusixmatchApi = require(path.join(__dirname,'../build/javascript-client/src/index')); 这工作在webpack开发模式,但我得到这个警告: WARNING in ./src/server.js 33:20-102 Critical dependency: the request of a dependency is an expression @ ./src/server.js 所以,如果我想build立生产项目,我得到的错误: […]

使用Electron和ReactJS执行R脚本

我正在使用ReactJS和MaterialUI创buildElectron桌面应用程序如何在用户单击button后执行R脚本? 我目前有这个反应代码: handleClickOpen(event) { //what goes here? } <Button fab mini color="primary" aria-label="add" className={this.props.button} onClick={this.handleClickOpen}> <AddIcon /> </Button>

无法在npm中find模块

试图运行这里提到的Facebook通量应用程序。 我有js应用程序的以下树结构 │ .bundle.js │ app.jsx │ bundle.js │ ├───actions │ TodoActions.jsx │ ├───components │ Footer.jsx │ Header.jsx │ MainSection.jsx │ TodoApp.jsx │ TodoItem.jsx │ TodoTextInput.jsx │ ├───constants │ TodoConstants.jsx │ ├───dispatcher │ AppDispatcher.jsx │ Dispatcher.jsx │ └───store TodoStore.jsx 在app.jsx代码就像 var React = require('react'); var TodoApp = require('./components/TodoApp'); React.render( <TodoApp />, document.getElementById('todoapp') ); 而在TodoApp.jsx我输出模块为 module.exports […]

有了Facebook的EventEmitter,有没有办法让迟到的听众收到已经发出的事件?

如果我有一个对象提取数据,它发出一个“就绪”的事件,但另一个对象开始监听该事件已经被触发后,有一个直接的方法,让这个监听器接收错过的事件。 纯粹假设的例子(所以请不要问为什么我会这样做): function DataModule(){ this.data = null; request.get( 'http://example.com/api/get/data', function( error, response, body ) { if ( ! err ) { this.data = body; this.emit( 'ready' ); } }.bind( this ) ); } … var dataModule = new DataModule(); // data fetching happens here. setTimeout( function(){ dataModule.once( 'ready', function(){ // Perform some action when the […]

spring和反应整合

集成reactJS和spring有一个问题。 我非常了解Java,但我是前端技术的初学者。 我有一个弹簧控制器,它只是返回index.html视图,其中有一个脚本标记与main.js文件。 在开始时,它很简单,而且工作,但是我决定使用react-router组件,它需要这样做: var Router = require('react-router'); 在浏览器中,我得到了以下错误:ReferenceError:require没有被定义 我已经做了一些谷歌reasarch,我发现我需要一些库,如吞咽,browserify等(我不熟悉这些现在)。 我也发现了很多例子,但这些例子只是js例子,我需要运行gulp文件等 我非常感激,如果有人给我一个提示,我应该学会如何整合它。

React服务器端渲染,如何导入一个React组件?

我正在把ES6转换成ES5。 用于NodeJS Express服务器文件的BabelJS和服务器端渲染输出到目录build / server /。 Browserify + babelify将ReactComponents输出到build / client / bundle.js文件 当试图将一个React Component从build / client / bundle.js导入到构build/服务器/文件时,应用程序崩溃,因为我正在导入一个未转换的ReactComponent。 如何导入ReactComponent而不复制服务器中的代码(重新使用client / bundle.js中的代码)?

将React组件与另一个组件包装在同一个文件中

我有一个Button和Hovered组件。 hover组件包含状态和鼠标hover事件,并将传递给其子项的道具。 该button是一个正常的button。 我想能够访问作为button上的道具的hover价值,但我不想要包装到处都使用Hidden的button。 有没有办法把Button组件包装在同一个Button.jsx文件中,这样我就可以将Hovered依赖放置在一个地方,但是仍然会传递道具?

NodeJS HTML呈现策略

我们要build立一个生产就绪的社交网站(Facebook或Instagram风格)。 我们计划在服务器端使用Node,并且正在寻找在服务器端渲染视图组件的最佳技术。 search引擎优化友好是必须的,所以angular度似乎不是一个合适的(除非任何人可以提倡Prerender.io作为一个坚实的select)。 我们也希望支持AJAX,以便大部分渲染将在服务器上完成,但更新将在客户端完成。 看了React,看起来这是一个不错的select,但是有一件事我很担心 – 事实上,你需要加载路由级的所有数据,而不是组件级(因为renderToString是同步的 – 请参阅这里的讨论 我真的不明白,如果我们传递React,那么服务器端渲染将是一个强大的替代scheme。 如果我正确地理解了,基本的方法(允许子组件内的asynchronous加载)就像这样: // The main page route app.get('/',function(){ var html = renderBase(); renderHeader(html) .then( renderFeed(html) ).then( renderFooter(html) ); }) renderBase = function(){ return = "<html><body>…" } renderHeader = function(){ someIoFunction(function(){ // build HTML based on data }) } 貌似使用像Jade这样的模板引擎可能会减轻我们的一些负担,但是我似乎无法在这个“React vs. Templating引擎”上find所谓的问题,所以可能我没有正确的看到它。 谢谢。

如何在React Native中使用节点模块

我是React Native的新手,想使用我正在玩的React Native应用程序中的节点模块。 我想添加的节点模块是这样的: https : //www.npmjs.com/package/swisseph 所以我进入了项目文件夹,并运行npm install swisseph 在应用程序源代码中,我添加了这个: var swisseph = require ('swisseph'); 我跑了项目,我得到这个错误: Invariant Violation: Application AwesomeProject has not been registered. This is either due to a require() error during initialisation or failure to call AppRegistry.registerComponent. React Native中如何使用节点模块? index.io.js文件具有以下代码: /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var […]

React节点API请求devise模式

我需要使用API​​密钥向外部API发出API请求。 我知道如何通过编写一个onSubmit函数在React中创build这个API请求。 但是由于我有一个我想保密的API密钥,我将编写一个简单的Node应用程序来存放envvariables。 除了在节点中搞乱,这是我的第一次使用Node的生产经验,我想知道如果我的思维过程是正确的,如果不是的话,更好的方法来做到这一点。 这个问题大部分都是伪代码,因为我还没有开始使用Node部分。 这个想法是,从React组件内部它将调用Node应用程序,而后者将调用外部API。 React -> Node -> External API 所以React组件就是这样的: handleSubmit: function() { var data = this.refs.testData.getDomNode().value; $.ajax({ url: '/my-node-endpoint', dataType: 'json', type: 'POST', data: { test: data }, success: function(data) { // Whatever success call I want to make }.bind(this) }) } 然后在我的Node应用程序,它会喜欢这样的事情: app.post('/my-node-endpoint', function(req, res) { // Store the values […]