Articles of reactjs

同时testing两个不同的npm软件包版本

当我创build一个npm包时,有时候会面临需要向后依赖旧的依赖包版本。 如果新版本有新的API,我可以用这种模式编写代码: import pkg from 'some-pkg'; const isNewVersion = pkg.newVersionApi !== 'undefined'; if (isNewversion) { pkg.newVersionApi(); } else { pkg.oldVersionApi(); // backward compatible api } 而有了这种模式,当我想写testing时,我只能testinginstalled version代码。 其他版本的代码不能被testing。 例如,在React v15和v16中,React v16有了新的API Portal 。 在Portal发布之前,v15有unstable_renderSubtreeIntoContainer api来实现类似的function。 所以React的代码就是这样的: import ReactDOM from 'react-dom'; const isV16 = ReactDOM.createPortal !== 'undefined'; if (isV16) { ReactDOM.createPortal(…); } else { ReactDOM.unstable_renderSubtreeIntoContainer(…); } […]

如何在JSX中使用nodemon?

我可以用一个命令编译和运行我的JSX应用程序: jsx app.jsx | node 但我也希望我的服务器每次修改app.jsx时自动重启。 我可以用nodemon来完成 ,但是我不能完全弄清楚如何让nodemon事先通过JSX编译器来运行我的脚本。 我有一个nodemon.json文件像这样设置: { "execMap": { "js": "node", "jsx": "jsx {{filename}} | node" }, "ext": "js jsx", "ignore": [ ".hg", "node_modules", ".idea" ], "verbose": true } 但是当我运行nodemon它告诉我: 8 Feb 21:58:48 – [nodemon] starting `jsx app.jsx | node` 8 Feb 21:58:48 – [nodemon] child pid: 10976 '\"jsx app.jsx | node\"' […]

ReactJS + Redux:即使有正确的API请求,为什么MongoDB不把数据保存到数据库?

我的ReactJS + Redux项目中有一个MongoDB / Webpack / NodeJS Express。 我正在使用redux中的动作创build者进行API调用,然后到达API服务器并返回成功状态,但是数据永远不会被保存,甚至在terminalmongo -> dbs也不会创build数据库,并且不会显示我把它命名为。 可能是什么问题? 我错过了什么吗? 任何指导或见解将不胜感激。 谢谢 这是我的API设置: import axios from 'axios'; import { browserHistory } from 'react-router'; import cookie from 'react-cookie'; import { AUTH_USER, AUTH_ERROR } from './types'; const API_URL = 'http://localhost:3000/api'; export function errorHandler(dispatch, error, type) { let errorMessage = (error.data.error) ? error.data.error : error.data; […]

中继/ GraphQL架构caching不更新时,我更新架构在服务器端

我有一个使用中继和远程GraphQL服务器的React应用程序。 当我启动webpack服务器时,我把它取出最新的模式,并将其input到babel-relay-plugin中。 它工作得很好,除非我进行模式更改。 看来React或Relay或者webpack或者某些东西在caching模式,因为当我运行这个应用程序的时候,我将在浏览器控制台中得到一个Schemavalidation错误。 但是,当我使用GraphIQL对GraphQL服务器手动运行查询时,查询成功。 所以它将不得不在反应,继电器,webpack方面我想的某种caching? 我试过的东西: 项目清单 重新启动webpack服务器 删除node_modules和npm install 我甚至尝试重新启动我的电脑(这似乎工作,但可能是巧合) 在此先感谢您的帮助。

与coffeescript jsx的Jest?

如何使用Jesttesting用CoffeeScript + React jsx编写的React组件? Jest提供的唯一的CoffeeScript示例使用普通的CoffeeScript,并且不能与CoffeeScript + React JSX一起工作(语法错误达到< )。 我曾经尝试过 第一次尝试:execSync // preprocessor.js var execSync = require('exec-sync'); module.exports = { process: function (src, path) { return execSync('browserify -t coffee-reactify ' + path); } }; 这工作,但需要太多的时间(虚拟testing12秒)。 然后我试着: 第二次尝试:咖啡反应变换 // preprocessor.js var coffee = require('coffee-script'); var transform = require('coffee-react-transform'); module.exports = { process: function(src, path) { if […]

React和Socket.io:能够获取初始数据 – 但是当新post进来时视图不会更新

不知道如果问题是如何我的套接字设置 – 或者如果我不正确地尝试使用React呈现数据。 我可以成功地使用套接字获取数据,但是当新数据发布到服务器时,它不会处于更新状态。 我的意图是React中的状态自动呈现新的数据,这是因为套接字连接而始终处于活动状态。 这是我的客户端应用程序从服务器获取消息并呈现它们: var Chat = React.createClass({ getInitialState: function() { return { messages: null } }, componentWillMount: function(){ var self = this; socket.emit('getMessages'); socket.on('serverMessages', function (data) { self.setState({messages: data}) }); }, render: function() { var messages = this.state.messages ? <MessageList messages={this.state.messages}/> : null return ( <div className="jumbotron"> { messages } <MessageForm submitMessage={this.submitMessage}/> […]

反应js条纹结帐不起作用

我正在尝试在React js应用程序中呈现分条结帐默认表单。 <form action="/your-server-side-code" method="POST"> <script src="https://checkout.stripe.com/checkout.js" className="stripe-button" data-key="pk_test_oDALA0jNyxDzbRz5RstV4qOr" data-amount="999" data-name="test" data-description="Widget" data-image="http://img.nodejscore.com/javascript/marketplace.png" data-locale="auto"> </script> </form> 它没有显示任何东西,也没有得到错误。 我如何获得付款button和表单。

Auth0和React的CORS问题

我目前正在尝试在我的NodeJS + React应用程序中实现Auth0。 给出的这个教程真的很好,很有帮助,虽然我有一个大问题。 每次我尝试login/注册通过Auth0我得到 XMLHttpRequest无法加载https://XYZ.eu.auth0.com/usernamepassword/login 。 对预检请求的响应不会通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。 原因' http:// localhost:3000 '因此不被允许访问。 对预检请求的响应不会通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。 原因' http:// localhost:3000 '因此不被允许访问。 所以我有一个粗略的理解是什么意思。 但我只是不知道在哪里设置所需的选项来允许这个请求Auth0。 在服务器端? 在浏览器的代码? 最好的祝福 编辑:正如RodrigoLópezDato指出的,我可以在我的应用程序中编写起源: https : //manage.auth0.com/#/applications 当我在本地开发时,我应该放什么? 我的IP?

无法读取未定义的属性'__reactAutoBindMap'

在上个星期,我已经完全不知道如何使用React设置服务器端渲染。 这是一个新的项目,但它是一个快速的服务器,我试图渲染一个超级简单的Hello World应用程序使用react-router-component。 我认为我得到一些帮助的最好方法是分享我现在的代码,我希望有人能告诉我我做错了什么! 我在教程后跟随教程,并尝试各种不同的东西,但我不断收到错误后的错误! 这是我的app.js快递服务器,相关的代码是*路线,如果你向下滚动一下: require('node-jsx').install({extension: '.jsx'}); var React = require('react'); var App = require('./src/App.jsx'); var request = require('superagent'); var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var url = require('url'); //Database and Passport requires var mongoose = […]

尝试在webpack上使用mongoose时,会得到大量的神秘错误和警告

我正在使用webpack将es6同构反应应用程序分别编译到客户端和服务器包中。 我已经安装mongoose,并试图在我的应用程序的服务器部分使用它,但是当我尝试构build时,在控制台中出现了一些可怕的错误: 警告在./~/mongoose/lib/drivers/index.js关键依赖关系:8:11-74依赖关系的请求是expression式@ ./~/mongoose/lib/drivers/index.js 8:11-74 警告在./~/mongoose/lib/drivers/SPEC.md模块分析失败:/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/mongoose/lib/drivers/SPEC.md第2行:意外的标记非法您可能需要一个合适的加载器来处理这个文件types。 | | #驱动程序规格| | TODO @ ./~/mongoose/lib/drivers ^。/。* $ 警告在./~/express/lib/view.js关键依赖:78:29-56依赖的请求是一个expression式@ ./~/express/lib/view.js 78:29-56 警告./~/es6-promise/dist/es6-promise.js模块未find:错误:无法parsing/ Users / richie / Code / CreativeFlumeProjects / cf-website / node_modules / es6-promise / dist中的模块“vertx”在/ Users / richie / Code / CreativeFlumeProjects / cf-website / src / Users / richie / Code / CreativeFlumeProjects中find/ Users / […]