Tag: reactjs

如果不将客户端的服务器uri传递给io（），则无法使用SocketIO: 我对React非常陌生。我使用Universal rendering来构build一个简单的React web应用程序。我也使用socket.io实时更新一些信息。在socket.io文档中，它指出您可以通过执行以下操作build立与服务器的连接： const socket = io() 在客户端。但是，这不适合我。我从socket.io-client得到这个错误： if (null == uri) uri = loc.protocol + '//' + loc.host; ^ TypeError: Cannot read property 'protocol' of undefined 相反，我必须把uri传给io（）像这样： const socket = io('http://localhost:5050') 然后一切按预期工作…我的问题是如何build立socket.io通过简单地做第一个例子const socket = io() （没有IP地址/端口的服务器）这是我的server.js： require('babel-register') const express = require('express') const React = require('react') const ReactDOMServer = require('react-dom/server') […]

用于后端的JS Express和用于前端的React JS: 我已经在Node JS Express中准备好了我的服务器代码，并且以JSON的forms得到了我的响应。我已经按照以下教程在Node.js中设置项目结构： https : //www.youtube.com/watch?v=65a5QQ3ZR2g&list=PL55RiY5tL51oGJorjEgl6NVeDbx_fO5jR 现在，我想在React中制作同一个应用程序的前端。所以，这里我的意思是我的服务器在Node JS Express中，前端应该在React中。考虑到React中的初学者，请向我推荐一些教程或例子，在这些教程或例子中，我可以至less开始制作我的UI，并将其融入到使用Node JS Express创build的项目结构中。我试着自己find它，但在每个应用程序中，React JS自己创build它的服务器，但是我的服务器已经启动，并以Node JS express运行。请指导。请点击这个链接来查看我的Node JS项目结构

GraphQL：react-apollo客户端覆盖数组元素: 我有一个返回一个项目数组的GraphQL查询。我可以在GraphiQL中运行查询并获得我期望的结果。我有一个反应的应用程序，使用react-apollo和@graphql装饰器来解决相同的查询组件道具。当通过react-apollo运行查询时，返回数组中的每个项目都是相同的 – 每个项目都被最后一个项目“覆盖”。我可以在开发工具networking选项卡中看到正确的数组项目是通过networking发送的，所以这个问题似乎与react-apollo有关。什么可能导致反应apollo覆盖数组元素？

Nodemon和/或使用Node-React Web App进行热重新加载: 在使用webpackconfigurationweb应用程序以创build最佳开发体验方面，我还是很新的。我已经采取了两个不同的节点反应课程; 一个是我们使用nodemon来跟踪更改，另一个是我们实现热重载的地方。当涉及到这两个依赖关系时，它是一个还是那个？它们应该一起使用还是多余？另外，如果我在客户端使用带有React的快速服务器，我是否使用react-hot-loader，webpack-hot-middleware或两者兼而有之？我对使用热重装的方法感到困惑，因为看起来有很多方法可以做到这一点。另外，当我使用nodemon作为包装（nodemon –exec babel-node server.js）时，我的热模块重新加载不起作用，但我仍然发现自己想要一种轻松重新启动服务器的方法。多谢你们。

NPM / Webpack不能正确加载GSAP TimelineLite: 我正在重构和运行生产应用程序清理，并优化依赖关系。我们有一个React组件，它使用GSAP来处理一些与转换相关的东西，但只有TimelineLite库。这些都是简单的东西，没有任何困难或任何事情，所以我们不需要任何更复杂的GSAP项目，现在可以将它们擦除以优化。最初，我们只是通过NPM导入了整个GSAP库，如下所示： import 'gsap'; 根据GSAP npm文档（ https://www.npmjs.com/package/gsap ） … 默认（主）文件是TweenMax，其中还包括TweenLite，TimelineLite，TimelineMax，CSSPlugin，RoundPropsPlugin，BezierPlugin，AttrPlugin，DirectionalRotationPlugin和所有的轻松现在，我想减less我们的import脂肪，并切换到： import { TimelineLite } from 'gsap'; 但是，这是编译正确，但抛出以下客户端错误： Uncaught TypeError: _gsap.TimelineLite is not a constructor 有人知道为什么吗？仅通过importTimelineLite节省的体重并不是很大，但是值得一做。我是否需要专门导入GSAP库的其他部分？笔记：我也尝试import { TweenLite, TimelineLite } from 'gsap'; 没有运气。奇怪的是， import { TweenMax, TimelineLite } from 'gsap'; 也不工作，但从import { TweenMax } from 'gsap'; 确实。这里是我们正在使用的animation，超级基本： […]

如何创build“加载更多”function，而不需要在React / Node中重新渲染整个组件？: 我试图创build一个简单的民意调查程序，在那里你可以进行新的民意调查。在“MyPolls”一节中，我希望它只呈现我所做的前5轮投票，而不是呈现整个投票列表。在底部是一个“加载更多”button，在点击后，再加载5个民意调查等等。我一直在使用Mongoose / MongoDB后端，我的方法是使用skip和limit 。我已经设法实现这个function，但问题是整个组件重新呈现，这是一个用户烦恼，因为你必须再次向下滚动点击“加载更多”button。这是我的应用程序： https ： //voting-app-drhectapus.herokuapp.com/ （使用这些login信息是否方便：用户名： riverfish@gmail.com密码： 123 ）然后转到My Polls页面。 MyPoll.js ： import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as actions from '../../actions'; class MyPolls extends Component { constructor(props) { super(props); this.state = { skip: 0 }; } componentDidMount() […]

模块未find：错误：无法parsing模块“模块”: 我想从variablesstring中加载模块 var abc = './../containers/BlankContainer'; require(abc); 但是它找不到模块，所以我从npm安装'require-from-string'模块。现在，当我build立它给错误 ERROR in ./~/require-from-string/index.js Module not found: Error: Cannot resolve module 'module' in D:\Nilay\RnD\node_modules\require-from-string @ ./~/require-from-string/index.js 3:13-30 我发现这是webpack的问题，这里是我的webpackconfiguration： const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin') var entry = [path.resolve(__dirname, 'app/bootstrap.js')]; var output = { path: path.resolve(__dirname, 'public/dist'), filename: 'bundle-[name].js', publicPath: "dist/" }; var […]

如何使用React，Node和Webpack呈现帕格/翡翠模板？: 我有一个React / Node / Express应用程序，我正在使用Webpack来构build它。目前，该目录的结构是这样的： node_modules public app main.js main.map.js index.html src client components Home.js Header.js Root.js User.js main.js server views index.html index.js package.json webpack.config.js 这是我的webpack.config.js var path = require("path"); var DIST_DIR = path.resolve(__dirname, "public"); var SRC_DIR = path.resolve(__dirname, "src"); var config = { entry: SRC_DIR + "/client/main.js", output: { path: DIST_DIR + "/app", […]

我如何在ReactJS中使用嵌套表单？: 考虑这个代码snnipet： <%= form_for @survey do |f| %> <%= f.error_messages %> <%= f.label :name %> <%= f.text_field :name %> <%= f.fields_for :questions do |builder| %> <%= render "question_fields", :f => builder %> <% end %> <%= f.submit "Submit" %> <% end %> 它会返回我有一些哈希（轨道开发将知道这一点）。我的问题是我如何使这种格式在ReactJS？接收完全相同的参数，默认由Rails完成。至于现在我只能在JSX中使用HTML标记。目前我收到控制器的参数，并根据需要进行sorting（这看起来很糟糕）。我已经testing了一些npm包，但他们的文档似乎没有帮助！其中包括： https : //www.npmjs.com/package/react-rails-form-helpers https://www.npmjs.com/package/react-form […]

隐藏获取请求键: 我正在使用新的OMDB api，并希望在客户端保持提取请求（包括密钥）不可见。下面是用户打开开发工具时的问题示例：。我在React中完成所有的调用，如下所示： import OmdbKey from './OmdbKey'; populate(keystrokes) { let query = "http://www.omdbapi.com/?s="; fetch(query + keystrokes + '&apikey=' + OmdbKey ) .then((response) => { response.json().then((json) => { this.setState({ results: json.Search }); }); }); } 有没有办法做到这一点，所以我可以隐藏在GET请求中的密钥？如果不是，我该怎么办？谢谢